@jungherz-de/glasskit-elements 1.19.2 → 1.21.0

package/dist/components/base.js

@@ -11,25 +11,58 @@ import { tokensCss, componentsSheet } from '@jungherz-de/glasskit/glasskit-style
 // inherits them like any other custom property. They are wrapped in a cascade
 // layer so an ordinary (unlayered) brand stylesheet wins over them, no matter
 // whether it loads before or after this module.
+//
+// Only the custom properties go there. GlassKit's token blocks also set
+// color-scheme, and on the document that is no default: it switches the whole
+// page to dark — native controls, scrollbars, the root text colour, link
+// colours — on pages that never asked for GlassKit's theme. The elements set
+// color-scheme on their own theme wrapper instead (host sheet below).
+//
+// The --gl-* names themselves are still global. A page that declares them
+// itself, or wants them on part of the page only, switches the defaults off
+// with <html data-glk-defaults="off">. The attribute is watched, so it may
+// also be set or removed later.
 
 const TOKENS_INJECTED = '__glkDefaultTokensInjected';
+const DEFAULTS_ATTR = 'data-glk-defaults';
+let defaultTokensSheet = null;
 
 function injectDefaultTokens() {
   if (typeof document === 'undefined') return;              // SSR / non-DOM
   if (globalThis[TOKENS_INJECTED]) return;                   // another bundle copy did it
   globalThis[TOKENS_INJECTED] = true;
 
-  const sheet = new CSSStyleSheet();
-  sheet.replaceSync(`@layer glasskit-defaults { ${tokensCss} }`);
-  // Append — never assign — so an app's own adopted sheets survive.
-  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  const tokens = tokensCss.replace(/color-scheme\s*:[^;}]*;?/g, '');
+  defaultTokensSheet = new CSSStyleSheet();
+  defaultTokensSheet.replaceSync(`@layer glasskit-defaults { ${tokens} }`);
+  syncDefaultTokens();
+}
+
+/** Adopts or drops the default tokens to match <html data-glk-defaults>. */
+function syncDefaultTokens() {
+  if (!defaultTokensSheet) return;
+  const wanted = document.documentElement.getAttribute(DEFAULTS_ATTR) !== 'off';
+  const sheets = document.adoptedStyleSheets;
+  if (wanted === sheets.includes(defaultTokensSheet)) return;
+  // Add or remove only this sheet — never assign a fresh list — so an app's
+  // own adopted sheets survive.
+  document.adoptedStyleSheets = wanted
+    ? [...sheets, defaultTokensSheet]
+    : sheets.filter(sheet => sheet !== defaultTokensSheet);
 }
 
 injectDefaultTokens();
 
-// ── Global Theme Sync ──
-// Single MutationObserver that watches data-theme on <html>
+// ── Global Theme & Density Sync ──
+// Single MutationObserver that watches data-theme and data-density on <html>
 // and notifies all GlkElement instances.
+//
+// The density tokens themselves arrive from <html> by inheritance, like every
+// other token: GlassKit's [data-density="compact"] preset is part of
+// tokensCss, not of the components sheet. The wrapper mirrors the attribute
+// anyway, as it mirrors data-theme — a rule keyed on it (a component rule, a
+// subclass's hostStyles) can match inside a shadow root only on an element
+// there.
 
 const instances = new Set();
 
@@ -37,6 +70,11 @@ function getCurrentTheme() {
   return document.documentElement.getAttribute('data-theme') || 'dark';
 }
 
