elvish-css 1.0.0

package/primitives/him/him.js

@@ -0,0 +1,169 @@
+/**
+ * Him Layout Custom Element (NEW)
+ * 
+ * Creates sticky positioning with configurable offset.
+ * Optionally detects "stuck" state via IntersectionObserver.
+ * 
+ * @property {string} to - Direction to stick: top, bottom, left, right (default: top)
+ * @property {string} offset - Distance from edge when stuck (default: 0)
+ * @property {boolean} sentinel - Enable stuck state detection
+ * 
+ * @example
+ * <i-him offset="var(--s1)" sentinel>
+ *   <header>This header sticks</header>
+ * </i-him>
+ */
+
+class HimLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['to', 'offset', 'sentinel'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+    this.observer = null;
+    this.sentinelEl = null;
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this.cleanupSentinel();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get to() {
+    return this.getAttribute('to') || 'top';
+  }
+
+  set to(val) {
+    this.setAttribute('to', val);
+  }
+
+  get offset() {
+    return this.getAttribute('offset') || '0';
+  }
+
+  set offset(val) {
+    this.setAttribute('offset', val);
+  }
+
+  get sentinel() {
+    return this.hasAttribute('sentinel');
+  }
+
+  set sentinel(val) {
+    if (val) {
+      this.setAttribute('sentinel', '');
+    } else {
+      this.removeAttribute('sentinel');
+    }
+  }
+
+  cleanupSentinel() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    if (this.sentinelEl) {
+      this.sentinelEl.remove();
+      this.sentinelEl = null;
+    }
+  }
+
+  setupSentinel() {
+    this.cleanupSentinel();
+
+    if (!this.sentinel || !('IntersectionObserver' in window)) {
+      return;
+    }
+
+    // Create invisible sentinel element
+    this.sentinelEl = document.createElement('div');
+    this.sentinelEl.style.cssText = `
+      position: absolute;
+      height: 1px;
+      width: 100%;
+      pointer-events: none;
+      visibility: hidden;
+    `;
+
+    // Position sentinel based on sticky direction
+    if (this.to === 'bottom') {
+      this.sentinelEl.style.bottom = '0';
+      this.insertAdjacentElement('afterend', this.sentinelEl);
+    } else {
+      this.sentinelEl.style.top = '0';
+      this.insertAdjacentElement('beforebegin', this.sentinelEl);
+    }
+
+    // Observe the sentinel
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          // When sentinel is not visible, we're "stuck"
+          const isStuck = !entry.isIntersecting;
+          this.dataset.stuck = isStuck;
+          this.dispatchEvent(new CustomEvent('stuck-change', { 
+            detail: { stuck: isStuck } 
+          }));
+        });
+      },
+      { threshold: [0] }
+    );
+
+    this.observer.observe(this.sentinelEl);
+  }
+
+  render() {
+    this.style.setProperty('--him-offset', this.offset);
+
+    const id = `Him-${this.to}-${this.offset}`.replace(/[^\w-]/g, '');
+    this.dataset.i = id;
+
+    if (!document.getElementById(id)) {
+      const styleEl = document.createElement('style');
+      styleEl.id = id;
+      
+      const selector = `[data-i="${id}"]`;
+      let css = '';
+
+      switch (this.to) {
+        case 'bottom':
+          css = `${selector} { inset-block-start: auto; inset-block-end: ${this.offset}; }`;
+          break;
+        case 'left':
+          css = `${selector} { inset-block-start: auto; inset-inline-start: ${this.offset}; }`;
+          break;
+        case 'right':
+          css = `${selector} { inset-block-start: auto; inset-inline-end: ${this.offset}; }`;
+          break;
+        default: // top
+          css = `${selector} { inset-block-start: ${this.offset}; }`;
+      }
+
+      styleEl.textContent = css;
+      document.head.appendChild(styleEl);
+    }
+
+    // Setup or cleanup sentinel observation
+    if (this.sentinel) {
+      // Defer to ensure element is in DOM
+      requestAnimationFrame(() => this.setupSentinel());
+    } else {
+      this.cleanupSentinel();
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-him', HimLayout);
+}
+
+export default HimLayout;

package/primitives/miriant/miriant.css

@@ -0,0 +1,75 @@
+/**
+ * Grid-Placed Layout (NEW)
+ * 
+ * A CSS Grid with explicit control over columns, rows, and item placement.
+ * For when the auto-flow Grid primitive isn't enough.
+ * 
+ * This is the "escape hatch" for complex grid layouts like:
+ * - Magazine-style layouts with spanning items
+ * - Dashboard widgets of varying sizes
+ * - Bento box layouts
+ */
+
+i-miriant {
+  display: grid;
+  gap: var(--miriant-space, var(--s1));
+  
+  /* Default: 12-column grid (common baseline) */
+  grid-template-columns: repeat(var(--miriant-columns, 12), 1fr);
+  
+  /* Rows auto-size by default */
+  grid-auto-rows: var(--miriant-row-height, minmax(0, auto));
+}
+
+/* Child placement utilities using data attributes */
+/* Columns */
+i-miriant > [data-col-span="1"] { grid-column: span 1; }
+i-miriant > [data-col-span="2"] { grid-column: span 2; }
+i-miriant > [data-col-span="3"] { grid-column: span 3; }
+i-miriant > [data-col-span="4"] { grid-column: span 4; }
+i-miriant > [data-col-span="5"] { grid-column: span 5; }
+i-miriant > [data-col-span="6"] { grid-column: span 6; }
+i-miriant > [data-col-span="7"] { grid-column: span 7; }
+i-miriant > [data-col-span="8"] { grid-column: span 8; }
+i-miriant > [data-col-span="9"] { grid-column: span 9; }
+i-miriant > [data-col-span="10"] { grid-column: span 10; }
+i-miriant > [data-col-span="11"] { grid-column: span 11; }
+i-miriant > [data-col-span="12"] { grid-column: span 12; }
+i-miriant > [data-col-span="full"] { grid-column: 1 / -1; }
+
+/* Rows */
+i-miriant > [data-row-span="1"] { grid-row: span 1; }
+i-miriant > [data-row-span="2"] { grid-row: span 2; }
+i-miriant > [data-row-span="3"] { grid-row: span 3; }
+i-miriant > [data-row-span="4"] { grid-row: span 4; }
+i-miriant > [data-row-span="5"] { grid-row: span 5; }
+i-miriant > [data-row-span="6"] { grid-row: span 6; }
+
+/* Dense packing - fill holes */
+i-miriant[dense] {
+  grid-auto-flow: dense;
+}
+
+/* Responsive: collapse to single column below threshold */
+@container (width < 600px) {
+  i-miriant {
+    grid-template-columns: 1fr;
+  }
+  
+  i-miriant > [data-col-span] {
+    grid-column: span 1;
+  }
+}
+
+/* Alternative: use media query fallback for browsers without container queries */
+@supports not (container-type: inline-size) {
+  @media (max-width: 600px) {
+    i-miriant {
+      grid-template-columns: 1fr;
+    }
+    
+    i-miriant > [data-col-span] {
+      grid-column: span 1;
+    }
+  }
+}

package/primitives/miriant/miriant.js

@@ -0,0 +1,158 @@
+/**
+ * Grid-Placed Layout Custom Element (NEW)
+ * 
+ * A CSS Grid with explicit control over columns, rows, and item placement.
+ * 
+ * @property {number} columns - Number of grid columns (default: 12)
+ * @property {string} space - Gap between grid cells (default: var(--s1))
+ * @property {string} rowHeight - Height of auto-generated rows (default: minmax(0, auto))
+ * @property {boolean} dense - Enable dense packing to fill holes
+ * 
+ * Children can use data attributes for placement:
+ * - data-col-span="N" - Span N columns (1-12 or "full")
+ * - data-row-span="N" - Span N rows (1-6)
+ * - data-col-start="N" - Start at column N
+ * - data-row-start="N" - Start at row N
+ * 
+ * @example
+ * <i-miriant columns="4" space="var(--s2)">
+ *   <div data-col-span="2" data-row-span="2">Feature</div>
+ *   <div>Small</div>
+ *   <div>Small</div>
+ *   <div data-col-span="full">Full width</div>
+ * </i-miriant>
+ */
+
+class MiriantLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['columns', 'space', 'row-height', 'dense'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+    this.mutationObserver = null;
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupChildObserver();
+  }
+
+  disconnectedCallback() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get columns() {
+    return parseInt(this.getAttribute('columns'), 10) || 12;
+  }
+
+  set columns(val) {
+    this.setAttribute('columns', val);
+  }
+
+  get space() {
+    return this.getAttribute('space') || 'var(--s1)';
+  }
+
+  set space(val) {
+    this.setAttribute('space', val);
+  }
+
+  get rowHeight() {
+    return this.getAttribute('row-height') || 'minmax(0, auto)';
+  }
+
+  set rowHeight(val) {
+    this.setAttribute('row-height', val);
+  }
+
+  get dense() {
+    return this.hasAttribute('dense');
+  }
+
+  set dense(val) {
+    if (val) {
+      this.setAttribute('dense', '');
+    } else {
+      this.removeAttribute('dense');
+    }
+  }
+
+  setupChildObserver() {
+    if (!('MutationObserver' in window)) return;
+
+    this.mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          this.styleChildren();
+        }
+      });
+    });
+
+    this.mutationObserver.observe(this, { childList: true });
+    this.styleChildren();
+  }
+
+  styleChildren() {
+    // Apply inline styles for explicit placement (data-col-start, data-row-start)
+    Array.from(this.children).forEach((child) => {
+      const colStart = child.dataset.colStart;
+      const rowStart = child.dataset.rowStart;
+
+      if (colStart) {
+        child.style.gridColumnStart = colStart;
+      }
+      if (rowStart) {
+        child.style.gridRowStart = rowStart;
+      }
+    });
+  }
+
+  render() {
+    this.style.setProperty('--miriant-columns', this.columns);
+    this.style.setProperty('--miriant-space', this.space);
+    this.style.setProperty('--miriant-row-height', this.rowHeight);
+
+    const denseStr = this.dense ? '-dense' : '';
+    const id = `Miriant-${this.columns}-${this.space}-${this.rowHeight}${denseStr}`.replace(/[^\w-]/g, '');
+    this.dataset.i = id;
+
+    // Set container-type for container queries
+    this.style.containerType = 'inline-size';
+
+    if (!document.getElementById(id)) {
+      const styleEl = document.createElement('style');
+      styleEl.id = id;
+      
+      const selector = `[data-i="${id}"]`;
+      
+      let css = `
+        ${selector} {
+          grid-template-columns: repeat(${this.columns}, 1fr);
+          gap: ${this.space};
+          grid-auto-rows: ${this.rowHeight};
+        }
+      `;
+
+      if (this.dense) {
+        css += `${selector} { grid-auto-flow: dense; }`;
+      }
+
+      styleEl.textContent = css;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-miriant', MiriantLayout);
+}
+
+export default MiriantLayout;

package/primitives/thann/thann.css

@@ -0,0 +1,57 @@
+/**
+ * Thann Layout (Icon)
+ * 
+ * Aligns an SVG icon with accompanying text.
+ * Uses relative units for automatic scaling.
+ * 
+ * Attributes:
+ * - echuiol: "active" state styling
+ * - dhoren: "hidden" state (visually hidden but accessible)
+ */
+
+i-thann {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--thann-space, 0);
+}
+
+i-thann svg {
+  /* Match uppercase letter height */
+  block-size: 0.75em;
+  block-size: 1cap; /* Where supported */
+  
+  inline-size: 0.75em;
+  inline-size: 1cap; /* Where supported */
+  
+  /* Inherit text color */
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+/* When using natural word spacing (no explicit space) */
+i-thann:not([space]) {
+  display: inline;
+}
+
+i-thann:not([space]) svg {
+  display: inline;
+  vertical-align: -0.125em; /* Fine-tune baseline alignment */
+}
+
+/* Echuiol = Active state */
+i-thann[echuiol] {
+  color: var(--color-accent, currentColor);
+}
+
+/* Dhoren = Hidden (visually hidden but accessible) */
+i-thann[dhoren] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/primitives/thann/thann.js

@@ -0,0 +1,96 @@
+/**
+ * Thann Layout Custom Element
+ * 
+ * Aligns an SVG icon with accompanying text.
+ * 
+ * @property {string} space - Gap between icon and text (default: natural word space)
+ * @property {string} label - Accessible label for standalone icons
+ * 
+ * @example
+ * <i-thann space="0.5em">
+ *   <svg>...</svg>
+ *   Close
+ * </i-thann>
+ */
+
+class ThannLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['space', 'label'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get space() {
+    return this.getAttribute('space');
+  }
+
+  set space(val) {
+    if (val) {
+      this.setAttribute('space', val);
+    } else {
+      this.removeAttribute('space');
+    }
+  }
+
+  get label() {
+    return this.getAttribute('label');
+  }
+
+  set label(val) {
+    if (val) {
+      this.setAttribute('label', val);
+    } else {
+      this.removeAttribute('label');
+    }
+  }
+
+  render() {
+    // Handle accessibility for standalone icons
+    if (this.label) {
+      this.setAttribute('role', 'img');
+      this.setAttribute('aria-label', this.label);
+    } else {
+      this.removeAttribute('role');
+      this.removeAttribute('aria-label');
+    }
+
+    // Only set custom property if space is specified
+    if (this.space) {
+      this.style.setProperty('--thann-space', this.space);
+      
+      const id = `Thann-${this.space}`.replace(/[^\w-]/g, '');
+      this.dataset.i = id;
+
+      if (!document.getElementById(id)) {
+        const styleEl = document.createElement('style');
+        styleEl.id = id;
+        
+        const selector = `[data-i="${id}"]`;
+        
+        styleEl.textContent = `
+          ${selector} {
+            gap: ${this.space};
+          }
+        `;
+        document.head.appendChild(styleEl);
+      }
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-thann', ThannLayout);
+}
+
+export default ThannLayout;

package/primitives/tiniath/tiniath.css

@@ -0,0 +1,16 @@
+/**
+ * Cluster Layout
+ * 
+ * Groups elements that differ in length and wrap naturally.
+ * Perfect for tags, buttons, navigation items.
+ */
+
+i-tiniath {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--tiniath-space, var(--s1));
+  
+  /* Default justification and alignment */
+  justify-content: var(--tiniath-justify, flex-start);
+  align-items: var(--tiniath-align, center);
+}

package/primitives/tiniath/tiniath.js

@@ -0,0 +1,88 @@
+/**
+ * Cluster Layout Custom Element
+ * 
+ * Groups elements that differ in length and wrap naturally.
+ * 
+ * @property {string} space - Gap between items (default: var(--s1))
+ * @property {string} justify - justify-content value (default: flex-start)
+ * @property {string} align - align-items value (default: center)
+ * 
+ * @example
+ * <i-tiniath space="var(--s0)" justify="space-between">
+ *   <button>Save</button>
+ *   <button>Cancel</button>
+ * </i-tiniath>
+ */
+
+class TiniathLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['space', 'justify', 'align'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get space() {
+    return this.getAttribute('space') || 'var(--s1)';
+  }
+
+  set space(val) {
+    this.setAttribute('space', val);
+  }
+
+  get justify() {
+    return this.getAttribute('justify') || 'flex-start';
+  }
+
+  set justify(val) {
+    this.setAttribute('justify', val);
+  }
+
+  get align() {
+    return this.getAttribute('align') || 'center';
+  }
+
+  set align(val) {
+    this.setAttribute('align', val);
+  }
+
+  render() {
+    this.style.setProperty('--tiniath-space', this.space);
+    this.style.setProperty('--tiniath-justify', this.justify);
+    this.style.setProperty('--tiniath-align', this.align);
+
+    const id = `Tiniath-${this.space}-${this.justify}-${this.align}`.replace(/[^\w-]/g, '');
+    this.dataset.i = id;
+
+    if (!document.getElementById(id)) {
+      const styleEl = document.createElement('style');
+      styleEl.id = id;
+      
+      const selector = `[data-i="${id}"]`;
+      styleEl.textContent = `
+        ${selector} {
+          gap: ${this.space};
+          justify-content: ${this.justify};
+          align-items: ${this.align};
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-tiniath', TiniathLayout);
+}
+
+export default TiniathLayout;

package/primitives/vircantie/vircantie.css

@@ -0,0 +1,24 @@
+/**
+ * Vircantie Layout (Grid)
+ * 
+ * Auto-flowing grid with responsive columns based on minimum width.
+ * Uses CSS Grid's auto-fit with min() for robust responsiveness.
+ */
+
+i-vircantie {
+  display: grid;
+  gap: var(--vircantie-space, var(--s1));
+}
+
+/* 
+ * Using min() prevents overflow when container is narrower than minimum.
+ * The 100% value kicks in when min would cause overflow.
+ */
+@supports (width: min(var(--vircantie-min, 250px), 100%)) {
+  i-vircantie {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(var(--vircantie-min, 250px), 100%), 1fr)
+    );
+  }
+}