@anyblades/pico 2.2.0-alpha.5 β†’ 2.2.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +103 -152
  2. package/css/pico.blades.css +7 -4
  3. package/css/pico.blades.min.css +7 -4
  4. package/css/pico.css +4 -2
  5. package/css/pico.min.css +4 -2
  6. package/index.html +1 -4
  7. package/package.json +3 -2
  8. package/src/pico.blades.css +3 -2
  9. package/src/pico.css +4 -2
package/README.md CHANGED
@@ -1,40 +1,15 @@
1
- <!--section:intro-->
1
+ <!--section:docs-->
2
2
 
3
3
  > [!NOTE]
4
4
  > This is a community-driven successor to the [Pico CSS framework](https://github.com/picocss/pico) with a few simple goals:
5
5
  >
6
6
  > 1. **Maintain** `pico` minimally until its creator returns.
7
7
  > 2. **Focus** exclusively on the `pico.css` version, similar to how [simple.css](https://github.com/kevquirk/simple.css) is maintained (for Sass version check [@Yohn's fork](https://github.com/Yohn/PicoCSS) instead).
8
- > 3. **Keep** all non-original additions in [blades.css](https://github.com/anyblades/blades), shipped as `pico.blades.css` β€” a drop-in compatible replacement for `pico.css`.
9
- >
10
- > [Read more](https://github.com/picocss/pico/issues/640#issuecomment-4186674269)
11
-
12
- ---
13
-
14
- ### Fixes in `pico.css`
15
-
16
- List of [@anyblades/pico fixes](https://codepen.io/anydigital/full/YPGOXWV) for [@picocss/pico issues](https://codepen.io/anydigital/full/WbGgbJd):
17
-
18
- - 🐞 [#670: Slow website picocss.com | box-shadow performance issues](https://github.com/picocss/pico/issues/670) & [PR#718](https://github.com/picocss/pico/pull/718)
19
- - πŸ› οΈ [#721: Possible duplicate of text-align property inside the same element selector](https://github.com/picocss/pico/issues/721)
20
- - 🐞 [#701: Nav dropdowns display error with Firefox](https://github.com/picocss/pico/issues/701)
21
- - 🐞 [#727: Fix dropdown summary ul offscreen | in Safari](https://github.com/picocss/pico/pull/727)
22
-
23
- <!--{.unlist}-->
24
-
25
- ### Additions in `pico.blades.css`
26
-
27
- List of net new additions (on top of original `pico.css` and fixes above):
28
-
29
- <!--section:gh-only-->
30
-
31
- https://github.com/anyblades/blades#documentation
32
-
33
- <!--section:docs-->
8
+ > 3. **Keep** all net new features in https://github.com/anyblades/blades, shipped as `pico.blades.css` β€” a drop-in compatible replacement for `pico.css`.
34
9
 
35
- ---
10
+ <!--section:summary-->
36
11
 
37
- <p>
12
+ <h1>
38
13
  <a href="https://blades.ninja/css/pico/" target="_blank">
39
14
  <picture>
40
15
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/anyblades/pico/HEAD/.github/logo-dark.svg">
@@ -42,11 +17,7 @@ https://github.com/anyblades/blades#documentation
42
17
  <img alt="Pico CSS" src="https://raw.githubusercontent.com/anyblades/pico/HEAD/.github/logo-light.svg" width="auto" height="60" style="max-height: 4rem">
43
18
  </picture>
44
19
  </a>
45
- </p>
46
-
47
- [![Github release](https://img.shields.io/github/v/release/anyblades/pico?color=0172ad&logo=github&logoColor=white)](https://github.com/anyblades/pico/releases/latest)
48
- [![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/anyblades/pico/blob/master/LICENSE.md)
49
- [![GitHub Repo stars](https://img.shields.io/github/stars/anyblades/pico?label=Star)](https://github.com/anyblades/pico)
20
+ </h1>
50
21
 
51
22
  ## Minimal CSS Framework for Semantic HTML
52
23
 
@@ -54,11 +25,36 @@ A minimalist and lightweight starter kit that prioritizes semantic syntax, makin
54
25
 
55
26
  Write HTML, Add Pico CSS, and VoilΓ !
56
27
 
57
- ## What’s new in v2?
28
+ ![](https://img.shields.io/github/v/release/anyblades/pico?label=&color=darkslategray&style=for-the-badge&include_prereleases)
29
+ [![](https://img.shields.io/badge/Code-gainsboro?logo=github&logoColor=black&style=for-the-badge)](https://github.com/anyblades/pico)
30
+ [![](https://img.shields.io/github/stars/anyblades/pico?label=Star&labelColor=gainsboro&color=silver&style=for-the-badge)](https://github.com/anyblades/pico)
31
+
32
+ <!--section:gh-only-->
33
+
34
+ ## [Docs & demos β†—](https://blades.ninja/css/pico/)
35
+
36
+ - [Quick start](#quick-start)
37
+ - [Documentation](#documentation)
38
+ - [Limitations](#limitations)
39
+ - [Browser support](#browser-support)
40
+ - [Contributing](#contributing)
41
+ - [Copyright and license](#copyright-and-license)
58
42
 
59
- Pico v2.0 features better accessibility, easier <ins>maintenance with modern CSS</ins> <del>customization with SASS, a complete color palette, a new group component, and 20 precompiled color themes totaling over 100 combinations</del> accessible via CDN.
43
+ <!--section:docs-->
60
44
 
61
- [Read more](https://picocss.com/docs/v2)
45
+ ## What’s new in v2.2? <!--{#fixes}-->
46
+
47
+ Now including all features from [*Bl*ades CSS](https://github.com/anyblades/blades), shipped as `pico.blades.css` β€” a drop-in compatible replacement for `pico.css`.
48
+
49
+ Also, it includes [various fixes](https://codepen.io/anydigital/full/YPGOXWV) for [original @picocss/pico issues](https://codepen.io/anydigital/full/WbGgbJd):
50
+
51
+ - πŸ› οΈ [#731: Allow to selectively unreduce motion like `[aria-busy="true"]` does](https://github.com/picocss/pico/issues/731)
52
+ - 🐞 [#670: Slow website picocss.com | box-shadow performance issues](https://github.com/picocss/pico/issues/670) & [PR#718](https://github.com/picocss/pico/pull/718)
53
+ - πŸ› οΈ [#721: Possible duplicate of text-align property inside the same element selector](https://github.com/picocss/pico/issues/721)
54
+ - 🐞 [#701: Nav dropdowns display error with Firefox](https://github.com/picocss/pico/issues/701)
55
+ - 🐞 [#727: Fix dropdown summary ul offscreen | in Safari](https://github.com/picocss/pico/pull/727)
56
+
57
+ <!--{.unlist}-->
62
58
 
63
59
  ## A Superpowered HTML Reset
64
60
 
@@ -71,80 +67,53 @@ With just the right amount of everything, Pico is great starting point for a cle
71
67
  - Easy Customization
72
68
  - Optimized Performance
73
69
 
74
- ## Table of contents
75
-
76
- - [Quick start](#quick-start)
77
- - <del>[Class-less version](#class-less-version)</del>
78
- - [Limitations](#limitations)
79
- - [Documentation](#documentation)
80
- - [Browser Support](#browser-support)
81
- - [Contributing](#contributing)
82
- - [Copyright and license](#copyright-and-license)
70
+ ---
83
71
 
84
72
  ## Quick start
85
73
 
86
- There are 4 ways to get started with pico.css:
74
+ There are 4 ways to get started with Pico+*Bl*ades CSS:
87
75
 
88
76
  ### Install manually
89
77
 
90
- [Download Pico](https://github.com/anyblades/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
78
+ [Download Pico+*Bl*ades](https://github.com/anyblades/pico/archive/refs/heads/main.zip) and link `css/pico.blades.css` in the `<head>` of your website.
91
79
 
92
80
  ```html
93
- <link rel="stylesheet" href="css/pico.min.css" />
94
-
95
- <!-- or Pico+Blades together:
96
81
  <link rel="stylesheet" href="css/pico.blades.min.css" />
97
- -->
98
82
  ```
99
83
 
100
84
  ### Usage from CDN
101
85
 
102
- Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@anyblades/pico) to link pico.css:
86
+ Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@anyblades/pico) to link `pico.blades.css`:
103
87
 
104
88
  <!--prettier-ignore-->
105
89
  ```html
106
- <link rel="stylesheet" href="
107
- https://cdn.jsdelivr.net/npm/@anyblades/pico@^2.2.0-alpha/css/pico.min.css
108
- "/>
109
-
110
- <!-- or Pico+Blades together:
111
90
  <link rel="stylesheet" href="
112
91
  https://cdn.jsdelivr.net/npm/@anyblades/pico@^2.2.0-alpha/css/pico.blades.min.css
113
92
  "/>
114
- -->
115
93
  ```
116
94
 
117
95
  ### Install with NPM
118
96
 
119
- ```shell
97
+ ```sh
120
98
  npm install @anyblades/pico@alpha
121
99
  ```
122
100
 
123
- Then, import Pico into your <ins>CSS</ins> <del>SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use)</del>:
101
+ Then, import Pico+*Bl*ades into your CSS:
124
102
 
125
103
  ```css
126
104
  @import "@anyblades/pico";
127
-
128
- /* or Pico+Blades together:
129
- @import "@anyblades/pico.blades";
130
- */
131
105
  ```
132
106
 
133
- ### <del>Install with Composer</del>
134
-
135
- ### Starter HTML template
107
+ ### Starter HTML template <!-- from index.html -->
136
108
 
137
- ```HTML
109
+ ```html
138
110
  <!doctype html>
139
111
  <html lang="en">
140
112
  <head>
141
- <meta charset="utf-8">
142
- <meta name="viewport" content="width=device-width, initial-scale=1">
143
- <meta name="color-scheme" content="light dark">
144
- <link rel="stylesheet" href="css/pico.min.css">
145
- <!-- or Pico+Blades together:
146
- <link rel="stylesheet" href="css/pico.blades.min.css">
147
- -->
113
+ <meta charset="utf-8" />
114
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
115
+ <meta name="color-scheme" content="light dark" />
116
+ <link rel="stylesheet" href="css/pico.blades.min.css" />
148
117
  <title>Hello world!</title>
149
118
  </head>
150
119
  <body>
@@ -155,7 +124,61 @@ Then, import Pico into your <ins>CSS</ins> <del>SCSS file with [@use](https://sa
155
124
  </html>
156
125
  ```
157
126
 
158
- ## <del>Class-less version</del>
127
+ ---
128
+
129
+ ## Documentation
130
+
131
+ - **Getting started**
132
+ - [Quick start <i>πŸ₯·</i>](https://blades.ninja/css/pico/#quick-start)
133
+ - [Conditional styling](https://picocss.com/docs/conditional)
134
+ - [RTL](https://picocss.com/docs/rtl)
135
+ - **Customization**
136
+ - [CSS Variables](https://picocss.com/docs/css-variables)
137
+ - **Layout**
138
+ - [Container](https://picocss.com/docs/container)
139
+ - [Landmarks & section](https://picocss.com/docs/landmarks-section)
140
+ - [Grid](https://picocss.com/docs/grid)
141
+ - [Overflow auto](https://picocss.com/docs/overflow-auto)
142
+ - [Breakout layout <i>πŸ₯·</i>](https://blades.ninja/css/breakout/)
143
+ - [Auto-columns <i>πŸ₯·</i>](https://blades.ninja/css/#auto-columns)
144
+ - [... and more <i>πŸ₯·</i>](https://blades.ninja/css/#layout)
145
+ - **Content**
146
+ - [Typography](https://picocss.com/docs/typography)
147
+ - [Link](https://picocss.com/docs/link)
148
+ - [Link icon <i>πŸ₯·</i>](https://blades.ninja/css/link-icon/)
149
+ - [Button](https://picocss.com/docs/button)
150
+ - [Table](https://picocss.com/docs/table)
151
+ - [Responsive table <i>πŸ₯·</i>](https://blades.ninja/css/responsive-table/)
152
+ - [Heading anchors <i>πŸ₯·</i>](https://blades.ninja/css/#heading-anchors)
153
+ - [List markers <i>πŸ₯·</i>](https://blades.ninja/css/#list-markers)
154
+ - [... and more <i>πŸ₯·</i>](https://blades.ninja/css/#content)
155
+ - **Forms**
156
+ - [Overview](https://picocss.com/docs/forms)
157
+ - [Input](https://picocss.com/docs/forms/input)
158
+ - [Textarea](https://picocss.com/docs/forms/textarea)
159
+ - [Select](https://picocss.com/docs/forms/select)
160
+ - [Checkboxes](https://picocss.com/docs/forms/checkboxes)
161
+ - [Radios](https://picocss.com/docs/forms/radios)
162
+ - [Switch](https://picocss.com/docs/forms/switch)
163
+ - [Range](https://picocss.com/docs/forms/range)
164
+ - [Float labels <i>πŸ₯·</i>](https://blades.ninja/css/float-label/)
165
+ - **Components**
166
+ - [Accordion](https://picocss.com/docs/accordion)
167
+ - [Card](https://picocss.com/docs/card)
168
+ - [Dropdown](https://picocss.com/docs/dropdown)
169
+ - [Group](https://picocss.com/docs/group)
170
+ - [Loading](https://picocss.com/docs/loading)
171
+ - [Modal](https://picocss.com/docs/modal)
172
+ - [Nav](https://picocss.com/docs/nav)
173
+ - [Progress](https://picocss.com/docs/progress)
174
+ - [Tooltip](https://picocss.com/docs/tooltip)
175
+ - **[Utilities <i>πŸ₯·</i>](https://blades.ninja/css/#utilities)**
176
+ - [Auto-dark <i>πŸ₯·</i>](https://blades.ninja/css/#auto-dark)
177
+ - [... and more <i>πŸ₯·</i>](https://blades.ninja/css/#utilities)
178
+
179
+ <!--{.unlist .columns}-->
180
+
181
+ ---
159
182
 
160
183
  ## Limitations
161
184
 
@@ -163,86 +186,14 @@ Pico CSS can be used without custom CSS for quick or small projects. However, it
163
186
 
164
187
  [Read more](https://picocss.com/docs/usage-scenarios)
165
188
 
166
- ## Documentation
167
-
168
- **Getting started**
169
-
170
- - [Quick start](https://picocss.com/docs)
171
- - <del>[Version picker](https://picocss.com/docs/version-picker)</del>
172
- - <del>[Color schemes](https://picocss.com/docs/color-schemes)</del>
173
- - <del>[Class-less version](https://picocss.com/docs/classless)</del>
174
- - [Conditional styling](https://picocss.com/docs/conditional)
175
- - [RTL](https://picocss.com/docs/rtl)
176
-
177
- **Customization**
178
-
179
- - [CSS Variables](https://picocss.com/docs/css-variables)
180
- - <del>[Sass](https://picocss.com/docs/sass)</del>
181
- - <del>[Colors](https://picocss.com/docs/colors)</del>
182
-
183
- **Layout**
184
-
185
- - [Container](https://picocss.com/docs/container)
186
- - [Landmarks & section](https://picocss.com/docs/landmarks-section)
187
- - [Grid](https://picocss.com/docs/grid)
188
- - [Overflow auto](https://picocss.com/docs/overflow-auto)
189
- - [Breakout elements `πŸ₯·`](https://blades.ninja/css/breakout/)
190
- - [Auto-columns `πŸ₯·`](https://blades.ninja/css/#auto-columns)
191
- - [... and more `πŸ₯·`](https://blades.ninja/css/#layout)
192
-
193
- **Content**
194
-
195
- - [Typography](https://picocss.com/docs/typography)
196
- - [Link](https://picocss.com/docs/link)
197
- - [Link icon `πŸ₯·`](https://blades.ninja/css/link-icon/)
198
- - [Button](https://picocss.com/docs/button)
199
- - [Table](https://picocss.com/docs/table)
200
- - [Responsive table `πŸ₯·`](https://blades.ninja/css/responsive-table/)
201
- - [Heading anchors `πŸ₯·`](https://blades.ninja/css/#heading-anchors)
202
- - [List markers `πŸ₯·`](https://blades.ninja/css/#list-markers)
203
- - [... and more `πŸ₯·`](https://blades.ninja/css/#content)
204
-
205
- **Forms**
206
-
207
- - [Overview](https://picocss.com/docs/forms)
208
- - [Input](https://picocss.com/docs/forms/input)
209
- - [Textarea](https://picocss.com/docs/forms/textarea)
210
- - [Select](https://picocss.com/docs/forms/select)
211
- - [Checkboxes](https://picocss.com/docs/forms/checkboxes)
212
- - [Radios](https://picocss.com/docs/forms/radios)
213
- - [Switch](https://picocss.com/docs/forms/switch)
214
- - [Range](https://picocss.com/docs/forms/range)
215
- - [Float labels `πŸ₯·`](https://blades.ninja/css/float-label/)
216
-
217
- **Components**
218
-
219
- - [Accordion](https://picocss.com/docs/accordion)
220
- - [Card](https://picocss.com/docs/card)
221
- - [Dropdown](https://picocss.com/docs/dropdown)
222
- - [Group](https://picocss.com/docs/group)
223
- - [Loading](https://picocss.com/docs/loading)
224
- - [Modal](https://picocss.com/docs/modal)
225
- - [Nav](https://picocss.com/docs/nav)
226
- - [Progress](https://picocss.com/docs/progress)
227
- - [Tooltip](https://picocss.com/docs/tooltip)
228
-
229
- **[Utilities `πŸ₯·`](https://blades.ninja/css/#utilities)**
230
-
231
- **About**
232
-
233
- - [What’s new in v2?](https://picocss.com/docs/v2)
234
- - [Mission](https://picocss.com/docs/mission)
235
- - [Usage scenarios](https://picocss.com/docs/usage-scenarios)
236
- - [Brand](https://picocss.com/docs/brand)
237
- - [Built With](https://picocss.com/docs/built-with)
238
-
239
- ## Browser Support
189
+ ## Browser support
240
190
 
241
191
  Pico CSS is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.
242
192
 
243
193
  ## Contributing
244
194
 
245
- If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
195
+ - https://github.com/anyblades/pico for the original Pico CSS framework fixes.
196
+ - https://github.com/anyblades/blades for net new features and ideas.
246
197
 
247
198
  ## Copyright and license
248
199
 
package/css/pico.blades.css CHANGED
@@ -1,11 +1,14 @@
1
1
  @charset "UTF-8";
2
2
  /*!
3
- * Pico+Blades CSS ✨πŸ₯· v2.2.0-alpha.5
4
- * Copyright 2026 - Licensed under MIT
3
+ * Pico CSS ✨ v2.2.* + Blades CSS πŸ₯· v0.28.*
4
+ * Copyright 2026 (https://blades.ninja/css/pico/)
5
+ * Licensed under MIT
5
6
  */
6
7
  /*!
7
- * Pico CSS ✨ v2.1.4 (https://picocss.com)
8
- * Copyright 2019-2025 - Licensed under MIT
8
+ * Pico CSS ✨ v2.2.*
9
+ * Copyright 2019-2025 (https://picocss.com)
10
+ * Copyright 2026 (https://blades.ninja/css/pico/)
11
+ * Licensed under MIT
9
12
  */
10
13
  /**
11
14
  * Variables
package/css/pico.blades.min.css CHANGED
@@ -1,9 +1,12 @@
1
1
  @charset "UTF-8";/*!
2
- * Pico+Blades CSS ✨πŸ₯· v2.2.0-alpha.5
3
- * Copyright 2026 - Licensed under MIT
2
+ * Pico CSS ✨ v2.2.* + Blades CSS πŸ₯· v0.28.*
3
+ * Copyright 2026 (https://blades.ninja/css/pico/)
4
+ * Licensed under MIT
4
5
  *//*!
5
- * Pico CSS ✨ v2.1.4 (https://picocss.com)
6
- * Copyright 2019-2025 - Licensed under MIT
6
+ * Pico CSS ✨ v2.2.*
7
+ * Copyright 2019-2025 (https://picocss.com)
8
+ * Copyright 2026 (https://blades.ninja/css/pico/)
9
+ * Licensed under MIT
7
10
  */:host,:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@media (min-width:576px){:host,:root{--pico-font-size:106.25%}}@media (min-width:768px){:host,:root{--pico-font-size:112.5%}}@media (min-width:1024px){:host,:root{--pico-font-size:118.75%}}@media (min-width:1280px){:host,:root{--pico-font-size:125%}}@media (min-width:1536px){:host,:root{--pico-font-size:131.25%}}a{--pico-text-decoration:underline}a.contrast,a.secondary{--pico-text-decoration:underline}small{--pico-font-size:0.875em}h1,h2,h3,h4,h5,h6{--pico-font-weight:700}h1{--pico-font-size:2rem;--pico-line-height:1.125;--pico-typography-spacing-top:3rem}h2{--pico-font-size:1.75rem;--pico-line-height:1.15;--pico-typography-spacing-top:2.625rem}h3{--pico-font-size:1.5rem;--pico-line-height:1.175;--pico-typography-spacing-top:2.25rem}h4{--pico-font-size:1.25rem;--pico-line-height:1.2;--pico-typography-spacing-top:1.874rem}h5{--pico-font-size:1.125rem;--pico-line-height:1.225;--pico-typography-spacing-top:1.6875rem}h6{--pico-font-size:1rem;--pico-line-height:1.25;--pico-typography-spacing-top:1.5rem}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not(
8
11
  [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]
9
12
  ){--pico-outline-width:0.0625rem}[type=search]{--pico-border-radius:5rem}[type=checkbox],[type=radio]{--pico-border-width:0.125rem}[type=checkbox][role=switch]{--pico-border-width:0.1875rem}details.dropdown summary:not([role=button]){--pico-outline-width:0.0625rem}nav details.dropdown summary:focus-visible{--pico-outline-width:0.125rem}[role=search]{--pico-border-radius:5rem}[role=group]:has(
package/css/pico.css CHANGED
@@ -1,7 +1,9 @@
1
1
  @charset "UTF-8";
2
2
  /*!
3
- * Pico CSS ✨ v2.1.4 (https://picocss.com)
4
- * Copyright 2019-2025 - Licensed under MIT
3
+ * Pico CSS ✨ v2.2.*
4
+ * Copyright 2019-2025 (https://picocss.com)
5
+ * Copyright 2026 (https://blades.ninja/css/pico/)
6
+ * Licensed under MIT
5
7
  */
6
8
  /**
7
9
  * Variables
package/css/pico.min.css CHANGED
@@ -1,6 +1,8 @@
1
1
  @charset "UTF-8";/*!
2
- * Pico CSS ✨ v2.1.4 (https://picocss.com)
3
- * Copyright 2019-2025 - Licensed under MIT
2
+ * Pico CSS ✨ v2.2.*
3
+ * Copyright 2019-2025 (https://picocss.com)
4
+ * Copyright 2026 (https://blades.ninja/css/pico/)
5
+ * Licensed under MIT
4
6
  */:host,:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@media (min-width:576px){:host,:root{--pico-font-size:106.25%}}@media (min-width:768px){:host,:root{--pico-font-size:112.5%}}@media (min-width:1024px){:host,:root{--pico-font-size:118.75%}}@media (min-width:1280px){:host,:root{--pico-font-size:125%}}@media (min-width:1536px){:host,:root{--pico-font-size:131.25%}}a{--pico-text-decoration:underline}a.contrast,a.secondary{--pico-text-decoration:underline}small{--pico-font-size:0.875em}h1,h2,h3,h4,h5,h6{--pico-font-weight:700}h1{--pico-font-size:2rem;--pico-line-height:1.125;--pico-typography-spacing-top:3rem}h2{--pico-font-size:1.75rem;--pico-line-height:1.15;--pico-typography-spacing-top:2.625rem}h3{--pico-font-size:1.5rem;--pico-line-height:1.175;--pico-typography-spacing-top:2.25rem}h4{--pico-font-size:1.25rem;--pico-line-height:1.2;--pico-typography-spacing-top:1.874rem}h5{--pico-font-size:1.125rem;--pico-line-height:1.225;--pico-typography-spacing-top:1.6875rem}h6{--pico-font-size:1rem;--pico-line-height:1.25;--pico-typography-spacing-top:1.5rem}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not(
5
7
  [type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]
6
8
  ){--pico-outline-width:0.0625rem}[type=search]{--pico-border-radius:5rem}[type=checkbox],[type=radio]{--pico-border-width:0.125rem}[type=checkbox][role=switch]{--pico-border-width:0.1875rem}details.dropdown summary:not([role=button]){--pico-outline-width:0.0625rem}nav details.dropdown summary:focus-visible{--pico-outline-width:0.125rem}[role=search]{--pico-border-radius:5rem}[role=group]:has(
package/index.html CHANGED
@@ -4,10 +4,7 @@
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
  <meta name="color-scheme" content="light dark" />
7
- <link rel="stylesheet" href="css/pico.min.css" />
8
- <!-- or Pico+Blades together:
9
- <link rel="stylesheet" href="css/pico.blades.min.css">
10
- -->
7
+ <link rel="stylesheet" href="css/pico.blades.min.css" />
11
8
  <title>Hello world!</title>
12
9
  </head>
13
10
  <body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anyblades/pico",
3
- "version": "2.2.0-alpha.5",
3
+ "version": "2.2.0-alpha.6",
4
4
  "description": "Minimal CSS Framework for semantic HTML",
5
5
  "author": "Lucas Larroche",
6
6
  "contributors": [
@@ -8,7 +8,8 @@
8
8
  ],
9
9
  "style": "css/pico.min.css",
10
10
  "exports": {
11
- ".": "./src/pico.css"
11
+ ".": "./src/pico.blades.css",
12
+ "./core": "./src/pico.css"
12
13
  },
13
14
  "homepage": "https://picocss.com",
14
15
  "license": "MIT",
package/src/pico.blades.css CHANGED
@@ -1,7 +1,8 @@
1
1
  @charset "UTF-8";
2
2
  /*!
3
- * Pico+Blades CSS ✨πŸ₯· v2.2.0-alpha.5
4
- * Copyright 2026 - Licensed under MIT
3
+ * Pico CSS ✨ v2.2.* + Blades CSS πŸ₯· v0.28.*
4
+ * Copyright 2026 (https://blades.ninja/css/pico/)
5
+ * Licensed under MIT
5
6
  */
6
7
  @import "./pico";
7
8
  @import "@anyblades/blades";
package/src/pico.css CHANGED
@@ -1,7 +1,9 @@
1
1
  @charset "UTF-8";
2
2
  /*!
3
- * Pico CSS ✨ v2.1.4 (https://picocss.com)
4
- * Copyright 2019-2025 - Licensed under MIT
3
+ * Pico CSS ✨ v2.2.*
4
+ * Copyright 2019-2025 (https://picocss.com)
5
+ * Copyright 2026 (https://blades.ninja/css/pico/)
6
+ * Licensed under MIT
5
7
  */
6
8
  @import "./_variables";
7
9
  @import "./_layout";