@ixfx/components 0.5.0 → 0.5.1

package/dist/{labelled-input-base-DiTme1JO.d.ts → labelled-input-base-Dp_9KP0G.d.ts}

@@ -33,9 +33,9 @@ declare abstract class LabelledInputBase extends LitElement {
     value: number;
   }>) => void;
   protected _syncValue(v: number): void;
-  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
+  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
   updated(changedProperties: Map<string, unknown>): void;
 }
 //#endregion
 export { LabelledInputBase as t };
-//# sourceMappingURL=labelled-input-base-DiTme1JO.d.ts.map
+//# sourceMappingURL=labelled-input-base-Dp_9KP0G.d.ts.map

package/dist/{labelled-input-base-DiTme1JO.d.ts.map → labelled-input-base-Dp_9KP0G.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"labelled-input-base-DiTme1JO.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,gCAAqB,wBAAA;EAuBtB,QAAQ,mBAAmB"}
+{"version":3,"file":"labelled-input-base-Dp_9KP0G.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,uCAAqB,2BAAA;EAuBtB,QAAQ,mBAAmB"}

package/dist/labelled-radial-input.d.ts

@@ -1,4 +1,4 @@
-import { t as LabelledInputBase } from "./labelled-input-base-DiTme1JO.js";
+import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
 import { i as MarkerStyle, l as ValueMode } from "./radial-input-BhZeyyP-.js";
 import { CSSResultGroup, nothing } from "lit";
 //#region src/labelled-radial-input/labelled-radial-input.d.ts
@@ -19,7 +19,7 @@ declare class LabelledRadialInput extends LabelledInputBase {
   private _isWide;
   private _getEffectivePrecision;
   protected _handleResize(entries: ResizeObserverEntry[]): void;
-  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
+  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
   render(): import("lit").TemplateResult<1>;
   private _getTooltipValue;
   static styles: CSSResultGroup;

package/dist/labelled-radial-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,gCAAqB,wBAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}
+{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,uCAAqB,2BAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}

package/dist/labelled-range-input.d.ts

@@ -1,2 +1,2 @@
-import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
+import { t as LabelledRangeInput } from "./index-BUB5SICW.js";
 export { LabelledRangeInput };

