vanilla-breeze 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-breeze",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A layered HTML component system extending HTML's native model",
   "type": "module",
   "main": "./dist/cdn/vanilla-breeze.js",
@@ -44,7 +44,6 @@
     "!dist/cdn/doc-extras.js",
     "!dist/cdn/emoji-extended.js",
     "!dist/cdn/sw.js",
-    "!dist/cdn/vanilla-breeze-autoload.js",
     "!dist/cdn/packs/icons/fonts/",
     "custom-elements.json",
     "README.md",
@@ -70,6 +69,7 @@
     "build:dev": "cd site && npm run build",
     "build:site": "cd site && npm run build",
     "build:api": "node scripts/build-api-registry.js",
+    "check:links": "node scripts/check-links.mjs",
     "check:nav": "node scripts/check-nav-drift.js",
     "build:feed": "node scripts/build-feed.js",
     "build:cdn": "node scripts/build-cdn.js && npm run gen:icon-css",
@@ -82,7 +82,7 @@
     "preview": "cd site && npm run preview",
     "lint:html": "html-validate 'demos/**/*.html'",
     "vendor:marked": "cp node_modules/marked/lib/marked.esm.js src/vendor/marked/marked.esm.js && cp node_modules/marked/lib/marked.d.ts src/vendor/marked/marked.esm.d.ts",
-    "lint:js": "eslint --config .claude/eslint.config.js --ignore-pattern 'src/htmlvalidate/' --ignore-pattern 'src/vendor/' 'src/**/*.js'",
+    "lint:js": "eslint --config .claude/eslint.config.js --ignore-pattern 'src/htmlvalidate/' --ignore-pattern 'src/vendor/' 'src/**/*.js' --max-warnings 0",
     "lint:theme-tokens": "node scripts/quality/theme-token-coverage.js",
     "lint": "npm run lint:html",
     "test": "node --test 'tests/unit/**/*.test.js'",
@@ -117,6 +117,7 @@
     "@lhci/cli": "^0.15.1",
     "@profpowell/browser-window": "^1.4.6",
     "@profpowell/code-block": "^2.9.0",
+    "codex-claude-bridge": "^0.3.6",
     "cspell": "^10.0.0",
     "eslint": "^10.2.1",
     "eslint-plugin-jsdoc": "^62.7.1",
@@ -144,11 +145,15 @@
     "css",
     "custom-elements",
     "web-components",
-    "a11y"
+    "a11y",
+    "html-first",
+    "cascade-layers",
+    "design-tokens",
+    "themes",
+    "progressive-enhancement",
+    "layout"
   ],
   "license": "MIT",
   "customElements": "custom-elements.json",
-  "dependencies": {
-    "codex-claude-bridge": "^0.3.6"
-  }
+  "author": "Prof Powell (https://vanilla-breeze.com/)"
 }

package/dist/cdn/themes/amber.css

@@ -1,2 +0,0 @@
-:root[data-theme~=amber],[data-theme~=amber]{--hue-primary: 45;--hue-secondary: 30;--hue-accent: 240;--lightness-primary: 60%;--chroma-primary: .16;--lightness-secondary: 55%;--chroma-secondary: .15;--lightness-accent: 52%;--chroma-accent: .14}:root[data-theme~=amber][data-mode=dark],[data-theme~=amber][data-mode=dark]{--lightness-primary: 68%;--chroma-primary: .14}
-/*# sourceMappingURL=amber.css.map */

package/dist/cdn/themes/anthropic.css

