@eagami/ui 4.5.0 → 4.5.1

package/package.json

@@ -1,15 +1,25 @@
 {
   "name": "@eagami/ui",
-  "version": "4.5.0",
-  "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
+  "version": "4.5.1",
+  "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",
   "keywords": [
     "angular",
+    "angular-components",
     "ui",
+    "components",
     "component-library",
     "design-system",
-    "accessible"
+    "accessible",
+    "a11y",
+    "dark-mode",
+    "theming",
+    "icons",
+    "signals",
+    "standalone",
+    "typescript",
+    "css-variables"
   ],
   "homepage": "https://eagami.com/ui",
   "repository": {
@@ -41,5 +51,10 @@
       "default": "./fesm2022/eagami-ui.mjs"
     }
   },
-  "type": "module"
+  "type": "module",
+  "files": [
+    "fesm2022",
+    "types",
+    "README.md"
+  ]
 }

package/src/styles/_mixins.scss

@@ -1,68 +0,0 @@
-// Shared SCSS mixins for the library. Consume from a component stylesheet with:
-//   @use '../../styles/mixins' as ea;
-//   .ea-foo__close { @include ea.icon-button; }
-
-// Standard focus indicator. The ring is a soft box-shadow halo, but box-shadow
-// is dropped in forced-colors (Windows High Contrast) mode, which would leave
-// keyboard users with no visible focus. Pair the halo with a real outline that
-// only renders in forced-colors so the ring survives there. Pass the full
-// box-shadow value to compose the ring with an existing shadow.
-@mixin focus-ring($ring: var(--shadow-focus-ring)) {
-  box-shadow: $ring;
-
-  @media (forced-colors: active) {
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-  }
-}
-
-// Floating surfaces (menus, dialogs, popovers, toasts) lean on elevation shadow
-// for their boundary, but shadows are dropped in forced-colors mode. Add a
-// hairline border there so the surface stays separated from the content behind.
-@mixin elevated-surface-border {
-  @media (forced-colors: active) {
-    border: 1px solid CanvasText;
-  }
-}
-
-// Standard icon button: clear, close/dismiss, password-toggle, nav, etc. The box
-// is `--ea-icon-button-size` (em) so it scales with the host component's size and
-// is consistent across components at a given size tier. The glyph is enlarged so
-// it reads clearly inside the box regardless of how much padding the icon's own
-// viewBox carries (the feather `x`, for instance, only fills its middle half).
-@mixin icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--ea-icon-button-size, 1.75em);
-  height: var(--ea-icon-button-size, 1.75em);
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-colors);
-
-  // Glyph sized via font-size (not width) so it overrides the icon's inline 1em
-  // host size and still scales with the box.
-  > * {
-    font-size: 1.25em;
-  }
-
-  &:hover {
-    background-color: var(--color-state-hover);
-    color: var(--color-text-primary);
-  }
-
-  &:focus-visible {
-    outline: none;
-    @include focus-ring;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}

package/src/styles/_reset.scss

@@ -1,62 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  -webkit-text-size-adjust: 100%;
-  tab-size: 4;
-}
-
-body {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-md);
-  line-height: var(--line-height-normal);
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-canvas);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-img,
-svg,
-video {
-  display: block;
-  max-width: 100%;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  color: inherit;
-}
-
-button {
-  cursor: pointer;
-  background: transparent;
-  border: none;
-}
-
-a {
-  color: var(--color-text-link);
-  text-decoration: underline;
-
-  &:hover {
-    color: var(--color-text-link-hover);
-  }
-}
-
-:focus-visible {
-  outline: var(--border-width-medium) solid var(--color-border-focus);
-  outline-offset: 2px;
-}

package/src/styles/_tooltip.scss

@@ -1,39 +0,0 @@
-@use 'mixins' as ea;
-
-// Guard against "sticky hover" on touch devices, which fire `mouseenter` on tap
-// but never the matching `mouseleave`. The directive gates pointer listeners on
-// `(hover: hover)`, but if a tooltip ever slips through keep it invisible on touch.
-.ea-tooltip {
-  z-index: var(--z-index-tooltip);
-  position: absolute;
-  padding: var(--space-1-5) var(--space-2-5);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-normal);
-  white-space: nowrap;
-  // When a max-width switches the bubble to multi-line, break long unbreakable
-  // strings (URLs, tokens) instead of letting them overflow the bubble.
-  overflow-wrap: anywhere;
-  border: var(--border-width-thin) solid var(--color-tooltip-border);
-  border-radius: var(--radius-md);
-  background-color: var(--color-tooltip-surface);
-  color: var(--color-neutral-0);
-  pointer-events: none;
-  animation: ea-tooltip-fade-in var(--duration-fast) var(--ease-out);
-  @include ea.elevated-surface-border;
-
-  @media (hover: none) {
-    display: none;
-  }
-}
-
-@keyframes ea-tooltip-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}