+/** The density on <html>, or null — there is no default to fall back to. */
+function getCurrentDensity() {
+  return document.documentElement.getAttribute('data-density');
+}
+
 function syncAllThemes() {
   const theme = getCurrentTheme();
   for (const instance of instances) {
@@ -44,32 +82,103 @@ function syncAllThemes() {
   }
 }
 
+function syncAllDensities() {
+  const density = getCurrentDensity();
+  for (const instance of instances) {
+    instance._syncDensity(density);
+  }
+}
+
 if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
-  const observer = new MutationObserver(syncAllThemes);
+  const observer = new MutationObserver(records => {
+    if (records.some(r => r.attributeName === 'data-theme')) syncAllThemes();
+    if (records.some(r => r.attributeName === 'data-density')) syncAllDensities();
+    if (records.some(r => r.attributeName === DEFAULTS_ATTR)) syncDefaultTokens();
+  });
   observer.observe(document.documentElement, {
     attributes: true,
-    attributeFilter: ['data-theme']
+    attributeFilter: ['data-theme', 'data-density', DEFAULTS_ATTR]
   });
 }
 
 // ── Host Stylesheet ──
 // Sets display:block on all custom elements by default.
 // Inline components (badge, avatar) override this.
+//
+// The wrapper carries the theme's color-scheme, so native parts inside the
+// elements — a select's list, a date picker, scrollbars — match the element,
+// whatever the page around it uses.
+
+const wrapperRules = `
+  .glk-wrapper { display: contents; }
+  .glk-wrapper[data-theme="dark"] { color-scheme: dark; }
+  .glk-wrapper[data-theme="light"] { color-scheme: light; }
+`;
 
 const hostSheet = new CSSStyleSheet();
 hostSheet.replaceSync(`
   :host { display: block; }
   :host([hidden]) { display: none; }
-  .glk-wrapper { display: contents; }
+  ${wrapperRules}
 `);
 
 const inlineHostSheet = new CSSStyleSheet();
 inlineHostSheet.replaceSync(`
   :host { display: inline-block; }
   :host([hidden]) { display: none; }
-  .glk-wrapper { display: contents; }
+  ${wrapperRules}
 `);
 
