@jungherz-de/glasskit 1.33.0 → 1.35.0

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/CHANGELOG.md +113 -0
  2. package/README.md +29 -11
  3. package/SKILL.md +24 -7
  4. package/glasskit-styles.js +3 -3
  5. package/glasskit.css +302 -36
  6. package/glasskit.min.css +2 -2
  7. package/glasskit.min.css.map +1 -1
  8. package/package.json +1 -1
  9. package/theme-override.css +45 -0
package/CHANGELOG.md CHANGED
@@ -7,6 +7,117 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
8
  ---
9
9
 
10
+ ## [1.35.0] – 2026-10-29
11
+
12
+ ### Added
13
+
14
+ - **A sheet at a side, and one that leaves the page usable: `.glass-sheet-overlay--start` / `--end` and `--modeless`.** On a desktop two common layouts need the sheet at a side: a modal panel at the right edge (restoring a version), and a modeless side sheet beside a list whose chosen row stays in view. The sheet only rose from the bottom, and a `transform` set from outside also applied to the open state.
15
+ - `--end` or `--start` on the overlay puts the panel at that side, with a card's corners and no grip. It is as high as the window less `--gl-sheet-side-inset` (16px) at both ends and that far from its edge, and `--gl-sheet-side-width` (440px) wide.
16
+ - It slides in from that side, mirrored right to left, and its actions stand side by side at its foot.
17
+ - `--modeless` has no scrim and no blur, and only the panel takes the pointer. Open that dialog with `show()`: the page stays usable, and a modal opened later lies above it.
18
+ - `--gl-sheet-z-index` (1000) stacks the overlay.
19
+
20
+ ([GlassKit Elements #44](https://github.com/JUNGHERZ/GlassKit-Elements/issues/44))
21
+ - **A head for the sheet: `__head` with `__eyebrow`, `__leading`, `__trailing` and `__close`.** Designs put a short line above the title ("RESTORE"), a 56px icon chip before it, a badge after it, and a × at the end. The sheet's head held only the title.
22
+ - `__head` takes the title's place and spacing, and a title alone in it stands as it did without one.
23
+ - `__close` is a round glass button, 32px with a 44px target.
24
+
25
+ ([GlassKit Elements #43](https://github.com/JUNGHERZ/GlassKit-Elements/issues/43))
26
+ - **Room beside a list title and below its subtitle, and tokens for its type: `__title-row`, `__title-trailing`, `__extra`, `--gl-list-title-size`, `--gl-list-title-weight`, `--gl-list-subtitle-size`.** History rows show a badge "AI" beside the title and an "Undo" link below the subtitle, at 64px with a 13px subtitle.
27
+ - `__title-trailing` moves under the title where the row is too narrow, and the title keeps its ellipsis.
28
+ - In a `--center` row the title row stays centred.
29
+
30
+ ([GlassKit Elements #42](https://github.com/JUNGHERZ/GlassKit-Elements/issues/42))
31
+ - **Tokens for the chosen list row: `--gl-list-item-selected-inset`, `-radius`, `-shadow`, `-color`, `-weight`.** The pill of 1.34.0 could only change its surface. Inset 0, radius 0 and shadow none make a flat tint over the whole row. ([GlassKit Elements #42](https://github.com/JUNGHERZ/GlassKit-Elements/issues/42))
32
+ - **A coloured logo as a segmented icon: `.glass-segmented__icon--color`.** The line icon's stroke reached a logo's shapes, which then came out outlined in the text colour. With `--color` the icon keeps its own fills and strokes; attributes on the `<svg>` itself lose to the slotted rule in all three engines, so the modifier is needed. ([GlassKit Elements #47](https://github.com/JUNGHERZ/GlassKit-Elements/issues/47))
33
+ - **`--gl-status-color`** for the message of a status line ([GlassKit Elements #45](https://github.com/JUNGHERZ/GlassKit-Elements/issues/45)), **`--gl-segmented-bg`** for the segmented track, and **`--gl-sheet-bg`** and **`--gl-modal-bg`** for the surfaces of sheet and modal ([GlassKit Elements #48](https://github.com/JUNGHERZ/GlassKit-Elements/issues/48)).
34
+ - **`--gl-color-primary-on-glass`, the primary as text on the glass of a card, a modal or a sheet.**
35
+ - A card is brighter than the page. GlassKit's own orange read 4.18:1 as a link on a card in dark mode, and a brand's accent less.
36
+ - Links in `.glass-prose`, the range value, accent rows, the hovered accordion and the primary modal action take it there now. In dark mode it is the primary text with 40% white; in light mode, the primary text.
37
+ - A link of the page's own on a card uses it as well.
38
+
39
+ ([GlassKit Elements #48](https://github.com/JUNGHERZ/GlassKit-Elements/issues/48), comment)
40
+
41
+ ### Changed
42
+
43
+ - **Dark glass keeps its contrast.** In dark mode the glass of a modal or a sheet is brighter than the page, most at its top. White text on badges and segments there read 2.9 to 4.7:1, and a chosen badge in the lightened accent 1.9 to 3.3:1. In dark mode now:
44
+ - The glow of modal and sheet starts at the card's middle glow (`--gl-dialog-glow-top`).
45
+ - A segmented control on them lies in a well (`--gl-dialog-well`, black 10%), its chosen option one step darker (`--gl-dialog-raised`).
46
+ - A tertiary button is one step darker (`--gl-dialog-control`).
47
+ - Badges and tertiary buttons take no blur of their own. Chromium counted the dialog's glow twice beneath a nested backdrop filter, which is why it measured lower than WebKit and Firefox.
48
+ - A chosen badge says its label in the text colour (`--gl-badge-selected-color`); border and tint show the selection.
49
+ - A segmented control or badge whose tokens the page sets keeps them. Light mode is unchanged.
50
+
51
+ ([GlassKit Elements #48](https://github.com/JUNGHERZ/GlassKit-Elements/issues/48))
52
+
53
+ ### Compatibility
54
+
55
+ - Light mode renders as in 1.34.0. In dark mode modals, sheets, chosen badges and accent text on cards look as described above.
56
+ - Six theme tokens are new in both theme blocks: `--gl-dialog-glow-top`, `--gl-dialog-well`, `--gl-dialog-raised`, `--gl-dialog-control` and `--gl-badge-selected-color` (unset in light mode), and `--gl-color-primary-on-glass` (the primary text in light mode). The no-JS light mirror of GlassKit Web needs these six lines from the light block; its `check:tokens` names them.
57
+ - In plain markup `__title-row`, `__head` and the new places are optional: a list title or a sheet title without them stands as before.
58
+
59
+ Measured in Chromium 153, WebKit 26.6 and Firefox 151, at the top of an 820px dark sheet over GlassKit's dark page, with the background taken from the pixels under each text:
60
+
61
+ | Text | 1.34.0 | 1.35.0 |
62
+ |---|---|---|
63
+ | white on a badge | 2.87 to 4.65:1 | 6.00 to 6.79:1 |
64
+ | a chosen badge, GlassKit's orange | 1.91 to 2.74:1 | 4.66 to 5.22:1 (white) |
65
+ | a chosen badge, accent #0082BB | 2.27 to 3.29:1 | 5.67 to 6.37:1 (white) |
66
+ | the chosen and an open segment | 3.40 to 3.84:1 | 5.45 to 7.70:1 |
67
+ | a field's text (Chromium) | 3.89:1 | 5.47:1 |
68
+ | a tertiary button | 2.98 to 4.00:1 | 4.69 to 5.35:1 |
69
+ | a link on a card, GlassKit's orange | 4.18:1 | 5.54 to 5.61:1 |
70
+
71
+ The side sheet measures 440px wide, 16px from the edge and both ends, and slides in from the right, or from the left right to left. Docs (English and German), README, SKILL.md and `theme-override.css` describe all of it. With the new stylesheet the light docs, showcase and landing pages render pixel-identical to 1.34.0 in all three engines, apart from the new examples. In dark mode only the chosen badges and the previews of modal and sheet differ as well.
72
+
73
+ ---
74
+
75
+ ## [1.34.0] – 2026-10-28
76
+
77
+ ### Added
78
+
79
+ - **Tiles side by side: `.glass-list--grid`.** A grid of components — news, opening hours, a submenu to move them into — had no place in GlassKit: the list stacks rows, and a page drew tiles of its own.
80
+ - `--grid` lays the items out as tiles: as many columns as fit at `--gl-list-tile-width` (140px), `--gl-list-tile-gap` (12px) apart, each at least `--gl-list-tile-min-height` (112px) high.
81
+ - Every tile is a pane of glass of its own, with the surface, edge light and shadow the list has as a whole; the list itself has none. The icon stands at the top, title and subtitle at the foot, `__trailing` in the top end corner, a `.glass-sort__handle` in the bottom end corner. There are no dividers.
82
+ - Hover, the focus ring and the chosen state work as on rows. A tile with more to say grows; its text never shrinks below its lines.
83
+ - `.glass-list__item--tile` makes a row a tile where it cannot be a child of the grid, as in GlassKit Elements' `<glk-list grid>`, whose rows lie in shadow roots of their own.
84
+
85
+ ([GlassKit Elements #40](https://github.com/JUNGHERZ/GlassKit-Elements/issues/40))
86
+ - **A chosen list row: `.glass-list__item.is-selected`.** A compact list beside an editor marks the entry that is open. The list had no such state, and the tree's `.is-selected` belongs to its rows.
87
+ - It lays a pill of raised glass into the row, as the chosen tree row and the active row of a sidebar have: `--gl-list-item-selected-bg` (unset `--gl-surface-4`), `--gl-inset-strong`, `--gl-shadow-btn`, the title semibold and the icon in the accent.
88
+ - A chosen tile is raised glass as a whole.
89
+ - Hover and press leave it as it is, and the keyboard ring stays around the row.
90
+ - `aria-current="true"` on the row tells assistive technology which entry it is (`aria-selected` in a listbox).
91
+ - While the row is a drop target of a drag, the pill makes way for the line or the tint.
92
+
93
+ ([GlassKit Elements #39](https://github.com/JUNGHERZ/GlassKit-Elements/issues/39))
94
+ - **Where the dividers start: `--gl-list-item-divider-inset`.** A sortable list of components shows the grip first: grip, icon, title, actions. The divider started after a 28px icon, under the icon, and a project moved it through a stylesheet adopted into every item.
95
+ - The token sets the start for rows laid out otherwise, on the list or one row.
96
+ - A row whose first child is a `.glass-sort__handle` lets the line run from its padding, since the grip's width is the page's. Set the token to where the text begins, 90px for an 18px grip and a 28px icon.
97
+
98
+ ([GlassKit Elements #38](https://github.com/JUNGHERZ/GlassKit-Elements/issues/38))
99
+ - **An upright drop line for items side by side: `.is-sort-inline`.** With `.is-sort-before` or `.is-sort-after`, the line stands at the target's start or end edge, for tiles in a grid. Between the tiles of a `--grid` it stands in the middle of the gap. ([GlassKit Elements #40](https://github.com/JUNGHERZ/GlassKit-Elements/issues/40))
100
+ - **A larger icon field in the tree: `--gl-tree-icon-size`.** A tree of components shows each entry's chip in the icon field, a tinted square of 28px with the component's symbol, as list rows do. The field was 18 by 18px with no token, and a 28px chip came out 18 by 28px. The token (18px) sizes the field and its SVG. ([#26](https://github.com/JUNGHERZ/GlassKit/issues/26))
101
+
102
+ ### Fixed
103
+
104
+ - **The tint of a drop target shows over the hover and the chosen state.** `.is-sort-inside` and `.is-sort-refused` weighed less than `.glass-list__item--interactive:hover` and `.glass-tree__row.is-selected`. An interactive row under the pointer, which a drop target always is, settled at the hover surface, and a chosen tree row kept its own, so only the ring showed. In 1.33.0 such a row ended at `rgba(255, 255, 255, 0.6)` in all three engines; now it shows the tint.
105
+
106
+ ### Compatibility
107
+
108
+ - Nothing changes for a project that sets none of the new classes and tokens, with one exception: a row whose first child is a `.glass-sort__handle` now runs its divider from its padding instead of from 60px.
109
+ - No theme token changed, so the no-JS mirror of GlassKit Web has nothing to update.
110
+
111
+ Measured in Chromium 153, WebKit 26.6 and Firefox 151:
112
+ - **Tree:** the issue's 28px chip comes out 28 by 28px with `--gl-tree-icon-size: 28px`. The row stays 36px high, and the default field stays 18px.
113
+ - **Lists:** the dividers start at 60px after an icon, at 20px with the grip first, and at 90px with the token.
114
+ - **Chosen row:** a pill 8px in from the sides and 3px from the ends, with 12px corners, unchanged on hover. The focus ring stays on top.
115
+ - **Tiles:** the line stands 2px wide in the middle of a 12px gap.
116
+
117
+ Docs (English and German), README, SKILL.md and `theme-override.css` describe the tiles, the chosen row, the divider's start, the upright line and the tree's icon size. With the new stylesheet the existing docs, showcase and landing pages render pixel-identical to 1.33.0 in all three engines. Only the new sections of the docs differ: the chosen row and the grip-first list under List, the tiles under Sorting.
118
+
119
+ ---
120
+
10
121
  ## [1.33.0] – 2026-10-28
11
122
 
12
123
  ### Added
@@ -1357,6 +1468,8 @@ during development. Version 1.3 is the first public open-source release.
1357
1468
 
1358
1469
  ---
1359
1470
 
1471
+ [1.35.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.35.0
1472
+ [1.34.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.34.0
1360
1473
  [1.33.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.33.0
1361
1474
  [1.32.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.32.0
1362
1475
  [1.31.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.31.0
package/README.md CHANGED
@@ -1,9 +1,9 @@
1
1
  <p align="center">
2
- <img src="https://img.shields.io/badge/version-1.33.0-orange?style=flat-square" alt="Version">
2
+ <img src="https://img.shields.io/badge/version-1.35.0-orange?style=flat-square" alt="Version">
3
3
  <img src="https://img.shields.io/badge/CSS-only-blue?style=flat-square" alt="CSS only">
4
4
  <img src="https://img.shields.io/badge/components-38-green?style=flat-square" alt="Components">
5
5
  <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License">
6
- <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.33.0-f5a623?style=flat-square" alt="Changelog"></a>
6
+ <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.35.0-f5a623?style=flat-square" alt="Changelog"></a>
7
7
  <a href="https://www.npmjs.com/package/@jungherz-de/glasskit"><img src="https://img.shields.io/npm/v/@jungherz-de/glasskit?style=flat-square&color=cb3837&label=npm" alt="npm"></a>
8
8
  <a href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit/"><img src="https://img.shields.io/badge/CDN-jsDelivr-blue?style=flat-square" alt="jsDelivr"></a>
9
9
  </p>
@@ -74,22 +74,22 @@ No download, no build tool – just include and go:
74
74
 
75
75
  ```html
76
76
  <!-- jsDelivr – Minified -->
77
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.33/glasskit.min.css">
77
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.35/glasskit.min.css">
78
78
 
79
79
  <!-- jsDelivr – Unminified (for reading/debugging) -->
80
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.33/glasskit.css">
80
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.35/glasskit.css">
81
81
 
82
82
  <!-- unpkg – Alternative -->
83
- <link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.33/glasskit.min.css">
83
+ <link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.35/glasskit.min.css">
84
84
  ```
85
85
 
86
- > **Tip:** Replace `@1.33` with `@latest` for the newest version – or pin to a specific version for maximum stability.
86
+ > **Tip:** Replace `@1.35` with `@latest` for the newest version – or pin to a specific version for maximum stability.
87
87
 
88
88
  The [droplet](#-droplet-a-fluid-selection) takes one optional module next to the stylesheet:
89
89
 
90
90
  ```html
91
91
  <script type="module">
92
- import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.33/glasskit-droplet.js';
92
+ import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.35/glasskit-droplet.js';
93
93
  attachDroplets();
94
94
  </script>
95
95
  ```
@@ -200,7 +200,7 @@ Download the files directly from the [GitHub Release](https://github.com/JUNGHER
200
200
  | **Status** | `.glass-status` | Notice card with icon |
201
201
  | **List** | `.glass-list` | iOS-style grouped settings list with auto dividers |
202
202
  | **Tree** | `.glass-tree` | Levels that open and close: twisty, icon, label and a trailing slot per row; children loading or failed to load; a flash for a changed item |
203
- | **Sorting** | `.is-sort-*` + `.glass-sort__ghost` | The states of a drag that reorders a list or a tree: source, drop line, inside, refused, a grip |
203
+ | **Sorting** | `.is-sort-*` + `.glass-sort__ghost` | The states of a drag that reorders a list, a tree or tiles: source, drop line (upright between tiles), inside, refused, a grip |
204
204
  | **Skeleton** | `.glass-skeleton` | Shimmer lines while content loads |
205
205
  | **Table** | `.glass-table` | Plain `<table>` on glass — hairline rows, tabular numbers; sort buttons, a sticky header, a row action column, an empty row, cards for narrow places |
206
206
  | **Prose** | `.glass-prose` | Rendered Markdown / running text with one class |
@@ -497,6 +497,9 @@ All visual values are controlled via CSS Custom Properties:
497
497
  /* Colors */
498
498
  --gl-color-primary /* Primary color */
499
499
  --gl-color-primary-text /* text and line icons in the primary; defaults to it */
500
+ --gl-color-primary-on-glass /* the primary as text on cards, modals and sheets; dark: 60 % primary text in white */
501
+ --gl-dialog-glow-top / --gl-dialog-well / --gl-dialog-raised / --gl-dialog-control /* dark glass of modal and sheet: glow start, segmented well, its chosen option, tertiary button */
502
+ --gl-badge-selected-color /* a chosen badge's label; dark: the text colour */
500
503
  --gl-color-primary-fill /* flat accent fills that carry text: chosen day, current step; defaults to the primary */
501
504
  --gl-color-text /* Text color */
502
505
  --gl-color-text-muted /* Secondary text */
@@ -581,6 +584,15 @@ All visual values are controlled via CSS Custom Properties:
581
584
  --gl-tooltip-offset /* 8px; the distance GlassKit Elements keeps from the control */
582
585
  --gl-tree-indent /* 20px per level */
583
586
  --gl-tree-row-height /* 36px */
587
+ --gl-tree-icon-size /* 18px; the icon field and its SVG — 28px for a tinted chip */
588
+ --gl-list-item-divider-inset /* where a list row's divider starts; unset after the icon, or at the padding */
589
+ --gl-list-item-selected-bg /* the pill of the chosen list row; unset --gl-surface-4 */
590
+ --gl-list-item-selected-inset / -radius / -shadow / -color / -weight /* the chosen row's pill and title; 0, 0, none: a flat tint */
591
+ --gl-list-title-size / --gl-list-title-weight / --gl-list-subtitle-size /* a row's type */
592
+ --gl-sheet-bg / --gl-modal-bg /* replace the surface of sheet and modal */
593
+ --gl-sheet-side-width / --gl-sheet-side-inset / --gl-sheet-z-index /* 440px, 16px, 1000: a sheet at a side */
594
+ --gl-segmented-bg /* the segmented track; unset --gl-surface-1 */
595
+ --gl-status-color /* the status message; unset muted text */
584
596
  --gl-breadcrumbs-crumb-width /* 200px; a longer crumb ends in an ellipsis */
585
597
  --gl-sort-duration, --gl-sort-easing /* 180ms, ease-out: rows making room while a list is sorted */
586
598
  --gl-table-cell-padding /* 9px 10px */
@@ -863,6 +875,7 @@ Badge Modifiers:
863
875
  .glass-badge--primary / --success / --warning / --error
864
876
  .glass-badge--interactive / --selected (chips)
865
877
  .glass-badge--md (choice chip, 36px; --gl-badge-md-height)
878
+ --gl-badge-selected-color (a chosen chip's label; the text colour in dark mode)
866
879
 
867
880
  Avatar Modifiers:
868
881
  .glass-avatar--sm / --lg
@@ -889,6 +902,9 @@ List Modifiers:
889
902
  .glass-list--flush / --bare
890
903
  .glass-list__item--interactive / --center
891
904
  .glass-list__item.is-flash (a changed item flashes; --gl-flash-color)
905
+ .glass-list__item.is-selected (the chosen row beside its detail, with aria-current; --gl-list-item-selected-bg)
906
+ .glass-list__title-row > __title + __title-trailing · __extra (beside the title, below the subtitle)
907
+ --gl-list-item-divider-inset (where the dividers start; a row with its grip first runs them from its padding)
892
908
  --gl-list-title-white-space / --gl-list-subtitle-white-space / --gl-list-subtitle-lines (wrapping, app-wide)
893
909
 
894
910
  Popover Modifiers:
@@ -904,13 +920,13 @@ Menu:
904
920
 
905
921
  Tree:
906
922
  .glass-tree · __row.is-expanded / .is-selected / .is-leaf / .is-loading / .is-error / .is-disabled / .is-flash · __twisty / __icon / __label / __trailing · __group
907
- --gl-tree-level (per row) / --gl-tree-indent / --gl-tree-row-height
923
+ --gl-tree-level (per row) / --gl-tree-indent / --gl-tree-row-height / --gl-tree-icon-size
908
924
 
909
925
  Breadcrumbs:
910
926
  .glass-breadcrumbs · __list / __item / __item--overflow · __crumb / __current / __overflow · .is-drop-target / .is-drop-refused
911
927
 
912
928
  Sorting:
913
- .is-sort-source / -before / -after / -inside / -refused · .glass-sort__ghost · .glass-sort__handle
929
+ .is-sort-source / -before / -after / -inline / -inside / -refused · .glass-sort__ghost · .glass-sort__handle
914
930
  --gl-sort-duration / --gl-sort-easing
915
931
 
916
932
  Skeleton:
@@ -925,7 +941,7 @@ Prose:
925
941
  .glass-prose (styles the rendered content beneath it)
926
942
 
927
943
  Segmented:
928
- .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge (--primary / --success / --warning / --error)
944
+ .glass-segmented--full / --scroll / --wrap / --icons · __item[aria-pressed] · __item--success / --warning / --error · __dot · __icon · __badge (--primary / --success / --warning / --error) · __icon--color (a logo keeps its colours)
929
945
  .glass-segmented--droplet (gliding selection, with glasskit-droplet.js)
930
946
 
931
947
  Steps:
@@ -933,6 +949,8 @@ Steps:
933
949
 
934
950
  Sheet:
935
951
  .glass-sheet-overlay.is-active · .glass-sheet--inline · __grip / __title / __body / __actions
952
+ .glass-sheet__head > __leading / __heading (__eyebrow + __title) / __trailing / __close
953
+ .glass-sheet-overlay--start / --end · --modeless (a panel at a side; modeless with show())
936
954
  dialog.glass-sheet-overlay (a native <dialog>, opened with showModal(), since 1.30.0)
937
955
 
938
956
  Empty state:
package/SKILL.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: glasskit-css
3
- description: GlassKit is a pure CSS glassmorphism component library (v1.33.0) with 38 components, Dark & Light mode, design tokens, and BEM-like naming. Use this reference whenever generating HTML that uses GlassKit classes to ensure correct structure, nesting, modifiers, and token usage.
3
+ description: GlassKit is a pure CSS glassmorphism component library (v1.35.0) with 38 components, Dark & Light mode, design tokens, and BEM-like naming. Use this reference whenever generating HTML that uses GlassKit classes to ensure correct structure, nesting, modifiers, and token usage.
4
4
  ---
5
5
 
6
6
  # GlassKit CSS – AI Component Reference
@@ -14,6 +14,10 @@ description: GlassKit is a pure CSS glassmorphism component library (v1.33.0) wi
14
14
 
15
15
  > **New in 1.32.0 — one navigation for every edge, four components, and AA on the accent fills.** The tab bar leaves the bottom edge: `--vertical` makes it a sidebar, `--start` or `--end` fixes it to that side of the viewport — where the thumb rests on a phone held open, or a foldable that moved its system controls to a side — `--rail` shrinks it to icons, `--top` lays it out for the top of a page, and the floating bar stands upright in `.glass-tab-bar-dock--vertical`. In a column the drop runs along y, and its timing is tokens (`--gl-droplet-*`). New: the tooltip, the menu, the tree and the breadcrumbs (3.36–3.39), the states of a drag that reorders a list or a tree (3.40), and for the table a sort button, a sticky header, a row action column, an empty row and a card layout (3.27). Popover, tooltip and menu open in the top layer with the `popover` attribute. `--gl-btn-primary-bg` and `--gl-color-primary-fill` darken the accent fills for white text without touching the brand colour, and the radio's dot follows `--gl-color-on-primary`. **Where a project builds its own sidebar, tooltip, menu, tree or breadcrumbs, overrides the drop's transitions, or darkens `--gl-color-primary` for white button text, replace that** (3.4, 3.7, 3.25, section 2).
16
16
 
17
+ > **New in 1.35.0 — sheets at a side and with a head, dark glass that keeps its contrast, room beside a list title.** `.glass-sheet-overlay--end`/`--start` put the sheet at a side as a full-height panel, `--modeless` leaves the page usable (open with `show()`); `__head` holds `__eyebrow`, `__leading`, `__trailing` and a round `__close` (3.31). In dark mode the glow of modal and sheet starts at the middle and controls on them get darker values — a segmented well, a tertiary button one step darker, no chip blur —, a chosen badge says its label in the text colour, and `--gl-color-primary-on-glass` lightens accent text on cards and dialogs: white on badges and segments at the top of a tall dark sheet went from 2.9–4.7:1 to 4.7–7.7:1 (3.31). Lists get `__title-row`/`__title-trailing`/`__extra` and tokens for title and subtitle type and the chosen row's pill (3.24); `.glass-segmented__icon--color` keeps a logo's colours (3.29); `--gl-status-color`, `--gl-sheet-bg`, `--gl-modal-bg`, `--gl-segmented-bg`. **Where a project restyles the sheet head, moves a sheet to the side through adopted styles, starts a dark glow lower, or sets its own on-glass link colour, replace that.**
18
+
19
+ > **New in 1.34.0 — a chosen list row, a list that starts with the grip, tiles that sort.** `.glass-list__item.is-selected` marks the entry a list beside its detail shows — a pill of raised glass, as the chosen tree row — with `aria-current="true"` (3.24). `--gl-list-item-divider-inset` sets where the dividers start, and a row with its `.glass-sort__handle` first lets them run from its padding. `.is-sort-inline` stands the drop line upright for tiles side by side (3.40). `--gl-tree-icon-size` (18px) gives the tree a larger icon field, for a 28px chip (3.38). **Where a project paints a chosen row with its own styles, squeezes a chip into the tree's 18px icon, or moves the grip by adopted stylesheets, replace that.**
20
+
17
21
  > **New in 1.33.0 — a rail that names its items, and tokens for the tab bar's details.** `--rail` with `--labels` keeps the label under the icon, and `--floating` with `--vertical` and `--start` or `--end` makes the rail a pane of its own glass at that edge, full height and inset from it; `__leading` and `__trailing` hold a mark, the accessory (`__accessory-item` with its name under it) and a foot inside the bar. `--gl-tab-bar-icon-size`, `--gl-tab-bar-item-radius` and `--gl-tab-bar-active-weight` replace overrides of global tokens, and the items transition only colour, surface, shadow, opacity and the press. Also new: `.glass-input-group--label-end` for a link such as "Forgot password?" at the end of the label row, and `.glass-badge--md`, a 36px choice chip with a 44px tap target.
18
22
 
19
23
  ---
@@ -179,6 +183,8 @@ All are derived from the state color via `color-mix()`, so overriding
179
183
  | `--gl-color-error-on-surface` | Badge text on the error tint | lightened / darkened error |
180
184
  | `--gl-color-warning-on-surface` | Badge text on the warning tint (since 1.18.0) | lightened (dark) / darkened (light) warning |
181
185
  | `--gl-color-primary-text` | Text and line icons in the primary straight on the page or the glass: `.glass-prose` links, icon and label of the active tab, `.glass-modal__action--primary`, `.glass-list__item--accent`, `.glass-range-value`, the accordion trigger on hover and the chevron of an open item (since 1.26.0) | `var(--gl-color-primary)` in both themes |
186
+ | `--gl-color-primary-on-glass` | The primary as text on the glass of a card, a modal or a sheet (since 1.35.0): links in `.glass-prose`, the range value, accent rows, the primary modal action. Dark: `color-mix(in srgb, var(--gl-color-primary-text) 60%, #ffffff)` — GlassKit's orange went from 4.18:1 to 5.54:1 as a link on a card; light: the primary text. Use it for links and chips of your own on a card |
187
+ | `--gl-dialog-glow-top`, `--gl-dialog-well`, `--gl-dialog-raised`, `--gl-dialog-control`, `--gl-badge-selected-color` | Dark glass (since 1.35.0, dark mode only): where the glow of modal and sheet starts (the card's mid glow), the segmented track on dialog glass (black 10 %), its chosen option (`--gl-surface-3`), a tertiary button there (`--gl-surface-1`), a chosen badge's label (the text colour). Unset in light mode |
182
188
  | `--gl-color-primary-surface` / `-border` | Badge fill / border | `color-mix(… primary 25% / 30%, transparent)` |
183
189
  | `--gl-color-success-surface` / `-border` | Badge fill / border | `color-mix(… success 15% / 30%, transparent)` |
184
190
  | `--gl-color-error-surface` / `-border` | Badge fill / border | `color-mix(… error 15% / 30%, transparent)` |
@@ -794,7 +800,7 @@ Full-width buttons (56px height) with three variants and size modifiers.
794
800
  | `.glass-btn` | Base (56px height, width: 100%) |
795
801
  | `.glass-btn--primary` | Color gradient (orange) |
796
802
  | `.glass-btn--secondary` | Milky white, dark text |
797
- | `.glass-btn--tertiary` | Subtle glass, more transparent |
803
+ | `.glass-btn--tertiary` | Subtle glass, more transparent; on the glass of a modal or a sheet one step darker in dark mode and without a blur of its own (since 1.35.0) |
798
804
  | `.glass-btn--sm` | 44px height |
799
805
  | `.glass-btn--lg` | 64px height |
800
806
  | `.glass-btn--auto` | Width: auto instead of 100% |
@@ -836,7 +842,7 @@ Tags and labels.
836
842
  | `.glass-badge--warning` | Yellow — states that wait for someone (since 1.18.0) |
837
843
  | `.glass-badge--error` | Red |
838
844
  | `.glass-badge--interactive` | Pressable chip — cursor, hover tint, focus ring, press feedback |
839
- | `.glass-badge--selected` | The chip that is on |
845
+ | `.glass-badge--selected` | The chip that is on; in dark mode its label takes `--gl-badge-selected-color`, the text colour (since 1.35.0; the lightened accent read 2.2–3:1 on glass) — border and tint show the selection. On modal or sheet glass a badge takes no blur of its own |
840
846
  | `.glass-badge--md` | A chip to choose with (since 1.33.0): `--gl-badge-md-height` (36px) high, in the small text of a form; with `--interactive` a tap target of 44px |
841
847
 
842
848
  **Chips (since 1.12.0).** A badge doubles as a filter chip. Use a real `<button>` and carry the state in `aria-pressed`, so the row is operable by keyboard and announced as a toggle — the classes only paint it.
@@ -912,7 +918,7 @@ Info/notice card with icon and text.
912
918
 
913
919
  | Class | Description |
914
920
  |---|---|
915
- | `.glass-status` | Container with subtle glass surface |
921
+ | `.glass-status` | Container with subtle glass surface; `--gl-status-color` sets the message's colour (since 1.35.0) |
916
922
 
917
923
  ---
918
924
 
@@ -948,7 +954,7 @@ Danger variant:
948
954
  | `.glass-modal-overlay` | Fullscreen container with blur |
949
955
  | `.glass-modal-overlay.is-active` | Visible + animated |
950
956
  | `dialog.glass-modal-overlay` | The overlay as a native `<dialog>`, opened with `showModal()` (since 1.20.0) |
951
- | `.glass-modal` | Dialog box, at most `--gl-modal-max-width` wide (340px unless set; since 1.20.0) |
957
+ | `.glass-modal` | Dialog box, at most `--gl-modal-max-width` wide (340px unless set; since 1.20.0); `--gl-modal-bg` replaces its surface, and in dark mode its glow starts at `--gl-dialog-glow-top` (since 1.35.0, see 3.31) |
952
958
  | `.glass-modal__header` | Header area |
953
959
  | `.glass-modal__title` | Title (20px, bold) |
954
960
  | `.glass-modal__body` | Content area |
@@ -1471,11 +1477,16 @@ iOS-style grouped settings list. Items can carry a leading icon, a title with op
1471
1477
  | `.glass-list__subtitle--wrap` | Multi-line subtitle (up to 3 lines, clamped with ellipsis; `--gl-list-subtitle-lines` sets the limit) |
1472
1478
  | `.glass-list__trailing` | Trailing slot — chevron, value, button, badge |
1473
1479
  | `.glass-list__value` | Muted text inside `.glass-list__trailing` (e.g. file size) |
1480
+ | `.glass-list__title-row` | Holds `.glass-list__title` and `.glass-list__title-trailing` — a badge, a mark —, which moves under the title where the row is too narrow (since 1.35.0) |
1481
+ | `.glass-list__extra` | Below the subtitle: a link ("Undo"), a line of chips (since 1.35.0) |
1482
+ | `.glass-list__item.is-selected` | The chosen row of a list beside its detail (since 1.34.0): a pill of raised glass inside the row (`--gl-list-item-selected-bg`, unset `--gl-surface-4`), the title semibold, the icon in the accent. Put `aria-current="true"` on the row (`aria-selected` in a listbox). Hover and press leave it as it is; the keyboard ring stays around the row |
1474
1483
  | `.glass-list__item.is-flash` | A 1.2s flash for an item that changed elsewhere — on another device, by an undo — so the eye finds it; tinted by `--gl-flash-color` (unset: the primary at 30 %), none under `prefers-reduced-motion` (since 1.32.0). Take the class off on `animationend`; GlassKit Elements' `highlight()` sets it |
1475
1484
 
1476
1485
  **Notes:**
1477
1486
  - Dividers are auto-rendered via `::after`. The last item never has a divider.
1478
1487
  - Items **with** a `__leading` slot get an icon-aligned divider inset; items **without** one — or with a `__leading` that carries the `hidden` attribute (since 1.20.0) — get the standard padding inset (handled via `:has()`). Large leading (`--lg`) adjusts the divider inset automatically.
1488
+ - **Type and the chosen row (since 1.35.0):** `--gl-list-title-size`, `--gl-list-title-weight` and `--gl-list-subtitle-size` set a row's type, on the list or one row. `--gl-list-item-selected-inset` (3px `--gl-space-xs`), `-radius` (`--gl-radius-sm`), `-shadow`, `-color` (heading) and `-weight` (semibold) shape the chosen row; `0`, `0`, `none` make a flat tint over the whole row.
1489
+ - **Where the divider starts (since 1.34.0):** `--gl-list-item-divider-inset` overrides the start for rows laid out otherwise. A row whose first child is a `.glass-sort__handle` (the grip before the icon) lets the line run from its padding, since the grip's width is the page's — set the token to where the text begins, e.g. `90px` for an 18px grip and a 28px icon.
1479
1490
  - A `__leading` or `__trailing` with `hidden` takes no room (since 1.20.0; `display: flex` used to beat the attribute).
1480
1491
  - SVG icon convention: `24px` for leading (32px for `--lg`), `18px` for trailing, `stroke: currentColor`, `stroke-width: 2`.
1481
1492
  - Use `<ul>` + `<li>` for semantic lists. For interactive rows wrap in `<a>` or `<button>` instead of `<li>` if a single-row list is needed.
@@ -1728,6 +1739,7 @@ More options than fit — seven areas on a phone: without a modifier the row sta
1728
1739
  | `.glass-segmented__item--success` / `--warning` / `--error` | Tone: sets `--gl-segmented-tone` for the dot |
1729
1740
  | `.glass-segmented__dot` | The dot before the label, in the tone colour |
1730
1741
  | `.glass-segmented__icon` | An icon before the label (since 1.28.0): an SVG strokes in the option's colour, a font icon or any element inherits it; 18px |
1742
+ | `.glass-segmented__icon--color` | A coloured logo keeps its own fills and strokes (since 1.35.0); without it an SVG strokes as a line icon, and a logo's shapes came out outlined |
1731
1743
  | `.glass-segmented--icons` | Icons alone, square options; each option's name in `aria-label` and `title` (since 1.28.0) |
1732
1744
  | `.glass-segmented__badge` | A count after the label — neutral, or in the option's tone; inside `__icon` at the icon's corner (since 1.29.0) |
1733
1745
  | `.glass-segmented__badge--primary` / `--success` / `--warning` / `--error` | The count in a colour of its own, whatever the option's tone, without the dot (since 1.31.0) |
@@ -1819,6 +1831,10 @@ Show: remove `hidden`, force a reflow (`void overlay.offsetHeight`), add `.is-ac
1819
1831
  | `.glass-sheet` | The panel: milky glass, top corners rounded, bottom safe-area padding |
1820
1832
  | `.glass-sheet--inline` | In the flow, no overlay, all corners rounded |
1821
1833
  | `.glass-sheet__grip`, `__title`, `__body`, `__actions` | Grip bar, heading, body, action column |
1834
+ | `.glass-sheet__head` > `__leading`, `__heading` (`__eyebrow` + `__title`), `__trailing`, `__close` | The head (since 1.35.0): a chip or mark before the title, a short line above it, a badge after it, a round 32px glass close button (44px target) at its end; a title alone in `__head` stands as before |
1835
+ | `.glass-sheet-overlay--start` / `--end` | The panel at that side (since 1.35.0): full height less `--gl-sheet-side-inset` (16px), `--gl-sheet-side-width` (440px), card corners, slides in from the side (mirrored in RTL), no grip, actions side by side |
1836
+ | `.glass-sheet-overlay--modeless` | No scrim, no blur, only the panel takes the pointer — open the dialog with `show()`; the page stays usable and later modals lie above it. `--gl-sheet-z-index` (1000) |
1837
+ | `--gl-sheet-bg` | Replaces the panel's surface (since 1.35.0). In dark mode the glow starts at `--gl-dialog-glow-top`, and controls on it take the dialog values (see the tokens in section 2) |
1822
1838
 
1823
1839
  ---
1824
1840
 
@@ -2042,7 +2058,7 @@ Levels that open and close (since 1.32.0): the structure of an app, menus with s
2042
2058
  | `.glass-tree__row.is-flash` | A 1.2s flash for an item that changed elsewhere, in `--gl-flash-color`, as on list items (since 1.32.0) |
2043
2059
  | `.glass-tree__row.is-focus-visible` | The focus ring, for a script that marks the focus itself. Where the `treeitem` takes the focus, `:focus-visible` on it already draws the ring on its row, not the browser's outline around the whole item (since 1.32.0); `:focus-visible` on the row itself works as well |
2044
2060
  | `.glass-tree__twisty` | The chevron; mirrored right to left |
2045
- | `.glass-tree__icon` | 18px icon; empty or `hidden` takes no room |
2061
+ | `.glass-tree__icon` | The icon field, `--gl-tree-icon-size` square (18px) with its SVG (since 1.34.0) — `28px` for a tinted chip as list rows show; empty or `hidden` takes no room |
2046
2062
  | `.glass-tree__label` | One line with an ellipsis |
2047
2063
  | `.glass-tree__trailing` | Muted, at the row's end |
2048
2064
  | `.glass-tree__group` | The children, `role="group"`; `hidden` while the item is closed |
@@ -2104,7 +2120,8 @@ The states of a drag that reorders a list or a tree (since 1.32.0). The dragged
2104
2120
  | `.is-sort-source` | The dragged item where it was: faded to 0.4 |
2105
2121
  | `.glass-sort__ghost` | The raised copy that follows the pointer, in the top layer (`popover="manual"`); never takes the pointer, and is hidden while closed |
2106
2122
  | `.is-sort-before` / `.is-sort-after` | On the target row: a primary line above or below it, indented by `--gl-tree-level` |
2107
- | `.is-sort-inside` | On a row that takes the item inside it — a tree item, a submenu: tint and ring |
2123
+ | `.is-sort-inline` | With `.is-sort-before` / `.is-sort-after`, for items side by side — tiles in a grid (since 1.34.0): the line stands upright at the start or end edge |
2124
+ | `.is-sort-inside` | On a row that takes the item inside it — a tree item, a submenu: tint and ring; since 1.34.0 also over the hover of an interactive row and over the chosen state, which covered the tint before |
2108
2125
  | `.is-sort-refused` | With one of the above: the target refuses the item — the error colour |
2109
2126
  | `.glass-sort__handle` | A grip: with one, only the handle starts a drag, so a tap on the row still chooses it, and a finger on it drags at once (`touch-action: none`) |
2110
2127