package/src/styles/eagami-ui.scss

@@ -1,6 +0,0 @@
-// Global stylesheet: loads all design token custom properties and the base reset.
-// Consumers must also load the DM Sans and Syne fonts via <link> tags in the HTML head.
-
-@use 'tokens/index';
-@use 'reset';
-@use 'tooltip';

package/src/styles/tokens/_colors.scss

@@ -1,265 +0,0 @@
-// Every token-declaring selector is wrapped in :where() so it contributes zero
-// specificity. A consumer's own root-level token override (specificity 0,1,0)
-// then wins in light mode, OS-dark, and forced dark alike, independent of
-// stylesheet load order. The library's own light-to-dark switching still
-// resolves correctly by source order, since the dark blocks come after the
-// light ones at equal (zero) specificity.
-:where(:root) {
-  --color-primary-50: #ecf3f9;
-  --color-primary-100: #d1e3f0;
-  --color-primary-200: #abcbe3;
-  --color-primary-300: #7dafd4;
-  --color-primary-400: #4b91c3;
-  --color-primary-500: #3674a1;
-  --color-primary-600: #2a5b7e;
-  --color-primary-700: #204560;
-  --color-primary-800: #162f41;
-  --color-primary-900: #0d1c26;
-
-  --color-secondary-50: #f2eff5;
-  --color-secondary-100: #dfd9e8;
-  --color-secondary-200: #c4b9d5;
-  --color-secondary-300: #a493be;
-  --color-secondary-400: #8169a5;
-  --color-secondary-500: #665086;
-  --color-secondary-600: #503f69;
-  --color-secondary-700: #3d3050;
-  --color-secondary-800: #292136;
-  --color-secondary-900: #181320;
-
-  --color-neutral-0: #ffffff;
-  --color-neutral-50: #f9fafb;
-  --color-neutral-100: #f3f4f6;
-  --color-neutral-200: #e5e7eb;
-  --color-neutral-300: #d1d5db;
-  --color-neutral-400: #9ca3af;
-  --color-neutral-500: #6b7280;
-  --color-neutral-600: #4b5563;
-  --color-neutral-700: #374151;
-  --color-neutral-800: #1f2937;
-  --color-neutral-900: #111827;
-  --color-neutral-950: #030712;
-
-  --color-success-50: #f0fdf4;
-  --color-success-100: #dcfce7;
-  --color-success-200: #bbf7d0;
-  --color-success-500: #22c55e;
-  --color-success-600: #16a34a;
-  --color-success-700: #15803d;
-
-  --color-warning-50: #fffbeb;
-  --color-warning-100: #fef3c7;
-  --color-warning-200: #fde68a;
-  --color-warning-500: #f59e0b;
-  --color-warning-600: #d97706;
-  --color-warning-700: #b45309;
-
-  --color-error-50: #fef2f2;
-  --color-error-100: #fee2e2;
-  --color-error-200: #fecaca;
-  --color-error-500: #ef4444;
-  --color-error-600: #dc2626;
-  --color-error-700: #b91c1c;
-
-  --color-info-50: #ecfeff;
-  --color-info-100: #cffafe;
-  --color-info-200: #a5f3fc;
-  --color-info-500: #06b6d4;
-  --color-info-600: #0891b2;
-  --color-info-700: #0e7490;
-
-  --color-text-primary: var(--color-neutral-900);
-  --color-text-secondary: var(--color-neutral-600);
-  --color-text-tertiary: var(--color-neutral-400);
-  --color-text-disabled: var(--color-neutral-400);
-  --color-text-inverse: var(--color-neutral-0);
-  --color-text-link: var(--color-primary-600);
-  --color-text-link-hover: var(--color-primary-800);
-
-  // Two-tier surfaces: bg-canvas is the page, bg-base is component surfaces on
-  // it (inputs, cards, accordion, popovers). In dark mode bg-base lifts above
-  // bg-canvas so surfaces don't vanish into the page.
-  --color-bg-canvas: var(--color-neutral-0);
-  --color-bg-base: var(--color-neutral-0);
-  --color-bg-subtle: var(--color-neutral-50);
-  --color-bg-stripe: var(--color-neutral-50);
-  // Zebra-stripe fill for table rows: a mid-tone between the base row and the
-  // header tint so striped rows read as lighter than the header, not identical to
-  // it. Dark mode overrides the ratio to stay equally subtle.
-  --color-bg-stripe-subtle: color-mix(
-    in srgb,
-    var(--color-bg-base) 30%,
-    var(--color-bg-stripe)
-  );
-  --color-bg-muted: var(--color-neutral-100);
-  // Soft neutral fill for placeholder surfaces (e.g. avatar initials) when no
-  // image is set; light enough to sit gently on a white page
-  --color-bg-emphasis: var(--color-neutral-100);
-  --color-bg-elevated: var(--color-neutral-0);
-  --color-bg-overlay: rgba(0, 0, 0, 0.5);
-
-  // Tooltips float over arbitrary content, so their surface is a unique tone that
-  // never matches a page or palette colour in either theme; the translucent
-  // hairline border separates it from same-tone backgrounds.
-  --color-tooltip-surface: #1a1b21;
-  --color-tooltip-border: rgba(255, 255, 255, 0.15);
-
-  // Interactive lift layers for hover and active/selected fills. Light surfaces
-  // are all near-white and never collapse onto these shades, so solid muted
-  // tones read cleanly. Dark mode swaps them for translucent washes (see the
-  // dark overrides) because its surfaces all collapse onto the same neutrals,
-  // where a solid fill would vanish into whatever it sits on.
-  --color-state-hover: var(--color-neutral-100);
-  --color-state-active: var(--color-neutral-200);
-
-  --color-border-subtle: var(--color-neutral-200);
-  --color-border-default: var(--color-neutral-200);
-  --color-border-strong: var(--color-neutral-400);
-  --color-divider: var(--color-border-subtle);
-  --color-border-focus: var(--color-primary-500);
-
-  // brand-default/-hover/-active are the brand colour as a surface (solid bg
-  // under white text); needs 4.5:1 vs white. brand-text is the brand colour as
-  // a foreground on a non-brand surface; needs 4.5:1 vs bg-base and flips
-  // lighter in dark mode.
-  --color-brand-default: var(--color-primary-600);
-  --color-brand-hover: var(--color-primary-700);
-  --color-brand-active: var(--color-primary-800);
-  --color-brand-text: var(--color-primary-700);
-  --color-brand-subtle: var(--color-primary-50);
-  --color-brand-muted: var(--color-primary-100);
-
-  --color-brand-secondary-default: var(--color-secondary-500);
-  --color-brand-secondary-hover: var(--color-secondary-600);
-  --color-brand-secondary-active: var(--color-secondary-700);
-  --color-brand-secondary-subtle: var(--color-secondary-50);
-  --color-brand-secondary-muted: var(--color-secondary-100);
-
-  // *-text is the status hue as a foreground on its own *-subtle/-muted wash
-  // (badge, tag, toast). It needs 4.5:1 vs that wash and flips lighter in dark
-  // mode, mirroring --color-brand-text.
-  --color-success-default: var(--color-success-600);
-  --color-success-subtle: var(--color-success-50);
-  --color-success-muted: var(--color-success-100);
-  --color-success-text: var(--color-success-700);
-
-  --color-warning-default: var(--color-warning-600);
-  --color-warning-subtle: var(--color-warning-50);
-  --color-warning-muted: var(--color-warning-100);
-  --color-warning-text: var(--color-warning-700);
-
-  --color-error-default: var(--color-error-600);
-  --color-error-subtle: var(--color-error-50);
-  --color-error-muted: var(--color-error-100);
-  --color-error-text: var(--color-error-700);
-
-  --color-info-default: var(--color-info-600);
-  --color-info-subtle: var(--color-info-50);
-  --color-info-muted: var(--color-info-100);
-  --color-info-text: var(--color-info-700);
-
-  // Pure RGB primaries for the picker's hue wheel and saturation/value
-  // gradient. Intrinsic to the picker, not themeable; kept here so component
-  // SCSS stays literal-free.
-  --color-picker-hue-red: #ff0000;
-  --color-picker-hue-yellow: #ffff00;
-  --color-picker-hue-green: #00ff00;
-  --color-picker-hue-cyan: #00ffff;
-  --color-picker-hue-blue: #0000ff;
-  --color-picker-hue-magenta: #ff00ff;
-  --color-picker-sv-white: #ffffff;
-  --color-picker-sv-black: #000000;
-  --color-picker-thumb-halo: rgba(0, 0, 0, 0.25);
-}
-
-// Dark mode: applied when the OS prefers dark, unless forced light via
-// `<html data-theme="light">`. `<html data-theme="dark">` forces dark.
-@mixin dark-color-tokens {
-  --color-text-primary: var(--color-neutral-50);
-  --color-text-secondary: var(--color-neutral-300);
-  --color-text-tertiary: var(--color-neutral-500);
-  --color-text-disabled: var(--color-neutral-500);
-  --color-text-inverse: var(--color-neutral-900);
-  --color-text-link: var(--color-primary-300);
-  --color-text-link-hover: var(--color-primary-100);
-
-  // Canvas is the deepest page tone; bg-base and up lift component surfaces,
-  // striped rows, floating surfaces, and hover states above it.
-  --color-bg-canvas: var(--color-neutral-950);
-  --color-bg-base: var(--color-neutral-800);
-  --color-bg-subtle: var(--color-neutral-700);
-  --color-bg-stripe: var(--color-neutral-900);
-  // The dark base-to-stripe gap reads stronger than the light one, so weight the
-  // stripe mix toward the base row to keep zebra striping subtle.
-  --color-bg-stripe-subtle: color-mix(
-    in srgb,
-    var(--color-bg-base) 62.5%,
-    var(--color-bg-stripe)
-  );
-  --color-bg-elevated: var(--color-neutral-700);
-  // Opaque muted surface for static fills (disabled fields, slider/progress
-  // tracks, skeletons). Hover/active fills route through the translucent
-  // --color-state-* tokens instead, so they never collide with this shade.
-  --color-bg-muted: var(--color-neutral-700);
-  --color-bg-emphasis: var(--color-neutral-600);
-
-  // White wash so an interactive lift reads on any dark surface, including the
-  // neutral-700 tier where bg-muted/-subtle/-elevated all coincide. This is the
-  // fix that lets dropdown/menu/dialog hovers lift off their elevated surfaces.
-  --color-state-hover: rgba(255, 255, 255, 0.08);
-  --color-state-active: rgba(255, 255, 255, 0.14);
-
-  // Borders stay clear of every bg-* shade so they stay visible. subtle mixes
-  // neutral-700/-800 to sit between card and cell backgrounds; default can't go
-  // darker without colliding with bg-subtle/-elevated (both neutral-700).
-  --color-border-subtle: color-mix(
-    in srgb,
-    var(--color-neutral-700),
-    var(--color-neutral-800)
-  );
-  --color-border-default: var(--color-neutral-400);
-  --color-border-strong: var(--color-neutral-300);
-  // Dividers read as barely-there against dark surfaces at border-subtle, so
-  // they step one neutral lighter for a visible-but-quiet rule.
-  --color-divider: var(--color-neutral-600);
-
-  // Surface roles step one shade lighter than light mode so the button clears
-  // WCAG 1.4.11 (3:1) on the near-black canvas while keeping a white label
-  // above 4.5:1.
-  --color-brand-default: var(--color-primary-500);
-  --color-brand-hover: var(--color-primary-600);
-  --color-brand-active: var(--color-primary-700);
-  --color-brand-text: var(--color-primary-300);
-  --color-brand-subtle: rgba(75, 145, 195, 0.1);
-  --color-brand-muted: rgba(75, 145, 195, 0.2);
-
-  // Light pastels become unreadable behind light text in dark mode. Re-tint as
-  // a low-alpha wash of the saturated *-500 hue so the surface darkens enough
-  // for white text.
-  --color-success-subtle: rgba(34, 197, 94, 0.15);
-  --color-success-muted: rgba(34, 197, 94, 0.25);
-  --color-warning-subtle: rgba(245, 158, 11, 0.15);
-  --color-warning-muted: rgba(245, 158, 11, 0.25);
-  --color-error-subtle: rgba(239, 68, 68, 0.15);
-  --color-error-muted: rgba(239, 68, 68, 0.25);
-  --color-info-subtle: rgba(6, 182, 212, 0.15);
-  --color-info-muted: rgba(6, 182, 212, 0.25);
-
-  // The *-700 shades are unreadable on the dark translucent washes above; flip
-  // to the light *-200 pastels so status text keeps 4.5:1.
-  --color-success-text: var(--color-success-200);
-  --color-warning-text: var(--color-warning-200);
-  --color-error-text: var(--color-error-200);
-  --color-info-text: var(--color-info-200);
-}
-
-@media (prefers-color-scheme: dark) {
-  :where(:root:not([data-theme='light'])) {
-    @include dark-color-tokens;
-  }
-}
-
-:where(:root[data-theme='dark']) {
-  @include dark-color-tokens;
-  color-scheme: dark;
-}

