@ixfx/components 0.2.3 → 0.2.5

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

@@ -0,0 +1,34 @@
+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>;
+}
+type CheckboxChangeDetail = {
+  readonly checked: boolean;
+};
+type CheckboxChangeEvent = CustomEvent<CheckboxChangeDetail>;
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-checkbox': Checkbox;
+  }
+}
+interface CheckboxEventMap {
+  'change': CheckboxChangeEvent;
+}
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,251 @@
+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)
+*/
+let Checkbox = class Checkbox extends LitElement {
+	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;
+      --box-border-color: var(--surface-4);
+      --box-bg-unchecked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));
+      --box-bg-checked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));
+      --box-opacity-checked: 1;
+      --box-opacity-hover: 1;
+      --box-opacity-disabled: var(--disabled-opacity);
+      --box-border-width: 2px;
+      
+      /* Check */
+      --check-line-width: 6px;
+      --check-line-color: var(--accent);
+
+      /* Spacing & borders */
+      --label-gap: var(--space-m);
+
+      /* Label */
+      --label-opacity: 1;
+      --label-opacity-unchecked: var(--label-opacity);
+      --label-fg: var(--surface-3-text);
+      --label-active: var(--surface-2-text);
+      --label-hover: var(--surface-2-text);
+
+      /* Animation */
+      --transition-duration: var(--transition);
+
+      display: inline-flex;
+      user-select: none;
+    }
+
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--label-gap);
+      cursor: pointer;
+      position: relative;
+      opacity: var(--box-opacity-unchecked);
+      transition: opacity var(--transition-duration);
+    }
+
+    label:hover {
+      opacity: var(--box-opacity-hover);
+    }
+
+    label:has(input:checked) {
+      opacity: var(--box-opacity-checked);
+    }
+
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      clip: rect(0, 0, 0, 0);
+    }
+
+    .box {
+      position: relative;
+      width: var(--box-size);
+      height: var(--box-size);
+      border: var(--border, 1px solid #999);
+      background: var(--box-bg-unchecked);
+      flex-shrink: 0;
+      transition: background var(--transition-duration);
+      overflow: hidden;
+      box-shadow: inset 1px 1px 0px 1px color-mix(in oklch, var(--surface-2) 60%, transparent);
+    }
+    label:has(input:not(:disabled)) {
+      .box:hover {
+        background: color-mix(in oklch, var(--surface-4) 80%, transparent);
+        border-color: var(--accent, #666);
+        box-shadow: unset;
+      }
+    }
+
+    input:checked ~ .box {
+      background: var(--box-bg-checked);
+    }
+
+    /* Diagonal line from top-left to bottom-right */
+    .box::after {
+      content: '';
+      position: absolute;
+      width: 141.4%; /* sqrt(2) × 100% to span corner-to-corner */
+      height: var(--check-line-width);
+      background: var(--check-line-color);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+      opacity: 0;
+      transition: opacity var(--transition-duration);
+    }
+
+    input:checked ~ .box::after {
+      opacity: 1;
+    }
+
+    /* Horizontal line for indeterminate state */
+    .box::before {
+      content: '';
+      position: absolute;
+      width: 60%;
+      height: var(--check-line-width);
+      background: var(--check-line-color);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      transition: opacity var(--transition-duration);
+    }
+
+    input:indeterminate ~ .box::before {
+      opacity: 1;
+    }
+
+    /* Hide diagonal checkmark when indeterminate (must come after checked rule) */
+    input:indeterminate ~ .box::after {
+      opacity: 0;
+    }
+
+    /* Focus state */
+    input:focus-visible ~ .box {
+      outline: 2px solid var(--check-line-color);
+      outline-offset: 2px;
+    }
+
+    /* Disabled state */
+    label:has(input:disabled) {
+      opacity: var(--box-opacity-disabled);
+      cursor: not-allowed;
+      .box {
+        box-shadow: unset;
+      }    
+    }
+
+    .label {
+      color: var(--label-fg);
+      opacity: var(--label-opacity);
+      transition: opacity var(--transition-duration);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .label:hover {
+      color: var(--label-hover);
+    }
+    .label:has(+ :hover) {
+      color: var(--label-fg-hover);
+    }
+    .label:has(+ :active) {
+      color: var(--label-fg-active);
+    }
+    input:not(:checked) ~ .label {
+      opacity: var(--label-opacity-unchecked);
+    }
+  `;
+	}
+	#handleChange;
+	render() {
+		return html`
+      <label>
+        <input
+          name="checkbox"
+          type="checkbox"
+          .checked=${this.checked}
+          .disabled=${this.disabled}
+          .indeterminate=${this.indeterminate}
+          .name=${this.name}
+          .value=${this.value}
+          @change=${this.#handleChange}
+        />
+        <span class="box"></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);
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"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 };