@diwacopilot/components 1.0.0

package/dist-custom-elements/diwa-multi-select-option.js

@@ -0,0 +1,199 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
+import { g as getCheckboxBoxCss, c as checkmarkSvg } from './p-332838f8.js';
+
+const getComponentCss = (compact) => {
+    const boxSize = compact ? '14px' : '20px';
+    return `
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Option row ─────────────────────────────────────────────────────── */
+
+  .option {
+    display: flex;
+    align-items: center;
+    gap: var(--diwa-space-3);
+    padding: var(--diwa-space-2) var(--diwa-space-3);
+    min-height: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-select-option-min-height, var(--diwa-touch-target-min-size, 44px))'};
+    box-sizing: border-box;
+    cursor: pointer;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+    color: var(--diwa-text-primary);
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-normal);
+    line-height: 1.4;
+    border-radius: var(--diwa-radius-sm);
+    transition: background-color var(--diwa-transition-fast);
+  }
+
+  /* ── Focus ring ─────────────────────────────────────────────────────── */
+
+  ${getFocusStyle('.option')}
+
+  /* ── Checkbox mark ──────────────────────────────────────────────────── */
+
+  .checkbox {
+    flex-shrink: 0;
+    width: ${boxSize};
+    height: ${boxSize};
+    ${getCheckboxBoxCss()}
+  }
+
+  /* ── Selected state ─────────────────────────────────────────────────── */
+
+  :host([selected]) .checkbox {
+    background-color: var(--diwa-accent);
+    border-color: var(--diwa-accent);
+    background-image: ${checkmarkSvg};
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :host([selected]) .option:hover .checkbox {
+      background-color: var(--diwa-accent-hover);
+      border-color: var(--diwa-accent-hover);
+    }
+  }
+
+  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */
+
+  :host([highlighted]) .option {
+    background-color: var(--diwa-bg-hover);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .option:hover {
+      background-color: var(--diwa-bg-hover);
+    }
+  }
+
+  /* ── Label text ─────────────────────────────────────────────────────── */
+
+  .label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ── Disabled ───────────────────────────────────────────────────────── */
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .option {
+    opacity: var(--diwa-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+
+  ${getReducedMotionStyle('.option', '.checkbox')}
+`;
+};
+
+const DiwaMultiSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class DiwaMultiSelectOption extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.diwaMultiSelectOptionUpdate = createEvent(this, "diwaMultiSelectOptionUpdate", 7);
+        /** Disables the option — it cannot be selected. */
+        this.disabled = false;
+        /**
+         * Whether the option is currently selected.
+         * Maintained by the parent <diwa-multi-select>; consumers can also
+         * pre-select options by setting this attribute.
+         */
+        this.selected = false;
+        /**
+         * Whether the option is currently keyboard-highlighted.
+         * Set exclusively by the parent component.
+         */
+        this.highlighted = false;
+        /**
+         * Compact variant — reduces the option row height and checkbox size.
+         * Inherited from the parent diwa-multi-select.
+         */
+        this.compact = false;
+        /** Theme — inherited from the parent diwa-multi-select. */
+        this.theme = 'dark';
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.diwaMultiSelectOptionUpdate.emit({ value: this.value, selected: !this.selected });
+        };
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.diwaMultiSelectOptionUpdate.emit({ value: this.value, selected: !this.selected });
+            }
+        };
+    }
+    handlePropChange() {
+        // Re-injecting CSS on state change keeps styles in sync without a full re-render.
+        // The watch covers selected/highlighted/disabled prop changes.
+    }
+    /** Focuses the inner option element. */
+    async setFocus() {
+        var _a;
+        (_a = this.optionEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return (h(Host, { key: 'b4d48c6bb6968502a8ae2a6c1981db145332ce83', "data-theme": this.theme }, h("style", { key: 'c69088cc9414ff1b6edc4fa064abc6fded70226b', innerHTML: getComponentCss(this.compact) }), h("div", { key: 'f5ecb4d1dda04a18735594105ee436544f210c95', class: "option", role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: (el) => (this.optionEl = el), part: "option" }, h("span", { key: '3d2e4211d015355332a3ac44204d7a907659a465', class: "checkbox", "aria-hidden": "true", part: "checkbox" }), h("span", { key: '86ca6452ad32e685f944511f4c862c848d0bf493', class: "label", part: "label" }, h("slot", { key: '3caa3fafd6bdb4c3426d8ef989f8de34fc05a853' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "selected": ["handlePropChange"],
+        "highlighted": ["handlePropChange"],
+        "disabled": ["handlePropChange"]
+    }; }
+}, [17, "diwa-multi-select-option", {
+        "value": [513],
+        "disabled": [516],
+        "selected": [1540],
+        "highlighted": [1540],
+        "compact": [1540],
+        "theme": [1025],
+        "setFocus": [64]
+    }, undefined, {
+        "selected": ["handlePropChange"],
+        "highlighted": ["handlePropChange"],
+        "disabled": ["handlePropChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-multi-select-option"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-multi-select-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaMultiSelectOption$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaMultiSelectOption = DiwaMultiSelectOption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaMultiSelectOption, defineCustomElement };
+
+//# sourceMappingURL=diwa-multi-select-option.js.map

package/dist-custom-elements/diwa-multi-select-option.js.map

@@ -0,0 +1 @@
+{"file":"diwa-multi-select-option.js","mappings":";;;;AAGO,MAAM,eAAe,GAAG,CAAC,OAAgB;IAC9C,MAAM,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAE1C,OAAO;;;;;;;;;;;;;;;;;;;;kBAoBS,OAAO,GAAG,iDAAiD,GAAG,+EAA+E;;;;;;;;;;;;;;;IAe3J,aAAa,CAAC,SAAS,CAAC;;;;;;aAMf,OAAO;cACN,OAAO;MACf,iBAAiB,EAAE;;;;;;;;wBAQD,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6ChC,qBAAqB,CAAC,SAAS,EAAE,WAAW,CAAC;CAChD,CAAC;AACF,CAAC;;MCtFYA,uBAAqB;IAJlC;;;;;;QAW2B,aAAQ,GAAY,KAAK,CAAC;;;;;;QAOX,aAAQ,GAAY,KAAK,CAAC;;;;;QAM1B,gBAAW,GAAY,KAAK,CAAC;;;;;QAM7B,YAAO,GAAY,KAAK,CAAC;;QAGxC,UAAK,GAAU,MAAM,CAAC;QAyBvC,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;SACxF,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAgB;YACvC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;aACxF;SACF,CAAC;KAyBH;IAjDC,gBAAgB;;;KAGf;;IAID,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;KACxB;IAiBD,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,GAAI,EACnD,4DACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAoB,CAAC,EACnD,IAAI,EAAC,QAAQ,IAEb,6DAAM,KAAK,EAAC,UAAU,iBAAa,MAAM,EAAC,IAAI,EAAC,UAAU,GAAG,EAC5D,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC9B,8DAAQ,CACH,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaMultiSelectOption"],"sources":["src/components/diwa-multi-select-option/diwa-multi-select-option-styles.ts","src/components/diwa-multi-select-option/diwa-multi-select-option.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\nimport { checkmarkSvg, getCheckboxBoxCss } from '../../utils/checkbox-mark';\r\n\r\nexport const getComponentCss = (compact: boolean): string => {\r\n  const boxSize = compact ? '14px' : '20px';\r\n\r\n  return `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Option row ─────────────────────────────────────────────────────── */\r\n\r\n  .option {\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-2) var(--diwa-space-3);\r\n    min-height: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-select-option-min-height, var(--diwa-touch-target-min-size, 44px))'};\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    color: var(--diwa-text-primary);\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-normal);\r\n    line-height: 1.4;\r\n    border-radius: var(--diwa-radius-sm);\r\n    transition: background-color var(--diwa-transition-fast);\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.option')}\r\n\r\n  /* ── Checkbox mark ──────────────────────────────────────────────────── */\r\n\r\n  .checkbox {\r\n    flex-shrink: 0;\r\n    width: ${boxSize};\r\n    height: ${boxSize};\r\n    ${getCheckboxBoxCss()}\r\n  }\r\n\r\n  /* ── Selected state ─────────────────────────────────────────────────── */\r\n\r\n  :host([selected]) .checkbox {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${checkmarkSvg};\r\n  }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\n    :host([selected]) .option:hover .checkbox {\n      background-color: var(--diwa-accent-hover);\n      border-color: var(--diwa-accent-hover);\n    }\n  }\n\r\n  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */\r\n\r\n  :host([highlighted]) .option {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .option:hover {\n      background-color: var(--diwa-bg-hover);\n    }\n  }\n\r\n  /* ── Label text ─────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    flex: 1;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) {\r\n    pointer-events: none;\r\n  }\r\n\r\n  :host([disabled]) .option {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.option', '.checkbox')}\r\n`;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-multi-select-option-styles';\r\n\r\n/**\r\n * @component diwa-multi-select-option\r\n *\r\n * Individual option element for use inside <diwa-multi-select>.\r\n * Renders a row with a CSS checkbox and label text.\r\n *\r\n * Not intended for standalone use — must be slotted into <diwa-multi-select>.\r\n *\r\n * @slot default — Option label text (plain text or inline phrasing content)\r\n */\r\n@Component({\r\n  tag: 'diwa-multi-select-option',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaMultiSelectOption {\r\n  @Element() host!: HTMLDiwaMultiSelectOptionElement;\r\n\r\n  /** The value submitted/emitted when this option is selected. */\r\n  @Prop({ reflect: true }) value!: string;\r\n\r\n  /** Disables the option — it cannot be selected. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently selected.\r\n   * Maintained by the parent <diwa-multi-select>; consumers can also\r\n   * pre-select options by setting this attribute.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n  /**\r\n   * Whether the option is currently keyboard-highlighted.\r\n   * Set exclusively by the parent component.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) highlighted: boolean = false;\r\n\r\n  /**\r\n   * Compact variant — reduces the option row height and checkbox size.\r\n   * Inherited from the parent diwa-multi-select.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) compact: boolean = false;\r\n\r\n  /** Theme — inherited from the parent diwa-multi-select. */\r\n  @Prop({ mutable: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Emitted when the user clicks or presses Enter on the option.\r\n   * Bubbles and crosses Shadow DOM so the parent can catch it via @Listen.\r\n   */\r\n  @Event({ bubbles: true, composed: true })\r\n  diwaMultiSelectOptionUpdate!: EventEmitter<{ value: string; selected: boolean }>;\r\n\r\n  @Watch('selected')\r\n  @Watch('highlighted')\r\n  @Watch('disabled')\r\n  handlePropChange(): void {\r\n    // Re-injecting CSS on state change keeps styles in sync without a full re-render.\r\n    // The watch covers selected/highlighted/disabled prop changes.\r\n  }\r\n\r\n  /** Focuses the inner option element. */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    this.optionEl?.focus();\r\n  }\r\n\r\n  private optionEl?: HTMLDivElement;\r\n\r\n  private handleClick = (): void => {\r\n    if (this.disabled) return;\r\n    this.diwaMultiSelectOptionUpdate.emit({ value: this.value, selected: !this.selected });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent): void => {\r\n    if (this.disabled) return;\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      e.preventDefault();\r\n      this.diwaMultiSelectOptionUpdate.emit({ value: this.value, selected: !this.selected });\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.compact)} />\r\n        <div\r\n          class=\"option\"\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.disabled ? 'true' : undefined}\r\n          tabIndex={this.disabled ? -1 : 0}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          ref={(el) => (this.optionEl = el as HTMLDivElement)}\r\n          part=\"option\"\r\n        >\r\n          <span class=\"checkbox\" aria-hidden=\"true\" part=\"checkbox\" />\r\n          <span class=\"label\" part=\"label\">\r\n            <slot />\r\n          </span>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-multi-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaMultiSelect extends Components.DiwaMultiSelect, HTMLElement {}
+export const DiwaMultiSelect: {
+    prototype: DiwaMultiSelect;
+    new (): DiwaMultiSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;