@@ -1,2 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";@layer tokens, reset, native-elements, custom-elements, web-components, utils, bundle-theme, bundle-effects, bundle-components;@layer bundle-theme{:root[data-theme~=anthropic],[data-theme~=anthropic]{--color-background: #FAF9F7;--color-surface: #FFFFFF;--color-surface-raised: #F5F3F0;--color-surface-sunken: #F0EDE9;--color-border: #E5E2DD;--color-border-strong: #C5C0B8;--color-border-subtle: #EEEBE7;--color-text: #1A1A1A;--color-text-muted: #6B6B6B;--color-text-subtle: #9A9A9A;--color-text-on-primary: #FFFFFF;--color-primary: #CC785C;--color-primary-hover: #B5674D;--color-primary-active: #A05A42;--color-primary-subtle: #F5EBE6;--color-secondary: #8B7355;--color-secondary-hover: #7A6449;--color-accent: #CC785C;--color-accent-hover: #B5674D;--color-interactive: #CC785C;--color-interactive-hover: #B5674D;--color-focus-ring: #CC785C;--color-border-focus: #CC785C;--color-error: #D93025;--color-success: #188038;--color-warning: #E8A317;--color-info: #4285F4;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-heading: "Inter", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-display: "Inter", system-ui, sans-serif;--font-weight-semibold: 500;--letter-spacing-tight: -.02em;--line-height-normal: 1.6;--line-height-relaxed: 1.7;--radius-xs: .25rem;--radius-s: .375rem;--radius-m: .375rem;--radius-l: .5rem;--radius-xl: .75rem;--shadow-s: 0 1px 3px rgba(0, 0, 0, .06);--shadow-m: 0 4px 12px rgba(0, 0, 0, .06);--shadow-l: 0 8px 24px rgba(0, 0, 0, .08);--focus-ring-width: 2px;--focus-ring-offset: 2px;--header-bg: var(--color-surface);--brand-mark-height: 1.75rem;--color-overlay-subtle: rgba(26, 26, 26, .04);--color-overlay-medium: rgba(26, 26, 26, .12);--color-overlay-strong: rgba(26, 26, 26, .5)}}
-/*# sourceMappingURL=anthropic.css.map */

package/dist/cdn/themes/anthropic.tokens.json

