@ixfx/components 0.2.4 → 0.2.5

package/dist/{button/button-styles.js → button-DgKUzE5o.js}

@@ -1,5 +1,12 @@
-import { css } from 'lit';
-export const buttonStyles = css `
+import { t as getIcon } from "./registry-CZEB1YI9.js";
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import "./icons.js";
+import { t as prominenceStyles } from "./prominence-CreDBdCs.js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+//#region src/button/button-styles.ts
+const buttonStyles = css`
   :host {
     display: inline-flex;
     max-width: 100%;
@@ -72,4 +79,43 @@ export const buttonStyles = css `
     display: none;
   }
 `;
-//# sourceMappingURL=button-styles.js.map
+//#endregion
+//#region src/button/button.ts
+let ButtonElement = class ButtonElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.hideIcon = false;
+		this.hideLabel = false;
+	}
+	_renderIcon() {
+		if (this.hideIcon || !this.icon) return nothing;
+		if (this.icon.startsWith(`<svg`)) return html`<span class="button-icon">${unsafeHTML(this.icon)}</span>`;
+		if (!getIcon(this.icon)) return nothing;
+		return html`<ixfx-icon class="button-icon" name="${this.icon}"></ixfx-icon>`;
+	}
+	render() {
+		const label = this.hideLabel ? nothing : html`<span class="button-label"><slot></slot></span>`;
+		return html`<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;
+	}
+	static {
+		this.styles = [prominenceStyles, buttonStyles];
+	}
+};
+__decorate([property({ type: Boolean })], ButtonElement.prototype, "disabled", void 0);
+__decorate([property({ type: String })], ButtonElement.prototype, "icon", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-icon`,
+	reflect: true
+})], ButtonElement.prototype, "hideIcon", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-label`,
+	reflect: true
+})], ButtonElement.prototype, "hideLabel", void 0);
+ButtonElement = __decorate([customElement(`ixfx-button`)], ButtonElement);
+//#endregion
+export { buttonStyles as n, ButtonElement as t };
+
+//# sourceMappingURL=button-DgKUzE5o.js.map

package/dist/button-DgKUzE5o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-DgKUzE5o.js","names":[],"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 { customElement, 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 { 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACMxB,IAAA,gBAAA,MAAM,sBAAsB,WAAW;;;kBAEjC;kBAMA;mBAGC;;CAEZ,cAAwB;AACtB,MAAI,KAAK,YAAY,CAAC,KAAK,KACzB,QAAO;AAET,MAAI,KAAK,KAAK,WAAW,OAAO,CAC9B,QAAO,IAAI,6BAA6B,WAAW,KAAK,KAAK,CAAC;AAKhE,MAAI,CAFQ,QAAQ,KAAK,KAEjB,CACN,QAAO;AAET,SAAO,IAAI,wCAAwC,KAAK,KAAK;;CAG/D,SAAmB;EACjB,MAAM,QAAQ,KAAK,YACf,UACA,IAAI;AACR,SAAO,IAAI,qBAAqB,KAAK,SAAS,GAAG,KAAK,aAAa,GAAG,MAAM;;;gBAG9D,CACd,kBACA,aACD;;;YAtCA,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,cAAA,WAAA,YAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,cAAA,WAAA,QAAA,KAAA,EAAA;YAG1B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,YAAA,KAAA,EAAA;YAGlE,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,aAAA,KAAA,EAAA;4BAXrE,cAAc,cAAc,CAAA,EAAA,cAAA"}

package/dist/button.d.ts

@@ -0,0 +1,21 @@
+import * as _$lit from "lit";
+import { LitElement, nothing } from "lit";
+
+//#region src/button/button.d.ts
+declare class ButtonElement extends LitElement {
+  disabled: boolean;
+  icon?: string;
+  hideIcon: boolean;
+  hideLabel: boolean;
+  protected _renderIcon(): typeof nothing | _$lit.TemplateResult<1>;
+  protected render(): _$lit.TemplateResult<1>;
+  static styles: _$lit.CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ixfx-button": ButtonElement;
+  }
+} //# sourceMappingURL=button.d.ts.map
+//#endregion
+export { ButtonElement };
+//# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","names":[],"sources":["../src/button/button.ts"],"mappings":";;;;cAQa,aAAA,SAAsB,UAAA;EAEjC,QAAA;EAGA,IAAA;EAGA,QAAA;EAGA,SAAA;EAAA,UAEU,WAAA,CAAA,UAAW,OAAA,GAAA,KAAA,CAAA,cAAA;EAAA,UAgBX,MAAA,CAAA,GAhBW,KAAA,CAgBL,cAAA;EAAA,OAOT,MAAA,EAPS,KAAA,CAOH,SAAA;AAAA;AAAA,QAMP,MAAA;EAAA,UACI,qBAAA;IACR,aAAA,EAAe,aAAA;EAAA;AAAA"}

package/dist/button.js

@@ -0,0 +1,3 @@
+import "./icons.js";
+import { t as ButtonElement } from "./button-DgKUzE5o.js";
+export { ButtonElement };

package/dist/checkbox.d.ts

@@ -1,64 +1,34 @@
-/**
- * <x-checkbox> — Custom checkbox with diagonal line indicator.
- *
- * A brutalist checkbox component featuring a thick diagonal line
- * (top-left to bottom-right) when checked. Uses shadow DOM with
- * CSS variables for appearance customization.
- *
- * Properties
- *   checked   – checkbox state (default: false)
- *   disabled  – disabled state (default: false)
- *   label     – label text
- *   name      – form field name
- *   value     – form field value
- *
- * Events
- *   change – CustomEvent { detail: { checked: boolean } }, bubbles + composed
- *
- * CSS Variables
- *   --box-size               – box size (default: 18px)
- *   --box-border-width       – border width (default: 2px)
- *   --box-border-color       – border color
- *   --box-bg-unchecked       – background when unchecked
- *   --box-bg-checked         – background when checked
- *   --check-line-color         – diagonal line color
- *   --check-line-width         – diagonal line thickness (default: 6px)
- *   --box-opacity-unchecked  – opacity when unchecked (default: 0.5)
- *   --box-opacity-checked    – opacity when checked (default: 1)
- *   --box-opacity-hover      – opacity on hover (default: 1)
- *   --box-opacity-disabled   – opacity when disabled (default: 0.3)
- *   --box-label-gap          – gap between box and label (default: 8px)
- *   --label-font-size    – label font size (default: 14px)
- *   --label-opacity      – label opacity (default: 1)
- *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)
- *   --transition-duration – animation duration (default: 0.2s)
- */
-import { html, LitElement } from 'lit';
-export declare class Checkbox extends LitElement {
-    #private;
-    static styles: import("lit").CSSResult;
-    checked: boolean;
-    disabled: boolean;
-    indeterminate: boolean;
-    label: string;
-    name: string;
-    value: string;
-    render(): ReturnType<typeof html>;
+import * as _$lit from "lit";
+import { LitElement, html } from "lit";
+
+//#region src/checkbox.d.ts
+declare class Checkbox extends LitElement {
+  #private;
+  static styles: _$lit.CSSResult;
+  checked: boolean;
+  disabled: boolean;
+  indeterminate: boolean;
+  label: string;
+  name: string;
+  value: string;
+  render(): ReturnType<typeof html>;
 }
-export type CheckboxChangeDetail = {
-    readonly checked: boolean;
+type CheckboxChangeDetail = {
+  readonly checked: boolean;
 };
-export type CheckboxChangeEvent = CustomEvent<CheckboxChangeDetail>;
+type CheckboxChangeEvent = CustomEvent<CheckboxChangeDetail>;
 declare global {
-    interface HTMLElementTagNameMap {
-        'ixfx-checkbox': Checkbox;
-    }
+  interface HTMLElementTagNameMap {
+    'ixfx-checkbox': Checkbox;
+  }
 }
-export interface CheckboxEventMap {
-    'change': CheckboxChangeEvent;
+interface CheckboxEventMap {
+  'change': CheckboxChangeEvent;
 }
-export interface Checkbox {
-    addEventListener<K extends keyof CheckboxEventMap>(type: K, listener: (this: Checkbox, event: CheckboxEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
-    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+interface Checkbox {
+  addEventListener<K extends keyof CheckboxEventMap>(type: K, listener: (this: Checkbox, event: CheckboxEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 }
+//#endregion
+export { Checkbox, CheckboxChangeDetail, CheckboxChangeEvent, CheckboxEventMap };
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../src/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,QAAS,SAAQ,UAAU;;IACtC,MAAM,CAAC,MAAM,0BA+JX;IAE2B,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,aAAa,UAAS;IACvB,KAAK,SAAM;IACX,IAAI,SAAM;IACV,KAAK,SAAM;IAa9B,MAAM,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC;CAkB3C;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;AAEpE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAC/C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC9D,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;CACT"}
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../src/checkbox.ts"],"mappings":";;;;cAuCa,QAAA,SAAiB,UAAA;EAAA;SACrB,MAAA,EADa,KAAA,CACP,SAAA;EAiKgB,OAAA;EACA,QAAA;EACA,aAAA;EACD,KAAA;EACA,IAAA;EACA,KAAA;EAanB,MAAA,CAAA,GAAU,UAAA,QAAkB,IAAA;AAAA;AAAA,KAoB3B,oBAAA;EAAA,SACD,OAAA;AAAA;AAAA,KAGC,mBAAA,GAAsB,WAAA,CAAY,oBAAA;AAAA,QAEtC,MAAA;EAAA,UACI,qBAAA;IACR,eAAA,EAAiB,QAAA;EAAA;AAAA;AAAA,UAIJ,gBAAA;EACf,QAAA,EAAU,mBAAA;AAAA;AAAA,UAGK,QAAA;EACf,gBAAA,iBAAiC,gBAAA,EAC/B,IAAA,EAAM,CAAA,EACN,QAAA,GAAW,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,gBAAA,CAAiB,CAAA,YACnD,OAAA,aAAoB,uBAAA;EAEtB,gBAAA,CACE,IAAA,UACA,QAAA,EAAU,kCAAA,EACV,OAAA,aAAoB,uBAAA;AAAA"}

package/dist/checkbox.js

@@ -1,66 +1,63 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/checkbox.ts
 /**
- * <x-checkbox> — Custom checkbox with diagonal line indicator.
- *
- * A brutalist checkbox component featuring a thick diagonal line
- * (top-left to bottom-right) when checked. Uses shadow DOM with
- * CSS variables for appearance customization.
- *
- * Properties
- *   checked   – checkbox state (default: false)
- *   disabled  – disabled state (default: false)
- *   label     – label text
- *   name      – form field name
- *   value     – form field value
- *
- * Events
- *   change – CustomEvent { detail: { checked: boolean } }, bubbles + composed
- *
- * CSS Variables
- *   --box-size               – box size (default: 18px)
- *   --box-border-width       – border width (default: 2px)
- *   --box-border-color       – border color
- *   --box-bg-unchecked       – background when unchecked
- *   --box-bg-checked         – background when checked
- *   --check-line-color         – diagonal line color
- *   --check-line-width         – diagonal line thickness (default: 6px)
- *   --box-opacity-unchecked  – opacity when unchecked (default: 0.5)
- *   --box-opacity-checked    – opacity when checked (default: 1)
- *   --box-opacity-hover      – opacity on hover (default: 1)
- *   --box-opacity-disabled   – opacity when disabled (default: 0.3)
- *   --box-label-gap          – gap between box and label (default: 8px)
- *   --label-font-size    – label font size (default: 14px)
- *   --label-opacity      – label opacity (default: 1)
- *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)
- *   --transition-duration – animation duration (default: 0.2s)
- */
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+* <x-checkbox> — Custom checkbox with diagonal line indicator.
+*
+* A brutalist checkbox component featuring a thick diagonal line
+* (top-left to bottom-right) when checked. Uses shadow DOM with
+* CSS variables for appearance customization.
+*
+* Properties
+*   checked   – checkbox state (default: false)
+*   disabled  – disabled state (default: false)
+*   label     – label text
+*   name      – form field name
+*   value     – form field value
+*
+* Events
+*   change – CustomEvent { detail: { checked: boolean } }, bubbles + composed
+*
+* CSS Variables
+*   --box-size               – box size (default: 18px)
+*   --box-border-width       – border width (default: 2px)
+*   --box-border-color       – border color
+*   --box-bg-unchecked       – background when unchecked
+*   --box-bg-checked         – background when checked
+*   --check-line-color         – diagonal line color
+*   --check-line-width         – diagonal line thickness (default: 6px)
+*   --box-opacity-unchecked  – opacity when unchecked (default: 0.5)
+*   --box-opacity-checked    – opacity when checked (default: 1)
+*   --box-opacity-hover      – opacity on hover (default: 1)
+*   --box-opacity-disabled   – opacity when disabled (default: 0.3)
+*   --box-label-gap          – gap between box and label (default: 8px)
+*   --label-font-size    – label font size (default: 14px)
+*   --label-opacity      – label opacity (default: 1)
+*   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)
+*   --transition-duration – animation duration (default: 0.2s)
+*/
 let Checkbox = class Checkbox extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.checked = false;
-        this.disabled = false;
-        this.indeterminate = false;
-        this.label = ``;
-        this.name = ``;
-        this.value = ``;
-        this.#handleChange = (e) => {
-            const target = e.target;
-            this.checked = target.checked;
-            this.dispatchEvent(new CustomEvent(`change`, {
-                detail: { checked: this.checked },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-    }
-    static { this.styles = css `
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.disabled = false;
+		this.indeterminate = false;
+		this.label = ``;
+		this.name = ``;
+		this.value = ``;
+		this.#handleChange = (e) => {
+			const target = e.target;
+			this.checked = target.checked;
+			this.dispatchEvent(new CustomEvent(`change`, {
+				detail: { checked: this.checked },
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = css`
     :host {
       /* Box */
       --box-size: 18px;
@@ -219,10 +216,11 @@ let Checkbox = class Checkbox extends LitElement {
     input:not(:checked) ~ .label {
       opacity: var(--label-opacity-unchecked);
     }
-  `; }
-    #handleChange;
-    render() {
-        return html `
+  `;
+	}
+	#handleChange;
+	render() {
+		return html`
       <label>
         <input
           name="checkbox"
@@ -235,31 +233,19 @@ let Checkbox = class Checkbox extends LitElement {
           @change=${this.#handleChange}
         />
         <span class="box"></span>
-        ${this.label ? html `<span class="label">${this.label}</span>` : ``}
+        ${this.label ? html`<span class="label">${this.label}</span>` : ``}
       </label>
     `;
-    }
+	}
 };
