@ixfx/components 0.5.12 → 0.5.14

package/dist/panel.d.ts

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

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

@@ -1,4 +1,4 @@
-import "./icon-BUwP1CZ1.js";
+import "./icon-DpA9x2Ve.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-VtWT-_FG.d.ts.map
+//# sourceMappingURL=tab-list-BohmbvqF.d.ts.map

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

@@ -1 +1 @@
-{"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;;QA4GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCrNd;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-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;;QA4GhB;YACI;IACR,sBAAsB;;;;;;;;;;KCrNd;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-VtWT-_FG.js";
+import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-BohmbvqF.js";
 export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };

package/docs-user/button.md

@@ -23,6 +23,7 @@ Three related button components:
 | Attribute / Property | Type    | Default | Description                                        |
 |---------------------|---------|---------|----------------------------------------------------|
 | `disabled`          | boolean | `false` | Disables the button                                |
+| `hidden`           | boolean | `false` | Hides the button (uses `display: none`)            |
 | `icon`              | string  | —       | Registered icon name **or** raw `<svg>` string     |
 | `hide-icon`         | boolean | `false` | Hides the icon even when `icon` is set             |
 | `hide-label`        | boolean | `false` | Hides the text label (useful for icon-only buttons)|

package/docs-user/narrowed-text.md

@@ -79,8 +79,17 @@ keyboard.attach(document.body);
 ### Methods
 
 ```ts
-el.selectAll();      // invokes the 'select-all' command
-el.deselectAll();    // invokes the 'deselect-all' command
+el.selectAll();      // Selects all filtered items
+el.deselectAll();    // Clears all selection
+el.setContents([     // Replaces all items. Each item can have value (required),
+  { value: string,   // label, description, iconName, and selected (boolean)
+    label?: string,
+    description?: string,
+    iconName?: string,
+    selected?: boolean
+  }
+]);
+el.deleteItem(value); // Removes item with given data-value. Returns true if found.
 ```
 
 ### Properties of slotted items

package/package.json

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

package/dist/button-dwmqCXHM.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-dwmqCXHM.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    outline: var(--ixfx-button-outline, none);\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      var(--ixfx-button-shade, none),\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  }\n\n  :host([has-icon]) .button-label {\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  :host([subtle]) button {\n    background: color-mix(in oklch, var(--surface-4, #ccc) 40%, transparent);\n  }\n\n  :host([subtle]) button:hover:not(:disabled),\n  :host([subtle]) button:focus-visible:not(:disabled) {\n    background: color-mix(in oklch, var(--surface-4, #ccc) 70%, transparent);\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  @property({ type: Boolean, attribute: `has-icon`, reflect: true })\n  hasIcon = false;\n\n  @property({ type: Boolean, reflect: true })\n  subtle = 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    this.hasIcon = !this.hideIcon && !!this.icon;\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;EAGF,KAAA,UAAA;EAGD,KAAA,SAAA;;CAET,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,KAAK,UAAU,CAAC,KAAK,YAAY,CAAC,CAAC,KAAK;EACxC,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;AA9CG,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;AAGlE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,WAAA,KAAA,CAAA;AAGhE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,UAAA,KAAA,CAAA;AAjB3CA,gBAAAA,WAAAA,CAAAA,kBAAc,aAAa,CAAA,GAAA,aAAA"}

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

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