@besaitech/ng-design-system 0.0.11 → 0.0.16

package/index.d.ts

@@ -57,6 +57,7 @@ declare const SDS_ICONS: {
     readonly filter: "<polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>";
     readonly table: "<path d=\"M12 3v18\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M3 9h18\"/><path d=\"M3 15h18\"/>";
     readonly eye: "<path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>";
+    readonly 'eye-off': "<path d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\"/><path d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\"/><path d=\"m2 2 20 20\"/><path d=\"M14.12 14.12a3 3 0 1 1-4.24-4.24\"/>";
     readonly user: "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>";
     readonly 'check-circle': "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/>";
     readonly 'arrows-clockwise': "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"/><path d=\"M21 3v5h-5\"/><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"/><path d=\"M3 21v-5h5\"/>";
@@ -82,7 +83,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
 declare class SdsIcon {
     private readonly sanitizer;
     /** Icon identifier from the registry. */
-    readonly name: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle">;
+    readonly name: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle">;
     /** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
     readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
     /** Stroke width of the line icon. */
@@ -143,8 +144,23 @@ declare class SdsInput implements ControlValueAccessor {
     readonly appearance: _angular_core.InputSignal<SdsInputAppearance>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly leadingIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
-    readonly trailingIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    readonly leadingIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    readonly trailingIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    /**
+     * A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
+     * above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
+     * `pointer-events-none`; a consumer who needed a working control previously had to abandon
+     * `sds-input` and rebuild the whole field, losing the label/error/aria wiring with it.
+     *
+     * Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
+     * unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
+     */
+    readonly trailingAction: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    /** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
+    readonly trailingActionLabel: _angular_core.InputSignal<string>;
+    /** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
+    readonly trailingActionPressed: _angular_core.InputSignal<boolean | null>;
+    readonly trailingActionClick: _angular_core.OutputEmitterRef<void>;
     /** Current value (driven by CVA + user input). */
     protected readonly value: _angular_core.WritableSignal<string>;
     private readonly cvaDisabled;
@@ -162,7 +178,7 @@ declare class SdsInput implements ControlValueAccessor {
     protected onInput(event: Event): void;
     protected clear(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInput, "sds-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInput, "sds-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingAction": { "alias": "trailingAction"; "required": false; "isSignal": true; }; "trailingActionLabel": { "alias": "trailingActionLabel"; "required": false; "isSignal": true; }; "trailingActionPressed": { "alias": "trailingActionPressed"; "required": false; "isSignal": true; }; }, { "trailingActionClick": "trailingActionClick"; }, never, never, true, never>;
 }
 
 type SdsTextareaSize = 'sm' | 'md' | 'lg';
@@ -247,9 +263,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
     /** Value emitted/stored when the switch is off. */
     readonly falseValue: _angular_core.InputSignal<unknown>;
     /** Icon shown on the knob when checked. */
-    readonly onIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    readonly onIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
     /** Icon shown on the knob when unchecked. */
-    readonly offIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    readonly offIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
     readonly hint: _angular_core.InputSignal<string>;
     readonly error: _angular_core.InputSignal<string>;
     /**
@@ -1531,7 +1547,7 @@ declare class SdsNavGroup {
  */
 declare class SdsNavItem {
     protected readonly store: SidebarStore;
-    readonly icon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    readonly icon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
     readonly label: _angular_core.InputSignal<string>;
     /** Router link target; when null, the item behaves as a button. */
     readonly link: _angular_core.InputSignal<string | unknown[] | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.11",
+  "version": "0.0.16",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -17,9 +17,6 @@
   },
   "sideEffects": false,
   "exports": {
-    "./preflight.css": {
-      "default": "./preflight.css"
-    },
     "./themes/*": {
       "default": "./themes/*"
     },

package/themes/base.css

@@ -0,0 +1,66 @@
+/*
+ * Base tokens — everything a component needs that is NOT the brand ramp.
+ *
+ * WHY THIS FILE EXISTS: the brand preset is only 11 of the library's 26 tokens. The other 15 are
+ * surfaces, ink, accents, status and radius, and the components reference them constantly
+ * (sds-card is "bg-surface border-border rounded-card", sds-button secondary is
+ * "bg-white text-ink border-border hover:bg-muted"). Before this file, every consuming app was told
+ * by the README to paste that block by hand — and an app that imported only a brand preset got a
+ * page where the brand-coloured things rendered and everything else silently emitted no CSS at all.
+ * That failure is invisible in a build log: Tailwind does not warn about a utility whose token is
+ * undefined, it just produces nothing.
+ *
+ * Import it BEFORE the brand preset, and both after `@import "tailwindcss"`:
+ *
+ *   @import "tailwindcss";
+ *   @source "../node_modules/@besaitech/ng-design-system";
+ *   @import "@besaitech/ng-design-system/themes/base.css";
+ *   @import "@besaitech/ng-design-system/themes/belvigo.css";
+ *
+ * Every value here is a default an app may override in its own `@theme` afterwards — the typeface
+ * especially, which is the one token most apps do change.
+ */
+@theme {
+  /* Neutrals / surfaces */
+  --color-canvas: #f5f6f8;
+  --color-surface: #ffffff;
+  --color-muted: #f8f9fb;
+  --color-border: #e6e9f0;
+  --color-ink: #1b2440;
+  --color-ink-soft: #5b6577;
+  --color-ink-faint: #8a93a6;
+
+  /* Accent icon-tiles (foreground + soft background) */
+  --color-accent-blue: #2f6bd4;
+  --color-accent-blue-soft: #e8effb;
+  --color-accent-green: #1f9d57;
+  --color-accent-green-soft: #e6f5ec;
+  --color-accent-amber: #e0902a;
+  --color-accent-amber-soft: #fdf0dd;
+  --color-accent-red: #df4f6b;
+  --color-accent-red-soft: #fde7ec;
+  --color-accent-indigo: #6c5ce7;
+  --color-accent-indigo-soft: #ece9fb;
+
+  /* Status */
+  --color-success: #27c06b;
+  --color-warning: #f3b73c;
+  --color-danger: #df4f6b;
+
+  /* Radius */
+  --radius-control: 0.5rem;
+  --radius-card: 0.75rem;
+
+  /* Typography — override in your app's own @theme if your brand uses a different face. */
+  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+}
+
+@layer base {
+  :root {
+    /* Layout dimensions consumed by sds-shell / sds-sidebar. Plain CSS vars, not @theme tokens —
+       they are lengths the layout reads, never Tailwind utilities. */
+    --sds-topbar-h: 64px;
+    --sds-sidebar-w: 256px;
+    --sds-sidebar-w-collapsed: 76px;
+  }
+}

package/themes/saitech.css

@@ -1,5 +1,5 @@
 /*
- * Saitech theme — the library's original brand blues (StaffKit / Cliniques universitaires Saint-Luc).
+ * Saitech theme — the library's original brand blues, and its default.
  *
  * This file is the DEFAULT look every consumer got before themes existed, extracted verbatim so that
  * adding a second brand could not change the first one. If you are looking for the values that used to

package/preflight.css

@@ -1,113 +0,0 @@
-/*
- * @besaitech/ng-design-system — scoped Preflight
- * ------------------------------------------------------------------
- * The library's components are authored against Tailwind's Preflight
- * (its base reset). Apps that don't load Preflight — e.g. because they
- * also use another global design system (@stlucdesign/saint-luc-design-system)
- * and only import `tailwindcss/utilities` — leave the components exposed to
- * that other system's bare-element rules (button fonts, `ul{list-style}`,
- * `li{margin}`, heading styles, …).
- *
- * Import this file into a cascade layer that sits ABOVE the legacy design
- * system but BELOW Tailwind's `utilities` layer, e.g.:
- *
- *   @layer legacy, ng-design-system-base, theme, utilities;
- *   @import '@stlucdesign/saint-luc-design-system/style.css' layer(legacy);
- *   @import '@besaitech/ng-design-system/preflight.css'      layer(ng-design-system-base);
- *   @import 'tailwindcss/theme'     layer(theme);
- *   @import 'tailwindcss/utilities' layer(utilities);
- *
- * Every rule is scoped to the `sds-*` component subtree, so it never touches
- * the host app's own elements. Because it lives below `utilities`, the
- * components' own utility classes always win — this only neutralises styles
- * the components don't set themselves.
- */
-
-:where(
-  sds-icon, sds-button, sds-input, sds-textarea, sds-toggle-switch, sds-avatar,
-  sds-badge, sds-card, sds-calendar, sds-date-picker, sds-select, sds-multi-select,
-  sds-phone-input, sds-paginator, sds-tabs, sds-tab-list, sds-tab, sds-tab-panels,
-  sds-tab-panel, sds-accordion, sds-accordion-panel, sds-accordion-header,
-  sds-accordion-content, sds-table, sds-table-cell, sds-table-row-expansion,
-  sds-topbar, sds-shell, sds-sidebar, sds-nav-group, sds-nav-item,
-  /*
-   * Overlay panels (dropdown lists, country picker) are relocated to
-   * <body> while open, so they're no longer inside an sds-* element. Scope
-   * them by their markers so the reset still reaches their <ul>/<li>/buttons.
-   * The date-picker overlay wraps <sds-calendar> (already covered above).
-   */
-  [data-sds-select-panel], [data-sds-phone-panel]
-) {
-  /* Box model + typography baseline for everything inside a component.
-     `border: 0 solid` mirrors Tailwind Preflight: components add borders via
-     utilities, so this strips the legacy `input{border:…}` from native controls. */
-  & :where(*, *::before, *::after) {
-    box-sizing: border-box;
-    border: 0 solid;
-    font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
-  }
-
-  /* Headings: neutralise size/weight/spacing so component utilities define them. */
-  & :where(h1, h2, h3, h4, h5, h6) {
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    margin: 0;
-  }
-
-  /* Block text. */
-  & :where(p, figure, blockquote, dl, dd) {
-    margin: 0;
-  }
-
-  /* Lists: strip bullets and default spacing (counters ul{list-style:disc}, li{margin}). */
-  & :where(ul, ol) {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  & :where(li) {
-    margin: 0;
-  }
-
-  /* Form controls: inherit typography instead of the host's button/input rules. */
-  & :where(button, input, optgroup, select, textarea) {
-    font: inherit;
-    color: inherit;
-    letter-spacing: inherit;
-  }
-  & :where(button) {
-    background: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-  }
-
-  /* Links. */
-  & :where(a) {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  /* Media. */
-  & :where(img, svg, video, canvas) {
-    display: block;
-    vertical-align: middle;
-  }
-}
-
-/*
- * sds-icon renders line icons as inline SVG with `fill="none"` and
- * `stroke="currentColor"` set as *attributes*. A host `svg { fill: currentColor }`
- * rule (e.g. from @stlucdesign/saint-luc-design-system) overrides those attributes
- * and flood-fills every icon. Re-assert them here. Anchored on `sds-icon` so it also
- * covers icons inside body-relocated overlay panels. Inner shapes that opt into a
- * fill via their own `fill="currentColor"` attribute (e.g. dots) are unaffected.
- */
-:where(sds-icon) svg {
-  width: 100%;
-  height: 100%;
-  fill: none;
-  stroke: currentColor;
-}