@ixfx/components 0.5.19 → 0.6.0

package/dist/fallbacks-DEE1nCTt.js

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

package/dist/fallbacks-DEE1nCTt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fallbacks-DEE1nCTt.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: 10px;\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 --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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgX9B,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/form-CsXJX15p.js

@@ -0,0 +1,64 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { LitElement } from "lit";
+//#region src/form/form-values.ts
+function collectFormValues(root) {
+	const values = {};
+	root.querySelectorAll(`[name]`).forEach((el) => {
+		const name = el.getAttribute(`name`);
+		if (!name) return;
+		if (el instanceof HTMLInputElement) {
+			if (el.type === `radio`) {
+				if (el.checked) values[name] = el.value;
+			} else if (el.type === `checkbox`) values[name] = el.checked;
+			else values[name] = el.value;
+		} else if (el instanceof HTMLSelectElement) {
+			if (el.multiple) values[name] = Array.from(el.selectedOptions).map((opt) => opt.value);
+			else values[name] = el.value;
+		} else if (el instanceof HTMLTextAreaElement) values[name] = el.value;
+		else if (`value` in el) values[name] = el.value;
+	});
+	return values;
+}
+function applyFormValues(root, data) {
+	root.querySelectorAll(`[name]`).forEach((el) => {
+		const name = el.getAttribute(`name`);
+		if (!name || !(name in data)) return;
+		const value = data[name];
+		if (el instanceof HTMLInputElement) {
+			if (el.type === `radio`) el.checked = el.value === value;
+			else if (el.type === `checkbox`) el.checked = Boolean(value);
+			else el.value = String(value ?? ``);
+			el.dispatchEvent(new Event(`input`, { bubbles: true }));
+			el.dispatchEvent(new Event(`change`, { bubbles: true }));
+		} else if (el instanceof HTMLSelectElement) {
+			if (el.multiple && Array.isArray(value)) Array.from(el.options).forEach((opt) => {
+				opt.selected = value.includes(opt.value);
+			});
+			else el.value = String(value ?? ``);
+			el.dispatchEvent(new Event(`input`, { bubbles: true }));
+			el.dispatchEvent(new Event(`change`, { bubbles: true }));
+		} else if (el instanceof HTMLTextAreaElement) {
+			el.value = String(value ?? ``);
+			el.dispatchEvent(new Event(`input`, { bubbles: true }));
+			el.dispatchEvent(new Event(`change`, { bubbles: true }));
+		} else if (`value` in el) el.value = value;
+	});
+}
+//#endregion
+//#region src/form/form.ts
+let FormElement = class FormElement extends LitElement {
+	createRenderRoot() {
+		return this;
+	}
+	getValues() {
+		return collectFormValues(this);
+	}
+	setValues(data) {
+		applyFormValues(this, data);
+	}
+};
+FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
+//#endregion
+export { FormElement as t };
+
+//# sourceMappingURL=form-CsXJX15p.js.map