package/src/styles/tokens/_elevation.scss

@@ -1,87 +0,0 @@
-// :where() keeps these at zero specificity so consumer overrides win in every
-// theme; see the note in _colors.scss.
-:where(:root) {
-  --shadow-none: none;
-  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-
-  // Composable top-edge highlight appended to every dark-mode shadow so elevated
-  // surfaces catch light along their top edge; a no-op in light mode.
-  --shadow-edge-highlight: 0 0 #0000;
-
-  // Bevel: paired inset highlight (top) + shadow (bottom) for a raised look;
-  // compose with --shadow-* for an ambient drop.
-  --shadow-bevel:
-    inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -1px 1.5px rgba(0, 0, 0, 0.25);
-  --shadow-bevel-strong:
-    inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(0, 0, 0, 0.3);
-
-  // Well: inverse of bevel (inset shadow top, highlight bottom) for a recessed look
-  --shadow-well:
-    inset 0 1px 1.5px rgba(0, 0, 0, 0.3), inset 0 -1px 0.5px rgba(255, 255, 255, 0.5);
-  --shadow-well-strong:
-    inset 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1.5px 1px rgba(255, 255, 255, 0.55);
-
-  --shadow-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.45);
-  --shadow-focus-ring-error: 0 0 0 3px var(--color-error-200);
-  --shadow-focus-ring-success: 0 0 0 3px var(--color-success-200);
-
-  --z-index-base: 0;
-  --z-index-raised: 10;
-  --z-index-dropdown: 100;
-  --z-index-sticky: 200;
-  --z-index-overlay: 300;
-  --z-index-modal: 400;
-  --z-index-popover: 500;
-  --z-index-toast: 600;
-  --z-index-tooltip: 700;
-}
-
-// Dark mode: a drop shadow is the absence of light, so it stays black (deeper
-// than light mode); a white "shadow" reads as a glow and looks wrong. Elevation
-// is carried instead by the lifted surface tone plus a hairline top highlight
-// that catches light, appended to every level via --shadow-edge-highlight.
-@mixin dark-elevation-tokens {
-  --shadow-edge-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
-
-  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4), var(--shadow-edge-highlight);
-  --shadow-sm:
-    0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4),
-    var(--shadow-edge-highlight);
-  --shadow-md:
-    0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4),
-    var(--shadow-edge-highlight);
-  --shadow-lg:
-    0 12px 20px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.45),
-    var(--shadow-edge-highlight);
-  --shadow-xl:
-    0 20px 28px -6px rgba(0, 0, 0, 0.65), 0 8px 12px -6px rgba(0, 0, 0, 0.5),
-    var(--shadow-edge-highlight);
-  --shadow-2xl: 0 28px 50px -12px rgba(0, 0, 0, 0.75), var(--shadow-edge-highlight);
-
-  // On a dark surface a bright highlight reads as a halo, so drop the highlight
-  // alpha and raise the shadow alpha to keep the relief without glowing.
-  --shadow-bevel:
-    inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1.5px rgba(0, 0, 0, 0.6);
-  --shadow-bevel-strong:
-    inset 0 1.5px 2px rgba(255, 255, 255, 0.22), inset 0 -2px 3px rgba(0, 0, 0, 0.7);
-  --shadow-well:
-    inset 0 1px 1.5px rgba(0, 0, 0, 0.55), inset 0 -1px 0.5px rgba(255, 255, 255, 0.08);
-  --shadow-well-strong:
-    inset 0 2px 3px rgba(0, 0, 0, 0.7), inset 0 -1.5px 1px rgba(255, 255, 255, 0.12);
-}
-
-@media (prefers-color-scheme: dark) {
-  :where(:root:not([data-theme='light'])) {
-    @include dark-elevation-tokens;
-  }
-}
-
-:where(:root[data-theme='dark']) {
-  @include dark-elevation-tokens;
-}

