@ixfx/components 0.9.6 → 0.9.8

package/dist/{fallbacks-BcKGq-2F.js → fallbacks-DQ_5OsmR.js}

@@ -361,7 +361,7 @@ const _themeFallbacksCss = css`
   @property --item-border-tickled {
     syntax: '*';
     inherits: true;
-    initial-value: 1px solid color-mix(in oklch, oklch(60% 0.15 140) 40%, transparent);
+    initial-value: 1px solid oklch(19% 0.02 240);
   }
   @property --item-border-selected {
     syntax: '*';
@@ -419,4 +419,4 @@ const themeFallbacks = css``;
 //#endregion
 export { themeFallbacks as t };
 
-//# sourceMappingURL=fallbacks-BcKGq-2F.js.map
+//# sourceMappingURL=fallbacks-DQ_5OsmR.js.map

package/dist/{fallbacks-BcKGq-2F.js.map → fallbacks-DQ_5OsmR.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fallbacks-BcKGq-2F.js","names":[],"sources":["../src/styles/fallbacks.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Default fallback values for theme CSS variables.\n *\n * Uses `@property` to register each variable with an initial value that acts\n * as a fallback. This means:\n *  - If the theme CSS (`src/style.css`) is loaded, its `:root` values cascade\n *    in and override these defaults.\n *  - If no theme CSS is loaded, these initial values ensure components still\n *    have visible backgrounds, text colours, etc.\n *\n * `@property` registration is document-global — it is not scoped per shadow\n * root — so this is registered exactly once (via `_registerThemeFallbacksOnce`\n * below) rather than adopted into every component's shadow-root stylesheet.\n * Registering the same `@property` rule repeatedly across many shadow roots\n * causes Chrome to log \"Ignored @property rule\" for every repeat.\n */\nconst _themeFallbacksCss = css`\n  @property --surface-0 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(5% 0.02 240);\n  }\n  @property --surface-1 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(8% 0.02 240);\n  }\n  @property --surface-2 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(12% 0.02 240);\n  }\n  @property --surface-2-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --surface-3 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(15% 0.02 240);\n  }\n  @property --surface-3-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(75% 0.02 240);\n  }\n  @property --surface-4 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(22% 0.02 240);\n  }\n  @property --surface-4-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --surface-5 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(19% 0.02 240);\n  }\n  @property --surface-5-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --surface-6 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(35% 0.02 240);\n  }\n  @property --surface-6-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --surface-muted-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(55% 0.02 240);\n  }\n  @property --content {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(10% 0.01 240);\n  }\n  @property --content-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --accent {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(60% 0.15 140);\n  }\n  @property --accent-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --error {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(60% 0.15 20);\n  }\n  @property --error-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --border {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid oklch(25% 0.02 240);\n  }\n  @property --border-subtle {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid oklch(18% 0.02 240);\n  }\n  @property --disabled-opacity {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.5;\n  }\n  @property --transition {\n    syntax: '<time>';\n    inherits: true;\n    initial-value: 0.15s;\n  }\n  @property --prominence-idle-opacity {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.6;\n  }\n  @property --prominence-idle-saturate {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.4;\n  }\n  @property --prominence-tickled-opacity {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.85;\n  }\n  @property --prominence-tickled-saturate {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.8;\n  }\n  @property --prominence-disabled-opacity {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.3;\n  }\n  @property --prominence-disabled-saturate {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.1;\n  }\n  @property --crumb-item-bg {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: transparent;\n  }\n  @property --crumb-item-bg-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: var(--surface-5);\n  }\n  @property --crumb-item-text-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: inherit;\n  }\n  @property --crumb-item-border {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid transparent;\n  }\n  @property --crumb-item-border-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: var(--accent);\n  }\n  @property --crumb-item-padding {\n    syntax: '*';\n    inherits: true;\n    initial-value: var(--space-xs);\n  }\n  @property --crumb-item-border-radius {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: var(--radius-m);\n  }\n  @property --crumb-item-gap {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: var(--space-xs);\n  }\n  @property --crumb-separator {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: var(--surface-muted-text);\n  }\n  @property --crumb-truncate-min-width {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 5ch;\n  }\n  @property --space-xs {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 3px;\n  }\n  @property --space-s {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 4px;\n  }\n  @property --space-m {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 8px;\n  }\n  @property --space-l {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 12px;\n  }\n  @property --space-xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 16px;\n  }\n  @property --space-2xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 20px;\n  }\n  @property --text-xs {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 9px;\n  }\n  @property --text-s {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 11px;\n  }\n  @property --text-m {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 12px;\n  }\n  @property --text-l {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 13px;\n  }\n  @property --text-xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 16px;\n  }\n  @property --text-2xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 20px;\n  }\n  @property --font-weight-bold {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 600;\n  }\n  @property --radius-s {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 3px;\n  }\n  @property --radius-m {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 4px;\n  }\n  @property --radius-l {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 6px;\n  }\n  @property --radius-xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 8px;\n  }\n  @property --shadow-m {\n    syntax: '*';\n    inherits: true;\n    initial-value: 0 4px 12px rgba(0, 0, 0, 0.3);\n  }\n  @property --shadow-l {\n    syntax: '*';\n    inherits: true;\n    initial-value: 0 4px 24px rgba(0, 0, 0, 0.5);\n  }\n  @property --deboss-3 {\n    syntax: '*';\n    inherits: true;\n    initial-value:\n      inset 1px 1px 1px 1px color-mix(in oklch, oklch(8% 0.02 240) 60%, transparent),\n      inset -1px -1px 1px 1px color-mix(in oklch, oklch(15% 0.02 240) 50%, transparent),\n      -2px -2px 1px 0px color-mix(in oklch, oklch(12% 0.02 240) 30%, transparent);\n  }\n  @property --emboss-3 {\n    syntax: '*';\n    inherits: true;\n    initial-value:\n      inset 1px 1px 1px 1px color-mix(in oklch, oklch(22% 0.02 240) 30%, transparent),\n      inset -1px -1px 1px 1px color-mix(in oklch, oklch(12% 0.02 240) 20%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, oklch(12% 0.02 240) 30%, transparent);\n  }\n  @property --item-bg {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: transparent;\n  }\n  @property --item-bg-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(19% 0.02 240);\n  }\n  @property --item-bg-selected {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(60% 0.15 140);\n  }\n  @property --item-bg-selected-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: color-mix(in oklch, oklch(60% 0.15 140) 80%, oklch(0% 0 0));\n  }\n  @property --item-text-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --item-text-selected {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --item-border {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid oklch(19% 0.02 240);\n  }\n  @property --item-border-tickled {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid color-mix(in oklch, oklch(60% 0.15 140) 40%, transparent);\n  }\n  @property --item-border-selected {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px dashed oklch(60% 0.15 140);\n  }\n  @property --item-border-active {\n    syntax: '*';\n    inherits: true;\n    initial-value: 2px solid oklch(60% 0.15 140);\n  }\n  @property --item-border-dragged {\n    syntax: '*';\n    inherits: true;\n    initial-value: 2px dotted color-mix(in oklch, oklch(60% 0.15 140) 80%, transparent);\n  }\n  @property --item-border-disabled {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid oklch(22% 0.02 240);\n  }\n  @property --item-padding {\n    syntax: '*';\n    inherits: true;\n    initial-value: 4px 8px;\n  }\n  @property --item-border-radius {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 4px;\n  }\n  @property --item-icon-spacing {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 4px;\n  }\n`;\n\nlet _themeFallbacksRegistered = false;\n\nfunction _registerThemeFallbacksOnce(): void {\n  if (_themeFallbacksRegistered || typeof document === `undefined`)\n    return;\n  _themeFallbacksRegistered = true;\n  const styleEl = document.createElement(`style`);\n  styleEl.textContent = _themeFallbacksCss.cssText;\n  document.head.append(styleEl);\n}\n\n_registerThemeFallbacksOnce();\n\n/**\n * Spread this into any component whose styles reference theme variables.\n * It is an empty stylesheet — the actual `@property` rules are registered\n * once at the document level as a side effect of importing this module — so\n * this exists only to keep the familiar `static styles = [themeFallbacks, ...]`\n * pattern working across all consuming components.\n */\nexport const themeFallbacks = css``;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgY9B,IAAI,4BAA4B;AAEhC,SAAS,8BAAoC;CAC3C,IAAI,6BAA6B,OAAO,aAAa,aACnD;CACF,4BAA4B;CAC5B,MAAM,UAAU,SAAS,cAAc,OAAO;CAC9C,QAAQ,cAAc,mBAAmB;CACzC,SAAS,KAAK,OAAO,OAAO;AAC9B;AAEA,4BAA4B;;;;;;;;AAS5B,MAAa,iBAAiB,GAAG"}
+{"version":3,"file":"fallbacks-DQ_5OsmR.js","names":[],"sources":["../src/styles/fallbacks.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Default fallback values for theme CSS variables.\n *\n * Uses `@property` to register each variable with an initial value that acts\n * as a fallback. This means:\n *  - If the theme CSS (`src/style.css`) is loaded, its `:root` values cascade\n *    in and override these defaults.\n *  - If no theme CSS is loaded, these initial values ensure components still\n *    have visible backgrounds, text colours, etc.\n *\n * `@property` registration is document-global — it is not scoped per shadow\n * root — so this is registered exactly once (via `_registerThemeFallbacksOnce`\n * below) rather than adopted into every component's shadow-root stylesheet.\n * Registering the same `@property` rule repeatedly across many shadow roots\n * causes Chrome to log \"Ignored @property rule\" for every repeat.\n */\nconst _themeFallbacksCss = css`\n  @property --surface-0 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(5% 0.02 240);\n  }\n  @property --surface-1 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(8% 0.02 240);\n  }\n  @property --surface-2 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(12% 0.02 240);\n  }\n  @property --surface-2-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --surface-3 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(15% 0.02 240);\n  }\n  @property --surface-3-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(75% 0.02 240);\n  }\n  @property --surface-4 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(22% 0.02 240);\n  }\n  @property --surface-4-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --surface-5 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(19% 0.02 240);\n  }\n  @property --surface-5-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --surface-6 {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(35% 0.02 240);\n  }\n  @property --surface-6-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --surface-muted-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(55% 0.02 240);\n  }\n  @property --content {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(10% 0.01 240);\n  }\n  @property --content-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --accent {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(60% 0.15 140);\n  }\n  @property --accent-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --error {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(60% 0.15 20);\n  }\n  @property --error-text {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --border {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid oklch(25% 0.02 240);\n  }\n  @property --border-subtle {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid oklch(18% 0.02 240);\n  }\n  @property --disabled-opacity {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.5;\n  }\n  @property --transition {\n    syntax: '<time>';\n    inherits: true;\n    initial-value: 0.15s;\n  }\n  @property --prominence-idle-opacity {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.6;\n  }\n  @property --prominence-idle-saturate {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.4;\n  }\n  @property --prominence-tickled-opacity {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.85;\n  }\n  @property --prominence-tickled-saturate {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.8;\n  }\n  @property --prominence-disabled-opacity {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.3;\n  }\n  @property --prominence-disabled-saturate {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 0.1;\n  }\n  @property --crumb-item-bg {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: transparent;\n  }\n  @property --crumb-item-bg-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: var(--surface-5);\n  }\n  @property --crumb-item-text-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: inherit;\n  }\n  @property --crumb-item-border {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid transparent;\n  }\n  @property --crumb-item-border-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: var(--accent);\n  }\n  @property --crumb-item-padding {\n    syntax: '*';\n    inherits: true;\n    initial-value: var(--space-xs);\n  }\n  @property --crumb-item-border-radius {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: var(--radius-m);\n  }\n  @property --crumb-item-gap {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: var(--space-xs);\n  }\n  @property --crumb-separator {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: var(--surface-muted-text);\n  }\n  @property --crumb-truncate-min-width {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 5ch;\n  }\n  @property --space-xs {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 3px;\n  }\n  @property --space-s {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 4px;\n  }\n  @property --space-m {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 8px;\n  }\n  @property --space-l {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 12px;\n  }\n  @property --space-xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 16px;\n  }\n  @property --space-2xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 20px;\n  }\n  @property --text-xs {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 9px;\n  }\n  @property --text-s {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 11px;\n  }\n  @property --text-m {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 12px;\n  }\n  @property --text-l {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 13px;\n  }\n  @property --text-xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 16px;\n  }\n  @property --text-2xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 20px;\n  }\n  @property --font-weight-bold {\n    syntax: '<number>';\n    inherits: true;\n    initial-value: 600;\n  }\n  @property --radius-s {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 3px;\n  }\n  @property --radius-m {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 4px;\n  }\n  @property --radius-l {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 6px;\n  }\n  @property --radius-xl {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 8px;\n  }\n  @property --shadow-m {\n    syntax: '*';\n    inherits: true;\n    initial-value: 0 4px 12px rgba(0, 0, 0, 0.3);\n  }\n  @property --shadow-l {\n    syntax: '*';\n    inherits: true;\n    initial-value: 0 4px 24px rgba(0, 0, 0, 0.5);\n  }\n  @property --deboss-3 {\n    syntax: '*';\n    inherits: true;\n    initial-value:\n      inset 1px 1px 1px 1px color-mix(in oklch, oklch(8% 0.02 240) 60%, transparent),\n      inset -1px -1px 1px 1px color-mix(in oklch, oklch(15% 0.02 240) 50%, transparent),\n      -2px -2px 1px 0px color-mix(in oklch, oklch(12% 0.02 240) 30%, transparent);\n  }\n  @property --emboss-3 {\n    syntax: '*';\n    inherits: true;\n    initial-value:\n      inset 1px 1px 1px 1px color-mix(in oklch, oklch(22% 0.02 240) 30%, transparent),\n      inset -1px -1px 1px 1px color-mix(in oklch, oklch(12% 0.02 240) 20%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, oklch(12% 0.02 240) 30%, transparent);\n  }\n  @property --item-bg {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: transparent;\n  }\n  @property --item-bg-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(19% 0.02 240);\n  }\n  @property --item-bg-selected {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: oklch(60% 0.15 140);\n  }\n  @property --item-bg-selected-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: color-mix(in oklch, oklch(60% 0.15 140) 80%, oklch(0% 0 0));\n  }\n  @property --item-text-tickled {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --item-text-selected {\n    syntax: '<color>';\n    inherits: true;\n    initial-value: #fff;\n  }\n  @property --item-border {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid oklch(19% 0.02 240);\n  }\n  @property --item-border-tickled {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid oklch(19% 0.02 240);\n  }\n  @property --item-border-selected {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px dashed oklch(60% 0.15 140);\n  }\n  @property --item-border-active {\n    syntax: '*';\n    inherits: true;\n    initial-value: 2px solid oklch(60% 0.15 140);\n  }\n  @property --item-border-dragged {\n    syntax: '*';\n    inherits: true;\n    initial-value: 2px dotted color-mix(in oklch, oklch(60% 0.15 140) 80%, transparent);\n  }\n  @property --item-border-disabled {\n    syntax: '*';\n    inherits: true;\n    initial-value: 1px solid oklch(22% 0.02 240);\n  }\n  @property --item-padding {\n    syntax: '*';\n    inherits: true;\n    initial-value: 4px 8px;\n  }\n  @property --item-border-radius {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 4px;\n  }\n  @property --item-icon-spacing {\n    syntax: '<length>';\n    inherits: true;\n    initial-value: 4px;\n  }\n`;\n\nlet _themeFallbacksRegistered = false;\n\nfunction _registerThemeFallbacksOnce(): void {\n  if (_themeFallbacksRegistered || typeof document === `undefined`)\n    return;\n  _themeFallbacksRegistered = true;\n  const styleEl = document.createElement(`style`);\n  styleEl.textContent = _themeFallbacksCss.cssText;\n  document.head.append(styleEl);\n}\n\n_registerThemeFallbacksOnce();\n\n/**\n * Spread this into any component whose styles reference theme variables.\n * It is an empty stylesheet — the actual `@property` rules are registered\n * once at the document level as a side effect of importing this module — so\n * this exists only to keep the familiar `static styles = [themeFallbacks, ...]`\n * pattern working across all consuming components.\n */\nexport const themeFallbacks = css``;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgY9B,IAAI,4BAA4B;AAEhC,SAAS,8BAAoC;CAC3C,IAAI,6BAA6B,OAAO,aAAa,aACnD;CACF,4BAA4B;CAC5B,MAAM,UAAU,SAAS,cAAc,OAAO;CAC9C,QAAQ,cAAc,mBAAmB;CACzC,SAAS,KAAK,OAAO,OAAO;AAC9B;AAEA,4BAA4B;;;;;;;;AAS5B,MAAa,iBAAiB,GAAG"}

package/dist/{grid-list-mL0GJTQR.js → grid-list-40blkeza.js}

@@ -1,6 +1,6 @@
 import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { c as createElementListSearchAdapter, d as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-C05WjbZh.js";
 import { t as ListNativeDragController } from "./list-native-drag-controller-B0hWdbtM.js";
@@ -8,12 +8,12 @@ import { r as ListDragSelectController, t as ListSelectionController } from "./l
 import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-BskmlA9t.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
+import "./pan-text-CqtvjPyK.js";
 import { LitElement, css, html } from "lit";
-import { property, query, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { classMap } from "lit/directives/class-map.js";
 //#region src/grid-list/grid-list-source.ts
 const ITEM_SELECTOR$1 = `:scope > *`;
 const SYNTHETIC_PREFIX = `gl-auto-`;
@@ -234,233 +234,6 @@ var DataGridListSource = class {
 	}
 };
 //#endregion
-//#region src/pan-text/pan-text.ts
-const SPEED = 45;
-const END_PADDING = 4;
-const START_DELAY = 300;
-const END_DWELL = 2e3;
-const RESET_DURATION = 400;
-const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
-let PanTextElement = class PanTextElement extends LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.direction = `end`;
-		this.disabled = false;
-		this.mode = `hover`;
-		this._isOverflowing = false;
-		this._isHovering = false;
-		this._loopActive = false;
-		this._loopAtEnd = false;
-		this._overflow = 0;
-		this._resizeObserver = null;
-		this._loopTimer = 0;
-		this._onMouseEnter = () => {
-			this._isHovering = true;
-		};
-		this._onMouseLeave = () => {
-			this._isHovering = false;
-		};
-		this._measure = () => {
-			if (this._isHovering || this._loopAtEnd) return;
-			const el = this._textEl;
-			if (!el) return;
-			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
-			const overflowing = this._overflow > 0;
-			this.classList.toggle(`is-overflowing`, overflowing);
-			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
-			if (this._loopActive && this.mode === `loop` && !this.disabled && overflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
-			if (!overflowing && this._loopAtEnd) {
-				this._loopAtEnd = false;
-				this.requestUpdate();
-			}
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(() => this._measure());
-		this.addEventListener(`mouseenter`, this._onMouseEnter);
-		this.addEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._clearLoopTimer();
-		this._loopActive = false;
-		this._loopAtEnd = false;
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = null;
-		this.removeEventListener(`mouseenter`, this._onMouseEnter);
-		this.removeEventListener(`mouseleave`, this._onMouseLeave);
-	}
-	firstUpdated() {
-		this._measure();
-		this._resizeObserver?.observe(this);
-		document.fonts?.ready.then(() => this._measure());
-		if (this.mode === `loop`) this.startLoop();
-	}
-	updated(changed) {
-		if (changed.has(`mode`)) {
-			if (this.mode === `loop`) this.startLoop();
-			else this.stopLoop();
-		}
-		if (changed.has(`disabled`) && this.disabled) this.stopLoop();
-		this._measure();
-	}
-	/**
-	* Whether a loop pan is currently active (between `startLoop()` and `stopLoop()`).
-	*/
-	get looping() {
-		return this._loopActive;
-	}
-	/**
-	* Begin looping: pan to the end, dwell there for 2 seconds, reset to the
-	* start and pan again, repeating until `stopLoop()` is called. A no-op when
-	* `disabled`, when there is nothing to reveal, or under reduced-motion.
-	*/
-	startLoop() {
-		if (this.disabled || this._prefersReducedMotion()) return;
-		this._loopActive = true;
-		this._loopAtEnd = false;
-		this.requestUpdate();
-		if (this._isOverflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
-	}
-	/**
-	* Stop a loop started with `startLoop()` and snap back to the rest position.
-	*/
-	stopLoop() {
-		if (!this._loopActive && !this._loopAtEnd && this._loopTimer === 0) return;
-		this._clearLoopTimer();
-		this._loopActive = false;
-		this._loopAtEnd = false;
-		this.requestUpdate();
-	}
-	_prefersReducedMotion() {
-		return globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches ?? false;
-	}
-	_panDuration() {
-		return Math.max(1.5, (this._overflow + END_PADDING) / SPEED);
-	}
-	_clearLoopTimer() {
-		if (this._loopTimer !== 0) {
-			clearTimeout(this._loopTimer);
-			this._loopTimer = 0;
-		}
-	}
-	_scheduleLoopPan(delay) {
-		this._clearLoopTimer();
-		this._loopTimer = window.setTimeout(() => {
-			this._loopTimer = 0;
-			if (!this._loopActive || this.disabled || !this._isOverflowing) return;
-			this._loopAtEnd = true;
-			this.requestUpdate();
-			const dwell = this._panDuration() * 1e3 + END_DWELL;
-			this._loopTimer = window.setTimeout(() => {
-				this._loopTimer = 0;
-				if (!this._loopActive) return;
-				this._loopAtEnd = false;
-				this.requestUpdate();
-				this._scheduleLoopPan(700);
-			}, dwell);
-		}, delay);
-	}
-	_textStyle() {
-		if (!this._isOverflowing) return ``;
-		const distance = this._overflow + END_PADDING;
-		const duration = Math.max(1.5, distance / SPEED);
-		const revealEnd = this.direction === `end`;
-		const restX = revealEnd ? 0 : -distance;
-		const hoverX = revealEnd ? -distance : 0;
-		if (this._loopActive && this.mode === `loop`) {
-			if (this._loopAtEnd) return [
-				`transform: translateX(${hoverX}px)`,
-				`transition: transform ${duration}s ${PAN_EASING}`,
-				`overflow: visible`,
-				`text-overflow: clip`
-			].join(`; `);
-			return [
-				`transform: translateX(${restX}px)`,
-				`transition: transform ${RESET_DURATION}ms ${PAN_EASING}`,
-				revealEnd ? `` : `overflow: visible; text-overflow: clip`
-			].filter(Boolean).join(`; `);
-		}
-		if (this._isHovering) return [
-			`transform: translateX(${hoverX}px)`,
-			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
-			`overflow: visible`,
-			`text-overflow: clip`
-		].join(`; `);
-		return [
-			`transform: translateX(${restX}px)`,
-			`transition: transform 400ms ${PAN_EASING}`,
-			revealEnd ? `` : `overflow: visible; text-overflow: clip`
-		].filter(Boolean).join(`; `);
-	}
-	render() {
-		const textClasses = {
-			"is-overflowing": this._isOverflowing,
-			"is-hovering": this._isHovering
-		};
-		return html`
-      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
-        <slot @slotchange=${this._measure}></slot>
-      </span>
-    `;
-	}
-	static {
-		this.styles = [themeFallbacks, css`
-    /* Renders like plain inline text: no colours, border, padding or margin
-       of its own — it only adds the clipping needed to pan on hover. */
-    :host {
-      display: inline-block;
-      overflow: hidden;
-      white-space: nowrap;
-      max-width: 100%;
-      box-sizing: border-box;
-      font: inherit;
-      color: inherit;
-    }
-
-    :host([disabled]) {
-      opacity: var(--disabled-opacity, 0.5);
-      pointer-events: none;
-    }
-
-    .text {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      will-change: transform;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .text {
-        transition: none !important;
-        transform: none !important;
-      }
-    }
-  `];
-	}
-};
-__decorate([property({
-	type: String,
-	attribute: `direction`
-})], PanTextElement.prototype, "direction", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `disabled`
-})], PanTextElement.prototype, "disabled", void 0);
-__decorate([property({
-	type: String,
-	attribute: `mode`,
-	reflect: true
-})], PanTextElement.prototype, "mode", void 0);
-__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
-__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
-__decorate([state()], PanTextElement.prototype, "_loopActive", void 0);
-__decorate([state()], PanTextElement.prototype, "_loopAtEnd", void 0);
-__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
-PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
-//#endregion
 //#region src/grid-list/grid-list.ts
 const ITEM_SELECTOR = `:scope > *`;
 const MIN_ITEM_SIZE = 16;
@@ -2104,6 +1877,6 @@ __decorate([state()], GridListElement.prototype, "_viewportHeight", void 0);
 __decorate([state()], GridListElement.prototype, "_viewportWidth", void 0);
 GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElement);
 //#endregion
-export { PanTextElement as n, GridListElement as t };
+export { GridListElement as t };
 
-//# sourceMappingURL=grid-list-mL0GJTQR.js.map
+//# sourceMappingURL=grid-list-40blkeza.js.map