-__decorate([
-    property({ type: Boolean })
-], Checkbox.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean })
-], Checkbox.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], Checkbox.prototype, "indeterminate", void 0);
-__decorate([
-    property({ type: String })
-], Checkbox.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], Checkbox.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], Checkbox.prototype, "value", void 0);
-Checkbox = __decorate([
-    customElement(`ixfx-checkbox`)
-], Checkbox);
+__decorate([property({ type: Boolean })], Checkbox.prototype, "checked", void 0);
+__decorate([property({ type: Boolean })], Checkbox.prototype, "disabled", void 0);
+__decorate([property({ type: Boolean })], Checkbox.prototype, "indeterminate", void 0);
+__decorate([property({ type: String })], Checkbox.prototype, "label", void 0);
+__decorate([property({ type: String })], Checkbox.prototype, "name", void 0);
+__decorate([property({ type: String })], Checkbox.prototype, "value", void 0);
+Checkbox = __decorate([customElement(`ixfx-checkbox`)], Checkbox);
+//#endregion
 export { Checkbox };
+
 //# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../src/checkbox.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAkKwB,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QACjB,kBAAa,GAAG,KAAK,CAAC;QACvB,UAAK,GAAG,EAAE,CAAC;QACX,SAAI,GAAG,EAAE,CAAC;QACV,UAAK,GAAG,EAAE,CAAC;QAEvC,kBAAa,GAAG,CAAC,CAAQ,EAAQ,EAAE;YACjC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAE9B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAuB,QAAQ,EAAE;gBACjE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;gBACjC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;QACN,CAAC,CAAC;IAoBJ,CAAC;aArMQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+JlB,AA/JY,CA+JX;IASF,aAAa,CASX;IAEO,MAAM;QACb,OAAO,IAAI,CAAA;;;;;qBAKM,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;2BACR,IAAI,CAAC,aAAa;kBAC3B,IAAI,CAAC,IAAI;mBACR,IAAI,CAAC,KAAK;oBACT,IAAI,CAAC,aAAa;;;UAG5B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;;KAErE,CAAC;IACJ,CAAC;;AAnC4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAiB;AAChB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AACjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAuB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAY;AAvK5B,QAAQ;IADpB,aAAa,CAAC,eAAe,CAAC;GAClB,QAAQ,CAsMpB"}
