elvish-css 1.0.0

package/global/utilities.css

@@ -0,0 +1,151 @@
+/**
+ * Elvish - Utilities
+ * 
+ * Final adjustments. Use sparingly.
+ * Naming convention: property\:value
+ * 
+ * !important is intentional - utilities are for overrides.
+ */
+
+/* ===== TEXT ALIGNMENT ===== */
+.text-align\:start { text-align: start !important; }
+.text-align\:center { text-align: center !important; }
+.text-align\:end { text-align: end !important; }
+
+/* ===== FONT SIZES ===== */
+.font-size\:s-2 { font-size: var(--s-2) !important; }
+.font-size\:s-1 { font-size: var(--s-1) !important; }
+.font-size\:s0 { font-size: var(--s0) !important; }
+.font-size\:s1 { font-size: var(--s1) !important; }
+.font-size\:s2 { font-size: var(--s2) !important; }
+.font-size\:s3 { font-size: var(--s3) !important; }
+.font-size\:s4 { font-size: var(--s4) !important; }
+
+/* ===== FONT WEIGHT ===== */
+.font-weight\:normal { font-weight: normal !important; }
+.font-weight\:bold { font-weight: bold !important; }
+
+/* ===== COLORS ===== */
+.color\:dark { color: var(--color-dark) !important; }
+.color\:light { color: var(--color-light) !important; }
+.color\:accent { color: var(--color-accent) !important; }
+
+.bg\:dark { background-color: var(--color-dark) !important; }
+.bg\:light { background-color: var(--color-light) !important; }
+.bg\:accent { background-color: var(--color-accent) !important; }
+
+/* ===== MEASURE ===== */
+.max-inline-size\:measure { max-inline-size: var(--measure) !important; }
+.max-inline-size\:measure\/2 { max-inline-size: calc(var(--measure) / 2) !important; }
+.max-inline-size\:measure\/3 { max-inline-size: calc(var(--measure) / 3) !important; }
+.max-inline-size\:none { max-inline-size: none !important; }
+
+/* ===== WIDTH ===== */
+.inline-size\:100 { inline-size: 100% !important; }
+.inline-size\:auto { inline-size: auto !important; }
+
+/* ===== HEIGHT ===== */
+.block-size\:100 { block-size: 100% !important; }
+.block-size\:100vh { block-size: 100vh !important; }
+.block-size\:auto { block-size: auto !important; }
+
+/* ===== MARGIN ===== */
+.margin\:0 { margin: 0 !important; }
+.margin-block\:0 { margin-block: 0 !important; }
+.margin-inline\:0 { margin-inline: 0 !important; }
+.margin-inline\:auto { margin-inline: auto !important; }
+
+/* ===== PADDING ===== */
+.padding\:s-1 { padding: var(--s-1) !important; }
+.padding\:s0 { padding: var(--s0) !important; }
+.padding\:s1 { padding: var(--s1) !important; }
+.padding\:s2 { padding: var(--s2) !important; }
+
+/* ===== GAP ===== */
+.gap\:s-1 { gap: var(--s-1) !important; }
+.gap\:s0 { gap: var(--s0) !important; }
+.gap\:s1 { gap: var(--s1) !important; }
+.gap\:s2 { gap: var(--s2) !important; }
+
+/* ===== FLEX ===== */
+.flex-grow\:1 { flex-grow: 1 !important; }
+.flex-shrink\:0 { flex-shrink: 0 !important; }
+
+/* ===== OVERFLOW ===== */
+.overflow\:hidden { overflow: hidden !important; }
+.overflow\:auto { overflow: auto !important; }
+
+/* ===== POSITION ===== */
+.position\:relative { position: relative !important; }
+.position\:absolute { position: absolute !important; }
+.position\:fixed { position: fixed !important; }
+.position\:sticky { position: sticky !important; }
+
+/* ===== DISPLAY ===== */
+.display\:none { display: none !important; }
+.display\:block { display: block !important; }
+.display\:inline { display: inline !important; }
+.display\:inline-block { display: inline-block !important; }
+.display\:flex { display: flex !important; }
+.display\:grid { display: grid !important; }
+
+/* ===== BORDERS ===== */
+.border\:thin { border-width: var(--border-thin) !important; }
+.border\:thick { border-width: var(--border-thick) !important; }
+.border-radius\:s-2 { border-radius: var(--s-2) !important; }
+.border-radius\:s-1 { border-radius: var(--s-1) !important; }
+.border-radius\:s0 { border-radius: var(--s0) !important; }
+
+/* ===== SHADOWS ===== */
+.shadow\:small {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
+}
+.shadow\:medium {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
+}
+.shadow\:large {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10) !important;
+}
+
+/* ===== Z-INDEX ===== */
+/* Use sparingly! Prefer source order. */
+.z\:0 { z-index: 0 !important; }
+.z\:1 { z-index: 1 !important; }
+.z\:10 { z-index: 10 !important; }
+.z\:100 { z-index: 100 !important; }
+
+/* ===== LISTS ===== */
+.list-style\:disc { list-style: disc !important; padding-inline-start: 1em !important; }
+.list-style\:decimal { list-style: decimal !important; padding-inline-start: 1em !important; }
+
+/* ===== CURSOR ===== */
+.cursor\:pointer { cursor: pointer !important; }
+.cursor\:not-allowed { cursor: not-allowed !important; }
+
+/* ===== USER SELECT ===== */
+.user-select\:none { user-select: none !important; }
+.user-select\:all { user-select: all !important; }
+
+/* ===== RATIO MODES ===== */
+/* 
+ * Switch the modular scale ratio for a container and all descendants.
+ * Golden (φ): Dramatic, high-impact - ideal for marketing, CTAs
+ * Silver (√2): Subtle, refined - ideal for documentation, dense content
+ * Fifth (1.5): Balanced middle-ground
+ * 
+ * Also adjusts --measure (line length) to complement each ratio:
+ * Golden: 60ch (tighter), Fifth: 70ch (balanced), Silver: 80ch (looser)
+ */
+.ratio\:golden { --ratio: var(--ratio-golden) !important; --measure: 60ch !important; }
+.ratio\:silver { --ratio: var(--ratio-silver) !important; --measure: 80ch !important; }
+.ratio\:fifth { --ratio: var(--ratio-fifth) !important; --measure: 70ch !important; }
+
+/* Aliases for convenience */
+.ratio\:dramatic { --ratio: var(--ratio-golden) !important; --measure: 60ch !important; }
+.ratio\:subtle { --ratio: var(--ratio-silver) !important; --measure: 80ch !important; }
+.ratio\:balanced { --ratio: var(--ratio-fifth) !important; --measure: 70ch !important; }
+
+/* Data attribute alternative (for JS toggling) */
+[data-ratio="golden"] { --ratio: var(--ratio-golden); --measure: 60ch; }
+[data-ratio="silver"] { --ratio: var(--ratio-silver); --measure: 80ch; }
+[data-ratio="fifth"] { --ratio: var(--ratio-fifth); --measure: 70ch; }

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "elvish-css",
+  "version": "1.0.0",
+  "description": "Intrinsic CSS layout-first styling primitives with Sindarin names",
+  "keywords": [
+    "css",
+    "layout",
+    "custom-elements",
+    "web-components",
+    "intrinsic-design",
+    "view-transitions"
+  ],
+  "author": "Mark Manley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/star-this/elvish-css.git"
+  },
+  "homepage": "https://github.com/star-this/elvish-css#readme",
+  "type": "module",
+  "main": "dist/elvish.umd.js",
+  "module": "dist/elvish.esm.js",
+  "types": "dist/elvish.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/elvish.esm.js",
+      "require": "./dist/elvish.umd.js",
+      "types": "./dist/elvish.d.ts"
+    },
+    "./css": "./dist/elvish.css",
+    "./css/min": "./dist/elvish.min.css",
+    "./transitions": {
+      "import": "./global/transitions.js",
+      "types": "./dist/transitions.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "global",
+    "primitives",
+    "elvish.css",
+    "elvish.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node scripts/build.js",
+    "build:watch": "node scripts/build.js --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "esbuild": "^0.20.0",
+    "lightningcss": "^1.24.0"
+  },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "last 2 Edge versions"
+  ]
+}