package/dist/{menu-item-DSyf9f_L.d.ts → menu-item-CQ4Qg731.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-DpA9x2Ve.js";
+import "./icon-BUwP1CZ1.js";
 import { LitElement } from "lit";
 import { CommandRegistry, KeyboardManager } from "@clinth/ui-commands";
 //#region src/menu/menu-container.d.ts
@@ -124,4 +124,4 @@ declare global {
 }
 //#endregion
 export { MenuContainer as i, MenuTrigger as n, MenuTriggerCommandDetail as r, MenuItem as t };
-//# sourceMappingURL=menu-item-DSyf9f_L.d.ts.map
+//# sourceMappingURL=menu-item-CQ4Qg731.d.ts.map

package/dist/{menu-item-DSyf9f_L.d.ts.map → menu-item-CQ4Qg731.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"menu-item-DSyf9f_L.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;cASa,sBAAsB;EACgB;EACjB,WAAW;EACX,kBAAkB;UACvB;UAGnB;SAwBD,sBAAM;UA4BL;UAkDA;EAYC,QAAQ,mBAAmB;;;;EASpC,WAAW,SAAS,IAAI;EAOxB,wBAAM;UAaE;;;;;UAoCA;UAiCA;EA0BR;UAIQ;UAQA;UAUA;UAqDA;;QAqCF;YACI;IACR,uBAAuB;;;;;KCxWtB;KACA;KAEO;WACD;WACA;WACA;;cAME,oBAAoB;EACH,MAAM;EACN;EACI,WAAW;EACX,kBAAkB;EACtB,WAAW;UAEtB;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAYA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAmEb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cChVZ,iBAAiB;EACA;EAC2B;EAC3B;EACC;EACuB;EACpB,WAAW;EACX,kBAAkB;EAClB,iBAAiB;UAEhC;UACM;UAEf;EAER;UAOQ;UAKA;UAWA;UAQA;UAUA;UAUA;UAWA;UASA;EASR,WAAW,mBAAmB;EAU9B,QAAQ,mBAAmB;UAInB;SAaQ,sBAAM;EAkEtB,wBAAM;;QAwBA;YACI;IACR,kBAAkB"}
+{"version":3,"file":"menu-item-CQ4Qg731.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;cASa,sBAAsB;EACgB;EACjB,WAAW;EACX,kBAAkB;UACvB;UAGnB;SAwBD,sBAAM;UA4BL;UAkDA;EAYC,QAAQ,mBAAmB;;;;EASpC,WAAW,SAAS,IAAI;EAOxB,wBAAM;UAaE;;;;;UAoCA;UAiCA;EA0BR;UAIQ;UAQA;UAUA;UAqDA;;QAqCF;YACI;IACR,uBAAuB;;;;;KCxWtB;KACA;KAEO;WACD;WACA;WACA;;cAME,oBAAoB;EACH,MAAM;EACN;EACI,WAAW;EACX,kBAAkB;EACtB,WAAW;UAEtB;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAYA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAmEb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cChVZ,iBAAiB;EACA;EAC2B;EAC3B;EACC;EACuB;EACpB,WAAW;EACX,kBAAkB;EAClB,iBAAiB;UAEhC;UACM;UAEf;EAER;UAOQ;UAKA;UAWA;UAQA;UAUA;UAUA;UAWA;UASA;EASR,WAAW,mBAAmB;EAU9B,QAAQ,mBAAmB;UAInB;SAaQ,sBAAM;EAkEtB,wBAAM;;QAwBA;YACI;IACR,kBAAkB"}

package/dist/menu.d.ts

@@ -1,3 +1,3 @@
-import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-DSyf9f_L.js";
-import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-DfEkTGvT.js";
+import { i as MenuContainer, n as MenuTrigger, t as MenuItem } from "./menu-item-CQ4Qg731.js";
+import { a as menuFromTree, c as MenuSeparator, d as MenuCheckItem, f as MenuBar, i as MenuFromTreeOptions, l as MenuSubTrigger, n as MenuRadioGroup, o as menuFromTreeToElements, r as MenuRadioItem, s as MenuHeader, u as MenuCommandController } from "./index-B1UKcA7l.js";
 export { MenuBar, MenuCheckItem, MenuCommandController, MenuContainer, type MenuFromTreeOptions, MenuHeader, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubTrigger, MenuTrigger, menuFromTree, menuFromTreeToElements };

package/dist/panel.d.ts

@@ -1,4 +1,4 @@
-import "./icon-DpA9x2Ve.js";
+import "./icon-BUwP1CZ1.js";
 import { LitElement } from "lit";
 //#region src/panel/panel.d.ts
 type PanelOrientation = `horizontal` | `vertical`;

package/dist/{tab-list-BohmbvqF.d.ts → tab-list-VtWT-_FG.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-DpA9x2Ve.js";
+import "./icon-BUwP1CZ1.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";
 //#region src/tabs/tab-list-item.d.ts
@@ -71,4 +71,4 @@ declare global {
 }
 //#endregion
 export { TabListReorderDetail as a, TabListElement as i, TabListChangeEvent as n, TabListReorderEvent as o, TabListDragMode as r, TabListItemElement as s, TabListChangeDetail as t };
-//# sourceMappingURL=tab-list-BohmbvqF.d.ts.map
+//# sourceMappingURL=tab-list-VtWT-_FG.d.ts.map

package/dist/{tab-list-BohmbvqF.d.ts.map → tab-list-VtWT-_FG.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"tab-list-BohmbvqF.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;cAgBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACT;UACA;EAEC;EAQA;EAQA,QAAQ,SAAS;UAQlB;UAUA;EAWC,wBAAM;UAyBP;SAWQ,sBAAM;;QA0GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCnNd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA4BN;EAQA,QAAQ,mBAAmB;EA8FpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAgGP;YACI;IACR,iBAAiB"}
+{"version":3,"file":"tab-list-VtWT-_FG.d.ts","names":[],"sources":["../src/tabs/tab-list-item.ts","../src/tabs/tab-list.ts"],"mappings":";;;;;;;;;;cAgBa,2BAA2B;EAEtC;EAGA;EAGA;EAGA;EAGA,UAAU;UAEO;UACT;UACA;EAEC;EAQA;EAQA,QAAQ,SAAS;UAQlB;UAUA;EAWC,wBAAM;UAyBP;SAWQ,sBAAM;;QA0GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCnNd;WACD;WACA;WACA;;KAGC,qBAAqB,YAAY;KAEjC;WACD;WACA;WACA;;KAGC,sBAAsB,YAAY;KAElC;cAMC,uBAAuB;;EAElC;EAGA;EAGA;EAGA,UAAU;EA2BD,wBAAM;EA4BN;EAQA,QAAQ,mBAAmB;EA8FpC,sBAAkB;EAwBlB,cAAc,IAAI;SAwaX,sBAAM;;QAgGP;YACI;IACR,iBAAiB"}

package/dist/tabs.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-BohmbvqF.js";
+import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-VtWT-_FG.js";
 export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };

package/docs-user/button.md

@@ -66,6 +66,8 @@ btn.icon = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="..."/></svg>';
 | `--disabled-opacity`| `0.5`    | Opacity when disabled   |
 | `--ixfx-button-hide-icon`  | `inline-flex` (icon shown) | Set to `none` to hide the icon. Overridden by the `hide-icon` attribute. |
 | `--ixfx-button-hide-label` | `inline` (label shown)     | Set to `none` to hide the label. Overridden by the `hide-label` attribute. |
+| `--ixfx-button-outline`    | `none`                     | Additional outline around the button (e.g. `2px solid var(--accent)`) |
+| `--ixfx-button-shade`      | `none`                     | Tinted overlay via box-shadow (e.g. `inset 0 0 8px 2px color-mix(in oklch, red 35%, transparent)`) |
 
 `--ixfx-button-hide-icon`/`--ixfx-button-hide-label` let you hide the icon/label conditionally from plain CSS — handy for a media or container query — without touching the `hide-icon`/`hide-label` attributes:
 

package/docs-user/tabs.md

@@ -167,6 +167,46 @@ A recommended `.tab-toolbar-btn` style for the page stylesheet:
 |----------|--------|----------------------------|
 | `close`  | —      | Fired when close button clicked; item removes itself from DOM |
 
+### Command activation
+
+Tabs can be programmatically activated via the `CommandRegistry` system. This is useful for keyboard shortcuts (e.g. `Alt+1` to switch to tab 1).
+
+1. Create a `CommandRegistry` and register commands for each tab:
+```js
+import { CommandRegistry } from '@clinth/ui-commands';
+
+const commands = new CommandRegistry();
+commands.register({ id: 'tab-home', label: 'Home', description: 'Switch to Home tab', execute: () => {} });
+commands.register({ id: 'tab-profile', label: 'Profile', description: 'Switch to Profile tab', execute: () => {} });
+```
+
+2. Bind keyboard shortcuts to the commands using `KeyboardManager`:
+```js
+import { KeyboardManager } from '@clinth/ui-commands';
+
+const keyboard = new KeyboardManager();
+keyboard.bind({ key: '1', modifiers: new Set(['alt']), commandId: 'tab-home' });
+keyboard.bind({ key: '2', modifiers: new Set(['alt']), commandId: 'tab-profile' });
+keyboard.onKeyEvent((commandId) => commands.invoke(commandId));
+keyboard.attach(document.body);
+```
+
+3. Set the `command-active` attribute and assign the registry to each tab item:
+```html
+<ixfx-tab-list>
+  <ixfx-tab-list-item command-active="tab-home">Home</ixfx-tab-list-item>
+  <ixfx-tab-list-item command-active="tab-profile">Profile</ixfx-tab-list-item>
+</ixfx-tab-list>
+```
+
+```js
+for (const item of document.querySelectorAll('ixfx-tab-list-item[command-active]')) {
+  item.registry = commands;
+}
+```
+
+When a command is invoked (via keyboard shortcut or `commands.invoke('tab-home')`), the associated tab will be activated as if clicked.
+
 ### CSS custom properties
 
 | Property                | Default          | Description                  |

package/docs-user/vertical-list.md

@@ -116,7 +116,7 @@ To reflect selection state inside the custom element's shadow DOM, target the `:
 | `selectionMode` / `selection-mode` | `'none' \| 'single' \| 'multiple'` | `'single'` | Which items can be selected simultaneously |
 | `interactionMode` / `interaction-mode` | `ListInteractionMode` | `'standard'` | How gestures map to selection changes (see table below) |
 | `filterPredicate` | `((el: Element) => boolean) \| undefined` | `undefined` | External filter; only items returning `true` are shown |
-| `checkboxRenderer` | `((checked: boolean) => unknown) \| undefined` | `undefined` | Custom content for the checkbox in `checked` mode. See [Custom checkbox](#custom-checkbox) |
+| `checkboxRenderer` | `((checked: boolean) => unknown) \| CustomCheckboxOptions \| undefined` | `undefined` | Custom content for the checkbox in `checked` mode. See [Custom checkbox](#custom-checkbox) |
 
 Switching `interactionMode` always clears the current selection.
 
@@ -140,7 +140,7 @@ By default the column contains a native `<input type="checkbox">`. The visible s
 
 ### Subtle style — `checkboxRenderer`
 
-Set `checkboxRenderer` to a function that returns a Lit template. The function receives the row's current `checked` state. This is what enables the *subtle* style: render an empty template when unchecked and a translucent mark when checked.
+Set `checkboxRenderer` to a function that returns a Lit template, or pass an options object for additional control. The function receives the row's current `checked` state. This is what enables the *subtle* style: render an empty template when unchecked and a translucent mark when checked.
 
 ```typescript
 import { html } from 'lit';
@@ -160,6 +160,33 @@ list.checkboxRenderer = (checked) => checked
   : html``;
 ```
 
+#### Using `CustomCheckboxOptions`
+
+Pass an options object to also control the checkbox column's `margin` and `width`:
+
+```typescript
+import type { CustomCheckboxOptions } from '@ixfx/components';
+
+list.checkboxRenderer = {
+  renderer: (checked) => checked
+    ? html`<svg viewBox="0 0 16 16" width="14" height="14"
+          fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round"
+          style="opacity:0.5">
+        <polyline points="3,8 7,12 13,4" />
+      </svg>`
+    : html``,
+  margin: `0 6px 0 0`,  // left margin for the checkbox column (default: `0`)
+  width: `24px`,         // width of the checkbox column (default: `24px`)
+} satisfies CustomCheckboxOptions;
+```
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `renderer` | `(checked: boolean) => unknown` | — | Required. Returns the Lit template to render inside the checkbox cell |
+| `margin` | `string` | `0` | CSS margin for the checkbox column (e.g. `"0 6px 0 0"`) |
+| `width` | `string` | `24px` | Width of the checkbox column |
+
 Because the wrapper still spans the full row height and owns the click handler, the empty unchecked area is just as clickable as the visible tick — even though there is no border, background, or other visual indicator of where the column is.
 
 ### How it works under the hood

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "",
   "author": "",
   "license": "ISC",

package/dist/button-DxYee1ZH.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-DxYee1ZH.js","names":["customElement"],"sources":["../src/button/button-styles.ts","../src/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n    vertical-align: middle;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  button {\n    cursor: pointer;\n    appearance: none;\n    background: var(--surface-4, #ccc);\n    color: var(--surface-3-text, #000);\n    border: var(--border, 1px solid #999);\n    border-radius: var(--radius-xl, 8px);\n    corner-shape: superellipse(1);\n    padding: var(--space-m, 8px) var(--space-l, 12px);\n    font-family: var(--font-family, inherit);\n    font-size: var(--text-m, 14px);\n    margin: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5em;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    box-shadow: \n      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent), inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);\n    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s);\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  button:hover:not(:disabled) {\n    background: color-mix(in oklch, var(--surface-4) 80%, transparent);\n    border-color: var(--accent, #666);\n    box-shadow: \n      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-5) 70%, transparent), \n      inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 60%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 90%, transparent);\n  }\n\n  button:active:not(:disabled) {\n    background: var(--surface-2, #aaa);\n    transform: translateY(1px);\n    box-shadow: inset 1px 1px 0px 0.5px color-mix(in oklch,var(--surface-1),transparent);\n  }\n\n  .button-icon {\n    display: var(--ixfx-button-hide-icon, inline-flex);\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .button-label {\n    white-space: nowrap;\n    display: var(--ixfx-button-hide-label, inline);\n  }\n\n  :host([hide-label]) .button-label {\n    display: none;\n  }\n\n  :host([hide-icon]) .button-icon {\n    display: none;\n  }\n`;\n","import { html, LitElement, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { getIcon } from \"../icons/index.js\";\nimport { prominenceStyles } from \"../styles/prominence.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\nimport { buttonStyles } from \"./button-styles.js\";\n\n@customElement(`ixfx-button`)\nexport class ButtonElement extends LitElement {\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  icon?: string;\n\n  @property({ type: Boolean, attribute: `hide-icon`, reflect: true })\n  hideIcon = false;\n\n  @property({ type: Boolean, attribute: `hide-label`, reflect: true })\n  hideLabel = false;\n\n  protected _renderIcon() {\n    if (this.hideIcon || !this.icon)\n      return nothing;\n\n    if (this.icon.startsWith(`<svg`)) {\n      return html`<span class=\"button-icon\">${unsafeHTML(this.icon)}</span>`;\n    }\n\n    const svg = getIcon(this.icon);\n\n    if (!svg)\n      return nothing;\n\n    return html`<ixfx-icon class=\"button-icon\" name=\"${this.icon}\"></ixfx-icon>`;\n  }\n\n  protected render() {\n    const label = this.hideLabel\n      ? nothing\n      : html`<span class=\"button-label\"><slot></slot></span>`;\n    return html`<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;\n  }\n\n  static styles = [\n    prominenceStyles,\n    buttonStyles,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-button\": ButtonElement;\n  }\n}\n"],"mappings":";;;;;;;;AAEA,MAAa,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACOxB,IAAM,gBAAN,MAAM,sBAAsB,WAAW;;;EAEjC,KAAA,WAAA;EAMA,KAAA,WAAA;EAGC,KAAA,YAAA;;CAEZ,cAAwB;EACtB,IAAI,KAAK,YAAY,CAAC,KAAK,MACzB,OAAO;EAET,IAAI,KAAK,KAAK,WAAW,MAAM,GAC7B,OAAO,IAAI,6BAA6B,WAAW,KAAK,IAAI,EAAE;EAKhE,IAAI,CAFQ,QAAQ,KAAK,IAElB,GACL,OAAO;EAET,OAAO,IAAI,wCAAwC,KAAK,KAAK;CAC/D;CAEA,SAAmB;EACjB,MAAM,QAAQ,KAAK,YACf,UACA,IAAI;EACR,OAAO,IAAI,qBAAqB,KAAK,SAAS,GAAG,KAAK,YAAY,IAAI,MAAM;CAC9E;;EAEgB,KAAA,SAAA,CACd,kBACA,YACF;;AACF;AAvCG,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,QAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;AAGjE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,aAAA,KAAA,CAAA;AAXpEA,gBAAAA,WAAAA,CAAAA,kBAAc,aAAa,CAAA,GAAA,aAAA"}

package/dist/icon-DpA9x2Ve.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-DpA9x2Ve.d.ts","names":[],"sources":["../src/icons/icon.ts"],"mappings":";;;;;;;;;;;;;cAoBa,wBAAwB;;EACvB;EACgB;EAChB;EAC0C;EACU;EAQvD;EAKA;YAKU,iBAAM,wBAAA;YAgBN,QAAQ,SAAS;SAWpB,sBAAM;;QAsChB;YACI;IACR,aAAa"}