@eagami/ui 4.5.1 → 4.7.0

package/src/styles/tokens/_elevation.scss

@@ -0,0 +1,87 @@
+// :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

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

package/src/styles/tokens/_motion.scss

@@ -0,0 +1,37 @@
+// :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

@@ -0,0 +1,23 @@
+// :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

@@ -0,0 +1,73 @@
+// :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

@@ -0,0 +1,147 @@
+// :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);
+}

package/types/eagami-ui.d.ts

@@ -1575,8 +1575,11 @@ declare class DividerComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<DividerComponent, "ea-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "thick": { "alias": "thick"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/** Edge of the viewport from which the drawer slides in. */
-type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Edge of the viewport from which the drawer slides in. `start`/`end` are
+ * direction-aware (start = left in LTR, right in RTL); `left`/`right` are fixed.
+ */
+type DrawerPosition = 'left' | 'right' | 'top' | 'bottom' | 'start' | 'end';
 /** Width of the drawer panel along its primary axis. */
 type DrawerWidth = EaWidth;
 /**
@@ -2271,6 +2274,8 @@ interface PopoverPositionOptions {
     readonly margin?: number;
     /** Set the popover's width to match the anchor's. Useful for dropdown-style menus. */
     readonly matchAnchorWidth?: boolean;
+    /** Right-to-left context. Swaps `-start`/`-end` alignment so they track the reading direction. */
+    readonly rtl?: boolean;
 }
 interface Rect {
     readonly width: number;