package/src/styles/tokens/_index.scss

@@ -1,6 +0,0 @@
-@forward 'colors';
-@forward 'typography';
-@forward 'spacing';
-@forward 'shape';
-@forward 'elevation';
-@forward 'motion';

package/src/styles/tokens/_motion.scss

@@ -1,37 +0,0 @@
-// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
-:where(:root) {
-  --duration-instant: 0ms;
-  --duration-fast: 100ms;
-  --duration-normal: 200ms;
-  --duration-slow: 300ms;
-  --duration-slower: 500ms;
-
-  --ease-linear: linear;
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-  --transition-colors:
-    color var(--duration-fast) var(--ease-out),
-    background-color var(--duration-fast) var(--ease-out),
-    border-color var(--duration-fast) var(--ease-out),
-    fill var(--duration-fast) var(--ease-out);
-
-  --transition-shadow: box-shadow var(--duration-fast) var(--ease-out);
-
-  --transition-transform: transform var(--duration-normal) var(--ease-spring);
-
-  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
-
-  --transition-all: all var(--duration-normal) var(--ease-in-out);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :where(:root) {
-    --duration-fast: 0ms;
-    --duration-normal: 0ms;
-    --duration-slow: 0ms;
-    --duration-slower: 0ms;
-  }
-}

package/src/styles/tokens/_shape.scss

