@ixfx/components 0.2.4 → 0.2.5

package/dist/prominence-CreDBdCs.js

@@ -0,0 +1,98 @@
+import { css } from "lit";
+//#region src/styles/prominence.ts
+/**
+* Shared CSS styles for prominence-based interaction feedback.
+*
+* Applies CSS `filter` to the whole component host to convey interaction state:
+* - **Disabled** (`[disabled]` / `:disabled`): heavily muted — lowest opacity + near-greyscale
+* - **Idle** (no hover/focus): muted — reduced opacity + desaturated
+* - **Tickled** (`:hover` / `:focus-within`): elevated — higher opacity + more saturation
+* - **Active** (`:active` / `[dragging]`): full — filter removed entirely
+*
+* The levels are governed by CSS variables. Defaults are defined on `:host`, so they
+* can be overridden by users of the component:
+*
+* | Variable                        | Default | Meaning                             |
+* |---------------------------------|---------|-------------------------------------|
+* | `--prominence-disabled-opacity` | 0.3     | Opacity when disabled               |
+* | `--prominence-disabled-saturate`| 0.1     | Saturation factor when disabled     |
+* | `--prominence-idle-opacity`     | 0.6     | Opacity when not interacted with    |
+* | `--prominence-idle-saturate`    | 0.4     | Saturation factor when idle         |
+* | `--prominence-tickled-opacity`  | 0.85    | Opacity on hover/focus              |
+* | `--prominence-tickled-saturate`| 0.8     | Saturation factor on hover/focus    |
+*
+* ## Usage
+*
+* ```ts
+* import { prominenceStyles } from '../styles/prominence.js';
+*
+* class MyComponent extends LitElement {
+*   static styles = [prominenceStyles, css`...`];
+* }
+* ```
+*
+* ## Overriding defaults
+*
+* Users of a component can override these variables per-instance:
+*
+* ```html
+* <!-- Disable prominence effects entirely -->
+* <ixfx-xy-pad style="
+*   --prominence-idle-opacity: 1;
+*   --prominence-idle-saturate: 1;
+*   --prominence-tickled-opacity: 1;
+*   --prominence-tickled-saturate: 1;
+* "></ixfx-xy-pad>
+*
+* <!-- Make idle state less muted -->
+* <my-component style="--prominence-idle-opacity: 0.9; --prominence-idle-saturate: 0.8;"></my-component>
+* ```
+*
+* ## Notes
+*
+* - This is the CSS pseudo-class variant — no JS tickled state management required.
+* - `:host([dragging])` supplements `:active` for components that set that attribute
+*   during a pointer drag (e.g. `ixfx-xy-pad`).
+* - Transition uses `--transition` from the theme (default `0.15s ease-out`).
+* - When disabled, `pointer-events: none` is set and cannot be overridden per-instance.
+*/
+const prominenceStyles = css`
+  :host {
+    --prominence-idle-opacity: 0.6;
+    --prominence-idle-saturate: 0.4;
+    --prominence-tickled-opacity: 0.85;
+    --prominence-tickled-saturate: 0.8;
+    --prominence-disabled-opacity: 0.3;
+    --prominence-disabled-saturate: 0.1;
+
+    filter:
+      opacity(var(--prominence-idle-opacity))
+      saturate(var(--prominence-idle-saturate));
+    transition: filter var(--transition, 0.15s ease-out);
+  }
+
+  :host(:hover),
+  :host(:focus-within) {
+    filter:
+      opacity(var(--prominence-tickled-opacity))
+      saturate(var(--prominence-tickled-saturate));
+  }
+
+  :host(:active),
+  :host([dragging]) {
+    filter: none;
+  }
+
+  /* Disabled comes last to override tickled/active selectors of equal specificity */
+  :host([disabled]),
+  :host(:disabled) {
+    filter:
+      opacity(var(--prominence-disabled-opacity))
+      saturate(var(--prominence-disabled-saturate));
+    pointer-events: none;
+  }
+`;
+//#endregion
+export { prominenceStyles as t };
+
+//# sourceMappingURL=prominence-CreDBdCs.js.map