package/dist/form-CsXJX15p.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-CsXJX15p.js","names":[],"sources":["../src/form/form-values.ts","../src/form/form.ts"],"sourcesContent":["export function collectFormValues(root: ParentNode): Record<string, unknown> {\n  const values: Record<string, unknown> = {};\n  const elements = root.querySelectorAll(`[name]`);\n\n  elements.forEach((el) => {\n    const name = el.getAttribute(`name`);\n    if (!name) {\n      return;\n    }\n\n    if (el instanceof HTMLInputElement) {\n      if (el.type === `radio`) {\n        if (el.checked) {\n          values[name] = el.value;\n        }\n      } else if (el.type === `checkbox`) {\n        values[name] = el.checked;\n      } else {\n        values[name] = el.value;\n      }\n    } else if (el instanceof HTMLSelectElement) {\n      if (el.multiple) {\n        values[name] = Array.from(el.selectedOptions).map(opt => opt.value);\n      } else {\n        values[name] = el.value;\n      }\n    } else if (el instanceof HTMLTextAreaElement) {\n      values[name] = el.value;\n    } else if (`value` in el) {\n      values[name] = (el as { value: unknown }).value;\n    }\n  });\n\n  return values;\n}\n\nexport function applyFormValues(root: ParentNode, data: Record<string, unknown>): void {\n  const elements = root.querySelectorAll(`[name]`);\n\n  elements.forEach((el) => {\n    const name = el.getAttribute(`name`);\n    if (!name || !(name in data)) {\n      return;\n    }\n\n    const value = data[name];\n\n    if (el instanceof HTMLInputElement) {\n      if (el.type === `radio`) {\n        el.checked = el.value === value;\n      } else if (el.type === `checkbox`) {\n        el.checked = Boolean(value);\n      } else {\n        el.value = String(value ?? ``);\n      }\n      el.dispatchEvent(new Event(`input`, { bubbles: true }));\n      el.dispatchEvent(new Event(`change`, { bubbles: true }));\n    } else if (el instanceof HTMLSelectElement) {\n      if (el.multiple && Array.isArray(value)) {\n        Array.from(el.options).forEach((opt) => {\n          opt.selected = value.includes(opt.value);\n        });\n      } else {\n        el.value = String(value ?? ``);\n      }\n      el.dispatchEvent(new Event(`input`, { bubbles: true }));\n      el.dispatchEvent(new Event(`change`, { bubbles: true }));\n    } else if (el instanceof HTMLTextAreaElement) {\n      el.value = String(value ?? ``);\n      el.dispatchEvent(new Event(`input`, { bubbles: true }));\n      el.dispatchEvent(new Event(`change`, { bubbles: true }));\n    } else if (`value` in el) {\n      (el as { value: unknown }).value = value;\n    }\n  });\n}","import { LitElement } from 'lit';\nimport { safeCustomElement } from '../util/custom-elements.js';\nimport { applyFormValues, collectFormValues } from './form-values.js';\nimport './form.css';\n\n@safeCustomElement(`ixfx-form`)\nexport class FormElement extends LitElement {\n  protected override createRenderRoot() {\n    return this;\n  }\n\n  getValues(): Record<string, unknown> {\n    return collectFormValues(this);\n  }\n\n  setValues(data: Record<string, unknown>): void {\n    applyFormValues(this, data);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-form': FormElement;\n  }\n}"],"mappings":";;;AAAA,SAAgB,kBAAkB,MAA2C;CAC3E,MAAM,SAAkC,CAAC;CAGzC,KAFsB,iBAAiB,QAEhC,CAAC,CAAC,SAAS,OAAO;EACvB,MAAM,OAAO,GAAG,aAAa,MAAM;EACnC,IAAI,CAAC,MACH;EAGF,IAAI,cAAc,kBAAkB;GAClC,IAAI,GAAG,SAAS,SACV;QAAA,GAAG,SACL,OAAO,QAAQ,GAAG;GAAA,OAEf,IAAI,GAAG,SAAS,YACrB,OAAO,QAAQ,GAAG;QAElB,OAAO,QAAQ,GAAG;EAEtB,OAAO,IAAI,cAAc,mBAAmB;GAC1C,IAAI,GAAG,UACL,OAAO,QAAQ,MAAM,KAAK,GAAG,eAAe,CAAC,CAAC,KAAI,QAAO,IAAI,KAAK;QAElE,OAAO,QAAQ,GAAG;EAEtB,OAAO,IAAI,cAAc,qBACvB,OAAO,QAAQ,GAAG;OACb,IAAI,WAAW,IACpB,OAAO,QAAS,GAA0B;CAE9C,CAAC;CAED,OAAO;AACT;AAEA,SAAgB,gBAAgB,MAAkB,MAAqC;CAGrF,KAFsB,iBAAiB,QAEhC,CAAC,CAAC,SAAS,OAAO;EACvB,MAAM,OAAO,GAAG,aAAa,MAAM;EACnC,IAAI,CAAC,QAAQ,EAAE,QAAQ,OACrB;EAGF,MAAM,QAAQ,KAAK;EAEnB,IAAI,cAAc,kBAAkB;GAClC,IAAI,GAAG,SAAS,SACd,GAAG,UAAU,GAAG,UAAU;QACrB,IAAI,GAAG,SAAS,YACrB,GAAG,UAAU,QAAQ,KAAK;QAE1B,GAAG,QAAQ,OAAO,SAAS,EAAE;GAE/B,GAAG,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;GACtD,GAAG,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;EACzD,OAAO,IAAI,cAAc,mBAAmB;GAC1C,IAAI,GAAG,YAAY,MAAM,QAAQ,KAAK,GACpC,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,SAAS,QAAQ;IACtC,IAAI,WAAW,MAAM,SAAS,IAAI,KAAK;GACzC,CAAC;QAED,GAAG,QAAQ,OAAO,SAAS,EAAE;GAE/B,GAAG,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;GACtD,GAAG,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;EACzD,OAAO,IAAI,cAAc,qBAAqB;GAC5C,GAAG,QAAQ,OAAO,SAAS,EAAE;GAC7B,GAAG,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;GACtD,GAAG,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;EACzD,OAAO,IAAI,WAAW,IACpB,GAA2B,QAAQ;CAEvC,CAAC;AACH;;;ACrEO,IAAM,cAAN,MAAM,oBAAoB,WAAW;CAC1C,mBAAsC;EACpC,OAAO;CACT;CAEA,YAAqC;EACnC,OAAO,kBAAkB,IAAI;CAC/B;CAEA,UAAU,MAAqC;EAC7C,gBAAgB,MAAM,IAAI;CAC5B;AACF;AAbC,cAAA,WAAA,CAAA,kBAAkB,WAAW,CAAA,GAAA,WAAA"}

package/dist/form.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from "lit";
+//#region src/form/form.d.ts
+declare class FormElement extends LitElement {
+  protected createRenderRoot(): this;
+  getValues(): Record<string, unknown>;
+  setValues(data: Record<string, unknown>): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-form': FormElement;
+  }
+}
+//#endregion
+export { FormElement };
+//# sourceMappingURL=form.d.ts.map

package/dist/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","names":[],"sources":["../src/form/form.ts"],"mappings":";;cAMa,oBAAoB;YACZ;EAInB,aAAa;EAIb,UAAU,MAAM;;QAKV;YACI;IACR,aAAa"}

package/dist/form.js

@@ -0,0 +1,2 @@
+import { t as FormElement } from "./form-CsXJX15p.js";
+export { FormElement };

package/dist/grouped-item-lister-CNLMgdIr.d.ts

@@ -0,0 +1,121 @@
+import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
+import { l as ListSelectionMode } from "./types-DlVNJez_.js";
+import "./panel.js";
+import { LitElement, PropertyValues, nothing } from "lit";
+import { CommandId } from "@clinth/ui-commands";
+//#region src/grouped-item-lister/types.d.ts
+/**
+ * Fired when the selection set changes by any means.
+ * Event name: `select`
+ */
+type SubComponentSelectDetail<T> = {
+  readonly selected: ReadonlySet<T>;
+  readonly previous: ReadonlySet<T>;
+};
+/**
+ * Fired when an item is explicitly activated (double-click or Enter key).
+ * Event name: `activate`
+ */
+type SubComponentActivateDetail<T> = {
+  readonly item: T;
+};
+/**
+ * Fired on a raw pointer click before any selection change.
+ * Event name: `item-click`
+ */
+type SubComponentItemClickDetail<T> = {
+  readonly item: T;
+};
+/**
+ * Fired when the pointer hovers over an item or the keyboard cursor moves to it.
+ * Event name: `tickle`
+ */
+type SubComponentTickleDetail<T> = {
+  readonly item: T;
+};
+type SubComponentSelectEvent<T> = CustomEvent<SubComponentSelectDetail<T>>;
+type SubComponentActivateEvent<T> = CustomEvent<SubComponentActivateDetail<T>>;
+type SubComponentItemClickEvent<T> = CustomEvent<SubComponentItemClickDetail<T>>;
+type SubComponentTickleEvent<T> = CustomEvent<SubComponentTickleDetail<T>>;
+interface IGroupedSubComponentEventMap<T> {
+  'select': SubComponentSelectEvent<T>;
+  'activate': SubComponentActivateEvent<T>;
+  'item-click': SubComponentItemClickEvent<T>;
+  'tickle': SubComponentTickleEvent<T>;
+}
+/**
+ * Contract that sub-components passed to `ixfx-grouped-item-lister` must satisfy.
+ *
+ * All four events (`select`, `activate`, `item-click`, `tickle`) must bubble and be composed
+ * so they propagate through the lister's light DOM to external listeners.
+ */
+interface IGroupedSubComponent<T> extends HTMLElement {
+  /** Replace the full item list. Called whenever the lister's items or grouping changes. */
+  setItems: (items: readonly T[]) => void;
+  /** Clear the current selection without firing a `select` event (avoids re-entrant loops). */
+  clearSelection: () => void;
+  /** The current selection set. */
+  readonly selectedItems: ReadonlySet<T>;
+  /** Controls how many items can be selected simultaneously. */
+  selectionMode: ListSelectionMode;
+  /**
+   * Forward a command (e.g. sort-order change) to this sub-component.
+   * Uses `CommandId` from `@clinth/ui-commands` for interoperability.
+   */
+  dispatch: (commandId: CommandId, args?: Record<string, unknown>) => void;
+  addEventListener: (<K extends keyof IGroupedSubComponentEventMap<T>>(type: K, listener: (event: IGroupedSubComponentEventMap<T>[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+/**
+ * Factory that creates a sub-component for a given group.
+ * Called once per group (or once with `undefined` in ungrouped mode).
+ */
+type SubComponentFactory<T> = (groupKey: string | undefined) => HTMLElement & IGroupedSubComponent<T>;
+/**
+ * Fired by `ixfx-grouped-item-lister` after any sub-component fires `select`.
+ * Carries the full cross-group selection union and the key of the group whose
+ * selection just changed (or `undefined` in ungrouped mode).
+ */
+type GroupedSelectDetail<T> = {
+  readonly selected: ReadonlySet<T>;
+  readonly groupKey: string | undefined;
+};
+type GroupedSelectEvent<T> = CustomEvent<GroupedSelectDetail<T>>;
+interface GroupedItemListerElementEventMap<T> {
+  'grouped-select': GroupedSelectEvent<T>;
+}
+//#endregion
+//#region src/grouped-item-lister/grouped-item-lister.d.ts
+declare class GroupedItemListerElement<T = unknown> extends LitElement {
+  #private;
+  grouped: boolean;
+  crossGroupSelection: boolean;
+  get groupBy(): ((item: T) => string) | undefined;
+  set groupBy(value: ((item: T) => string) | undefined);
+  get factory(): SubComponentFactory<T> | undefined;
+  set factory(value: SubComponentFactory<T> | undefined);
+  get provider(): IDataProvider<void, T> | undefined;
+  set provider(value: IDataProvider<void, T> | undefined);
+  /** The union of all selected items across every sub-component. */
+  get selectedItems(): ReadonlySet<T>;
+  /**
+   * Forward a command to all live sub-components.
+   * Use this to propagate changes like sort order, filter state, or view mode.
+   */
+  dispatch(commandId: CommandId, args?: Record<string, unknown>): void;
+  protected createRenderRoot(): this;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected updated(changed: PropertyValues): void;
+  protected render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-grouped-item-lister': GroupedItemListerElement;
+  }
+}
+interface GroupedItemListerElement<T> {
+  addEventListener: (<K extends keyof GroupedItemListerElementEventMap<T>>(type: K, listener: (this: GroupedItemListerElement<T>, event: GroupedItemListerElementEventMap<T>[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+export { IGroupedSubComponent as a, SubComponentActivateEvent as c, SubComponentItemClickEvent as d, SubComponentSelectDetail as f, SubComponentTickleEvent as h, GroupedSelectEvent as i, SubComponentFactory as l, SubComponentTickleDetail as m, GroupedItemListerElementEventMap as n, IGroupedSubComponentEventMap as o, SubComponentSelectEvent as p, GroupedSelectDetail as r, SubComponentActivateDetail as s, GroupedItemListerElement as t, SubComponentItemClickDetail as u };
+//# sourceMappingURL=grouped-item-lister-CNLMgdIr.d.ts.map

package/dist/grouped-item-lister-CNLMgdIr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped-item-lister-CNLMgdIr.d.ts","names":[],"sources":["../src/grouped-item-lister/types.ts","../src/grouped-item-lister/grouped-item-lister.ts"],"mappings":";;;;;;;;;;KAWY,yBAAyB;WAC1B,UAAU,YAAY;WACtB,UAAU,YAAY;;;;;;KAOrB,2BAA2B;WAC5B,MAAM;;;;;;KAOL,4BAA4B;WAC7B,MAAM;;;;;;KAOL,yBAAyB;WAC1B,MAAM;;KAGL,wBAAwB,KAAK,YAAY,yBAAyB;KAClE,0BAA0B,KAAK,YAAY,2BAA2B;KACtE,2BAA2B,KAAK,YAAY,4BAA4B;KACxE,wBAAwB,KAAK,YAAY,yBAAyB;UAE7D,6BAA6B;EAC5C,UAAU,wBAAwB;EAClC,YAAY,0BAA0B;EACtC,cAAc,2BAA2B;EACzC,UAAU,wBAAwB;;;;;;;;UAanB,qBAAqB,WAAW;;EAE/C,WAAW,gBAAgB;;EAG3B;;WAGS,eAAe,YAAY;;EAGpC,eAAe;;;;;EAMf,WAAW,WAAW,WAAW,OAAO;EAExC,oBAAoB,gBAAgB,6BAA6B,IAC/D,MAAM,GACN,WAAW,OAAO,6BAA6B,GAAG,aAClD,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;;;KAQZ,oBAAoB,MAAM,iCAAiC,cAAc,qBAAqB;;;;;;KAW9F,oBAAoB;WACrB,UAAU,YAAY;WACtB;;KAGC,mBAAmB,KAAK,YAAY,oBAAoB;UAEnD,iCAAiC;EAChD,kBAAkB,mBAAmB;;;;cC9E1B,yBAAyB,qBAAqB;;EACb;EAG5C;MAgBI,aAAa,MAAM;MAInB,QAAQ,SAAS,MAAM;MAKvB,WAAW,oBAAoB;MAI/B,QAAQ,OAAO,oBAAoB;MAQnC,YAAY,oBAAoB;MAIhC,SAAS,OAAO,oBAAoB;;MAWpC,iBAAiB,YAAY;;;;;EAcjC,SAAS,WAAW,WAAW,OAAO;YAUnB;EAIV;EAKA;YAKU,QAAQ,SAAS;YAQjB,wBAAM,2BAAA;;QAmJnB;YACI;IACR,4BAA4B;;;UAIf,yBAAyB;EACxC,oBAAoB,gBAAgB,iCAAiC,IACnE,MAAM,GACN,WAAW,MAAM,yBAAyB,IAAI,OAAO,iCAAiC,GAAG,aACzF,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/grouped-item-lister.d.ts

@@ -0,0 +1,2 @@
+import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-CNLMgdIr.js";
+export { GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent };