@jungherz-de/glasskit-elements 1.28.1 → 1.29.0

package/CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.29.0] – 2026-10-21
+
+Versions stay aligned with GlassKit at 1.29.0, which this release is built against (peer dependency `>=1.29.0`).
+
+### Added
+
+- **A count per option in `<glk-segmented>`: `badge` and `badgeLabel`.** In an admin area a customer record has a row of tabs — payments, subscriptions, invoices, tickets — and a tab should say that something waits there, and how much. `tone` puts a dot before the label, which says that, not how much, so the count went into the label ("Current (2)"), where it read as part of it and could be neither styled nor announced apart. An option is `{ value, label, tone?, disabled?, badge?, badgeLabel? }` now. `badge`, a number or a short text, shows as GlassKit 1.29.0's `.glass-segmented__badge` after the label, neutral or in the tone's colour; missing, empty or `0` shows none. The button's name says it with the label, "Tickets, 1", and `badgeLabel` words it, "Tickets, 1 open". With `icon-only` the badge sits at the icon's corner, as on `<glk-tab-item>`, and the button's `title` carries it as well. Measured in Chromium 153, WebKit 26.6 and Firefox 151: the badges stand after their labels, or 4px above and 8px beyond the icon in an icon-only row; the names read "Payments, 2", "Invoices, 12 open", "Alerts, 1 new", and "Mails" for a `0`; the drop covers the chosen option with its badge, and in a scrolling row the option stays centred; a tap on a badge chooses its option. ([#19](https://github.com/JUNGHERZ/GlassKit-Elements/issues/19))
+- **New options with the same values in the same order fill the buttons in place.** Setting `options` rebuilt every button, so a keyboard user on the row lost the focus whenever a count changed, and the drop was handed a new element. Now the buttons stay and take their new label, tone, icon box and count; other values or another order rebuild the row as before. Measured in all three engines: after three counts changed, the six buttons are the same nodes, the focus stays on the focused option, the drop stays where it was, and no `glk-change` fires; in 1.28.1 the buttons were new and the focus was gone. ([#19](https://github.com/JUNGHERZ/GlassKit-Elements/issues/19))
+
+---
+
 ## [1.28.1] – 2026-10-20
 
 GlassKit is unchanged; the peer dependency stays `>=1.28.0`.
@@ -935,7 +946,8 @@ Starting with this release, GlassKit Elements version numbers are aligned with G
 
 ---
 
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.28.1...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.29.0...HEAD
+[1.29.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.29.0
 [1.28.1]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.28.1
 [1.28.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.28.0
 [1.27.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.27.0

package/README.md

@@ -5,7 +5,7 @@
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-44cc11?style=flat-square" alt="Vanilla JS"></a>
   <a href="#"><img src="https://img.shields.io/badge/components-36-7ec8e3?style=flat-square" alt="36 Components"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.28.1-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.29.0-lightgrey?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fglasskit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 
@@ -67,7 +67,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 
 ```html
 <!-- 1. GlassKit CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.28/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.29/glasskit.min.css">
 
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -105,7 +105,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 <!DOCTYPE html>
 <html data-theme="dark">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.28/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.29/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -165,7 +165,7 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 | `<glk-checkbox>` | Checkbox | `label`, `checked`, `disabled`, `required` |
 | `<glk-radio>` | Radio button | `label`, `name`, `value`, `checked`, `required` (per group) |
 | `<glk-range>` | Range slider | `label`, `min`, `max`, `value`, `step` |
-| `<glk-segmented>` | Small exclusive choice as one control, icons per option in `slot="icon-<value>"`; form-associated | `options` (JSON), `value`, `full`, `overflow` (scroll, wrap), `droplet`, `icon-only`, `label`, `name` |
+| `<glk-segmented>` | Small exclusive choice as one control, icons per option in `slot="icon-<value>"`, a count per option (`badge`); form-associated | `options` (JSON), `value`, `full`, `overflow` (scroll, wrap), `droplet`, `icon-only`, `label`, `name` |
 | `<glk-calendar>` | One month with a day to pick; keyboard navigation, `Intl` names; form-associated | `month`, `value`, `today`, `min`, `max`, `marks`, `locale`, `week-start`, `label`, `name` |
 | `<glk-image-picker>` | One image with preview, resized on the client, EXIF rotation applied; not form-associated | `src`, `label`, `hint`, `round`, `max`, `type`, `quality`, `accept` |
 
@@ -257,7 +257,14 @@ Since 1.28.0 a tab item and each segmented option take icons that are not inline
 
 `glk-tab-select` is cancelable and comes before `active` changes: `event.preventDefault()` keeps the current tab — for an item that opens a drawer or a link — and the bar, its drop and `glk-tab-change` stay put. `droplet` and `floating` are properties of `<glk-tab-bar>` as well. The action buttons of `<glk-modal>` follow attribute changes of their originals, so a confirm button that starts `disabled` unlocks when the page or a framework enables it.
 
-> **Requires GlassKit CSS >= 1.28.0.** The icon colours come from GlassKit's icon boxes; its new tokens reach the elements by inheritance: `--gl-tab-bar-color`, `--gl-tab-bar-hover-color`, `--gl-tab-bar-label-size`, `--gl-tab-bar-z-index` for the tab bar, `--gl-segmented-active-bg`, `-shadow` and `-color` for the chosen option and its drop.
+Since 1.29.0 a segmented option also takes a count, `badge`, shown as a pill after its label or at the icon's corner, with `badgeLabel` for the words a screen reader says — `"Tickets, 1 open"`. New options with the same values fill the buttons in place, so a live count keeps the focus and the drop:
+
+```html
+<glk-segmented droplet overflow="scroll" label="Customer" value="invoices"
+  options='[{"value":"invoices","label":"Invoices","badge":2},{"value":"tickets","label":"Tickets","tone":"warning","badge":1,"badgeLabel":"1 open"}]'></glk-segmented>
+```
+
+> **Requires GlassKit CSS >= 1.28.0** (1.29.0 for the counts). The icon colours come from GlassKit's icon boxes; its new tokens reach the elements by inheritance: `--gl-tab-bar-color`, `--gl-tab-bar-hover-color`, `--gl-tab-bar-label-size`, `--gl-tab-bar-z-index` for the tab bar, `--gl-segmented-active-bg`, `-shadow` and `-color` for the chosen option and its drop.
 
 ### Solid and tint surfaces
 

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-elements
-description: GlassKit Elements is a vanilla-JS Web Components library (v1.28.1) wrapping GlassKit CSS v1.28.0. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
+description: GlassKit Elements is a vanilla-JS Web Components library (v1.29.0) wrapping GlassKit CSS v1.29.0. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
 ---
 
 # GlassKit Elements – AI Component Reference
@@ -1153,7 +1153,7 @@ A small, exclusive choice as one control (since 1.15.0) — traffic light, morni
 
 | Attribute | Type | Description |
 |---|---|---|
-| `options` | JSON | `[{ value, label, tone?, disabled? }]`; `tone` is `success` \| `warning` \| `error` and puts a dot in that colour before the label |
+| `options` | JSON | `[{ value, label, tone?, disabled?, badge?, badgeLabel? }]`; `tone` is `success` \| `warning` \| `error` and puts a dot in that colour before the label; `badge` is a count after the label (since 1.29.0), `badgeLabel` words it for the name |
 | `value` | String | Value of the chosen option (reflected property) |
 | `full` | Boolean | Buttons share the width |
 | `overflow` | String | What happens when the options do not fit: `scroll` — one row that scrolls sideways, the chosen option kept in view; `wrap` — breaks into lines. Without it the row stays one line (since 1.17.0) |
@@ -1178,6 +1178,14 @@ Properties: `value`, `options` (array or JSON text), `full`, `overflow`, `label`
 
 GlassKit 1.28.0's tokens for the chosen option reach the element by inheritance: `--gl-segmented-active-bg`, `--gl-segmented-active-shadow` and `--gl-segmented-active-color` — for a dark brand, on which the light surface leaves a white label below 4.5:1. The drop takes the same surface.
 
+**Counts (since 1.29.0).** `badge` on an option shows how much waits behind it — open invoices, new tickets — as a pill after the label (GlassKit's `.glass-segmented__badge`, tabular figures), neutral without a tone and in the tone's colour with one. A number or a short text; missing, empty or `0` shows none. Use it instead of a count in the label: `"Tickets (1)"` reads as part of the label and can be neither styled nor announced apart. The button's name says both, `"Tickets, 1"`; `badgeLabel` words it, `"Tickets, 1 open"`. With `icon-only` the badge sits at the icon's corner, as on `<glk-tab-item>`, and the button's `title` carries it too. Setting `options` again with the same values in the same order fills the buttons in place, so a live count keeps the focus and the drop; other values rebuild the row.
+
+```html
+<glk-segmented droplet overflow="scroll" label="Customer" value="invoices"
+  options='[{"value":"payments","label":"Payments"},{"value":"invoices","label":"Invoices","badge":2},{"value":"tickets","label":"Tickets","tone":"warning","badge":1,"badgeLabel":"1 open"}]'>
+</glk-segmented>
+```
+
 With `overflow="scroll"` the chosen option is centred in the row after the first layout, on every value change and when the row's width changes — the row scrolls, never the page. Seven areas on a phone:
 
 ```html

package/dist/components/glk-segmented.js

@@ -6,7 +6,11 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 // One button per option, the chosen one marked aria-pressed="true" — GlassKit
 // styles exactly that attribute. Came back from EhrenPfoten in 1.15.0.
 //
-// Attributes: options (JSON [{value,label,tone?,disabled?}]), value, full,
+// Attributes: options (JSON [{value,label,tone?,disabled?,badge?,badgeLabel?}]
+//             — badge since 1.29.0: a count after the label, GlassKit's
+//             .glass-segmented__badge, in the tone's colour where one is
+//             set; missing, empty or 0 shows none; badgeLabel words it for
+//             the name, "1 open"), value, full,
 //             overflow ("scroll" | "wrap": what happens when the options
 //             do not fit — without it the row stays one line and runs past
 //             the edge), label (aria-label of the group), name (form field),
@@ -28,7 +32,9 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 //
 // Form-associated: a surrounding <form> receives name=value, reset restores
 // the initial value. A value change only re-sets aria-pressed, never rebuilds,
-// so focus stays on the button that was pressed.
+// so focus stays on the button that was pressed. New options with the same
+// values in the same order — a count that changed — fill the buttons in
+// place (since 1.29.0), so the focus and the drop stay as well.
 //
 // overflow="scroll" keeps the chosen option in view: it is centred in the
 // row after the first layout, on every value change and when the row's width
@@ -50,6 +56,13 @@ function parseList(json) {
   }
 }
 
+/** The text of an option's count; empty when there is none to show. */
+function badgeText(badge) {
+  if (badge == null || badge === false) return '';
+  const text = String(badge).trim();
+  return text === '0' ? '' : text;
+}
+
 class GlkSegmented extends GlkFormElement {
   static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label', 'droplet', 'icon-only']; }
 
@@ -67,33 +80,54 @@ class GlkSegmented extends GlkFormElement {
   }
 
   _build() {
-    this._group.replaceChildren();
+    const list = parseList(this.getAttribute('options'));
     const iconOnly = this.iconOnly;
-    for (const option of parseList(this.getAttribute('options'))) {
-      const value = String(option.value ?? '');
-      const label = String(option.label ?? value);
-      const button = this.createElement('button', ['glass-segmented__item'], { type: 'button', 'data-value': value });
-      if (TONES.includes(option.tone)) {
-        button.classList.add(`glass-segmented__item--${option.tone}`);
-        button.appendChild(this.createElement('span', ['glass-segmented__dot']));
-      }
-      // The label names the button; an icon font's text must not join it.
-      const icon = this.createElement('span', ['glass-segmented__icon'], { 'aria-hidden': 'true' });
-      icon.appendChild(this.createElement('slot', [], { name: `icon-${value}` }));
-      button.appendChild(icon);
-      if (iconOnly) {
-        button.setAttribute('aria-label', label);
-        button.title = label;
-      } else {
-        button.appendChild(document.createTextNode(label));
-      }
-      this._group.appendChild(button);
-    }
+    // The same values in the same order keep their buttons; anything else
+    // starts the row afresh.
+    const buttons = [...this._group.children];
+    const same = buttons.length === list.length
+      && list.every((option, i) => buttons[i].dataset.value === String(option.value ?? ''));
+    if (!same) this._group.replaceChildren(...list.map(() => this.createElement('button', [], { type: 'button' })));
+    [...this._group.children].forEach((button, i) => this._fill(button, list[i], iconOnly));
     this._syncIcons();
     this.applyDisabled(this._actuallyDisabled);
     this._syncValue();
   }
 
+  /** Gives an option's button its tone, icon box, label and count. */
+  _fill(button, option, iconOnly) {
+    const value = String(option.value ?? '');
+    const label = String(option.label ?? value);
+    const parts = [];
+    button.className = 'glass-segmented__item';
+    button.dataset.value = value;
+    if (TONES.includes(option.tone)) {
+      button.classList.add(`glass-segmented__item--${option.tone}`);
+      parts.push(this.createElement('span', ['glass-segmented__dot']));
+    }
+    // The label names the button; an icon font's text must not join it.
+    const icon = this.createElement('span', ['glass-segmented__icon'], { 'aria-hidden': 'true' });
+    icon.appendChild(this.createElement('slot', [], { name: `icon-${value}` }));
+    parts.push(icon);
+    if (!iconOnly) parts.push(document.createTextNode(label));
+    // The count after the label, or at the icon's corner in an icon-only row;
+    // the name says it in words — "Tickets, 1 open".
+    const badge = badgeText(option.badge);
+    let name = label;
+    if (badge) {
+      const pill = this.createElement('span', ['glass-segmented__badge']);
+      pill.textContent = badge;
+      if (iconOnly) icon.appendChild(pill);
+      else parts.push(pill);
+      name = `${label}, ${option.badgeLabel ? String(option.badgeLabel) : badge}`;
+    }
+    button.replaceChildren(...parts);
+    if (iconOnly || badge) button.setAttribute('aria-label', name);
+    else button.removeAttribute('aria-label');
+    if (iconOnly) button.title = name;
+    else button.removeAttribute('title');
+  }
+
   /** An option shows its icon box only while an icon is slotted into it. */
   _syncIcons() {
     for (const slot of this._group.querySelectorAll('.glass-segmented__icon > slot')) {