@@ -1,564 +0,0 @@
-{
-  "color": {
-    "background": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9803921568627451,
-          0.9764705882352941,
-          0.9686274509803922
-        ],
-        "hex": "#faf9f7"
-      }
-    },
-    "surface": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          1,
-          1,
-          1
-        ],
-        "hex": "#ffffff"
-      }
-    },
-    "surface-raised": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9607843137254902,
-          0.9529411764705882,
-          0.9411764705882353
-        ],
-        "hex": "#f5f3f0"
-      }
-    },
-    "surface-sunken": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9411764705882353,
-          0.9294117647058824,
-          0.9137254901960784
-        ],
-        "hex": "#f0ede9"
-      }
-    },
-    "border": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.8980392156862745,
-          0.8862745098039215,
-          0.8666666666666667
-        ],
-        "hex": "#e5e2dd"
-      }
-    },
-    "border-strong": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.7725490196078432,
-          0.7529411764705882,
-          0.7215686274509804
-        ],
-        "hex": "#c5c0b8"
-      }
-    },
-    "border-subtle": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9333333333333333,
-          0.9215686274509803,
-          0.9058823529411765
-        ],
-        "hex": "#eeebe7"
-      }
-    },
-    "text": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.10196078431372549,
-          0.10196078431372549,
-          0.10196078431372549
-        ],
-        "hex": "#1a1a1a"
-      }
-    },
-    "text-muted": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.4196078431372549,
-          0.4196078431372549,
-          0.4196078431372549
-        ],
-        "hex": "#6b6b6b"
-      }
-    },
-    "text-subtle": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.6039215686274509,
-          0.6039215686274509,
-          0.6039215686274509
-        ],
-        "hex": "#9a9a9a"
-      }
-    },
-    "text-on-primary": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          1,
-          1,
-          1
-        ],
-        "hex": "#ffffff"
-      }
-    },
-    "primary": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.8,
-          0.47058823529411764,
-          0.3607843137254902
-        ],
-        "hex": "#cc785c"
-      }
-    },
-    "primary-hover": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.7098039215686275,
-          0.403921568627451,
-          0.30196078431372547
-        ],
-        "hex": "#b5674d"
-      }
-    },
-    "primary-active": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.6274509803921569,
-          0.35294117647058826,
-          0.25882352941176473
-        ],
-        "hex": "#a05a42"
-      }
-    },
-    "primary-subtle": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9607843137254902,
-          0.9215686274509803,
-          0.9019607843137255
-        ],
-        "hex": "#f5ebe6"
-      }
-    },
-    "secondary": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.5450980392156862,
-          0.45098039215686275,
-          0.3333333333333333
-        ],
-        "hex": "#8b7355"
-      }
-    },
-    "secondary-hover": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.47843137254901963,
-          0.39215686274509803,
-          0.28627450980392155
-        ],
-        "hex": "#7a6449"
-      }
-    },
-    "accent": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.8,
-          0.47058823529411764,
-          0.3607843137254902
-        ],
-        "hex": "#cc785c"
-      }
-    },
-    "accent-hover": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.7098039215686275,
-          0.403921568627451,
-          0.30196078431372547
-        ],
-        "hex": "#b5674d"
-      }
-    },
-    "interactive": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.8,
-          0.47058823529411764,
-          0.3607843137254902
-        ],
-        "hex": "#cc785c"
-      }
-    },
-    "interactive-hover": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.7098039215686275,
-          0.403921568627451,
-          0.30196078431372547
-        ],
-        "hex": "#b5674d"
-      }
-    },
-    "focus-ring": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.8,
-          0.47058823529411764,
-          0.3607843137254902
-        ],
-        "hex": "#cc785c"
-      }
-    },
-    "border-focus": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.8,
-          0.47058823529411764,
-          0.3607843137254902
-        ],
-        "hex": "#cc785c"
-      }
-    },
-    "error": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.8509803921568627,
-          0.18823529411764706,
-          0.1450980392156863
-        ],
-        "hex": "#d93025"
-      }
-    },
-    "success": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.09411764705882353,
-          0.5019607843137255,
-          0.2196078431372549
-        ],
-        "hex": "#188038"
-      }
-    },
-    "warning": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9098039215686274,
-          0.6392156862745098,
-          0.09019607843137255
-        ],
-        "hex": "#e8a317"
-      }
-    },
-    "info": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.25882352941176473,
-          0.5215686274509804,
-          0.9568627450980393
-        ],
-        "hex": "#4285f4"
-      }
-    },
-    "overlay-subtle": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.10196078431372549,
-          0.10196078431372549,
-          0.10196078431372549
-        ],
-        "alpha": 0.04
-      }
-    },
-    "overlay-medium": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.10196078431372549,
-          0.10196078431372549,
-          0.10196078431372549
-        ],
-        "alpha": 0.12
-      }
-    },
-    "overlay-strong": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.10196078431372549,
-          0.10196078431372549,
-          0.10196078431372549
-        ],
-        "alpha": 0.5
-      }
-    }
-  },
-  "typography": {
-    "family": {
-      "sans": {
-        "$type": "fontFamily",
-        "$value": [
-          "Inter",
-          "system-ui",
-          "-apple-system",
-          "sans-serif"
-        ]
-      },
-      "heading": {
-        "$type": "fontFamily",
-        "$value": [
-          "Inter",
-          "system-ui",
-          "sans-serif"
-        ]
-      },
-      "body": {
-        "$type": "fontFamily",
-        "$value": [
-          "Inter",
-          "system-ui",
-          "sans-serif"
-        ]
-      },
-      "display": {
-        "$type": "fontFamily",
-        "$value": [
-          "Inter",
-          "system-ui",
-          "sans-serif"
-        ]
-      }
-    },
-    "weight": {
-      "semibold": {
-        "$type": "fontWeight",
-        "$value": 500
-      }
-    },
-    "letterSpacing": {
-      "tight": {
-        "$type": "dimension",
-        "$value": {
-          "value": -0.02,
-          "unit": "rem"
-        },
-        "$extensions": {
-          "com.vanilla-breeze": {
-            "unit": "em"
-          }
-        }
-      }
-    },
-    "lineHeight": {
-      "normal": {
-        "$type": "number",
-        "$value": 1.6
-      },
-      "relaxed": {
-        "$type": "number",
-        "$value": 1.7
-      }
-    }
-  },
-  "border": {
-    "radius": {
-      "xs": {
-        "$type": "dimension",
-        "$value": {
-          "value": 0.25,
-          "unit": "rem"
-        }
-      },
-      "s": {
-        "$type": "dimension",
-        "$value": {
-          "value": 0.375,
-          "unit": "rem"
-        }
-      },
-      "m": {
-        "$type": "dimension",
-        "$value": {
-          "value": 0.375,
-          "unit": "rem"
-        }
-      },
-      "l": {
-        "$type": "dimension",
-        "$value": {
-          "value": 0.5,
-          "unit": "rem"
-        }
-      },
-      "xl": {
-        "$type": "dimension",
-        "$value": {
-          "value": 0.75,
-          "unit": "rem"
-        }
-      }
-    }
-  },
-  "effect": {
-    "shadow": {
-      "s": {
-        "$type": "shadow",
-        "$value": {
-          "offsetX": {
-            "value": 0,
-            "unit": "px"
-          },
-          "offsetY": {
-            "value": 1,
-            "unit": "px"
-          },
-          "blur": {
-            "value": 3,
-            "unit": "px"
-          },
-          "color": {
-            "colorSpace": "srgb",
-            "components": [
-              0,
-              0,
-              0
-            ],
-            "alpha": 0.06
-          }
-        }
-      },
-      "m": {
-        "$type": "shadow",
-        "$value": {
-          "offsetX": {
-            "value": 0,
-            "unit": "px"
-          },
-          "offsetY": {
-            "value": 4,
-            "unit": "px"
-          },
-          "blur": {
-            "value": 12,
-            "unit": "px"
-          },
-          "color": {
-            "colorSpace": "srgb",
-            "components": [
-              0,
-              0,
-              0
-            ],
-            "alpha": 0.06
-          }
-        }
-      },
-      "l": {
-        "$type": "shadow",
-        "$value": {
-          "offsetX": {
-            "value": 0,
-            "unit": "px"
-          },
-          "offsetY": {
-            "value": 8,
-            "unit": "px"
-          },
-          "blur": {
-            "value": 24,
-            "unit": "px"
-          },
-          "color": {
-            "colorSpace": "srgb",
-            "components": [
-              0,
-              0,
-              0
-            ],
-            "alpha": 0.08
-          }
-        }
-      }
-    }
-  },
-  "$extensions": {
-    "com.vanilla-breeze": {
-      "spec": "2025.10",
-      "vbVersion": "0.4.0",
-      "unmapped": [
-        "--focus-ring-width",
-        "--focus-ring-offset",
-        "--header-bg",
-        "--brand-mark-height"
-      ]
-    }
-  }
-}

