elvish-css 1.0.0

package/primitives/esgal/esgal.js

@@ -0,0 +1,115 @@
+/**
+ * Cover Layout Custom Element
+ * 
+ * Vertically centers a principal element with optional header/footer.
+ * 
+ * @property {string} centered - Selector for the centered element (default: h1)
+ * @property {string} space - Minimum space around elements (default: var(--s1))
+ * @property {string} minHeight - Minimum height of cover (default: 100vh)
+ * @property {boolean} noPad - Remove padding from container
+ * 
+ * @example
+ * <i-esgal centered="h2" min-height="80vh">
+ *   <header>Logo</header>
+ *   <h2>Main Title</h2>
+ *   <footer>Scroll down</footer>
+ * </i-esgal>
+ */
+
+class EsgalLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['centered', 'space', 'min-height', 'no-pad'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get centered() {
+    return this.getAttribute('centered') || 'h1';
+  }
+
+  set centered(val) {
+    this.setAttribute('centered', val);
+  }
+
+  get space() {
+    return this.getAttribute('space') || 'var(--s1)';
+  }
+
+  set space(val) {
+    this.setAttribute('space', val);
+  }
+
+  get minHeight() {
+    return this.getAttribute('min-height') || '100vh';
+  }
+
+  set minHeight(val) {
+    this.setAttribute('min-height', val);
+  }
+
+  get noPad() {
+    return this.hasAttribute('no-pad');
+  }
+
+  set noPad(val) {
+    if (val) {
+      this.setAttribute('no-pad', '');
+    } else {
+      this.removeAttribute('no-pad');
+    }
+  }
+
+  render() {
+    this.style.setProperty('--esgal-min-height', this.minHeight);
+    this.style.setProperty('--esgal-space', this.space);
+
+    const noPadStr = this.noPad ? '-noPad' : '';
+    const id = `Esgal-${this.centered}-${this.minHeight}-${this.space}${noPadStr}`.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 padding = this.noPad ? '0' : this.space;
+      
+      styleEl.textContent = `
+        ${selector} {
+          min-block-size: ${this.minHeight};
+          padding: ${padding};
+        }
+        ${selector} > * {
+          margin-block: ${this.space};
+        }
+        ${selector} > :first-child:not(${this.centered}) {
+          margin-block-start: 0;
+        }
+        ${selector} > :last-child:not(${this.centered}) {
+          margin-block-end: 0;
+        }
+        ${selector} > ${this.centered} {
+          margin-block: auto;
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-esgal', EsgalLayout);
+}
+
+export default EsgalLayout;

package/primitives/fano/fano.css

@@ -0,0 +1,28 @@
+/**
+ * Imposter Layout
+ * 
+ * Positions an element over content, centered within a
+ * positioning container. Perfect for modals and overlays.
+ */
+
+i-fano {
+  /* Default: absolute positioning relative to nearest positioned ancestor */
+  position: var(--fano-position, absolute);
+  
+  /* Center the element */
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Fixed positioning variant (relative to viewport) */
+i-fano[fixed] {
+  --fano-position: fixed;
+}
+
+/* Contain within positioning container */
+i-fano[contain] {
+  overflow: auto;
+  max-inline-size: calc(100% - (var(--fano-margin, 0px) * 2));
+  max-block-size: calc(100% - (var(--fano-margin, 0px) * 2));
+}

package/primitives/fano/fano.js

@@ -0,0 +1,108 @@
+/**
+ * Imposter Layout Custom Element
+ * 
+ * Positions an element centered over a positioning container.
+ * 
+ * @property {boolean} fixed - Use fixed positioning (viewport-relative)
+ * @property {boolean} contain - Prevent overflow outside container
+ * @property {string} margin - Minimum gap from container edges (when contained)
+ * 
+ * @example
+ * <div style="position: relative;">
+ *   <p>Background content</p>
+ *   <i-fano contain margin="var(--s1)">
+ *     <dialog open>Modal content</dialog>
+ *   </i-fano>
+ * </div>
+ */
+
+class FanoLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['fixed', 'contain', 'margin'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get fixed() {
+    return this.hasAttribute('fixed');
+  }
+
+  set fixed(val) {
+    if (val) {
+      this.setAttribute('fixed', '');
+    } else {
+      this.removeAttribute('fixed');
+    }
+  }
+
+  get contain() {
+    return this.hasAttribute('contain');
+  }
+
+  set contain(val) {
+    if (val) {
+      this.setAttribute('contain', '');
+    } else {
+      this.removeAttribute('contain');
+    }
+  }
+
+  get margin() {
+    return this.getAttribute('margin') || '0px';
+  }
+
+  set margin(val) {
+    this.setAttribute('margin', val);
+  }
+
+  render() {
+    this.style.setProperty('--fano-margin', this.margin);
+
+    const fixedStr = this.fixed ? '-fixed' : '';
+    const containStr = this.contain ? '-contain' : '';
+    const id = `Fano-${this.margin}${fixedStr}${containStr}`.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 = '';
+      
+      if (this.fixed) {
+        css += `${selector} { position: fixed; }`;
+      }
+      
+      if (this.contain) {
+        css += `
+          ${selector} {
+            overflow: auto;
+            max-inline-size: calc(100% - (${this.margin} * 2));
+            max-block-size: calc(100% - (${this.margin} * 2));
+          }
+        `;
+      }
+
+      styleEl.textContent = css;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-fano', FanoLayout);
+}
+
+export default FanoLayout;

package/primitives/gant-thala/gant-thala.css

@@ -0,0 +1,32 @@
+/**
+ * Frame Layout
+ * 
+ * Constrains content to a specific aspect ratio.
+ * Perfect for images, videos, and embedded content.
+ */
+
+i-gant-thala {
+  display: block;
+  overflow: hidden;
+  
+  /* Default 16:9 ratio */
+  gant-thala-ratio: var(--gant-thala-n, 16) / var(--gant-thala-d, 9);
+}
+
+/* For images and videos, cover the frame */
+i-gant-thala > img,
+i-gant-thala > video {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  /* Default: center the crop */
+  object-position: center;
+}
+
+/* Non-media content gets centered */
+i-gant-thala > :not(img):not(video) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 100%;
+}

package/primitives/gant-thala/gant-thala.js

@@ -0,0 +1,69 @@
+/**
+ * Frame Layout Custom Element
+ * 
+ * Constrains content to a specific aspect ratio.
+ * 
+ * @property {string} ratio - GantThala ratio as "n:d" (default: 16:9)
+ * 
+ * @example
+ * <i-gant-thala ratio="4:3">
+ *   <img src="photo.jpg" alt="A photo">
+ * </i-gant-thala>
+ */
+
+class GantThalaLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['ratio'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get ratio() {
+    return this.getAttribute('ratio') || '16:9';
+  }
+
+  set ratio(val) {
+    this.setAttribute('ratio', val);
+  }
+
+  render() {
+    const [n, d] = this.ratio.split(':').map(v => v.trim());
+    
+    this.style.setProperty('--gant-thala-n', n);
+    this.style.setProperty('--gant-thala-d', d);
+
+    const id = `GantThala-${n}-${d}`.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} {
+          gant-thala-ratio: ${n} / ${d};
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-gant-thala', GantThalaLayout);
+}
+
+export default GantThalaLayout;

package/primitives/glan-tholl/glan-tholl.css

@@ -0,0 +1,71 @@
+/**
+ * Reel Layout
+ * 
+ * Horizontal scrolling container for overflow content.
+ * A robust alternative to JavaScript carousels.
+ */
+
+i-glan-tholl {
+  display: flex;
+  block-size: var(--glan-tholl-height, auto);
+  
+  overflow-x: auto;
+  overflow-y: hidden;
+  
+  /* Smooth scrolling where supported and preferred */
+  scroll-behavior: smooth;
+  
+  /* Scroll snap for better UX */
+  scroll-snap-type: x mandatory;
+  
+  /* Firefox scrollbar styling */
+  scrollbar-color: var(--color-dark) var(--color-light);
+}
+
+i-glan-tholl > * {
+  flex: 0 0 var(--glan-tholl-item-width, auto);
+  scroll-snap-align: start;
+}
+
+i-glan-tholl > * + * {
+  margin-inline-start: var(--glan-tholl-space, var(--s1));
+}
+
+/* Images should maintain aspect ratio */
+i-glan-tholl > img {
+  block-size: 100%;
+  inline-size: auto;
+  flex-basis: auto;
+}
+
+/* Webkit scrollbar styling */
+i-glan-tholl::-webkit-scrollbar {
+  block-size: 0.75rem;
+}
+
+i-glan-tholl::-webkit-scrollbar-track {
+  background-color: var(--color-light);
+}
+
+i-glan-tholl::-webkit-scrollbar-thumb {
+  background-color: var(--color-mid);
+  border-radius: var(--s-2);
+}
+
+/* Hide scrollbar variant */
+i-glan-tholl[no-bar] {
+  scrollbar-width: none;
+}
+
+i-glan-tholl[no-bar]::-webkit-scrollbar {
+  display: none;
+}
+
+/* Overflowing state (added via JS) */
+i-glan-tholl.overflowing {
+  padding-block-end: var(--glan-tholl-space, var(--s1));
+}
+
+i-glan-tholl.overflowing.no-bar {
+  padding-block-end: 0;
+}

package/primitives/glan-tholl/glan-tholl.js

@@ -0,0 +1,147 @@
+/**
+ * Reel Layout Custom Element
+ * 
+ * Horizontal scrolling container with native browser scrolling.
+ * Uses ResizeObserver and MutationObserver for overflow detection.
+ * 
+ * @property {string} itemWidth - Width of each item (default: auto)
+ * @property {string} space - Gap between items (default: var(--s1))
+ * @property {string} height - Height of the reel (default: auto)
+ * @property {boolean} noBar - Hide the scrollbar
+ * 
+ * @example
+ * <i-glan-tholl item-width="300px" space="var(--s2)">
+ *   <div>Card 1</div>
+ *   <div>Card 2</div>
+ *   <div>Card 3</div>
+ * </i-glan-tholl>
+ */
+
+class GlanThollLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['item-width', 'space', 'height', 'no-bar'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+    this.toggleOverflowClass = this.toggleOverflowClass.bind(this);
+    this.resizeObserver = null;
+    this.mutationObserver = null;
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupObservers();
+  }
+
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get itemWidth() {
+    return this.getAttribute('item-width') || 'auto';
+  }
+
+  set itemWidth(val) {
+    this.setAttribute('item-width', val);
+  }
+
+  get space() {
+    return this.getAttribute('space') || 'var(--s1)';
+  }
+
+  set space(val) {
+    this.setAttribute('space', val);
+  }
+
+  get height() {
+    return this.getAttribute('height') || 'auto';
+  }
+
+  set height(val) {
+    this.setAttribute('height', val);
+  }
+
+  get noBar() {
+    return this.hasAttribute('no-bar');
+  }
+
+  set noBar(val) {
+    if (val) {
+      this.setAttribute('no-bar', '');
+    } else {
+      this.removeAttribute('no-bar');
+    }
+  }
+
+  toggleOverflowClass() {
+    this.classList.toggle('overflowing', this.scrollWidth > this.clientWidth);
+  }
+
+  setupObservers() {
+    // ResizeObserver for container size changes
+    if ('ResizeObserver' in window) {
+      this.resizeObserver = new ResizeObserver(entries => {
+        this.toggleOverflowClass();
+      });
+      this.resizeObserver.observe(this);
+    }
+
+    // MutationObserver for child changes
+    if ('MutationObserver' in window) {
+      this.mutationObserver = new MutationObserver(entries => {
+        this.toggleOverflowClass();
+      });
+      this.mutationObserver.observe(this, { childList: true });
+    }
+
+    // Initial check
+    this.toggleOverflowClass();
+  }
+
+  render() {
+    this.style.setProperty('--glan-tholl-item-width', this.itemWidth);
+    this.style.setProperty('--glan-tholl-space', this.space);
+    this.style.setProperty('--glan-tholl-height', this.height);
+
+    const noBarStr = this.noBar ? '-noBar' : '';
+    const id = `GlanTholl-${this.itemWidth}-${this.space}-${this.height}${noBarStr}`.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} {
+          block-size: ${this.height};
+        }
+        ${selector} > * {
+          flex: 0 0 ${this.itemWidth};
+        }
+        ${selector} > * + * {
+          margin-inline-start: ${this.space};
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-glan-tholl', GlanThollLayout);
+}
+
+export default GlanThollLayout;

package/primitives/glan-veleg/glan-veleg.css

@@ -0,0 +1,45 @@
+/**
+ * GlanVeleg Layout
+ * 
+ * A two-element layout where one has a fixed width (sidebar)
+ * and the other fills remaining space. Switches to vertical
+ * when the non-sidebar would be less than a threshold.
+ */
+
+i-glan-veleg {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--glan-veleg-space, var(--s1));
+}
+
+/* Default: sidebar is the first child (left side) */
+i-glan-veleg > * {
+  flex-grow: 1;
+}
+
+i-glan-veleg > :first-child {
+  flex-basis: var(--glan-veleg-width, 20rem);
+}
+
+i-glan-veleg > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--glan-veleg-content-min, 50%);
+}
+
+/* When sidebar is on the right */
+i-glan-veleg[side="right"] > :first-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--glan-veleg-content-min, 50%);
+}
+
+i-glan-veleg[side="right"] > :last-child {
+  flex-basis: var(--glan-veleg-width, 20rem);
+  flex-grow: 1;
+}
+
+/* Disable equal height stretching */
+i-glan-veleg[no-stretch] {
+  align-items: flex-start;
+}