@jungherz-de/glasskit-elements 1.16.1 → 1.18.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-33-7ec8e3?style=flat-square" alt="33 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.16.1-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.18.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>
 
@@ -66,7 +66,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.16/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.18/glasskit.min.css">
 
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -104,7 +104,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.16/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.18/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -137,7 +137,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 | Component | Description | Key Attributes |
 |---|---|---|
 | `<glk-card>` | Glass-effect content card | `glow`, `fill` |
-| `<glk-badge>` | Inline status badge, or a filter chip with `interactive` | `variant` (primary, success, error), `interactive`, `selected` |
+| `<glk-badge>` | Inline status badge, or a filter chip with `interactive` | `variant` (primary, success, warning, error), `interactive`, `selected` |
 | `<glk-avatar>` | Circular avatar | `size` (sm, lg), `src` |
 | `<glk-title>` | Styled heading | — |
 | `<glk-divider>` | Horizontal divider | — |
@@ -156,7 +156,7 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 
 | Component | Description | Key Attributes |
 |---|---|---|
-| `<glk-input>` | Text input with label & hint | `label`, `type`, `placeholder`, `hint`, `error`, `required` |
+| `<glk-input>` | Text input with label & hint | `label`, `type`, `placeholder`, `hint`, `error`, `required`, `min`, `max`, `step`, `maxlength`, `pattern`, `autocomplete`, `inputmode` |
 | `<glk-textarea>` | Multi-line text input | `label`, `rows`, `placeholder` |
 | `<glk-select>` | Dropdown select | `label` (children: `<option>`) |
 | `<glk-search>` | Search input with icon | `placeholder` |
@@ -164,7 +164,7 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 | `<glk-checkbox>` | Checkbox | `label`, `checked`, `disabled` |
 | `<glk-radio>` | Radio button | `label`, `name`, `value`, `checked` |
 | `<glk-range>` | Range slider | `label`, `min`, `max`, `value`, `step` |
-| `<glk-segmented>` | Small exclusive choice as one control; form-associated | `options` (JSON), `value`, `full`, `label`, `name` |
+| `<glk-segmented>` | Small exclusive choice as one control; form-associated | `options` (JSON), `value`, `full`, `overflow` (scroll, wrap), `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` |
 

package/dist/components/glk-badge.js

@@ -1,7 +1,9 @@
 import { GlkElement } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
