@anyblades/blades 2.4.7 → 2.4.9

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 (20) hide show
  1. package/README.md +91 -28
  2. package/blades.gemspec +1 -1
  3. package/css/blades.css +35 -62
  4. package/css/blades.standalone.core.css +35 -61
  5. package/css/blades.standalone.css +36 -67
  6. package/css/blades.standalone.theme.css +1 -5
  7. package/css/float-label.core.css +12 -12
  8. package/css/float-label.css +12 -12
  9. package/css/link-icon.css +6 -6
  10. package/package.json +1 -1
  11. package/src/_layout.css +2 -10
  12. package/src/_utilities.css +3 -4
  13. package/src/blades.standalone.core.css +2 -0
  14. package/src/blades.standalone.theme.css +1 -5
  15. package/src/components/_timeline.css +0 -1
  16. package/src/content/_code.css +3 -7
  17. package/src/content/_table.css +4 -7
  18. package/src/content/_typography.css +3 -10
  19. package/src/float-label.core.css +12 -12
  20. package/src/link-icon.css +2 -2
package/README.md CHANGED
@@ -6,9 +6,18 @@
6
6
 
7
7
  <h1><mark>Minimal CSS Framework</mark> <small>for</small> Semantic HTML</h1>
8
8
 
9
- <big>Fully compatible and actively maintained successor to Pico CSS.</big>
9
+ <big>Fully compatible and actively maintained successor to [Pico CSS](//blades.ninja/css/pico/).</big>
10
10
 
11
- Includes [Float labels](//blades.ninja/css/float-label/), [Breakout layout](//blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css`, or use `blades.standalone.css` with other frameworks.
11
+ Introduces [float labels](//blades.ninja/css/float-label/), [breakout container](//blades.ninja/css/breakout/) and other modern, opt-out helpers.
12
+ Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with other frameworks.
13
+
14
+ <nav>
15
+ <a href="//blades.ninja/css/" role="button">Get started &nbsp;✨</a>
16
+ <span hidden>•</span>
17
+ <a href="//blades.ninja/css/standalone/" role="button" class="outline">
18
+ Standalone <i class="fa-brands fa-tailwind-css"></i><i class="fa-brands fa-bootstrap"></i>
19
+ </a>
20
+ </nav>
12
21
 
13
22
  <!--section:gh-only-->
14
23
 
@@ -18,19 +27,19 @@ Includes [Float labels](//blades.ninja/css/float-label/), [Breakout layout](//bl
18
27
 
19
28
  <!--section:install--><!-- for https://blades.ninja/css/ and https://blades.ninja/css/standalone/ -->
20
29
 
21
- There are 4 ways to get started:
30
+ <big>There are 4 ways to get started:</big>
22
31
 
23
32
  ### <mark>A.</mark> Install manually
24
33
 
25
- [Download *Bl*ades](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `css/blades.css` in the `<head>` of your website.
34
+ [Download CSS archive](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `css/blades.css` in the `<head>` of your website.
26
35
 
27
36
  ```html
28
37
  <link rel="stylesheet" href="css/blades.css" />
29
38
  ```
30
39
 
31
- ### <mark>B.</mark> Usage from CDN
40
+ ---
32
41
 
33
- Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@2/):
42
+ ### <mark>B.</mark> Usage from CDN
34
43
 
35
44
  <!--prettier-ignore-->
36
45
  ```html
@@ -39,33 +48,66 @@ Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblade
39
48
  "/>
40
49
  ```
41
50
 
42
- ### <mark>C.</mark> Install with NPM
51
+ Live example: https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html
52
+
53
+ Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/
54
+
55
+ ---
56
+
57
+ ### <mark>C.</mark> Starter projects
58
+
59
+ - https://subtle.blades.ninja/ 11ty micro-starter
60
+ - https://start.11ty.blades.ninja/ 7-in-1 starter (including Tailwind)
61
+ - https://getgrav.org/ v2 now features Blades CSS in its default theme (Quark2)
62
+ - https://jekyll.blades.ninja/ starter <!--{.faded}-->
63
+
64
+ ---
65
+
66
+ ### <mark>D.</mark> Install with NPM
43
67
 
44
68
  ```sh
45
- npm install @anyblades/pico # or other CSS framework
46
69
  npm install @anyblades/blades
47
70
  ```
48
71
 
49
- Then, import *Bl*ades into your CSS:
72
+ You can use precompiled Pico+Blades CSS (same as CDN version):
73
+
74
+ <!--prettier-ignore-->
75
+ ```html
76
+ <link rel="stylesheet" href="
77
+ node_modules/@anyblades/blades/css/blades.css
78
+ " />
79
+ ```
80
+
81
+ <div><hr></div>
82
+
83
+ Or import [standalone](//blades.ninja/css/standalone/) Blades CSS sources (without [Pico CSS](//blades.ninja/css/pico/)):
50
84
 
51
85
  ```css
52
- @import "@anyblades/blades";
86
+ @import "@anyblades/blades/standalone";
53
87
  ```
54
88
 
55
89
  Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://github.com/anyblades/buildawesome-starters/blob/main/site-tailwind/styles.css
56
90
 
57
- ### <mark>D.</mark> Starter projects
91
+ <div><hr></div>
58
92
 
59
- - https://subtle.blades.ninja/ 11ty micro-starter
60
- - https://github.com/anyblades/buildawesome-starters 11ty Tailwind CLI starter(s)
61
- - https://github.com/getgrav/grav-theme-quark2 for Grav CMS v2
62
- - https://jekyll.blades.ninja/ starter <!--{.faded}-->
93
+ To install and import both Pico+Blades CSS sources at once:
63
94
 
64
- ### Standalone versions
95
+ ```sh
96
+ npm install @anyblades/pico @anyblades/blades
97
+ ```
65
98
 
66
- - https://blades.ninja/css/standalone/
99
+ ```css
100
+ @import "@anyblades/pico";
101
+ @import "@anyblades/blades/standalone";
102
+ ```
67
103
 
68
- ### Starter HTML template <!-- from index.html -->
104
+ This is exactly how *Bl*ades CSS is built itself: https://github.com/anyblades/blades/blob/main/src/blades.css
105
+
106
+ ---
107
+
108
+ ### <sup style>Appendix</sup>
109
+
110
+ #### Starter HTML template <!-- from index.html -->
69
111
 
70
112
  ```html
71
113
  <!doctype html>
@@ -85,6 +127,28 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
85
127
  </html>
86
128
  ```
87
129
 
130
+ <!--section:install-->
131
+
132
+ #### Standalone versions
133
+
134
+ <!--section:install,standalone-->
135
+
136
+ Most of internal Blades CSS modules are available as standalone helpers, giving you flexibility to use them with other CSS frameworks:
137
+
138
+ | Module | CDN | Import from NPM |
139
+ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- |
140
+ | [Breakout container](/css/breakout/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/breakout.min.css | N/A |
141
+ | [Link icon](/css/link-icon/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/link-icon.min.css | N/A |
142
+ | [Responsive table](/css/responsive-table/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/responsive-table.min.css | N/A |
143
+ | [Float labels](/css/float-label/) <br> https://github.com/anyblades/float-label-css | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/float-label.min.css | `npm install @anyblades/blades` <br> `@import "@anyblades/blades/float-label";` |
144
+ | [All above together](/css/standalone/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.standalone.min.css | `npm install @anyblades/blades` <br> `@import "@anyblades/blades/standalone";` |
145
+ | [Reset/normalizer](/css/pico/) <br> https://github.com/anyblades/pico | https://cdn.jsdelivr.net/npm/@anyblades/pico@2/css/pico.min.css | `npm install @anyblades/pico` <br> `@import "@anyblades/pico";` |
146
+ | [Experimental "ninja" add-ons](/css/ninja/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.ninja.min.css | `npm install @anyblades/blades` <br> `@import "@anyblades/blades/ninja";` |
147
+
148
+ Live examples:
149
+
150
+ - https://www.mattanger.dev/ (Link icon via CDN)
151
+
88
152
  <!--section:gh-only-->
89
153
 
90
154
  ## Documentation
@@ -165,23 +229,22 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
165
229
 
166
230
  ---
167
231
 
168
- ## <sup style>Trusted by</sup>
232
+ ## <sup style>Trusted by</sup><!--DRY with featured-->
169
233
 
170
234
  - https://github.com/pallets/website 🐍
171
- - https://github.com/getgrav/grav-theme-quark2 🛸
172
- - https://www.11ty.dev/docs/starter/#:~:text=blades
173
- - https://sveltiacms.app/en/docs/start#starter-templates:~:text=anyblades
174
- - https://github.com/johnheenan/minform#css-and-performance
175
- - https://github.com/hostfurl/minformhf
176
235
 
177
236
  <!--section:info-->
178
237
 
179
- ## <sup style>Featured by</sup>
238
+ ## <sup style>Featured by</sup><!--Z-A-->
180
239
 
181
- - [awesome-css _@uhub_](https://github.com/uhub/awesome-css)
182
- - [awesome-css-frameworks _@gabrielizalo_](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
240
+ - [sveltiacms.app](https://sveltiacms.app/en/docs/start#:~:text=anyblades)
241
+ - [getgrav.org](https://getgrav.org/migrate-to-2#:~:text=blades) [↗](https://github.com/getgrav/grav-theme-quark2)
183
242
  - [dummy.my/frameworks](https://dummy.my/frameworks/)
243
+ - [awesome-css-frameworks _@gabrielizalo_](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
244
+ - [awesome-css _@uhub_](https://github.com/uhub/awesome-css)
245
+ - [11ty.dev](https://www.11ty.dev/docs/starter/#:~:text=blades) [↗](https://www.11ty.dev/docs/plugins/community/#:~:text=blades)
184
246
  - [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
247
+ - [@johnheenan](https://github.com/johnheenan/minform#css-and-performance)
185
248
  - [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w) [↗](https://www.instagram.com/reel/DXOSTpajG4f/)
186
249
 
187
250
  <!--{.markerless .columns}-->
@@ -189,6 +252,6 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
189
252
  ## <sup style>Credits</sup>
190
253
 
191
254
  - https://picocss.com/ for [inspiration](//blades.ninja/css/pico/)
192
- - https://11ty.dev/ for [site generation ↗](https://github.com/anyblades/blades.ninja)
255
+ - https://11ty.dev/ for [site generation](//github.com/anyblades/blades.ninja)
193
256
 
194
257
  <!--{.markerless}-->
package/blades.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |spec|
4
4
  spec.name = "blades"
5
- spec.version = "2.4.7"
5
+ spec.version = "2.4.9"
6
6
 
7
7
  spec.authors = ["Anton Staroverov"]
8
8
  spec.homepage = "https://blades.ninja/"
package/css/blades.css CHANGED
@@ -3010,12 +3010,10 @@ textarea,
3010
3010
  transition-duration: 0s !important;
3011
3011
  }
3012
3012
  }
3013
+ /*\3c !--section:code-->```css */
3013
3014
  /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
3014
3015
  /* Layout */
3015
- /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
3016
- \3c !--section:docs,columns-->
3017
-
3018
- ### Auto-columns
3016
+ /*\3c !--section:columns-->
3019
3017
 
3020
3018
  `.columns` automatically creates columns with at least 30 characters each:
3021
3019
 
@@ -3042,10 +3040,7 @@ How it works:
3042
3040
  -moz-column-break-inside: avoid;
3043
3041
  break-inside: avoid;
3044
3042
  }
3045
- /*```
3046
- \3c !--section:docs,jump-->
3047
-
3048
- ### Jump to top
3043
+ /*```\3c !--section:jump-->
3049
3044
 
3050
3045
  `data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
3051
3046
  ```css */
@@ -3055,8 +3050,6 @@ How it works:
3055
3050
  bottom: 0;
3056
3051
  padding-top: 50vh;
3057
3052
  }
3058
- /*```
3059
- \3c !--section--> */
3060
3053
  /*
3061
3054
  \3c !--section:code-->
3062
3055
  ```css */
@@ -3183,15 +3176,12 @@ Or anything else:
3183
3176
 
3184
3177
  \3c !--section--> */
3185
3178
  /* Content */
3186
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
3187
- \3c !--section:docs,h-anchor-->
3188
-
3189
- ### Heading anchors
3179
+ /*\3c !--section:h-anchor-->
3190
3180
 
3191
3181
  Links with `href="#..."` inside headings are automatically displayed as anchors:
3192
3182
 
3193
3183
  <article>
3194
- <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
3184
+ <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a aria-hidden="true" style="visibility: visible">#</a></h2>
3195
3185
  </article>
3196
3186
 
3197
3187
  How it works:
@@ -3223,9 +3213,7 @@ h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4
3223
3213
 
3224
3214
  **PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
3225
3215
 
3226
- \3c !--section:docs,list-->
3227
-
3228
- ### List markers
3216
+ \3c !--section:list-->
3229
3217
 
3230
3218
  Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
3231
3219
 
@@ -3309,37 +3297,35 @@ ul.unlist,
3309
3297
  ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unlist-all > li, .unlist-all ol > li {
3310
3298
  list-style: none;
3311
3299
  }
3312
- /*```
3313
- \3c !--section--> */
3314
3300
  /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
3315
3301
  \3c !--section:code-->
3316
3302
  ```css */
3317
3303
  /* Use inline flex only if link contains an icon */
3318
- a:has(> i):not(.does-not-exist) /* soft win specificity over Pico's `a[role="button"]` and inner `img:not([height])` */ {
3304
+ a:not(.does-not-exist):has(> i) {
3319
3305
  display: inline-flex;
3320
3306
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
3321
3307
  gap: 0.375ch; /* =3/8 */
3322
3308
  text-wrap: balance;
3323
3309
  }
3324
- a > i {
3310
+ a:not(.does-not-exist) > i {
3325
3311
  float: left; /* ✅ Chrome ❌ Safari */
3326
3312
  font-style: normal;
3327
3313
  text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
3328
3314
  }
3329
3315
  /* Favicons */
3330
- a > i > img {
3316
+ a:not(.does-not-exist) > i > img {
3331
3317
  display: inline-block; /* for Tailwind CSS Typography */
3332
3318
  max-width: none; /* to keep ratio safe */
3333
3319
  height: 1.25em;
3334
3320
  margin-block-start: calc(-0.25em / 2);
3335
3321
  }
3336
- a > i[class^="fa-"],
3337
- a > i[class*=" fa-"] {
3322
+ a:not(.does-not-exist) > i[class^="fa-"],
3323
+ a:not(.does-not-exist) > i[class*=" fa-"] {
3338
3324
  line-height: inherit;
3339
3325
  --fa-width: auto;
3340
3326
  }
3341
3327
  /* Font Awesome */
3342
- a > i.fa-lg {
3328
+ a:not(.does-not-exist) > i.fa-lg {
3343
3329
  line-height: normal;
3344
3330
  }
3345
3331
  /*```
@@ -3370,10 +3356,9 @@ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e
3370
3356
  **PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
3371
3357
 
3372
3358
  \3c !--section--> */
3373
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
3374
- \3c !--section:docs-->
3359
+ /*\3c !--section:docs-->
3375
3360
 
3376
- ### Column expanders
3361
+ ## Column expanders
3377
3362
 
3378
3363
  Place `<hr>` element inside `<th>` column to expand it horizontally:
3379
3364
 
@@ -3406,7 +3391,7 @@ th hr.x2 {
3406
3391
  }
3407
3392
  /*```
3408
3393
 
3409
- ### Borderless table
3394
+ ## Borderless table
3410
3395
 
3411
3396
  `.borderless` removes all default borders:
3412
3397
 
@@ -3419,9 +3404,7 @@ th hr.x2 {
3419
3404
  {.borderless}
3420
3405
  </article>
3421
3406
 
3422
- Living example: https://bladeswitch.com/#minimal-dependencies table
3423
-
3424
- \3c !--section--> */
3407
+ \3c !--section-->*/
3425
3408
  table.borderless th,
3426
3409
  table.borderless td {
3427
3410
  border: none;
@@ -3483,10 +3466,7 @@ Living examples: \3c !--A-Z-->
3483
3466
  - https://blades.ninja/ssg/
3484
3467
 
3485
3468
  \3c !--section--> */
3486
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
3487
- \3c !--section:docs-->
3488
-
3489
- ### Code
3469
+ /*\3c !--section:docs-->
3490
3470
 
3491
3471
  The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
3492
3472
 
@@ -3496,7 +3476,8 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
3496
3476
  ├── blades.theme.css # minimal opinionated theme
3497
3477
  └── blades.css # above two together
3498
3478
  ```
3499
- How it works:
3479
+
3480
+ \3c !--section:code-->
3500
3481
  ```css */
3501
3482
  @media (width < 768px) {
3502
3483
  pre {
@@ -3511,25 +3492,23 @@ code[data-caption]::before {
3511
3492
  font-style: italic;
3512
3493
  opacity: 50%;
3513
3494
  }
3514
- /*```
3515
- \3c !--section--> */
3516
3495
  /* Forms */
3517
- /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
3496
+ /* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
3518
3497
  \3c !--section:docs-->
3519
3498
 
3520
3499
  First, we target either:
3521
3500
  1. `<label>` which `:has` inner form inputs (classless approach)
3522
3501
  2. or explicit `.has-float-label` class (explicit approach)
3502
+
3523
3503
  ```css */
3524
3504
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
3525
3505
  .has-float-label {
3526
3506
  display: block;
3527
3507
  position: relative;
3528
3508
  }
3529
- /*
3530
- ```
3531
- Then, we define the default/fallback state (when the float label should be minimized):
3532
- ```css */
3509
+ /*```
3510
+ Then, we define the default/fallback state (when the float label should be minimized):
3511
+ ```css */
3533
3512
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
3534
3513
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
3535
3514
  .has-float-label > span,
@@ -3540,10 +3519,9 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
3540
3519
  font-size: 75%;
3541
3520
  cursor: text;
3542
3521
  }
3543
- /*
3544
- ```
3545
- Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
3546
- ```css */
3522
+ /*```
3523
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
3524
+ ```css */
3547
3525
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
3548
3526
  opacity: 0;
3549
3527
  }
@@ -3564,12 +3542,13 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
3564
3542
  font-size: inherit;
3565
3543
  opacity: 50%;
3566
3544
  }
3567
- /*
3568
- ```
3545
+ /*```
3546
+
3569
3547
  The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
3570
3548
 
3571
3549
  Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
3572
- \3c !--section--> */
3550
+
3551
+ \3c !--section-->*/
3573
3552
  /* Components */
3574
3553
  /*\3c !--section:docs-->
3575
3554
 
@@ -3592,12 +3571,10 @@ dl.timeline dd, .has-timeline > dl dd {
3592
3571
  padding: 0.25rem 0 0.75rem 1rem;
3593
3572
  border-inline-start: 0.25rem solid gray;
3594
3573
  }
3595
- /*```*/
3596
3574
  /* Utilities */
3597
- /* Extends https://github.com/picocss/pico/tree/main/scss/utilities
3598
- \3c !--section:docs-->
3575
+ /*\3c !--section:docs-->
3599
3576
 
3600
- ### Auto-dark
3577
+ ## Auto-dark
3601
3578
 
3602
3579
  `.dark-auto` automatically creates a simple dark version of any element:
3603
3580
 
@@ -3626,7 +3603,7 @@ How it works:
3626
3603
  }
3627
3604
  /*```
3628
3605
 
3629
- ### Faded
3606
+ ## Faded
3630
3607
 
3631
3608
  `.faded` reduces the opacity of an element:
3632
3609
 
@@ -3648,9 +3625,7 @@ How it works:
3648
3625
  .invert ::-webkit-scrollbar {
3649
3626
  filter: invert(1) !important;
3650
3627
  }
3651
- /*
3652
- \3c !--section:code-->
3653
- ```css */
3628
+ /*\3c !--section:code-->```css */
3654
3629
  /* Default/fallback state */
3655
3630
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
3656
3631
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
@@ -3793,5 +3768,3 @@ table pre {
3793
3768
  .faded a {
3794
3769
  text-decoration-style: dotted;
3795
3770
  }
3796
- /*```
3797
- \3c !--section--> */