package/primitives/adleithian/adleithian.css

@@ -0,0 +1,16 @@
+/**
+ * Adleithian Layout
+ * 
+ * Establishes a container query context.
+ * The escape hatch for when intrinsic layouts need manual intervention.
+ */
+
+i-adleithian {
+  display: block;
+  adleithian-type: inline-size;
+}
+
+/* Named containers use the name attribute */
+i-adleithian[name] {
+  adleithian-name: attr(name);
+}

package/primitives/adleithian/adleithian.js

@@ -0,0 +1,63 @@
+/**
+ * Adleithian Layout Custom Element
+ * 
+ * Establishes a container query context.
+ * 
+ * @property {string} name - Adleithian name for targeted queries (optional)
+ * 
+ * @example
+ * <i-adleithian name="card">
+ *   <div class="card">...</div>
+ * </i-adleithian>
+ * 
+ * CSS:
+ * @container card (width < 300px) {
+ *   .card { flex-direction: column; }
+ * }
+ */
+
+class AdleithianLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['name'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get name() {
+    return this.getAttribute('name');
+  }
+
+  set name(val) {
+    if (val) {
+      this.setAttribute('name', val);
+    } else {
+      this.removeAttribute('name');
+    }
+  }
+
+  render() {
+    // Set adleithian-name via style if provided
+    if (this.name) {
+      this.style.containerName = this.name;
+    } else {
+      this.style.containerName = '';
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-adleithian', AdleithianLayout);
+}
+
+export default AdleithianLayout;

package/primitives/bau/bau.css

@@ -0,0 +1,86 @@
+/**
+ * Box Layout (i-bau)
+ * 
+ * A container primitive focused on padding/structure.
+ * Visual styling (borders, backgrounds) is opt-in via attributes.
+ * 
+ * Layout-first philosophy: invisible by default, styled explicitly.
+ * 
+ * Attributes:
+ *   padding="..."     - Override padding (default: var(--s1))
+ *   border            - Add border
+ *   border-width="..."- Custom border width
+ *   bg                - Add background color
+ *   invert            - Invert colors (dark bg, light text)
+ *   compact           - Remove padding
+ *   borderless        - Explicitly remove border (for overriding)
+ */
+
+i-bau {
+  display: block;
+  padding: var(--bau-padding, var(--s1));
+  
+  /* Color tokens - can be overridden per-instance */
+  --bau-color-light: var(--color-surface-raised, var(--color-light));
+  --bau-color-dark: var(--color-text, var(--color-dark));
+  --bau-border-color: var(--color-border, currentColor);
+  
+  /* Layout-first: no visual styling by default */
+  /* Border width and background are 0/transparent from reset.css */
+}
+
+/* ===== VISUAL STYLING (Opt-in) ===== */
+
+/* Add border - use [border] attribute */
+i-bau[border] {
+  border-width: var(--bau-border-width, var(--border-thin, 1px));
+  border-color: var(--bau-border-color);
+}
+
+/* Custom border width */
+i-bau[border-width] {
+  border-width: var(--bau-border-width, var(--border-thin, 1px));
+  border-color: var(--bau-border-color);
+}
+
+/* Add background - use [bg] attribute */
+i-bau[bg] {
+  background-color: var(--bau-color-light);
+  color: var(--bau-color-dark);
+}
+
+/* Inverted color scheme (implies bg) */
+i-bau[invert] {
+  background-color: var(--bau-color-dark);
+  color: var(--bau-color-light);
+}
+
+/* Combined: border + background */
+i-bau[border][bg],
+i-bau[border][invert] {
+  border-width: var(--bau-border-width, var(--border-thin, 1px));
+  border-color: var(--bau-border-color);
+}
+
+/* ===== LAYOUT VARIANTS ===== */
+
+/* No padding */
+i-bau[compact] {
+  padding: 0;
+}
+
+/* Explicitly no border (for overriding inherited styles) */
+i-bau[borderless] {
+  border-width: 0;
+}
+
+/* ===== HIGH CONTRAST MODE ===== */
+/* Transparent outline for Windows High Contrast Mode */
+@media (forced-colors: active) {
+  i-bau[border],
+  i-bau[bg],
+  i-bau[invert] {
+    outline: var(--bau-border-width, 1px) solid transparent;
+    outline-offset: calc(var(--bau-border-width, 1px) * -1);
+  }
+}

package/primitives/bau/bau.js

@@ -0,0 +1,127 @@
+/**
+ * Box Layout Custom Element
+ * 
+ * A simple container with padding and optional border/background.
+ * 
+ * @property {string} padding - A CSS padding value (default: var(--s1))
+ * @property {string} borderWidth - A CSS border-width value (default: var(--border-thin))
+ * @property {boolean} invert - Swap foreground and background colors
+ * @property {boolean} borderless - Remove border
+ * @property {boolean} compact - Remove padding
+ * 
+ * @example
+ * <i-bau padding="var(--s2)" invert>
+ *   <p>Content in a box</p>
+ * </i-bau>
+ */
+
+class BauLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['padding', 'border-width', 'invert', 'borderless', 'compact'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get padding() {
+    return this.getAttribute('padding') || 'var(--s1)';
+  }
+
+  set padding(val) {
+    this.setAttribute('padding', val);
+  }
+
+  get borderWidth() {
+    return this.getAttribute('border-width') || 'var(--border-thin)';
+  }
+
+  set borderWidth(val) {
+    this.setAttribute('border-width', val);
+  }
+
+  get invert() {
+    return this.hasAttribute('invert');
+  }
+
+  set invert(val) {
+    if (val) {
+      this.setAttribute('invert', '');
+    } else {
+      this.removeAttribute('invert');
+    }
+  }
+
+  get borderless() {
+    return this.hasAttribute('borderless');
+  }
+
+  set borderless(val) {
+    if (val) {
+      this.setAttribute('borderless', '');
+    } else {
+      this.removeAttribute('borderless');
+    }
+  }
+
+  get compact() {
+    return this.hasAttribute('compact');
+  }
+
+  set compact(val) {
+    if (val) {
+      this.setAttribute('compact', '');
+    } else {
+      this.removeAttribute('compact');
+    }
+  }
+
+  render() {
+    // Set CSS custom properties for this instance
+    this.style.setProperty('--bau-padding', this.padding);
+    this.style.setProperty('--bau-border-width', this.borderWidth);
+
+    // Generate unique identifier
+    const invertStr = this.invert ? '-invert' : '';
+    const borderlessStr = this.borderless ? '-borderless' : '';
+    const compactStr = this.compact ? '-compact' : '';
+    const id = `Bau-${this.padding}-${this.borderWidth}${invertStr}${borderlessStr}${compactStr}`.replace(/[^\w-]/g, '');
+    
+    this.dataset.i = id;
+
+    // Check if styles already exist
+    if (!document.getElementById(id)) {
+      const styleEl = document.createElement('style');
+      styleEl.id = id;
+      
+      const selector = `[data-i="${id}"]`;
+      let css = `${selector} { padding: ${this.padding}; border-width: ${this.borderWidth}; }`;
+      
+      if (this.borderless) {
+        css += `${selector} { border-width: 0; }`;
+      }
+      
+      if (this.compact) {
+        css += `${selector} { padding: 0; }`;
+      }
+
+      styleEl.textContent = css;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-bau', BauLayout);
+}
+
+export default BauLayout;

package/primitives/enedh/enedh.css

@@ -0,0 +1,38 @@
+/**
+ * Center Layout
+ * 
+ * Horizontally centers content with a maximum width.
+ * Preserves gutters (minimum space on sides) in narrow contexts.
+ */
+
+i-enedh {
+  display: block;
+  
+  /* Use content-box so padding adds to the max-width, not subtracts */
+  box-sizing: content-box;
+  
+  /* Center with auto margins */
+  margin-inline: auto;
+  
+  /* 
+   * Maximum width - JS sets --enedh-max from the max attribute.
+   * Fallback chain: attribute value → 100% (full width until JS runs)
+   * This ensures layouts work even if JS fails to load.
+   */
+  max-inline-size: var(--enedh-max, 100%);
+  
+  /* Gutters - minimum space on either side */
+  padding-inline: var(--enedh-gutters, 0);
+}
+
+/* Intrinsic centering - center children based on their content width */
+i-enedh[intrinsic] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Also center the text */
+i-enedh[and-text] {
+  text-align: center;
+}

package/primitives/enedh/enedh.js

@@ -0,0 +1,110 @@
+/**
+ * Center Layout Custom Element
+ * 
+ * Horizontally centers content with a maximum width.
+ * 
+ * @property {string} max - Maximum width (default: var(--measure))
+ * @property {string} gutters - Minimum space on sides (default: 0)
+ * @property {boolean} intrinsic - Center children based on their content width
+ * @property {boolean} andText - Also center text alignment
+ * 
+ * @example
+ * <i-enedh max="40ch" gutters="var(--s1)">
+ *   <p>Centered content</p>
+ * </i-enedh>
+ */
+
+class EnedhLayout extends HTMLElement {
+  static get observedAttributes() {
+    return ['max', 'gutters', 'intrinsic', 'and-text'];
+  }
+
+  constructor() {
+    super();
+    this.render = this.render.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get max() {
+    return this.getAttribute('max') || 'var(--measure)';
+  }
+
+  set max(val) {
+    this.setAttribute('max', val);
+  }
+
+  get gutters() {
+    return this.getAttribute('gutters') || '0';
+  }
+
+  set gutters(val) {
+    this.setAttribute('gutters', val);
+  }
+
+  get intrinsic() {
+    return this.hasAttribute('intrinsic');
+  }
+
+  set intrinsic(val) {
+    if (val) {
+      this.setAttribute('intrinsic', '');
+    } else {
+      this.removeAttribute('intrinsic');
+    }
+  }
+
+  get andText() {
+    return this.hasAttribute('and-text');
+  }
+
+  set andText(val) {
+    if (val) {
+      this.setAttribute('and-text', '');
+    } else {
+      this.removeAttribute('and-text');
+    }
+  }
+
+  render() {
+    this.style.setProperty('--enedh-max', this.max);
+    this.style.setProperty('--enedh-gutters', this.gutters);
+
+    const intrinsicStr = this.intrinsic ? '-intrinsic' : '';
+    const textStr = this.andText ? '-andText' : '';
+    const id = `Enedh-${this.max}-${this.gutters}${intrinsicStr}${textStr}`.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} { max-inline-size: ${this.max}; padding-inline: ${this.gutters}; }`;
+      
+      if (this.intrinsic) {
+        css += `${selector} { display: flex; flex-direction: column; align-items: center; }`;
+      }
+      
+      if (this.andText) {
+        css += `${selector} { text-align: center; }`;
+      }
+
+      styleEl.textContent = css;
+      document.head.appendChild(styleEl);
+    }
+  }
+}
+
+if ('customElements' in window) {
+  customElements.define('i-enedh', EnedhLayout);
+}
+
+export default EnedhLayout;

package/primitives/esgal/esgal.css

@@ -0,0 +1,39 @@
+/**
+ * Cover Layout
+ * 
+ * Vertically centers a principal element with optional
+ * header and footer elements. Perfect for hero sections.
+ */
+
+i-esgal {
+  display: flex;
+  flex-direction: column;
+  min-block-size: var(--esgal-min-height, 100vh);
+  padding: var(--esgal-space, var(--s1));
+}
+
+i-esgal > * {
+  margin-block: var(--esgal-space, var(--s1));
+}
+
+/* The centered element - default is h1 */
+i-esgal > :first-child:not(h1, h2, h3, [data-centered]) {
+  margin-block-start: 0;
+}
+
+i-esgal > :last-child:not(h1, h2, h3, [data-centered]) {
+  margin-block-end: 0;
+}
+
+/* Elements that should be centered */
+i-esgal > h1,
+i-esgal > h2,
+i-esgal > h3,
+i-esgal > [data-centered] {
+  margin-block: auto;
+}
+
+/* No padding variant */
+i-esgal[no-pad] {
+  padding: 0;
+}