@wildmason/aegis 2.1.0 → 2.2.0

package/inputs.css

@@ -26,6 +26,10 @@
    .wm-shadow-md        box-shadow: --wm-shadow-md — cards, dropdowns, popovers
    .wm-shadow-lg        box-shadow: --wm-shadow-lg — modals, overlays
 
+   Hatch (stand-in texture, DESIGN_LANGUAGE.md §2.8):
+   .wm-hatch            135deg bands over the element's own fill
+   .wm-hatch--warning   warning-toned bands — a value that is missing
+
    Menu item:
    .wm-menu-item        Hover-background for buttons inside popovers/dropdowns
 
@@ -359,6 +363,45 @@
 .wm-shadow-lg { box-shadow: var(--wm-shadow-lg); }
 
 
+/* ============================================================
+   Hatch — .wm-hatch / .wm-hatch--warning
+   ============================================================
+   Marks a stand-in: a slot that holds no real value yet, or a
+   node that stands for items not drawn. DESIGN_LANGUAGE.md §2.8.
+
+   Diagonal bands at 135deg, 4px of tone then 4px clear, painted
+   as background-image OVER the element's own fill. Set that fill
+   with background-color: the `background` shorthand resets
+   background-image and removes the hatch.
+
+     .wm-hatch            neutral — elided nodes, empty placeholders
+     .wm-hatch--warning   a value that is missing and needs one
+
+   Each share is the smallest that shows on every theme and
+   surface; every point above it costs the text on top contrast.
+   --wm-hatch-tone overrides the band colour. It must stay a mix
+   toward transparent, so the bands composite over the fill.
+
+   Text on a hatch is --wm-text-primary. Secondary and muted text
+   drop below AA on the band on some themes. The hatch never
+   carries the meaning alone, and forced-colors mode removes it:
+   pair it with text and a border.
+   Guarded by scripts/check-hatch-contrast.mjs.
+   ============================================================ */
+
+.wm-hatch {
+  background-image: repeating-linear-gradient(
+    135deg,
+    var(--wm-hatch-tone, color-mix(in srgb, var(--wm-text-primary) 10%, transparent)) 0 4px,
+    transparent 4px 8px
+  );
+}
+
+.wm-hatch--warning {
+  --wm-hatch-tone: color-mix(in srgb, var(--wm-color-warning) 14%, transparent);
+}
+
+
 /* ============================================================
    Base input — .wm-input
    ============================================================
@@ -1092,8 +1135,9 @@ select.wm-input {
    ============================================================
    Base interactive button. Always pair with a variant modifier.
 
-   Variants:  --primary (default), --secondary, --ghost, --destructive
-   Sizes:     --sm (28px), --md (36px, default), --lg (40px)
+   Variants:  --primary (default), --secondary, --ghost, --flat,
+              --dashed, --destructive
+   Sizes:     --xs (22px), --sm (28px), --md (36px, default), --lg (40px)
 
    The focus ring on primary and destructive buttons uses a
    double-ring (canvas gap + colour ring) rather than the diffuse
@@ -1202,6 +1246,34 @@ select.wm-input {
   background-color: var(--wm-bg-hover);
 }
 
+/* The empty slot: an empty place a new item goes, such as "New dependent
+ * branch" at the foot of a stack or "Track a new pattern" under a list.
+ *
+ * The dash is the whole message, so it has to be seen. `--wm-border-input`
+ * alone is 2.36:1 on wildmason over bg-float, and `--wm-border` is 1.04:1 on
+ * warm-light: a slot nobody can see is a ghost button. The edge takes the rule
+ * themes.css uses for a boundary that must hold, a mix toward
+ * `--wm-text-primary`. That lightens on dark themes and darkens on light ones,
+ * and 70/30 clears 3:1 on every theme and all four surfaces (worst 3.34:1).
+ *
+ * Hover fills with `--wm-bg-sunken`, as `--secondary` does, not `--wm-bg-hover`:
+ * primary text on bg-hover is 4.41:1 on vampires-kiss. The dash also turns
+ * solid, which is what reads as hover on a surface the fill happens to match.
+ *
+ * Guarded by scripts/check-dashed-contrast.mjs. */
+.wm-btn--dashed {
+  background-color: transparent;
+  border-style: dashed;
+  border-color: color-mix(in srgb, var(--wm-border-input) 70%, var(--wm-text-primary));
+  color: var(--wm-text-secondary);
+}
+
+.wm-btn--dashed:hover:not(:disabled) {
+  background-color: var(--wm-bg-sunken);
+  border-style: solid;
+  color: var(--wm-text-primary);
+}
+
 /* ── Sizes ─────────────────────────────────────────────────── */
 
 .wm-btn--xs {
@@ -1226,10 +1298,13 @@ select.wm-input {
 
 /* ── Focus ─────────────────────────────────────────────────── */
 
-/* Secondary and ghost: diffuse pulse (border changes from neutral → accent) */
+/* No fill or a neutral fill: diffuse pulse (border changes from neutral → accent).
+   Each selector here also goes in the reduced-motion list below;
+   scripts/check-focus-pulse.mjs fails the build when one is missing. */
 .wm-btn--secondary:focus-visible,
 .wm-btn--ghost:focus-visible,
-.wm-btn--flat:focus-visible {
+.wm-btn--flat:focus-visible,
+.wm-btn--dashed:focus-visible {
   outline: none;
   border-color: var(--wm-color-accent);
   animation: wm-focus-pulse 400ms cubic-bezier(0.2, 0, 0.4, 1) forwards;
@@ -1350,13 +1425,17 @@ select.wm-input {
     transition: none;
   }
 
-  /* Replace the animated pulse with a static diffuse ring */
+  /* Replace the animated pulse with a static diffuse ring. Every selector that
+     animates wm-focus-pulse belongs here: scripts/check-focus-pulse.mjs. */
   .wm-input:focus,
   .wm-input-group:focus-within,
   .wm-select-trigger[aria-expanded='true'],
   .wm-select-trigger:focus-visible,
+  .wm-checkbox:focus-visible,
   .wm-btn--secondary:focus-visible,
-  .wm-btn--ghost:focus-visible {
+  .wm-btn--ghost:focus-visible,
+  .wm-btn--flat:focus-visible,
+  .wm-btn--dashed:focus-visible {
     animation: none;
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--wm-color-accent) 25%, transparent);
   }

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@wildmason/aegis",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Aegis design system — CSS tokens and Angular component library",
   "scripts": {
     "check:offline-fonts": "node scripts/check-offline-fonts.mjs",
-    "build": "npm run check:offline-fonts && npm run check:destructive-contrast && npm run check:semantic-contrast && npm run check:accent-contrast && npm run check:tooltip-contrast && npm run check:docs && ng-packagr -p ng-package.json && npm run check:entry-points",
+    "build": "npm run check:offline-fonts && npm run check:destructive-contrast && npm run check:semantic-contrast && npm run check:accent-contrast && npm run check:tooltip-contrast && npm run check:dashed-contrast && npm run check:toggle-group-contrast && npm run check:hatch-contrast && npm run check:focus-pulse && npm run check:docs && ng-packagr -p ng-package.json && npm run check:entry-points",
     "prepublishOnly": "npm run build",
     "check:destructive-contrast": "node scripts/check-destructive-contrast.mjs",
     "check:semantic-contrast": "node scripts/check-semantic-contrast.mjs",
     "check:tooltip-contrast": "node scripts/check-tooltip-contrast.mjs",
     "check:accent-contrast": "node scripts/check-accent-contrast.mjs",
+    "check:dashed-contrast": "node scripts/check-dashed-contrast.mjs",
+    "check:toggle-group-contrast": "node scripts/check-toggle-group-contrast.mjs",
+    "check:hatch-contrast": "node scripts/check-hatch-contrast.mjs",
+    "check:focus-pulse": "node scripts/check-focus-pulse.mjs",
     "check:docs": "node scripts/check-design-language.mjs",
     "check:entry-points": "node scripts/check-entry-points.mjs"
   },