@@ -1,23 +0,0 @@
-// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
-:where(:root) {
-  --radius-none: 0;
-  --radius-xs: 0.125rem; //  2px
-  --radius-sm: 0.25rem; //  4px
-  --radius-md: 0.375rem; //  6px
-  --radius-lg: 0.5rem; //  8px
-  --radius-xl: 0.75rem; // 12px
-  --radius-2xl: 1rem; // 16px
-  --radius-3xl: 1.5rem; // 24px
-  --radius-full: 9999px; // pill / circle
-
-  --border-width-none: 0;
-  --border-width-thin: 1px;
-  --border-width-medium: 2px;
-  --border-width-thick: 4px;
-
-  // Hit-target box for icon buttons (clear / close / dismiss / toggle). em-based
-  // so it scales with the host component's size; since all sized components share
-  // a font-size per tier, this is also consistent across components at a tier
-  // (md = 1.75 * 16px = 28px).
-  --ea-icon-button-size: 1.75em;
-}

package/src/styles/tokens/_spacing.scss

@@ -1,73 +0,0 @@
-// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
-:where(:root) {
-  --space-0: 0;
-  --space-px: 1px;
-  --space-0-5: 0.125rem; //  2px
-  --space-1: 0.25rem; //  4px
-  --space-1-5: 0.375rem; //  6px
-  --space-2: 0.5rem; //  8px
-  --space-2-5: 0.625rem; // 10px
-  --space-3: 0.75rem; // 12px
-  --space-3-5: 0.875rem; // 14px
-  --space-4: 1rem; // 16px
-  --space-5: 1.25rem; // 20px
-  --space-6: 1.5rem; // 24px
-  --space-7: 1.75rem; // 28px
-  --space-8: 2rem; // 32px
-  --space-9: 2.25rem; // 36px
-  --space-10: 2.5rem; // 40px
-  --space-11: 2.75rem; // 44px
-  --space-12: 3rem; // 48px
-  --space-14: 3.5rem; // 56px
-  --space-16: 4rem; // 64px
-  --space-20: 5rem; // 80px
-  --space-24: 6rem; // 96px
-  --space-32: 8rem; // 128px
-
-  // Negative variants mirror the scale (n- infix) so consumers skip
-  // `calc(var(--space-2) * -1)` for negative margins.
-  --space-n-px: -1px;
-  --space-n-0-5: -0.125rem; //  -2px
-  --space-n-1: -0.25rem; //  -4px
-  --space-n-1-5: -0.375rem; //  -6px
-  --space-n-2: -0.5rem; //  -8px
-  --space-n-2-5: -0.625rem; // -10px
-  --space-n-3: -0.75rem; // -12px
-  --space-n-3-5: -0.875rem; // -14px
-  --space-n-4: -1rem; // -16px
-  --space-n-5: -1.25rem; // -20px
-  --space-n-6: -1.5rem; // -24px
-  --space-n-7: -1.75rem; // -28px
-  --space-n-8: -2rem; // -32px
-  --space-n-9: -2.25rem; // -36px
-  --space-n-10: -2.5rem; // -40px
-  --space-n-11: -2.75rem; // -44px
-  --space-n-12: -3rem; // -48px
-  --space-n-14: -3.5rem; // -56px
-  --space-n-16: -4rem; // -64px
-  --space-n-20: -5rem; // -80px
-  --space-n-24: -6rem; // -96px
-  --space-n-32: -8rem; // -128px
-
-  --inset-xs: var(--space-1) var(--space-2); //  4px  8px
-  --inset-sm: var(--space-1-5) var(--space-3); //  6px 12px
-  --inset-md: var(--space-2) var(--space-4); //  8px 16px
-  --inset-lg: var(--space-3) var(--space-6); // 12px 24px
-  --inset-xl: var(--space-4) var(--space-8); // 16px 32px
-
-  // vertical gap
-  --stack-2xs: var(--space-1); //  4px
-  --stack-xs: var(--space-2); //  8px
-  --stack-sm: var(--space-3); // 12px
-  --stack-md: var(--space-4); // 16px
-  --stack-lg: var(--space-6); // 24px
-  --stack-xl: var(--space-8); // 32px
-  --stack-2xl: var(--space-12); // 48px
-
-  // horizontal gap
-  --inline-2xs: var(--space-1); //  4px
-  --inline-xs: var(--space-2); //  8px
-  --inline-sm: var(--space-3); // 12px
-  --inline-md: var(--space-4); // 16px
-  --inline-lg: var(--space-6); // 24px
-}