+{"version":3,"file":"checkbox.js","names":["#handleChange"],"sources":["../src/checkbox.ts"],"sourcesContent":["/**\n * <x-checkbox> — Custom checkbox with diagonal line indicator.\n *\n * A brutalist checkbox component featuring a thick diagonal line\n * (top-left to bottom-right) when checked. Uses shadow DOM with\n * CSS variables for appearance customization.\n *\n * Properties\n *   checked   – checkbox state (default: false)\n *   disabled  – disabled state (default: false)\n *   label     – label text\n *   name      – form field name\n *   value     – form field value\n *\n * Events\n *   change – CustomEvent { detail: { checked: boolean } }, bubbles + composed\n *\n * CSS Variables\n *   --box-size               – box size (default: 18px)\n *   --box-border-width       – border width (default: 2px)\n *   --box-border-color       – border color\n *   --box-bg-unchecked       – background when unchecked\n *   --box-bg-checked         – background when checked\n *   --check-line-color         – diagonal line color\n *   --check-line-width         – diagonal line thickness (default: 6px)\n *   --box-opacity-unchecked  – opacity when unchecked (default: 0.5)\n *   --box-opacity-checked    – opacity when checked (default: 1)\n *   --box-opacity-hover      – opacity on hover (default: 1)\n *   --box-opacity-disabled   – opacity when disabled (default: 0.3)\n *   --box-label-gap          – gap between box and label (default: 8px)\n *   --label-font-size    – label font size (default: 14px)\n *   --label-opacity      – label opacity (default: 1)\n *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)\n *   --transition-duration – animation duration (default: 0.2s)\n */\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement(`ixfx-checkbox`)\nexport class Checkbox extends LitElement {\n  static styles = css`\n    :host {\n      /* Box */\n      --box-size: 18px;\n      --box-border-color: var(--surface-4);\n      --box-bg-unchecked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-bg-checked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-opacity-checked: 1;\n      --box-opacity-hover: 1;\n      --box-opacity-disabled: var(--disabled-opacity);\n      --box-border-width: 2px;\n      \n      /* Check */\n      --check-line-width: 6px;\n      --check-line-color: var(--accent);\n\n      /* Spacing & borders */\n      --label-gap: var(--space-m);\n\n      /* Label */\n      --label-opacity: 1;\n      --label-opacity-unchecked: var(--label-opacity);\n      --label-fg: var(--surface-3-text);\n      --label-active: var(--surface-2-text);\n      --label-hover: var(--surface-2-text);\n\n      /* Animation */\n      --transition-duration: var(--transition);\n\n      display: inline-flex;\n      user-select: none;\n    }\n\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--label-gap);\n      cursor: pointer;\n      position: relative;\n      opacity: var(--box-opacity-unchecked);\n      transition: opacity var(--transition-duration);\n    }\n\n    label:hover {\n      opacity: var(--box-opacity-hover);\n    }\n\n    label:has(input:checked) {\n      opacity: var(--box-opacity-checked);\n    }\n\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      clip: rect(0, 0, 0, 0);\n    }\n\n    .box {\n      position: relative;\n      width: var(--box-size);\n      height: var(--box-size);\n      border: var(--border, 1px solid #999);\n      background: var(--box-bg-unchecked);\n      flex-shrink: 0;\n      transition: background var(--transition-duration);\n      overflow: hidden;\n      box-shadow: inset 1px 1px 0px 1px color-mix(in oklch, var(--surface-2) 60%, transparent);\n    }\n    label:has(input:not(:disabled)) {\n      .box:hover {\n        background: color-mix(in oklch, var(--surface-4) 80%, transparent);\n        border-color: var(--accent, #666);\n        box-shadow: unset;\n      }\n    }\n\n    input:checked ~ .box {\n      background: var(--box-bg-checked);\n    }\n\n    /* Diagonal line from top-left to bottom-right */\n    .box::after {\n      content: '';\n      position: absolute;\n      width: 141.4%; /* sqrt(2) × 100% to span corner-to-corner */\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) rotate(45deg);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:checked ~ .box::after {\n      opacity: 1;\n    }\n\n    /* Horizontal line for indeterminate state */\n    .box::before {\n      content: '';\n      position: absolute;\n      width: 60%;\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:indeterminate ~ .box::before {\n      opacity: 1;\n    }\n\n    /* Hide diagonal checkmark when indeterminate (must come after checked rule) */\n    input:indeterminate ~ .box::after {\n      opacity: 0;\n    }\n\n    /* Focus state */\n    input:focus-visible ~ .box {\n      outline: 2px solid var(--check-line-color);\n      outline-offset: 2px;\n    }\n\n    /* Disabled state */\n    label:has(input:disabled) {\n      opacity: var(--box-opacity-disabled);\n      cursor: not-allowed;\n      .box {\n        box-shadow: unset;\n      }    \n    }\n\n    .label {\n      color: var(--label-fg);\n      opacity: var(--label-opacity);\n      transition: opacity var(--transition-duration);\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    .label:hover {\n      color: var(--label-hover);\n    }\n    .label:has(+ :hover) {\n      color: var(--label-fg-hover);\n    }\n    .label:has(+ :active) {\n      color: var(--label-fg-active);\n    }\n    input:not(:checked) ~ .label {\n      opacity: var(--label-opacity-unchecked);\n    }\n  `;\n\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean }) indeterminate = false;\n  @property({ type: String }) label = ``;\n  @property({ type: String }) name = ``;\n  @property({ type: String }) value = ``;\n\n  #handleChange = (e: Event): void => {\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.dispatchEvent(new CustomEvent<CheckboxChangeDetail>(`change`, {\n      detail: { checked: this.checked },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <label>\n        <input\n          name=\"checkbox\"\n          type=\"checkbox\"\n          .checked=${this.checked}\n          .disabled=${this.disabled}\n          .indeterminate=${this.indeterminate}\n          .name=${this.name}\n          .value=${this.value}\n          @change=${this.#handleChange}\n        />\n        <span class=\"box\"></span>\n        ${this.label ? html`<span class=\"label\">${this.label}</span>` : ``}\n      </label>\n    `;\n  }\n}\n\nexport type CheckboxChangeDetail = {\n  readonly checked: boolean;\n};\n\nexport type CheckboxChangeEvent = CustomEvent<CheckboxChangeDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-checkbox': Checkbox;\n  }\n}\n\nexport interface CheckboxEventMap {\n  'change': CheckboxChangeEvent;\n}\n\nexport interface Checkbox {\n  addEventListener<K extends keyof CheckboxEventMap>(\n    type: K,\n    listener: (this: Checkbox, event: CheckboxEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,IAAA,WAAA,MAAM,iBAAiB,WAAW;;;iBAkKA;kBACC;uBACK;eACT;cACD;eACC;wBAEnB,MAAmB;GAClC,MAAM,SAAS,EAAE;AACjB,QAAK,UAAU,OAAO;AAEtB,QAAK,cAAc,IAAI,YAAkC,UAAU;IACjE,QAAQ,EAAE,SAAS,KAAK,SAAS;IACjC,SAAS;IACT,UAAU;IACX,CAAC,CAAC;;;;gBAhLW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKnB;CAWA,SAA2C;AACzC,SAAO,IAAI;;;;;qBAKM,KAAK,QAAQ;sBACZ,KAAK,SAAS;2BACT,KAAK,cAAc;kBAC5B,KAAK,KAAK;mBACT,KAAK,MAAM;oBACV,MAAA,aAAmB;;;UAG7B,KAAK,QAAQ,IAAI,uBAAuB,KAAK,MAAM,WAAW,GAAG;;;;;YAhCxE,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,SAAA,WAAA,WAAA,KAAA,EAAA;YAC3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,SAAA,WAAA,YAAA,KAAA,EAAA;YAC3B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,SAAA,WAAA,iBAAA,KAAA,EAAA;YAC3B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,SAAA,WAAA,SAAA,KAAA,EAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,SAAA,WAAA,QAAA,KAAA,EAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,SAAA,WAAA,SAAA,KAAA,EAAA;uBAxK5B,cAAc,gBAAgB,CAAA,EAAA,SAAA"}

package/dist/chunk-pbuEa-1d.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };