diff --git a/README.md b/README.md
index 4779fe64..280b8884 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ There are 4 ways to get started with pico.css:
[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `` of your website.
```html
-
+
```
### Usage from CDN
@@ -63,7 +63,7 @@ There are 4 ways to get started with pico.css:
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
```html
-
+
```
### Install with NPM
@@ -98,7 +98,7 @@ composer require picocss/pico
-
+
Hello world!
@@ -131,7 +131,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
+>
```
Then just write pure HTML, and it should look great:
@@ -140,13 +140,13 @@ Then just write pure HTML, and it should look great:
-
-
-
+
+
+
+ >
Hello, world!
diff --git a/package.json b/package.json
index 015111c5..e8825d02 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
"lint": "run-s \"lint:*\" --silent",
"lint:prettier": "prettier --write --log-level silent 'scss/**/*.scss'",
"lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
- "build:css": "sass --no-source-map --style expanded --no-error-css scss/:css/",
+ "build:css": "sass --no-source-map --style expanded --no-error-css scss/:css/ --silence-deprecation=global-builtin,color-functions,mixed-decls",
"build:themes": "node scripts/build-themes",
"build:autoprefix": "postcss --config css --replace css/*.css !css/*.min.css",
"build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min css/*.css !css/*.min.css",
@@ -49,17 +49,17 @@
"done": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'"
},
"devDependencies": {
- "autoprefixer": "^10.4.18",
- "caniuse-lite": "1.0.30001591",
+ "autoprefixer": "^10.4.20",
+ "caniuse-lite": "1.0.30001702",
"clean-css-cli": "^5.6.3",
- "css-declaration-sorter": "^7.1.1",
- "nodemon": "^3.1.0",
+ "css-declaration-sorter": "^7.2.0",
+ "nodemon": "^3.1.9",
"npm-run-all": "^4.1.5",
- "postcss": "^8.4.35",
+ "postcss": "^8.5.3",
"postcss-cli": "^11.0.0",
"postcss-scss": "^4.0.9",
- "prettier": "^3.2.5",
- "sass": "^1.71.1"
+ "prettier": "^3.5.3",
+ "sass": "^1.85.1"
},
"engines": {
"node": ">=18.19.0"
diff --git a/scripts/build-themes.js b/scripts/build-themes.js
index 312f7772..251e0714 100644
--- a/scripts/build-themes.js
+++ b/scripts/build-themes.js
@@ -103,7 +103,7 @@ themeColors.forEach((themeColor, colorIndex) => {
},
];
- const displayAsciiProgress = ({length, index, color}) => {
+ const displayAsciiProgress = ({ length, index, color }) => {
const progress = Math.round((index / length) * 100);
const bar = "■".repeat(progress / 10);
const empty = "□".repeat(10 - progress / 10);
@@ -127,7 +127,10 @@ themeColors.forEach((themeColor, colorIndex) => {
// Compile the file
const result = sass.compile(
path.join(tempScssFoldername, `${version.name}.${themeColor}.scss`),
- { outputStyle: "compressed" },
+ {
+ outputStyle: "compressed",
+ silenceDeprecations: ["global-builtin", "color-functions", "mixed-decls"],
+ },
);
// Write the file
diff --git a/scss/_index.scss b/scss/_index.scss
index 33d57bea..1058cddc 100644
--- a/scss/_index.scss
+++ b/scss/_index.scss
@@ -22,7 +22,7 @@
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
@use "content/code"; // pre, code, ...
@use "content/figure"; // figure, figcaption
-@use "content/miscs"; // hr, template, [hidden], dialog, canvas
+@use "content/misc"; // hr, template, [hidden], dialog, canvas
// Forms
@use "forms/basics"; // input, select, textarea, label, fieldset, legend
diff --git a/scss/_settings.scss b/scss/_settings.scss
index d1fa911c..d1c3e462 100644
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@@ -49,8 +49,7 @@ $breakpoints: map.deep-merge(
(
// Small (landscape phones)
// Font size: 17px
- sm:
- (
+ sm: (
breakpoint: 576px,
viewport: 510px,
root-font-size: 106.25%,
@@ -58,8 +57,7 @@ $breakpoints: map.deep-merge(
// Medium (tablets)
// Font size: 18px
- md:
- (
+ md: (
breakpoint: 768px,
viewport: 700px,
root-font-size: 112.5%,
@@ -67,8 +65,7 @@ $breakpoints: map.deep-merge(
// Large
// Font size: 19px
- lg:
- (
+ lg: (
breakpoint: 1024px,
viewport: 950px,
root-font-size: 118.75%,
@@ -76,8 +73,7 @@ $breakpoints: map.deep-merge(
// Extra large
// Font size: 20px
- xl:
- (
+ xl: (
breakpoint: 1280px,
viewport: 1200px,
root-font-size: 125%,
@@ -85,8 +81,7 @@ $breakpoints: map.deep-merge(
// Extra extra large
// Font size: 21px
- xxl:
- (
+ xxl: (
breakpoint: 1536px,
viewport: 1450px,
root-font-size: 131.25%,
@@ -118,7 +113,7 @@ $modules: map.merge(
"content/table": true,
"content/code": true,
"content/figure": true,
- "content/miscs": true,
+ "content/misc": true,
// Forms
"forms/basics": true,
diff --git a/scss/colors/utilities/_css-vars.scss b/scss/colors/utilities/_css-vars.scss
index 902e5044..2fdcb134 100644
--- a/scss/colors/utilities/_css-vars.scss
+++ b/scss/colors/utilities/_css-vars.scss
@@ -9,7 +9,8 @@
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $enable-css-vars {
- :root {
+ :root,
+ :host {
// Loop through color families
@each $family, $colors in colors.$colors {
@if index(map.get(settings.$palette, "color-families"), $family) {
diff --git a/scss/colors/utilities/_settings.scss b/scss/colors/utilities/_settings.scss
index 5b00cd07..2a52cd86 100644
--- a/scss/colors/utilities/_settings.scss
+++ b/scss/colors/utilities/_settings.scss
@@ -10,8 +10,7 @@ $palette: () !default;
$palette: map.merge(
(
// Color families
- "color-families":
- (
+ "color-families": (
red,
pink,
fuchsia,
@@ -34,8 +33,7 @@ $palette: map.merge(
slate
),
// Shades
- "shades":
- (
+ "shades": (
50,
100,
150,
diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss
index 95eb0d06..963ba673 100644
--- a/scss/components/_dropdown.scss
+++ b/scss/components/_dropdown.scss
@@ -14,7 +14,7 @@
// Marker
// ––––––––––––––––––––
- summary,
+ > summary,
> button,
> a {
&::after {
@@ -43,10 +43,10 @@
margin-bottom: 0;
}
- // Bouton as a select
+ // Button as a select
// inside container type accordion
// ––––––––––––––––––––
- #{$parent-selector} details.dropdown summary:not([role]) {
+ #{$parent-selector} details.dropdown > summary:not([role]) {
height: calc(
1rem *
var(#{$css-var-prefix}line-height) +
@@ -126,7 +126,7 @@
display: inline;
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
- summary {
+ > summary {
&::after {
transform: rotate(0deg) translateX(0rem);
}
@@ -156,7 +156,7 @@
// Submenu
// ––––––––––––––––––––
- #{$parent-selector} details.dropdown summary + ul {
+ #{$parent-selector} details.dropdown > summary + ul {
display: flex;
z-index: 99;
position: absolute;
@@ -236,14 +236,14 @@
// Button opened
// inside container type accordion
// ––––––––––––––––––––
- #{$parent-selector} details.dropdown[open] summary {
+ #{$parent-selector} details.dropdown[open] > summary {
margin-bottom: 0;
}
// Menu opened
// ––––––––––––––––––––
// 1. Inside container type accordion
- #{$parent-selector} details.dropdown[open] summary {
+ #{$parent-selector} details.dropdown[open] > summary {
+ ul {
transform: scaleY(1);
opacity: 1;
@@ -259,7 +259,7 @@
// Close for dropdown
// inside container type accordion
// ––––––––––––––––––––
- #{$parent-selector} details.dropdown[open] summary {
+ #{$parent-selector} details.dropdown[open] > summary {
&::before {
display: block;
z-index: 1;
diff --git a/scss/components/_loading.scss b/scss/components/_loading.scss
index 37c79e2c..ab29d695 100644
--- a/scss/components/_loading.scss
+++ b/scss/components/_loading.scss
@@ -7,7 +7,7 @@
*/
// Everything except form elements
- #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
+ #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
white-space: nowrap;
&::before {
diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
index 9ed05b6b..d17943b2 100644
--- a/scss/components/_modal.scss
+++ b/scss/components/_modal.scss
@@ -6,7 +6,8 @@
* Modal (