@jungherz-de/glasskit-elements 1.7.0 → 1.9.0

package/README.md

@@ -192,11 +192,31 @@ const current = html.getAttribute('data-theme');
 html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
 ```
 
+### Branding
+
+Override GlassKit's `--gl-*` tokens anywhere in the document. Every `<glk-*>` element
+inherits them — no JavaScript, no per-element setup:
+
+```css
+/* brand.css, loaded after glasskit.css */
+:root, [data-theme='dark'] { --gl-color-primary: #2e9e8f; }
+[data-theme='light']       { --gl-color-primary: #21786d; }
+```
+
+> **Requires 1.9.0.** Before that, every element re-declared the tokens inside its own
+> shadow root, so document-level overrides were silently ignored in components while
+> still applying to plain `.glass-*` markup — projects came out half-branded. If you are
+> upgrading from ≤1.8.0 and already ship a brand stylesheet, expect your components to
+> change to the colors you intended all along.
+
+Token defaults are placed on the document once, inside `@layer glasskit-defaults`, so
+pages that never load `glasskit.css` still work and your brand file always wins.
+
 ---
 
 ## 🛠️ Architecture
 
-- **Shadow DOM** with `adoptedStyleSheets` — GlassKit's `glassSheet` is shared across all component instances
+- **Shadow DOM** with `adoptedStyleSheets` — GlassKit's `componentsSheet` is shared across all component instances; token declarations stay on the document so branding can be inherited
 - **Theme wrapper** with `display: contents` — layout-transparent `<div>` for `data-theme` CSS selectors
 - **Global `MutationObserver`** — single observer watches `data-theme` changes and syncs all instances
 - **`GlkElement`** base class — handles Shadow DOM setup, theme sync, attribute reflection

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

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 const CHEVRON_SVG = `<span class="glass-accordion__trigger-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>`;
 

package/dist/components/glk-accordion.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkAccordion extends GlkElement {
   render() {

package/dist/components/glk-avatar.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 const SIZES = ['sm', 'lg'];
 

package/dist/components/glk-badge.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 const VARIANTS = ['primary', 'success', 'error'];
 

package/dist/components/glk-button.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 const VARIANTS = ['primary', 'secondary', 'tertiary'];
 const SIZES = ['sm', 'md', 'lg', 'auto'];

package/dist/components/glk-card.js

@@ -1,12 +1,26 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
+
+// <glk-card fill> stretches the visible card to the height of its grid or flex
+// cell. The host must become a grid for this: it is stretched by the outer
+// layout but keeps height:auto, so a percentage height on the inner card has
+// nothing definite to resolve against. Making the host a grid stretches its
+// single child instead, which needs no percentage at all. The card also becomes
+// a flex column so a footer can be pushed down with margin-top:auto.
+const fillSheet = new CSSStyleSheet();
+fillSheet.replaceSync(`
+  :host([fill]) { display: grid; }
+  :host([fill]) .glass-card { display: flex; flex-direction: column; }
+`);
 
 class GlkCard extends GlkElement {
   static get observedAttributes() {
-    return ['glow'];
+    return ['glow', 'fill'];
   }
 
+  static get hostStyles() { return fillSheet; }
+
   render() {
-    this._card = this.createElement('div', this._computeClasses());
+    this._card = this.createElement('div', this._computeClasses(), { part: 'card' });
     this._card.appendChild(document.createElement('slot'));
     this._wrapper.appendChild(this._card);
   }
@@ -27,6 +41,9 @@ class GlkCard extends GlkElement {
 
   get glow() { return this.getBoolAttr('glow'); }
   set glow(v) { this.setBoolAttr('glow', v); }
+
+  get fill() { return this.getBoolAttr('fill'); }
+  set fill(v) { this.setBoolAttr('fill', v); }
 }
 
 customElements.define('glk-card', GlkCard);

package/dist/components/glk-checkbox.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-D7w9EVJi.js';
+import { a as GlkFormElement } from './shared/base-C4ZYKLPu.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>`;
 

package/dist/components/glk-divider.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkDivider extends GlkElement {
   render() {

package/dist/components/glk-input.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-D7w9EVJi.js';
+import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkInput extends GlkFormElement {
   static get observedAttributes() {

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

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 // Module-level override sheet — shared by all instances.
 // Suppresses the auto-divider when glk-list marks this item as the

package/dist/components/glk-list.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkList extends GlkElement {
   static get observedAttributes() {
@@ -7,13 +7,13 @@ class GlkList extends GlkElement {
 
   render() {
     // Optional section header — sits before the <ul>.
-    this._header = this.createElement('div', ['glass-list__section-header']);
+    this._header = this.createElement('div', ['glass-list__section-header'], { part: 'header' });
     const initialHeader = this.getAttribute('header') || '';
     this._header.textContent = initialHeader;
     this._header.hidden = !initialHeader;
     this._wrapper.appendChild(this._header);
 
-    this._ul = this.createElement('ul', ['glass-list']);
+    this._ul = this.createElement('ul', ['glass-list'], { part: 'list' });
     if (this.getBoolAttr('flush')) this._ul.classList.add('glass-list--flush');
     if (this.getBoolAttr('bare')) this._ul.classList.add('glass-list--bare');
     this._ul.appendChild(document.createElement('slot'));

package/dist/components/glk-modal.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkModal extends GlkElement {
   static get observedAttributes() {
@@ -6,22 +6,22 @@ class GlkModal extends GlkElement {
   }
 
   render() {
-    this._overlay = this.createElement('div', ['glass-modal-overlay']);
+    this._overlay = this.createElement('div', ['glass-modal-overlay'], { part: 'overlay' });
 
-    const modal = this.createElement('div', ['glass-modal']);
+    const modal = this.createElement('div', ['glass-modal'], { part: 'modal' });
 
     // Header
-    const header = this.createElement('div', ['glass-modal__header']);
+    const header = this.createElement('div', ['glass-modal__header'], { part: 'header' });
     this._titleEl = this.createElement('h2', ['glass-modal__title']);
     this._titleEl.textContent = this.getAttribute('title') || '';
     header.appendChild(this._titleEl);
 
     // Body
-    const body = this.createElement('div', ['glass-modal__body']);
+    const body = this.createElement('div', ['glass-modal__body'], { part: 'body' });
     body.appendChild(document.createElement('slot'));
 
     // Footer — clone action buttons from light DOM into shadow DOM
-    this._footer = this.createElement('div', ['glass-modal__footer']);
+    this._footer = this.createElement('div', ['glass-modal__footer'], { part: 'footer' });
 
     modal.appendChild(header);
     modal.appendChild(body);

package/dist/components/glk-nav.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkNav extends GlkElement {
   render() {

package/dist/components/glk-pill.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkPill extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-popover.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 const PLACEMENTS = ['top', 'bottom', 'start', 'end'];
 

package/dist/components/glk-progress.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 const VARIANTS = ['success', 'error'];
 const SIZES = ['sm', 'lg'];

package/dist/components/glk-radio.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-D7w9EVJi.js';
+import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkRadio extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-range.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-D7w9EVJi.js';
+import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkRange extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-search.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-D7w9EVJi.js';
+import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
 
 const SEARCH_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`;
 

package/dist/components/glk-select.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-D7w9EVJi.js';
+import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkSelect extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-status.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkStatus extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-tab-accessory.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 const VARIANTS = ['accent', 'success', 'error'];
 

package/dist/components/glk-tab-bar.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkTabBar extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-tab-dock.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkTabDock extends GlkElement {
   static get observedAttributes() {

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

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkTabItem extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-textarea.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-D7w9EVJi.js';
+import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkTextarea extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-title.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkTitle extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-toast.js

@@ -1,4 +1,4 @@
-import { G as GlkElement } from './shared/base-D7w9EVJi.js';
+import { G as GlkElement } from './shared/base-C4ZYKLPu.js';
 
 const VARIANTS = ['success', 'error', 'warning'];
 

package/dist/components/glk-toggle.js

@@ -1,4 +1,4 @@
-import { a as GlkFormElement } from './shared/base-D7w9EVJi.js';
+import { a as GlkFormElement } from './shared/base-C4ZYKLPu.js';
 
 class GlkToggle extends GlkFormElement {
   static get observedAttributes() {