package/src/styles/tokens/_typography.scss

@@ -1,147 +0,0 @@
-// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
-:where(:root) {
-  // The `* Fallback` faces are Arial tuned with metric overrides to match the
-  // web fonts, so they must sit right after each web font in the stack: that way
-  // text laid out before the font loads has the same metrics and `font-display:
-  // swap` causes no layout shift when the real font arrives.
-  --font-family-sans:
-    'DM Sans', 'DM Sans Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
-  --font-family-brand:
-    'Syne', 'Syne Fallback', 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
-  --font-family-serif: 'Georgia', 'Times New Roman', serif;
-  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-
-  --font-size-2xs: 0.625rem; // 10px
-  --font-size-xs: 0.75rem; // 12px
-  --font-size-sm: 0.875rem; // 14px
-  --font-size-md: 1rem; // 16px
-  --font-size-lg: 1.125rem; // 18px
-  --font-size-xl: 1.25rem; // 20px
-  --font-size-2xl: 1.5rem; // 24px
-  --font-size-3xl: 1.875rem; // 30px
-  --font-size-4xl: 2.25rem; // 36px
-  --font-size-5xl: 3rem; // 48px
-
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-
-  --line-height-none: 1;
-  --line-height-tight: 1.25;
-  --line-height-snug: 1.375;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.625;
-  --line-height-loose: 2;
-
-  --letter-spacing-tighter: -0.05em;
-  --letter-spacing-tight: -0.025em;
-  --letter-spacing-normal: 0em;
-  --letter-spacing-wide: 0.025em;
-  --letter-spacing-wider: 0.05em;
-  --letter-spacing-widest: 0.1em;
-
-  // Leading/status icon sized relative to the text beside it; em keeps it in
-  // proportion as the surrounding font-size changes
-  --icon-inline-size: 1.5em;
-
-  --text-display-size: var(--font-size-5xl);
-  --text-display-weight: var(--font-weight-bold);
-  --text-display-lh: var(--line-height-tight);
-
-  --text-h1-size: var(--font-size-4xl);
-  --text-h1-weight: var(--font-weight-bold);
-  --text-h1-lh: var(--line-height-tight);
-
-  --text-h2-size: var(--font-size-3xl);
-  --text-h2-weight: var(--font-weight-semibold);
-  --text-h2-lh: var(--line-height-snug);
-
-  --text-h3-size: var(--font-size-2xl);
-  --text-h3-weight: var(--font-weight-semibold);
-  --text-h3-lh: var(--line-height-snug);
-
-  --text-h4-size: var(--font-size-xl);
-  --text-h4-weight: var(--font-weight-semibold);
-  --text-h4-lh: var(--line-height-snug);
-
-  // Page-level subsection title (an `<h2>` under the page `<h1>`). Mirrors
-  // `--text-h4-*` metrics but pins the brand family so it reads as wordmark,
-  // not body. Only composite that pins a font-family.
-  --text-section-heading-size: var(--font-size-xl);
-  --text-section-heading-weight: var(--font-weight-semibold);
-  --text-section-heading-lh: var(--line-height-snug);
-  --text-section-heading-family: var(--font-family-brand);
-
-  --text-body-lg-size: var(--font-size-lg);
-  --text-body-lg-weight: var(--font-weight-regular);
-  --text-body-lg-lh: var(--line-height-relaxed);
-
-  --text-body-md-size: var(--font-size-md);
-  --text-body-md-weight: var(--font-weight-regular);
-  --text-body-md-lh: var(--line-height-normal);
-
-  --text-body-sm-size: var(--font-size-sm);
-  --text-body-sm-weight: var(--font-weight-regular);
-  --text-body-sm-lh: var(--line-height-normal);
-
-  --text-label-lg-size: var(--font-size-md);
-  --text-label-lg-weight: var(--font-weight-medium);
-  --text-label-lg-lh: var(--line-height-tight);
-
-  --text-label-md-size: var(--font-size-sm);
-  --text-label-md-weight: var(--font-weight-medium);
-  --text-label-md-lh: var(--line-height-tight);
-
-  --text-label-sm-size: var(--font-size-xs);
-  --text-label-sm-weight: var(--font-weight-medium);
-  --text-label-sm-lh: var(--line-height-tight);
-
-  // Helper / caption: subordinate text below a component's primary content.
-  // 13px (between --font-size-xs 12px and -sm 14px) so it stays subordinate
-  // without hitting the barely-readable 12px floor. Used for field hint and
-  // error messages (see standard below) and short metadata such as a
-  // file-uploader's constraints or per-file size labels.
-  //
-  // Standard: every form-like component (anything exposing `errorMsg` and/or
-  // `hint`) must render its messages identically. Mirror `<ea-input>`:
-  //   1. `<p class="ea-{name}-field__message ea-{name}-field__message--error">`
-  //      (or `--hint`) with `role="alert"` on the error variant and an `id`
-  //      matching the field's `aria-describedby`.
-  //   2. The first child of the error `<p>` is always
-  //      `<ea-icon-alert-circle class="ea-{name}-field__message-icon" />`.
-  //      Hints render text-only (no icon).
-  //   3. `__message` uses `display: flex; align-items: center; gap: var(--space-1)`
-  //      plus the three `--text-helper-*` tokens above. Never hard-code a
-  //      font-size on `__message`.
-  //   4. `__message-icon` uses `flex-shrink: 0; width: 0.875em; height: 0.875em`
-  //      so the icon scales with the text.
-  //   5. Error color is `var(--color-error-default)`. Hint color is component-
-  //      specific (`--color-text-secondary` or `inherit`) but stays consistent
-  //      within a component.
-  //   6. `AlertCircleIconComponent` must be in the component's `imports: [...]`.
-  --text-helper-size: 0.8125rem; // 13px
-  --text-helper-weight: var(--font-weight-regular);
-  --text-helper-lh: var(--line-height-normal);
-
-  // Inline code chip; em-sized so it tracks the surrounding text
-  --text-code-size: 0.875em;
-  --text-code-weight: var(--font-weight-regular);
-  --text-code-family: var(--font-family-mono);
-  --text-code-color: var(--color-text-primary);
-  --text-code-bg: var(--color-bg-muted);
-  --text-code-padding: var(--space-0-5) var(--space-1-5); // 2px 6px
-  --text-code-radius: var(--radius-sm);
-
-  // Keyboard-key glyph; raised border + bottom shadow suggest a physical key
-  --text-kbd-size: 0.8125em;
-  --text-kbd-weight: var(--font-weight-medium);
-  --text-kbd-family: var(--font-family-mono);
-  --text-kbd-color: var(--color-text-primary);
-  --text-kbd-bg: var(--color-bg-base);
-  --text-kbd-border: var(--border-width-thin) solid var(--color-border-default);
-  --text-kbd-padding: var(--space-0-5) var(--space-1-5); // 2px 6px
-  --text-kbd-radius: var(--radius-sm);
-  --text-kbd-shadow: 0 1px 0 var(--color-border-default);
-}