elvish-css 1.0.0

package/primitives/glan-veleg/glan-veleg.js

@@ -0,0 +1,138 @@
+/**
+ * GlanVeleg Layout Custom Element
+ * 
+ * A quantum layout with one fixed-width element and one fluid element.
+ * 
+ * @property {string} side - Which side is the sidebar: "left" or "right" (default: left)
+ * @property {string} sideWidth - Width of sidebar when horizontal (default: 20rem)
+ * @property {string} contentMin - Min width of content before wrapping (default: 50%)
+ * @property {string} space - Gap between elements (default: var(--s1))
+ * @property {boolean} noStretch - Disable equal height (default: false)
+ * 
+ * @example
+ * <i-glan-veleg side-width="15rem" content-min="60%">
+ *   <nav>GlanVeleg content</nav>
+ *   <main>Main content</main>
+ * </i-glan-veleg>
+ */
+
+class GlanVelegLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['side', 'side-width', 'content-min', 'space', 'no-stretch'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get side() {
+    return this.getAttribute('side') || 'left';
+  }
+
+  set side(val) {
+    this.setAttribute('side', val);
+  }
+
+  get sideWidth() {
+    return this.getAttribute('side-width') || '20rem';
+  }
+
+  set sideWidth(val) {
+    this.setAttribute('side-width', val);
+  }
+
+  get contentMin() {
+    return this.getAttribute('content-min') || '50%';
+  }
+
+  set contentMin(val) {
+    this.setAttribute('content-min', val);
+  }
+
+  get space() {
+    return this.getAttribute('space') || 'var(--s1)';
+  }
+
+  set space(val) {
+    this.setAttribute('space', val);
+  }
+
+  get noStretch() {
+    return this.hasAttribute('no-stretch');
+  }
+
+  set noStretch(val) {
+    if (val) {
+      this.setAttribute('no-stretch', '');
+    } else {
+      this.removeAttribute('no-stretch');
+    }
+  }
+
+  render() {
+    this.style.setProperty('--glan-veleg-width', this.sideWidth);
+    this.style.setProperty('--glan-veleg-content-min', this.contentMin);
+    this.style.setProperty('--glan-veleg-space', this.space);
+
+    const sideStr = this.side === 'right' ? '-right' : '-left';
+    const stretchStr = this.noStretch ? '-noStretch' : '';
+    const id = `GlanVeleg-${this.sideWidth}-${this.contentMin}-${this.space}${sideStr}${stretchStr}`.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 = `${selector} { gap: ${this.space}; }`;
+      
+      if (this.side === 'right') {
+        css += `
+          ${selector} > :first-child {
+            flex-basis: 0;
+            flex-grow: 999;
+            min-inline-size: ${this.contentMin};
+          }
+          ${selector} > :last-child {
+            flex-basis: ${this.sideWidth};
+            flex-grow: 1;
+          }
+        `;
+      } else {
+        css += `
+          ${selector} > :first-child {
+            flex-basis: ${this.sideWidth};
+          }
+          ${selector} > :last-child {
+            flex-basis: 0;
+            flex-grow: 999;
+            min-inline-size: ${this.contentMin};
+          }
+        `;
+      }
+
+      if (this.noStretch) {
+        css += `${selector} { align-items: flex-start; }`;
+      }
+
+      styleEl.textContent = css;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-glan-veleg', GlanVelegLayout);
+}
+
+export default GlanVelegLayout;

package/primitives/gonath/gonath.css

@@ -0,0 +1,57 @@
+/**
+ * Gonath Layout (NEW)
+ * 
+ * Pinterest-style layout where items pack efficiently into columns.
+ * Uses CSS columns as the primary method (widely supported).
+ * Progressively enhances to CSS Grid masonry where supported.
+ * 
+ * CAVEATS:
+ * - CSS columns: items flow top-to-bottom, then left-to-right
+ *   (not strictly "visual order" like true masonry)
+ * - CSS Grid masonry: experimental, limited browser support
+ */
+
+i-gonath {
+  display: block;
+  
+  /* CSS Columns approach (fallback) */
+  column-count: var(--gonath-columns, 3);
+  column-gap: var(--gonath-space, var(--s1));
+}
+
+i-gonath > * {
+  /* Prevent items from breaking across columns */
+  break-inside: avoid;
+  
+  /* Add vertical spacing between items */
+  margin-block-end: var(--gonath-space, var(--s1));
+}
+
+/* Progressive enhancement: CSS Grid masonry where supported */
+@supports (grid-template-rows: masonry) {
+  i-gonath {
+    display: grid;
+    column-count: unset;
+    grid-template-columns: repeat(var(--gonath-columns, 3), 1fr);
+    grid-template-rows: masonry;
+    gap: var(--gonath-space, var(--s1));
+  }
+  
+  i-gonath > * {
+    margin-block-end: 0;
+    break-inside: unset;
+  }
+}
+
+/* Responsive column counts */
+@media (max-width: 800px) {
+  i-gonath {
+    --gonath-columns: 2;
+  }
+}
+
+@media (max-width: 500px) {
+  i-gonath {
+    --gonath-columns: 1;
+  }
+}

package/primitives/gonath/gonath.js

@@ -0,0 +1,113 @@
+/**
+ * Gonath Layout Custom Element (NEW)
+ * 
+ * Pinterest-style layout with efficient column packing.
+ * 
+ * Uses CSS columns (widely supported) with progressive enhancement
+ * to CSS Grid masonry where available.
+ * 
+ * @property {number} columns - Number of columns (default: 3)
+ * @property {string} space - Gap between items (default: var(--s1))
+ * 
+ * NOTE: CSS columns flow top-to-bottom, then left-to-right.
+ * This means visual order differs from DOM order.
+ * For true masonry ordering, JavaScript is required.
+ * 
+ * @example
+ * <i-gonath columns="4" space="var(--s2)">
+ *   <div>Item 1</div>
+ *   <div>Taller Item 2</div>
+ *   <div>Item 3</div>
+ *   ...
+ * </i-gonath>
+ */
+
+class GonathLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['columns', 'space'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get columns() {
+    return parseInt(this.getAttribute('columns'), 10) || 3;
+  }
+
+  set columns(val) {
+    this.setAttribute('columns', val);
+  }
+
+  get space() {
+    return this.getAttribute('space') || 'var(--s1)';
+  }
+
+  set space(val) {
+    this.setAttribute('space', val);
+  }
+
+  // Check if CSS Grid masonry is supported
+  static get isGridGonathSupported() {
+    return CSS.supports('grid-template-rows', 'masonry');
+  }
+
+  render() {
+    this.style.setProperty('--gonath-columns', this.columns);
+    this.style.setProperty('--gonath-space', this.space);
+
+    const id = `Gonath-${this.columns}-${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}"]`;
+      
+      let css = `
+        ${selector} {
+          column-count: ${this.columns};
+          column-gap: ${this.space};
+        }
+        ${selector} > * {
+          margin-block-end: ${this.space};
+        }
+      `;
+
+      // Progressive enhancement for CSS Grid masonry
+      css += `
+        @supports (grid-template-rows: masonry) {
+          ${selector} {
+            display: grid;
+            column-count: unset;
+            grid-template-columns: repeat(${this.columns}, 1fr);
+            grid-template-rows: masonry;
+            gap: ${this.space};
+          }
+          ${selector} > * {
+            margin-block-end: 0;
+          }
+        }
+      `;
+
+      styleEl.textContent = css;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-gonath', GonathLayout);
+}
+
+export default GonathLayout;

package/primitives/gwistindor/gwistindor.css

@@ -0,0 +1,52 @@
+/**
+ * Switcher Layout
+ * 
+ * Switches directly between horizontal and vertical layouts
+ * at a container-based threshold. No intermediary states.
+ * 
+ * Uses the "Holy Albatross" technique.
+ */
+
+i-gwistindor {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gwistindor-space, var(--s1));
+}
+
+i-gwistindor > * {
+  flex-grow: 1;
+  /* 
+   * The magic: produces huge positive (vertical) or negative (horizontal) values.
+   * Default: --layout-threshold-md (45rem ≈ 720px) - switches at tablet width.
+   * NOTE: This is a *layout* threshold, not a text measure!
+   */
+  flex-basis: calc((var(--gwistindor-threshold, var(--layout-threshold-md, 45rem)) - 100%) * 999);
+}
+
+/* Quantity query: force vertical if more than threshold items */
+i-gwistindor[limit="2"] > :nth-last-child(n+3),
+i-gwistindor[limit="2"] > :nth-last-child(n+3) ~ * {
+  flex-basis: 100%;
+}
+
+i-gwistindor[limit="3"] > :nth-last-child(n+4),
+i-gwistindor[limit="3"] > :nth-last-child(n+4) ~ * {
+  flex-basis: 100%;
+}
+
+i-gwistindor:not([limit]) > :nth-last-child(n+5),
+i-gwistindor:not([limit]) > :nth-last-child(n+5) ~ *,
+i-gwistindor[limit="4"] > :nth-last-child(n+5),
+i-gwistindor[limit="4"] > :nth-last-child(n+5) ~ * {
+  flex-basis: 100%;
+}
+
+i-gwistindor[limit="5"] > :nth-last-child(n+6),
+i-gwistindor[limit="5"] > :nth-last-child(n+6) ~ * {
+  flex-basis: 100%;
+}
+
+i-gwistindor[limit="6"] > :nth-last-child(n+7),
+i-gwistindor[limit="6"] > :nth-last-child(n+7) ~ * {
+  flex-basis: 100%;
+}

package/primitives/gwistindor/gwistindor.js

@@ -0,0 +1,96 @@
+/**
+ * Switcher Layout Custom Element
+ * 
+ * Switches between horizontal and vertical at a container threshold.
+ * Uses the "Holy Albatross" technique - no intermediary states.
+ * 
+ * @property {string} threshold - Container width to switch at (default: var(--measure))
+ * @property {string} space - Gap between elements (default: var(--s1))
+ * @property {number} limit - Max items for horizontal layout (default: 4)
+ * 
+ * @example
+ * <i-gwistindor threshold="30rem" limit="3">
+ *   <div>One</div>
+ *   <div>Two</div>
+ *   <div>Three</div>
+ * </i-gwistindor>
+ */
+
+class GwistindorLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['threshold', 'space', 'limit'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get threshold() {
+    return this.getAttribute('threshold') || 'var(--measure)';
+  }
+
+  set threshold(val) {
+    this.setAttribute('threshold', val);
+  }
+
+  get space() {
+    return this.getAttribute('space') || 'var(--s1)';
+  }
+
+  set space(val) {
+    this.setAttribute('space', val);
+  }
+
+  get limit() {
+    return parseInt(this.getAttribute('limit'), 10) || 4;
+  }
+
+  set limit(val) {
+    this.setAttribute('limit', val);
+  }
+
+  render() {
+    this.style.setProperty('--gwistindor-threshold', this.threshold);
+    this.style.setProperty('--gwistindor-space', this.space);
+
+    const id = `Gwistindor-${this.threshold}-${this.space}-${this.limit}`.replace(/[^\w-]/g, '');
+    this.dataset.i = id;
+
+    if (!document.getElementById(id)) {
+      const styleEl = document.createElement('style');
+      styleEl.id = id;
+      
+      const selector = `[data-i="${id}"]`;
+      const limitPlusOne = this.limit + 1;
+      
+      styleEl.textContent = `
+        ${selector} {
+          gap: ${this.space};
+        }
+        ${selector} > * {
+          flex-basis: calc((${this.threshold} - 100%) * 999);
+        }
+        ${selector} > :nth-last-child(n+${limitPlusOne}),
+        ${selector} > :nth-last-child(n+${limitPlusOne}) ~ * {
+          flex-basis: 100%;
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-gwistindor', GwistindorLayout);
+}
+
+export default GwistindorLayout;

package/primitives/hath/hath.css

@@ -0,0 +1,39 @@
+/**
+ * Stack Layout
+ * 
+ * Injects vertical margin between successive child elements.
+ * The foundation of vertical rhythm.
+ */
+
+i-hath {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+i-hath > * {
+  /* Remove any existing vertical margins */
+  margin-block: 0;
+}
+
+i-hath > * + * {
+  /* Apply margin only between successive elements */
+  margin-block-start: var(--hath-space, var(--s1));
+}
+
+/* Recursive variant - applies to all descendants */
+i-hath[recursive] * + * {
+  margin-block-start: var(--hath-space, var(--s1));
+}
+
+/* Split variant - pushes element and siblings after it to the bottom */
+i-hath[split-after="1"] > :nth-child(1) { margin-block-end: auto; }
+i-hath[split-after="2"] > :nth-child(2) { margin-block-end: auto; }
+i-hath[split-after="3"] > :nth-child(3) { margin-block-end: auto; }
+i-hath[split-after="4"] > :nth-child(4) { margin-block-end: auto; }
+i-hath[split-after="5"] > :nth-child(5) { margin-block-end: auto; }
+
+/* When Stack needs to fill its parent */
+i-hath:only-child {
+  block-size: 100%;
+}

package/primitives/hath/hath.js

@@ -0,0 +1,107 @@
+/**
+ * Stack Layout Custom Element
+ * 
+ * Injects vertical margin between successive child elements.
+ * 
+ * @property {string} space - A CSS margin value (default: var(--s1))
+ * @property {boolean} recursive - Apply to all descendants, not just children
+ * @property {number} splitAfter - Element index after which to split with auto margin
+ * 
+ * @example
+ * <i-hath space="var(--s2)">
+ *   <h2>Heading</h2>
+ *   <p>Paragraph one</p>
+ *   <p>Paragraph two</p>
+ * </i-hath>
+ */
+
+class HathLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['space', 'recursive', 'split-after'];
+  }
+
+  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 recursive() {
+    return this.hasAttribute('recursive');
+  }
+
+  set recursive(val) {
+    if (val) {
+      this.setAttribute('recursive', '');
+    } else {
+      this.removeAttribute('recursive');
+    }
+  }
+
+  get splitAfter() {
+    const val = this.getAttribute('split-after');
+    return val ? parseInt(val, 10) : null;
+  }
+
+  set splitAfter(val) {
+    if (val) {
+      this.setAttribute('split-after', val);
+    } else {
+      this.removeAttribute('split-after');
+    }
+  }
+
+  render() {
+    // Generate unique identifier for this configuration
+    const recursive = this.recursive ? '-recursive' : '';
+    const split = this.splitAfter ? `-split${this.splitAfter}` : '';
+    const id = `Hath-${this.space}${recursive}${split}`.replace(/[^\w-]/g, '');
+    
+    this.dataset.i = id;
+    this.style.setProperty('--hath-space', this.space);
+
+    // Check if styles already exist for this configuration
+    if (!document.getElementById(id)) {
+      const styleEl = document.createElement('style');
+      styleEl.id = id;
+      
+      const selector = `[data-i="${id}"]`;
+      let css = '';
+
+      if (this.recursive) {
+        css = `${selector} * + * { margin-block-start: ${this.space}; }`;
+      } else {
+        css = `${selector} > * + * { margin-block-start: ${this.space}; }`;
+      }
+
+      if (this.splitAfter) {
+        css += `${selector} > :nth-child(${this.splitAfter}) { margin-block-end: auto; }`;
+      }
+
+      styleEl.textContent = css;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+// Define the custom element
+if ('customElements' in window) {
+  customElements.define('i-hath', HathLayout);
+}
+
+export default HathLayout;

package/primitives/him/him.css

@@ -0,0 +1,43 @@
+/**
+ * Him Layout (NEW)
+ * 
+ * Creates sticky positioning with configurable offset.
+ * Solves the common pattern of sticky headers/sidebars.
+ * 
+ * IMPORTANT: The parent must have defined height or be
+ * in a scroll context for sticky to work properly.
+ */
+
+i-him {
+  display: block;
+  position: sticky;
+  
+  /* Default: stick to top */
+  inset-block-start: var(--him-offset, 0);
+  
+  /* Ensure it stays above sibling content when stuck */
+  z-index: var(--him-z, 1);
+}
+
+/* Stick to bottom instead */
+i-him[to="bottom"] {
+  inset-block-start: auto;
+  inset-block-end: var(--him-offset, 0);
+}
+
+/* Stick to left (in horizontal scroll context) */
+i-him[to="left"] {
+  inset-block-start: auto;
+  inset-inline-start: var(--him-offset, 0);
+}
+
+/* Stick to right (in horizontal scroll context) */
+i-him[to="right"] {
+  inset-block-start: auto;
+  inset-inline-end: var(--him-offset, 0);
+}
+
+/* Sentinel for detecting stuck state (JavaScript enhancement) */
+i-him[data-stuck="true"] {
+  /* Add styles here or use this selector in your own CSS */
+}