package/dist/cdn/themes/coral.css

@@ -1,2 +0,0 @@
-:root[data-theme~=coral],[data-theme~=coral]{--hue-primary: 15;--hue-secondary: 25;--hue-accent: 180;--lightness-primary: 60%;--chroma-primary: .18;--lightness-secondary: 55%;--chroma-secondary: .15;--lightness-accent: 55%;--chroma-accent: .12}:root[data-theme~=coral][data-mode=dark],[data-theme~=coral][data-mode=dark]{--lightness-primary: 65%;--chroma-primary: .15}
-/*# sourceMappingURL=coral.css.map */

package/dist/cdn/themes/emerald.css

@@ -1,2 +0,0 @@
-:root[data-theme~=emerald],[data-theme~=emerald]{--hue-primary: 160;--hue-secondary: 140;--hue-accent: 30;--lightness-primary: 50%;--chroma-primary: .15;--lightness-secondary: 48%;--chroma-secondary: .12;--lightness-accent: 65%;--chroma-accent: .16}:root[data-theme~=emerald][data-mode=dark],[data-theme~=emerald][data-mode=dark]{--lightness-primary: 60%;--chroma-primary: .12}
-/*# sourceMappingURL=emerald.css.map */

package/dist/cdn/themes/forest.css

@@ -1,2 +0,0 @@
-:root[data-theme~=forest],[data-theme~=forest]{--hue-primary: 145;--hue-secondary: 90;--hue-accent: 30;--lightness-primary: 45%;--chroma-primary: .15;--lightness-secondary: 55%;--chroma-secondary: .12;--lightness-accent: 65%;--chroma-accent: .16}:root[data-theme~=forest][data-mode=dark],[data-theme~=forest][data-mode=dark]{--lightness-primary: 55%;--chroma-primary: .12}
-/*# sourceMappingURL=forest.css.map */

