@ixfx/components 0.2.3 → 0.2.4

package/dist/checkbox.js

@@ -0,0 +1,265 @@
+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;
+};
+/**
+ * <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';
+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 `
+    :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);
+export { Checkbox };
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

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

package/dist/colour-picker/colour-picker-popup.d.ts

@@ -0,0 +1,102 @@
+/**
+ * <ixfx-colour-picker-popup> — inline colour swatch that opens an ixfx-colour-picker
+ * in a native popover.
+ *
+ * Properties:
+ *   mode       — "fluid" (default) | "confirm"
+ *   l, c, h, a — committed OKLCH values
+ *   hide-h, hide-l, hide-c, show-a, horizontal — passed to inner picker
+ *   show-preview — show the colour preview swatch inside the picker (fluid mode hides it by default)
+ *
+ * Getters:
+ *   value — committed colour as CSS string e.g. "oklch(0.7 0.15 180)"
+ *
+ * Methods:
+ *   setColour(colour: Colour.Colourish) — programmatically set committed colour
+ *
+ * Events:
+ *   input  — (fluid mode only) CustomEvent { detail: { l, c, h, a } }
+ *   change — CustomEvent { detail: { l, c, h, a } }
+ *
+ * CSS custom properties:
+ *   --cp-popup-swatch-size    — swatch button size (default: 1.5em)
+ */
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import type { ColourPicker } from './colour-picker.js';
+import { Colour } from '@ixfx/visual';
+import { LitElement } from 'lit';
+import './colour-picker.js';
+declare const PICKER_SIZES: {
+    readonly small: {
+        readonly width: 130;
+        readonly height: 100;
+    };
+    readonly medium: {
+        readonly width: 100;
+        readonly height: 155;
+    };
+    readonly large: {
+        readonly width: 200;
+        readonly height: 180;
+    };
+    readonly huge: {
+        readonly width: 290;
+        readonly height: 240;
+    };
+};
+type PickerSize = keyof typeof PICKER_SIZES;
+export declare class ColourPickerPopup extends LitElement {
+    mode: `fluid` | `confirm`;
+    l: number;
+    c: number;
+    h: number;
+    a: number;
+    showPreview: boolean;
+    hideH: boolean;
+    hideL: boolean;
+    hideC: boolean;
+    showA: boolean;
+    horizontal: boolean;
+    size: PickerSize;
+    private _isOpen;
+    private _everOpened;
+    _popupEl: HTMLElement;
+    _pickerEl: ColourPicker;
+    private readonly _uid;
+    private readonly _anchorName;
+    private readonly _popupId;
+    private _pendingL;
+    private _pendingC;
+    private _pendingH;
+    private _pendingA;
+    private _savedL;
+    private _savedC;
+    private _savedH;
+    private _savedA;
+    private _pendingConfirmed;
+    constructor();
+    get value(): string;
+    private get _innerHidePreview();
+    private get _pickerDimensions();
+    setColour(colour: Colour.Colourish): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private _applyAnchorPositioning;
+    private _updateSwatchBackground;
+    private _onPopoverToggle;
+    private _onPickerInput;
+    private _onPickerChange;
+    private _onConfirm;
+    private _onSwatchClick;
+    private _dispatchInput;
+    private _dispatchChange;
+    render(): import("lit").TemplateResult<1>;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-colour-picker-popup': ColourPickerPopup;
+    }
+}
+export {};
+//# sourceMappingURL=colour-picker-popup.d.ts.map

package/dist/colour-picker/colour-picker-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colour-picker-popup.d.ts","sourceRoot":"","sources":["../../src/colour-picker/colour-picker-popup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAMrD,OAAO,oBAAoB,CAAC;AAI5B,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;CAKR,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,YAAY,CAAC;AAe5C,qBACa,iBAAkB,SAAQ,UAAU;IACnB,IAAI,EAAE,OAAO,GAAG,SAAS,CAAW;IAEpC,CAAC,SAAO;IACR,CAAC,SAAQ;IACT,CAAC,SAAO;IACR,CAAC,SAAK;IAEsB,WAAW,UAAS;IACX,KAAK,UAAS;IACd,KAAK,UAAS;IACd,KAAK,UAAS;IAC7B,KAAK,UAAS;IACV,UAAU,UAAS;IAC7C,IAAI,EAAE,UAAU,CAAY;IAE/C,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,WAAW,CAAS;IAEpB,QAAQ,EAAG,WAAW,CAAC;IACX,SAAS,EAAG,YAAY,CAAC;IAEtD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAS;IAC9B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAS;IACrC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAGlC,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,SAAS,CAAU;IAG3B,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,OAAO,CAAU;IAGzB,OAAO,CAAC,iBAAiB,CAAS;;IAUlC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,OAAO,KAAK,iBAAiB,GAM5B;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,SAAS,GAAG,IAAI;IAQhC,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMrD,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IASzD,OAAO,CAAC,uBAAuB;IAU/B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,gBAAgB,CAkBtB;IAEF,OAAO,CAAC,cAAc,CAiBpB;IAEF,OAAO,CAAC,eAAe,CAiBrB;IAEF,OAAO,CAAC,UAAU,CAYhB;IAEF,OAAO,CAAC,cAAc,CAUpB;IAEF,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAKd,MAAM;IAiDf,MAAM,CAAC,MAAM,EAAE,cAAc,CAgG1B;CACJ;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,iBAAiB,CAAC;KAC/C;CACF"}