-const VARIANTS = ['primary', 'success', 'error'];
+// warning since 1.18.0 (needs GlassKit 1.18.0). Any other value falls back to
+// the neutral badge, as an unknown value of an enumerated attribute does.
+const VARIANTS = ['primary', 'success', 'warning', 'error'];
 
 class GlkBadge extends GlkElement {
   static get displayInline() { return true; }

package/dist/components/glk-date-strip.js

@@ -1,5 +1,6 @@
 import { GlkElement } from './base.js';
 import { f as formatters, r as resolveLocale, b as parseJsonObject, p as parseIso, i as isoDate, c as addDays, w as weekdayShort, d as isTone } from './shared/dates-CNWaJf09.js';
+import { r as revealCentered } from './shared/reveal-CjjzoxTa.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // A row of day chips that scrolls sideways — a booking horizon, the days
@@ -85,24 +86,15 @@ class GlkDateStrip extends GlkElement {
     for (const chip of this._chips()) chip.tabIndex = chip === target ? 0 : -1;
   }
 
-  // Scroll the chosen chip to the middle of the strip. Computed from client
-  // rects and applied to the strip's own scrollLeft, so the page never moves —
-  // scrollIntoView would scroll every ancestor. Before the first layout the
-  // strip has no width; the ResizeObserver in setupEvents centres then, and
-  // again whenever the strip's width changes — a parent that upgrades later
-  // and adds its padding, a window resize, a strip that starts out hidden. A
-  // value change glides unless the user asked for reduced motion; a size
-  // change snaps, so a settling layout never animates.
+  // Centre the chosen chip in the strip (see reveal.js). Before the first
+  // layout the strip has no width; the ResizeObserver in setupEvents centres
+  // then, and again whenever the strip's width changes — a parent that
+  // upgrades later and adds its padding, a window resize, a strip that
+  // starts out hidden. A value change glides; a size change snaps, so a
+  // settling layout never animates.
   _reveal(behavior = 'instant') {
     const chip = this._strip.querySelector('[aria-pressed="true"]');
-    const width = this._strip.clientWidth;
-    if (!chip || !width) return;
-    const strip = this._strip.getBoundingClientRect();
-    const box = chip.getBoundingClientRect();
-    const left = this._strip.scrollLeft + (box.left - strip.left) - (strip.width - box.width) / 2;
-    const smooth = behavior === 'smooth' && !matchMedia('(prefers-reduced-motion: reduce)').matches;
-    this._strip.scrollTo({ left: Math.max(0, left), behavior: smooth ? 'smooth' : 'instant' });
-    this._revealedAt = width;
+    if (revealCentered(this._strip, chip, behavior === 'smooth')) this._revealedAt = this._strip.clientWidth;
   }
 
   _applyLabel() {

package/dist/components/glk-input.js

@@ -1,9 +1,15 @@
 import { GlkFormElement } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
+// Attributes that belong to the inner <input> and are handed down unchanged:
+// the picker's range and step, the typing limits, the pattern, autofill and
+// the on-screen keyboard. Absent on the host means absent inside (since
+// 1.17.0 — before, a date field with min still offered every past day).
+const FORWARDED = ['min', 'max', 'step', 'minlength', 'maxlength', 'pattern', 'autocomplete', 'inputmode'];
+
 class GlkInput extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'name', 'value', 'required'];
+    return ['label', 'type', 'placeholder', 'error', 'hint', 'disabled', 'name', 'value', 'required', ...FORWARDED];
   }
 
   render() {
@@ -29,6 +35,7 @@ class GlkInput extends GlkFormElement {
 
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
     if (this.getBoolAttr('required')) this._input.required = true;
+    for (const attr of FORWARDED) this._forward(attr);
 
     // Hint
     this._hintEl = this.createElement('span', this._computeHintClasses());
@@ -98,9 +105,17 @@ class GlkInput extends GlkFormElement {
       case 'required':
         this._input.required = this.getBoolAttr('required');
         break;
+      default:
+        if (FORWARDED.includes(name)) this._forward(name);
     }
   }
 
+  _forward(attr) {
+    const value = this.getAttribute(attr);
+    if (value === null) this._input.removeAttribute(attr);
+    else this._input.setAttribute(attr, value);
+  }
+
   _computeInputClasses() {
     const classes = ['glass-input'];
     if (this.getBoolAttr('error')) classes.push('glass-input--error');

package/dist/components/glk-segmented.js

@@ -1,20 +1,32 @@
 import { GlkFormElement } from './base.js';
+import { r as revealCentered } from './shared/reveal-CjjzoxTa.js';
 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,
-//             label (aria-label of the group), name (form field name)
-// Properties: value, options (array or JSON text), full, label
+//             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)
+// Properties: value, options (array or JSON text), full, overflow, label
 // Event:      glk-change { value } — only on a change made by the user
 // Part:       group
 //
 // 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.
+//
+// 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
+// changes, through the row's own scrolling, so the page never moves (since
+// 1.17.0). The attribute is not called "scroll": that is a method of every
+// element, and a framework that sets a property whenever the element has one
+// (hybrids, Vue, React 19) would overwrite the method instead of setting the
+// attribute.
 
 const TONES = ['success', 'warning', 'error'];
+const OVERFLOWS = ['scroll', 'wrap'];
 
 function parseList(json) {
   try {
@@ -26,14 +38,14 @@ function parseList(json) {
 }
 
 class GlkSegmented extends GlkFormElement {
-  static get observedAttributes() { return ['options', 'value', 'full', 'label']; }
+  static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label']; }
 
   render() {
     this._group = this.createElement('div', ['glass-segmented'], { role: 'group', part: 'group' });
     this._wrapper.appendChild(this._group);
     this._initialValue = this.value;
     this._build();
-    this._applyFull();
+    this._applyLayout();
     this._applyLabel();
   }
 
@@ -59,10 +71,20 @@ class GlkSegmented extends GlkFormElement {
       button.setAttribute('aria-pressed', String(button.dataset.value === value));
     }
     this.setFormValue(value);
+    this._reveal(this._revealedAt ? 'smooth' : 'instant');
   }
 
-  _applyFull() {
+  _applyLayout() {
+    const overflow = this.overflow;
     this._group.classList.toggle('glass-segmented--full', this.getBoolAttr('full'));
+    for (const mode of OVERFLOWS) this._group.classList.toggle(`glass-segmented--${mode}`, overflow === mode);
+    this._reveal('instant');
+  }
+
+  _reveal(behavior) {
+    if (this.overflow !== 'scroll') return;
+    const pressed = this._group.querySelector('[aria-pressed="true"]');
+    if (revealCentered(this._group, pressed, behavior === 'smooth')) this._revealedAt = this._group.clientWidth;
   }
 
   _applyLabel() {
@@ -80,11 +102,16 @@ class GlkSegmented extends GlkFormElement {
       this.value = value;
       this.emit('glk-change', { value });
     };
+    this._onResize = () => { if (this._group.clientWidth !== this._revealedAt) this._reveal('instant'); };
     this._group.addEventListener('click', this._onClick);
+    this._resizeObserver = new ResizeObserver(this._onResize);
+    this._resizeObserver.observe(this._group);
   }
 
   teardownEvents() {
     this._group?.removeEventListener('click', this._onClick);
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
   }
 
   onAttributeChanged(name) {
@@ -92,7 +119,8 @@ class GlkSegmented extends GlkFormElement {
     switch (name) {
       case 'value': this._syncValue(); break;
       case 'options': this._build(); break;
-      case 'full': this._applyFull(); break;
+      case 'full':
+      case 'overflow': this._applyLayout(); break;
       case 'label': this._applyLabel(); break;
     }
   }
@@ -112,6 +140,15 @@ class GlkSegmented extends GlkFormElement {
   get full() { return this.getBoolAttr('full'); }
   set full(v) { this.setBoolAttr('full', v); }
 
+  get overflow() {
+    const v = this.getAttribute('overflow');
+    return OVERFLOWS.includes(v) ? v : '';
+  }
+  set overflow(v) {
+    if (v) this.setAttribute('overflow', String(v));
+    else this.removeAttribute('overflow');
+  }
+
   get label() { return this.getAttribute('label') || ''; }
   set label(v) {
     if (v) this.setAttribute('label', v);

package/dist/components/shared/reveal-CjjzoxTa.js

@@ -0,0 +1,21 @@
+// Scroll an item to the middle of its scrolling row — shared by
+// <glk-date-strip> and <glk-segmented overflow="scroll">. Computed from
+// client rects and applied to the row alone, where scrollIntoView would move
+// every scrolling ancestor, the page included. A relative scrollBy works in
+// both writing directions: scrollLeft runs negative in RTL, the distance on
+// screen does not. Returns false while the row has no width — before the
+// first layout, or hidden — so the caller can try again from a
+// ResizeObserver. Pass smooth for a reveal that follows a value change, not
+// for one caused by layout; reduced motion wins over it.
+
+function revealCentered(scroller, item, smooth) {
+  if (!item || !scroller.clientWidth) return false;
+  const port = scroller.getBoundingClientRect();
+  const box = item.getBoundingClientRect();
+  const delta = box.left + box.width / 2 - (port.left + scroller.clientLeft + scroller.clientWidth / 2);
+  const glide = smooth && !matchMedia('(prefers-reduced-motion: reduce)').matches;
+  scroller.scrollBy({ left: delta, behavior: glide ? 'smooth' : 'instant' });
+  return true;
+}
+
+export { revealCentered as r };