@jungherz-de/glasskit 1.36.0 → 1.37.0

package/CHANGELOG.md

@@ -7,6 +7,31 @@ GlassKit uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [1.37.0] – 2026-10-29
+
+### Added
+
+- **An avatar's size as a token, and avatars that fit a list row: `--gl-avatar-size`, `--gl-avatar-font-size`.** A contact list shows a 40px avatar per row. The avatar knew 44px, 32px with `--sm` and 56px with `--lg`, so the 40px leading box of a `--lg` row cut a 44px one, and a 32px one looked lost in it.
+  - `--gl-avatar-size` sets any size, on the avatar or a container around it, and `--gl-avatar-font-size` the initials' size with it.
+  - In a list row's `__leading` an avatar takes the box's size: 28px, and 40px in `--lg`. The token on the avatar itself still decides.
+
+  ([GlassKit Elements #58](https://github.com/JUNGHERZ/GlassKit-Elements/issues/58))
+- **A placeholder for the select, in the placeholder colour.** The native pattern, a first option with an empty value, `disabled` and `hidden`, is chosen while nothing is, and `.glass-select` now says it in `--gl-placeholder`, as an input does. A first real option standing in for "nothing chosen" cannot be chosen, since picking the option already shown changes nothing. ([GlassKit Elements #59](https://github.com/JUNGHERZ/GlassKit-Elements/issues/59))
+- **A character counter at the end of the label row: `.glass-input-group__counter`.** A meta description of 145 characters needs its count in view. In `__label-end` it reads "48/145" in the muted colour, and with `.is-over` past the limit in the error colour, since a value set by script may be longer. After a link in the same place it keeps its distance. ([GlassKit Elements #60](https://github.com/JUNGHERZ/GlassKit-Elements/issues/60))
+
+### Compatibility
+
+- No theme token is new, so the no-JS light mirror of GlassKit Web needs nothing.
+- An avatar in a list row's leading box is 28px, and 40px in `--lg`. Before, it kept its own size there: a 44px one overflowed the 28px box and was cut by the 40px one.
+
+Measured in Chromium 153, WebKit 26.6 and Firefox 151, 1.36.0 against 1.37.0, through GlassKit Elements 1.37.0:
+- **Avatar:** in a `--lg` leading box an avatar is 40px with 15px initials, whatever its size class (before: 44px cut to 40, or 32px). In a plain leading box it is 28px with 13px initials (before: 44px). With `--gl-avatar-size: 36px` on a container it is 36px. Outside lists the three sizes stay 44, 32 and 56px.
+- **Select:** with the placeholder option chosen, the field's text is in `--gl-placeholder`, rgba(26, 42, 54, 0.3) in light mode, and `required` reports `valueMissing`.
+- **Counter:** "10/10" at the end of the label row in the muted colour, "12/10" with `.is-over` in rgb(220, 53, 69), and after a link in the same place.
+- **Pages:** docs, showcase and landing pages render as in 1.36.0.
+
+---
+
 ## [1.36.0] – 2026-10-29
 
 ### Added
@@ -1514,6 +1539,7 @@ during development. Version 1.3 is the first public open-source release.
 
 ---
 
+[1.37.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.37.0
 [1.36.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.36.0
 [1.35.1]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.35.1
 [1.35.0]: https://github.com/JUNGHERZ/GlassKit/releases/tag/v1.35.0

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <img src="https://img.shields.io/badge/version-1.36.0-orange?style=flat-square" alt="Version">
+  <img src="https://img.shields.io/badge/version-1.37.0-orange?style=flat-square" alt="Version">
   <img src="https://img.shields.io/badge/CSS-only-blue?style=flat-square" alt="CSS only">
   <img src="https://img.shields.io/badge/components-38-green?style=flat-square" alt="Components">
   <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.36.0-f5a623?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.37.0-f5a623?style=flat-square" alt="Changelog"></a>
   <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>
   <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>
 </p>
@@ -74,22 +74,22 @@ No download, no build tool – just include and go:
 
 ```html
 <!-- jsDelivr – Minified -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.36/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.37/glasskit.min.css">
 
 <!-- jsDelivr – Unminified (for reading/debugging) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.36/glasskit.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.37/glasskit.css">
 
 <!-- unpkg – Alternative -->
-<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.36/glasskit.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@jungherz-de/glasskit@1.37/glasskit.min.css">
 ```
 
-> **Tip:** Replace `@1.36` with `@latest` for the newest version – or pin to a specific version for maximum stability.
+> **Tip:** Replace `@1.37` with `@latest` for the newest version – or pin to a specific version for maximum stability.
 
 The [droplet](#-droplet-a-fluid-selection) takes one optional module next to the stylesheet:
 
 ```html
 <script type="module">
-  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.36/glasskit-droplet.js';
+  import { attachDroplets } from 'https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.37/glasskit-droplet.js';
   attachDroplets();
 </script>
 ```
@@ -589,6 +589,7 @@ All visual values are controlled via CSS Custom Properties:
 --gl-list-item-selected-bg      /* the pill of the chosen list row; unset --gl-surface-4 */
 --gl-list-item-selected-inset / -radius / -shadow / -color / -weight   /* the chosen row's pill and title; 0, 0, none: a flat tint */
 --gl-list-leading-width         /* 28px, 40px with --lg: the leading box, for a time and a chip */
+--gl-avatar-size / --gl-avatar-font-size   /* an avatar's size and its initials; in a list's leading box 28px, 40px with --lg */
 --gl-list-title-size / --gl-list-title-weight / --gl-list-subtitle-size   /* a row's type */
 --gl-sheet-bg / --gl-modal-bg   /* replace the surface of sheet and modal */
 --gl-sheet-side-width / --gl-sheet-side-inset / --gl-sheet-z-index   /* 440px, 16px, 1000: a sheet at a side */

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-css
-description: GlassKit is a pure CSS glassmorphism component library (v1.36.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.
+description: GlassKit is a pure CSS glassmorphism component library (v1.37.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.
 ---
 
 # GlassKit CSS – AI Component Reference
@@ -14,6 +14,8 @@ description: GlassKit is a pure CSS glassmorphism component library (v1.36.0) wi
 
 > **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).
 
+> **New in 1.37.0 — avatars that fit a list row, a placeholder for the select, a character counter.** `--gl-avatar-size` and `--gl-avatar-font-size` size `.glass-avatar` (3.9), and in a list row's `__leading` an avatar takes the box's size, 28px, 40px in `--lg` — a contact list (3.24). A first `<option value="" disabled hidden>` in a `.glass-select` shows in the placeholder colour (3.16). `.glass-input-group__counter` counts characters at the end of the label row, `.is-over` past `maxlength` (3.14).
+
 > **New in 1.36.0 — a sheet head with room below the title, tokens for its close button, insets per edge; a wider list icon box.** `.glass-sheet__subtitle` stands below the title in `__heading` (a badge there leaves the title its width), `--gl-sheet-close-size`, `--gl-sheet-close-icon-size` and `--gl-sheet-close-icon-stroke` resize the × (32px, 16px, 2), `--gl-sheet-side-inset-block-start`/`-block-end` set a side sheet's top and bottom on their own, and an empty `__head` with `hidden` takes no room (3.31). `--gl-list-leading-width` widens `__leading` for a time and a chip, the divider follows, and the chosen row's title takes the row's colour, so `--gl-list-item-selected-color` reaches it (3.24). `.glass-status p` has no margin of its own (3.11).
 
 > **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.**
@@ -891,6 +893,12 @@ Glass circles in three sizes. For initials, icons, or images.
 | `.glass-avatar--sm` | Small |
 | `.glass-avatar--lg` | Large |
 
+Sizes: 44px, `--sm` 32px, `--lg` 56px. **`--gl-avatar-size` (since 1.37.0)** sets any other size, on the avatar or a container around it, and `--gl-avatar-font-size` the initials' size with it. In the `__leading` box of a list row an avatar takes the box's size: 28px, and 40px in `--lg` — a contact list. Before, a 44px avatar was cut by the 40px box and a 32px one looked lost in it. A token on the avatar itself still decides.
+
+```html
+<span class="glass-list__leading glass-list__leading--lg"><span class="glass-avatar">LH</span></span>   <!-- 40px -->
+```
+
 ---
 
 ### 3.10 Divider
@@ -1099,6 +1107,7 @@ Date and time fields (`type="date"`, `time`, `datetime-local`, `month`) take the
 | `.glass-input-wrap--prefix` / `--suffix` | Makes room in the field; also automatic where `:has()` is supported |
 | `.glass-input-group--label-end` | The group draws `__label-end` on the label's line, at its end (since 1.33.0) |
 | `.glass-input-group__label-end` | A link such as "Forgot password?", written **after** the field so the keyboard reaches it after the field |
+| `.glass-input-group__counter` | A character counter in that place, "48/145", muted; `.is-over` past the limit in the error colour (since 1.37.0) |
 
 **Prefix and suffix (since 1.22.0).** The affixes lie on the field, centred; its padding grows by `--gl-input-prefix-size` / `--gl-input-suffix-size` (18px — an icon — unless set; set it for a wider unit). A click on text, an icon or a disabled control reaches the field; enabled controls, links and elements with `tabindex` take their own, form-associated custom elements such as `<glk-button>` included (since 1.22.2 — before, a disabled button took the click and a `<glk-button>` got none). They take it even inside a container locked with `pointer-events: none`: lock it with `inert`, or disable them. `<glk-input>` in GlassKit Elements has `prefix` / `suffix` slots on this and measures the width itself.
 
@@ -1124,6 +1133,16 @@ Date and time fields (`type="date"`, `time`, `datetime-local`, `month`) take the
 </div>
 ```
 
+**A character counter (since 1.37.0).** `.glass-input-group__counter` in that place counts the value's characters, "48/145" with `maxlength`, in the muted colour, and with `.is-over` past the limit in the error colour — a value set by script may be longer, `maxlength` only stops typing. Update it on `input`, and tie it to the field with `aria-describedby` so a screen reader reads it with the field. After a link in the same place it keeps its distance. In GlassKit Elements: `counter` on `<glk-input>` and `<glk-textarea>`.
+
+```html
+<div class="glass-input-group glass-input-group--label-end">
+  <label class="glass-label" for="meta">Meta description</label>
+  <textarea class="glass-textarea" id="meta" maxlength="145" aria-describedby="meta-count"></textarea>
+  <span class="glass-input-group__label-end glass-input-group__counter" id="meta-count">0/145</span>
+</div>
+```
+
 ---
 
 ### 3.15 Textarea
@@ -1160,6 +1179,15 @@ Dropdown with glass styling and custom chevron.
 
 The chevron is the token `--gl-select-chevron` — an SVG `url(…)` in each theme's muted text colour (since 1.20.0; before, it stayed white in the light theme). Override it with your own `url(…)`. Right to left, chevron and padding move to the left.
 
+**A placeholder (since 1.37.0)** is the native pattern: a first option with an empty value, `disabled` and `hidden`, `selected` while nothing is chosen. It cannot be picked, `required` keeps the form from submitting while it shows, and the field says it in the placeholder colour (`--gl-placeholder`), as an input does. **Do not** use a first real option such as "Please select…" for "nothing chosen": picking the option already shown changes nothing, so it cannot be chosen. In GlassKit Elements: `placeholder` on `<glk-select>`.
+
+```html
+<select class="glass-select" required>
+  <option value="" disabled hidden selected>Choose a kind…</option>
+  <option value="facebook">Facebook</option>
+</select>
+```
+
 ---
 
 ### 3.17 Search