package/dist/prominence-CreDBdCs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prominence-CreDBdCs.js","names":[],"sources":["../src/styles/prominence.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared CSS styles for prominence-based interaction feedback.\n *\n * Applies CSS `filter` to the whole component host to convey interaction state:\n * - **Disabled** (`[disabled]` / `:disabled`): heavily muted — lowest opacity + near-greyscale\n * - **Idle** (no hover/focus): muted — reduced opacity + desaturated\n * - **Tickled** (`:hover` / `:focus-within`): elevated — higher opacity + more saturation\n * - **Active** (`:active` / `[dragging]`): full — filter removed entirely\n *\n * The levels are governed by CSS variables. Defaults are defined on `:host`, so they\n * can be overridden by users of the component:\n *\n * | Variable                        | Default | Meaning                             |\n * |---------------------------------|---------|-------------------------------------|\n * | `--prominence-disabled-opacity` | 0.3     | Opacity when disabled               |\n * | `--prominence-disabled-saturate`| 0.1     | Saturation factor when disabled     |\n * | `--prominence-idle-opacity`     | 0.6     | Opacity when not interacted with    |\n * | `--prominence-idle-saturate`    | 0.4     | Saturation factor when idle         |\n * | `--prominence-tickled-opacity`  | 0.85    | Opacity on hover/focus              |\n * | `--prominence-tickled-saturate`| 0.8     | Saturation factor on hover/focus    |\n *\n * ## Usage\n *\n * ```ts\n * import { prominenceStyles } from '../styles/prominence.js';\n *\n * class MyComponent extends LitElement {\n *   static styles = [prominenceStyles, css`...`];\n * }\n * ```\n *\n * ## Overriding defaults\n *\n * Users of a component can override these variables per-instance:\n *\n * ```html\n * <!-- Disable prominence effects entirely -->\n * <ixfx-xy-pad style=\"\n *   --prominence-idle-opacity: 1;\n *   --prominence-idle-saturate: 1;\n *   --prominence-tickled-opacity: 1;\n *   --prominence-tickled-saturate: 1;\n * \"></ixfx-xy-pad>\n *\n * <!-- Make idle state less muted -->\n * <my-component style=\"--prominence-idle-opacity: 0.9; --prominence-idle-saturate: 0.8;\"></my-component>\n * ```\n *\n * ## Notes\n *\n * - This is the CSS pseudo-class variant — no JS tickled state management required.\n * - `:host([dragging])` supplements `:active` for components that set that attribute\n *   during a pointer drag (e.g. `ixfx-xy-pad`).\n * - Transition uses `--transition` from the theme (default `0.15s ease-out`).\n * - When disabled, `pointer-events: none` is set and cannot be overridden per-instance.\n */\nexport const prominenceStyles = css`\n  :host {\n    --prominence-idle-opacity: 0.6;\n    --prominence-idle-saturate: 0.4;\n    --prominence-tickled-opacity: 0.85;\n    --prominence-tickled-saturate: 0.8;\n    --prominence-disabled-opacity: 0.3;\n    --prominence-disabled-saturate: 0.1;\n\n    filter:\n      opacity(var(--prominence-idle-opacity))\n      saturate(var(--prominence-idle-saturate));\n    transition: filter var(--transition, 0.15s ease-out);\n  }\n\n  :host(:hover),\n  :host(:focus-within) {\n    filter:\n      opacity(var(--prominence-tickled-opacity))\n      saturate(var(--prominence-tickled-saturate));\n  }\n\n  :host(:active),\n  :host([dragging]) {\n    filter: none;\n  }\n\n  /* Disabled comes last to override tickled/active selectors of equal specificity */\n  :host([disabled]),\n  :host(:disabled) {\n    filter:\n      opacity(var(--prominence-disabled-opacity))\n      saturate(var(--prominence-disabled-saturate));\n    pointer-events: none;\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,MAAa,mBAAmB,GAAG"}