+/**
+ * Host rules for glk-checkbox, glk-radio and glk-toggle. Their control is an
+ * inline-flex label inside a block host; sitting on the text baseline it left
+ * room for descenders below, so the host was about 4px taller than the
+ * control and the control sat high in a centred row. Aligned to the top of
+ * its line, the label is as tall as the host.
+ */
+const checkControlSheet = new CSSStyleSheet();
+checkControlSheet.replaceSync(`
+  .glass-checkbox, .glass-radio, .glass-toggle { vertical-align: top; }
+`);
+
+// ── Clicks Aimed at the Host ──
+// The innermost target of the latest pointerdown anywhere in the document;
+// tracked once, on first use.
+let lastPressed = null;
+let trackingPresses = false;
+
+/**
+ * For elements whose control is a native input or button inside the shadow
+ * root: glk-checkbox, glk-radio, glk-toggle, glk-button. A click aimed at the
+ * host itself — host.click(), or the click a <label> around the element or
+ * naming it dispatches — reaches only the host. The control never saw it, so
+ * nothing changed where a native checkbox toggles and a native button
+ * submits. Such a click is handed to the control; the original is stopped, so
+ * listeners see one click, the control's.
+ *
+ * A pointer press on the host's own empty box (the host is a block, the
+ * control is narrower) also lands on the host. Chrome cannot tell it apart
+ * from a label's click by the event, only by where the pointer went down; it
+ * stays a no-op, as before. Returns the teardown.
+ */
+function forwardHostClicks(host, getField) {
+  if (!trackingPresses && typeof window !== 'undefined') {
+    trackingPresses = true;
+    window.addEventListener('pointerdown', e => { lastPressed = e.composedPath()[0]; },
+      { capture: true, passive: true });
+  }
+  const onClick = (e) => {
+    if (e.composedPath()[0] !== host) return;           // from inside: the input had it
+    if (e.isTrusted && lastPressed === host) return;     // a press on the empty box
+    const field = getField();
+    if (!field || field.disabled) return;
+    e.stopImmediatePropagation();
+    field.click();
+  };
+  host.addEventListener('click', onClick);
+  return () => host.removeEventListener('click', onClick);
+}
+
 // ── Base Class ──
 
 class GlkElement extends HTMLElement {
@@ -92,6 +201,13 @@ class GlkElement extends HTMLElement {
    */
   static get observesLightDom() { return false; }
 
+  /**
+   * Turned on by elements built around one native field: focus() on the
+   * host, a click on the label text and a <label for> outside all land in
+   * that field.
+   */
+  static get delegatesFocus() { return false; }
+
   static get observedAttributes() {
     return [];
   }
@@ -99,7 +215,7 @@ class GlkElement extends HTMLElement {
   constructor() {
     super();
     this._initialized = false;
-    this._shadow = this.attachShadow({ mode: 'open' });
+    this._shadow = this.attachShadow({ mode: 'open', delegatesFocus: this.constructor.delegatesFocus });
     const displaySheet = this.constructor.displayInline ? inlineHostSheet : hostSheet;
     const sheets = [componentsSheet, displaySheet];
     const extra = this.constructor.hostStyles;
@@ -115,9 +231,17 @@ class GlkElement extends HTMLElement {
       this._wrapper = document.createElement('div');
       this._wrapper.className = 'glk-wrapper';
       this._wrapper.setAttribute('data-theme', getCurrentTheme());
+      this._syncDensity(getCurrentDensity());
       this._shadow.appendChild(this._wrapper);
 
       this.render();
+    } else {
+      // Back in the document. While it was out, the observer did not reach
+      // it, so a theme or density switched in the meantime is caught up here
+      // — the wrapper's data-theme also sets the color-scheme of the native
+      // parts inside.
+      this._syncTheme(getCurrentTheme());
+      this._syncDensity(getCurrentDensity());
     }
 
     // Everything below runs on every connect, not just the first. Moving an
@@ -153,6 +277,16 @@ class GlkElement extends HTMLElement {
     }
   }
 
+  /** Mirrors data-density from <html>; without one there, the wrapper has none. */
+  _syncDensity(density) {
+    if (!this._wrapper) return;
+    if (density) {
+      this._wrapper.setAttribute('data-density', density);
+    } else {
+      this._wrapper.removeAttribute('data-density');
+    }
+  }
+
   /** Subclasses override to build inner DOM inside this._wrapper. */
   render() {}
 
@@ -240,14 +374,26 @@ class GlkFormElement extends GlkElement {
 
   static formAssociated = true;
 
+  // One native field inside, so focus goes there. The button groups
+  // (glk-segmented, glk-calendar) turn this off again: their first button is
+  // not the chosen one.
+  static get delegatesFocus() { return true; }
+
   constructor() {
     super();
     this._internals = this.attachInternals();
   }
 
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    // required, min, pattern, type … all change what counts as valid.
+    if (this._initialized) this.syncValidity();
+  }
+
   get form() { return this._internals.form; }
   get validationMessage() { return this._internals.validationMessage; }
   get validity() { return this._internals.validity; }
+  get willValidate() { return this._internals.willValidate; }
 
   checkValidity() { return this._internals.checkValidity(); }
   reportValidity() { return this._internals.reportValidity(); }
@@ -266,11 +412,38 @@ class GlkFormElement extends GlkElement {
 
   setFormValue(value) {
     this._internals.setFormValue(value);
+    this.syncValidity();
   }
 
   setValidity(flags, message, anchor) {
     this._internals.setValidity(flags, message, anchor);
   }
+
+  /**
+   * The native field whose constraint validation the host reports, or null.
+   * Subclasses built around one field return it.
+   */
+  get _validityField() { return null; }
+
+  /**
+   * A form asks the host — checkValidity(), reportValidity(), submitting — and
+   * the host knows nothing by itself, so the inner field's verdict is copied
+   * over after everything that can change it: a value (every setFormValue
+   * lands here), an attribute, a reset. The field is the anchor: the browser's
+   * bubble points at it, and reportValidity() focuses it.
+   */
+  syncValidity() {
+    const field = this._validityField;
+    if (!field) return;
+    const message = field.validationMessage;
+    // A field barred from validation (disabled) can still carry flags, but
+    // it has no message, and setValidity() refuses flags without one.
+    if (!field.willValidate || field.validity.valid || !message) {
+      this._internals.setValidity({});
+    } else {
+      this._internals.setValidity(field.validity, message, field);
+    }
+  }
 }
 
-export { GlkElement, GlkFormElement };
+export { GlkElement, GlkFormElement, checkControlSheet, forwardHostClicks };

package/dist/components/glk-accordion-item.js

@@ -10,17 +10,19 @@ class GlkAccordionItem extends GlkElement {
 
   render() {
     this._item = this.createElement('div', ['glass-accordion__item']);
-    if (this.getBoolAttr('open')) this._item.classList.add('is-open');
 
-    // Trigger button
-    this._trigger = this.createElement('button', ['glass-accordion__trigger']);
+    // Trigger button — says whether its section is open, and which one it is
+    this._trigger = this.createElement('button', ['glass-accordion__trigger'], {
+      type: 'button',
+      'aria-controls': 'content'
+    });
     this.takeTitle();
     this._triggerText = document.createTextNode(this._title || '');
     this._trigger.appendChild(this._triggerText);
     this._trigger.insertAdjacentHTML('beforeend', CHEVRON_SVG);
 
     // Content
-    this._content = this.createElement('div', ['glass-accordion__content']);
+    this._content = this.createElement('div', ['glass-accordion__content'], { id: 'content' });
     const body = this.createElement('div', ['glass-accordion__body']);
     body.appendChild(document.createElement('slot'));
     this._content.appendChild(body);
@@ -29,6 +31,19 @@ class GlkAccordionItem extends GlkElement {
     this._item.appendChild(this._content);
 
     this._wrapper.appendChild(this._item);
+    this._applyOpen();
+  }
+
+  /**
+   * A closed section is only squeezed to zero height; its links and fields
+   * stayed in the tab order. inert takes them out, and out of the
+   * accessibility tree, until the section opens.
+   */
+  _applyOpen() {
+    const open = this.getBoolAttr('open');
+    this._item.classList.toggle('is-open', open);
+    this._trigger.setAttribute('aria-expanded', String(open));
+    this._content.inert = !open;
   }
 
   setupEvents() {
@@ -47,7 +62,7 @@ class GlkAccordionItem extends GlkElement {
     if (!this._item) return;
     switch (name) {
       case 'open':
-        this._item.classList.toggle('is-open', this.getBoolAttr('open'));
+        this._applyOpen();
         break;
       case 'title':
         if (this.takeTitle(value)) this._applyTitle();

package/dist/components/glk-button.js

@@ -1,12 +1,27 @@
-import { GlkElement } from './base.js';
+import { GlkElement, forwardHostClicks } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const VARIANTS = ['primary', 'secondary', 'tertiary'];
 const SIZES = ['sm', 'md', 'lg', 'auto'];
 
+// States that whoever owns the element sets on it — <glk-popover> sets
+// aria-expanded on its trigger. Assistive technology reads the native button
+// inside, so they are handed down to it.
+const FORWARDED_ARIA = ['aria-expanded', 'aria-haspopup', 'aria-pressed'];
+
 class GlkButton extends GlkElement {
   static get observedAttributes() {
-    return ['variant', 'size', 'disabled', 'type'];
+    return ['variant', 'size', 'disabled', 'type', ...FORWARDED_ARIA];
+  }
+
+  // The native button sits in the shadow root, outside every form. Form
+  // association gives the element its form, so type="submit" and "reset"
+  // can act on it (see _activateForm).
+  static formAssociated = true;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
   }
 
   render() {
@@ -17,6 +32,7 @@ class GlkButton extends GlkElement {
     if (this.getBoolAttr('disabled')) {
       this._btn.disabled = true;
     }
+    for (const attr of FORWARDED_ARIA) this._forward(attr);
 
     this._btn.appendChild(document.createElement('slot'));
     this._wrapper.appendChild(this._btn);
@@ -30,12 +46,50 @@ class GlkButton extends GlkElement {
         return;
       }
       this.emit('glk-click');
+      this._activateForm(e);
     };
     this._btn.addEventListener('click', this._onClick);
+    // host.click() and a <label> for the element reach the host only.
+    this._unforwardClicks = forwardHostClicks(this, () => this._btn);
   }
 
   teardownEvents() {
     this._btn?.removeEventListener('click', this._onClick);
+    this._unforwardClicks?.();
+  }
+
+  /**
+   * type="submit" submits the element's form, type="reset" resets it. Both
+   * wait until the click has finished bubbling, so a listener that calls
+   * preventDefault() on the click stops them — as on a native button.
+   */
+  _activateForm(click) {
+    const type = this.getAttribute('type');
+    const form = this._internals.form;
+    if (!form || (type !== 'submit' && type !== 'reset')) return;
+    // Through the prototype: a control with id or name "reset" or
+    // "requestSubmit" in the form shadows the methods on the form itself.
+    const { reset, requestSubmit } = HTMLFormElement.prototype;
+    setTimeout(() => {
+      if (click.defaultPrevented || this._internals.form !== form) return;
+      if (type === 'reset') {
+        reset.call(form);
+        return;
+      }
+      // requestSubmit() accepts native buttons only as the submitter, so the
+      // submit event is told about this element instead. The listener goes
+      // again right away: a form that fails validation fires no submit event,
+      // and the next submit must not inherit this submitter.
+      const nameSubmitter = (e) => {
+        Object.defineProperty(e, 'submitter', { configurable: true, get: () => this });
+      };
+      form.addEventListener('submit', nameSubmitter, { capture: true });
+      try {
+        requestSubmit.call(form);
+      } finally {
+        form.removeEventListener('submit', nameSubmitter, { capture: true });
+      }
+    });
   }
 
   onAttributeChanged(name) {
@@ -51,9 +105,17 @@ class GlkButton extends GlkElement {
       case 'type':
         this._btn.setAttribute('type', this.getAttribute('type') || 'button');
         break;
+      default:
+        if (FORWARDED_ARIA.includes(name)) this._forward(name);
     }
   }
 
+  _forward(attr) {
+    const value = this.getAttribute(attr);
+    if (value === null) this._btn.removeAttribute(attr);
+    else this._btn.setAttribute(attr, value);
+  }
+
   _computeClasses() {
     const classes = ['glass-btn'];
     const variant = this.getAttribute('variant');
@@ -75,6 +137,11 @@ class GlkButton extends GlkElement {
 
   get disabled() { return this.getBoolAttr('disabled'); }
   set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  get type() { return this.getAttribute('type') || 'button'; }
+  set type(v) { this.setAttribute('type', v); }
+
+  get form() { return this._internals.form; }
 }
 
 customElements.define('glk-button', GlkButton);

package/dist/components/glk-calendar.js

@@ -46,6 +46,9 @@ class GlkCalendar extends GlkFormElement {
     return ['month', 'value', 'today', 'min', 'max', 'marks', 'locale', 'week-start', 'label', 'prev-label', 'next-label'];
   }
 
+  // Delegated focus would land on the month arrow, not on the chosen day.
+  static get delegatesFocus() { return false; }
+
   render() {
     this._root = this.createElement('div', ['glass-calendar'], { part: 'calendar' });
     const head = this.createElement('div', ['glass-calendar__head'], { part: 'head' });

package/dist/components/glk-checkbox.js

@@ -1,13 +1,15 @@
-import { GlkFormElement } from './base.js';
+import { GlkFormElement, checkControlSheet, forwardHostClicks } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const CHECKMARK_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
 
 class GlkCheckbox extends GlkFormElement {
   static get observedAttributes() {
-    return ['checked', 'disabled', 'label', 'name', 'value'];
+    return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
   }
 
+  static get hostStyles() { return checkControlSheet; }
+
   render() {
     const label = this.createElement('label', ['glass-checkbox']);
 
@@ -30,6 +32,7 @@ class GlkCheckbox extends GlkFormElement {
 
     if (this.getBoolAttr('checked')) this._input.checked = true;
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
+    if (this.getBoolAttr('required')) this._input.required = true;
 
     this._defaultChecked = this.getBoolAttr('checked');
     this._wrapper.appendChild(label);
@@ -46,10 +49,12 @@ class GlkCheckbox extends GlkFormElement {
       this.dispatchEvent(new Event('change', { bubbles: true }));
     };
     this._input.addEventListener('change', this._onChange);
+    this._unforwardClicks = forwardHostClicks(this, () => this._input);
   }
 
   teardownEvents() {
     this._input?.removeEventListener('change', this._onChange);
+    this._unforwardClicks?.();
   }
 
   onAttributeChanged(name) {
@@ -69,9 +74,14 @@ class GlkCheckbox extends GlkFormElement {
       case 'name':
         this._input.setAttribute('name', this.getAttribute('name') || '');
         break;
+      case 'required':
+        this._input.required = this.getBoolAttr('required');
+        break;
     }
   }
 
+  get _validityField() { return this._input; }
+
   _syncFormValue() {
     const val = this.getAttribute('value') || 'on';
     this.setFormValue(this._input.checked ? val : null);

package/dist/components/glk-input.js

@@ -15,12 +15,15 @@ class GlkInput extends GlkFormElement {
   render() {
     const group = this.createElement('div', ['glass-input-group']);
 
-    // Label
-    this._labelEl = this.createElement('label', ['glass-label']);
+    // Label — tied to the field by id, which only has to be unique inside
+    // this shadow root. That gives the field its accessible name, and a click
+    // on the label text focuses it.
+    this._labelEl = this.createElement('label', ['glass-label'], { for: 'field' });
     this._labelEl.textContent = this.getAttribute('label') || '';
 
     // Input
     this._input = this.createElement('input', this._computeInputClasses(), {
+      id: 'field',
       type: this.getAttribute('type') || 'text'
     });
 
@@ -37,8 +40,8 @@ class GlkInput extends GlkFormElement {
     if (this.getBoolAttr('required')) this._input.required = true;
     for (const attr of FORWARDED) this._forward(attr);
 
-    // Hint
-    this._hintEl = this.createElement('span', this._computeHintClasses());
+    // Hint — read out with the field as its description
+    this._hintEl = this.createElement('span', this._computeHintClasses(), { id: 'hint' });
     this._hintEl.textContent = this.getAttribute('hint') || '';
 
     group.appendChild(this._labelEl);
@@ -48,6 +51,7 @@ class GlkInput extends GlkFormElement {
     this._group = group;
     this._wrapper.appendChild(group);
 
+    this._applyDescription();
     this._syncFormValue();
   }
 
@@ -85,12 +89,14 @@ class GlkInput extends GlkFormElement {
       case 'error':
         this._input.className = this._computeInputClasses().join(' ');
         this._hintEl.className = this._computeHintClasses().join(' ');
+        this._applyDescription();
         break;
       case 'hint':
         this._hintEl.textContent = this.getAttribute('hint') || '';
         if (this.getAttribute('hint') && !this._hintEl.parentNode) {
           this._group.appendChild(this._hintEl);
         }
+        this._applyDescription();
         break;
       case 'disabled':
         this._input.disabled = this.getBoolAttr('disabled');
@@ -110,6 +116,19 @@ class GlkInput extends GlkFormElement {
     }
   }
 
+  /**
+   * The hint describes the field; with `error` set it is the error message
+   * and the field is marked invalid. Server-side errors arrive this way, so
+   * `error` stays a marker for assistive technology and does not block the
+   * form — only the field's own constraints (required, pattern …) do.
+   */
+  _applyDescription() {
+    if (this.getAttribute('hint')) this._input.setAttribute('aria-describedby', 'hint');
+    else this._input.removeAttribute('aria-describedby');
+    if (this.getBoolAttr('error')) this._input.setAttribute('aria-invalid', 'true');
+    else this._input.removeAttribute('aria-invalid');
+  }
+
   _forward(attr) {
     const value = this.getAttribute(attr);
     if (value === null) this._input.removeAttribute(attr);
@@ -128,6 +147,8 @@ class GlkInput extends GlkFormElement {
     return classes;
   }
 
+  get _validityField() { return this._input; }
+
   _syncFormValue() {
     this.setFormValue(this._input.value);
   }