package/dist/cdn/themes/ibm.css

@@ -1,2 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Mono:wght@400;600&display=swap";@layer tokens, reset, native-elements, custom-elements, web-components, utils, bundle-theme, bundle-effects, bundle-components;@layer bundle-theme{:root[data-theme~=ibm],[data-theme~=ibm]{--color-background: #F4F4F4;--color-surface: #FFFFFF;--color-surface-raised: #E0E0E0;--color-surface-sunken: #E8E8E8;--color-border: #8D8D8D;--color-border-strong: #6F6F6F;--color-border-subtle: #C6C6C6;--color-text: #161616;--color-text-muted: #525252;--color-text-subtle: #6F6F6F;--color-text-on-primary: #FFFFFF;--color-primary: #0F62FE;--color-primary-hover: #0050E6;--color-primary-active: #002D9C;--color-primary-subtle: #EDF5FF;--color-secondary: #393939;--color-secondary-hover: #474747;--color-accent: #0F62FE;--color-accent-hover: #0050E6;--color-interactive: #0F62FE;--color-interactive-hover: #0050E6;--color-focus-ring: #0F62FE;--color-border-focus: #0F62FE;--color-error: #DA1E28;--color-success: #198038;--color-warning: #F1C21B;--color-info: #0043CE;--font-sans: "IBM Plex Sans", "Arial", sans-serif;--font-mono: "IBM Plex Mono", "Courier New", monospace;--font-heading: "IBM Plex Sans", "Arial", sans-serif;--font-body: "IBM Plex Sans", "Arial", sans-serif;--font-display: "IBM Plex Sans", "Arial", sans-serif;--font-size-m: .875rem;--font-size-s: .75rem;--font-weight-semibold: 600;--letter-spacing-tight: 0;--line-height-normal: 1.5;--radius-xs: 0;--radius-s: 0;--radius-m: 0;--radius-l: 0;--radius-xl: 0;--radius-2xl: 0;--radius-full: 0;--shadow-s: 0 2px 6px rgba(0, 0, 0, .12);--shadow-m: 0 2px 6px rgba(0, 0, 0, .2);--shadow-l: 0 8px 24px rgba(0, 0, 0, .16);--focus-ring-width: 2px;--focus-ring-offset: -2px;--input-focus-shadow: inset 0 0 0 2px #0F62FE;--header-bg: #161616;--btn-padding-inline-start: 1rem;--btn-padding-inline-end: 4rem;--brand-mark-height: 1.5rem;--size-unit: .5rem}:root[data-theme~=ibm] header.site{--_link-color: #F4F4F4;--_hover-color: #FFFFFF;--_active-color: #FFFFFF;color:#f4f4f4;border-block-end:none}:root[data-theme~=ibm] header.site brand-mark{color:#fff}:root[data-theme~=ibm] header.site nav.pills [aria-current=page],:root[data-theme~=ibm] header.site nav.pills a:where([aria-current=page]){background:transparent;color:#fff;border-block-end:2px solid #0F62FE}}
-/*# sourceMappingURL=ibm.css.map */