@jungherz-de/glasskit-elements 1.6.2 → 1.8.0

package/src/components/content/glk-card.js

@@ -1,12 +1,26 @@
 import { GlkElement } from '../../base.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/src/components/feedback/glk-modal.js

@@ -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);