@diwacopilot/components 1.0.0

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

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

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

@@ -0,0 +1,170 @@
+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';
+
+const getComponentCss = () => `
+  /* ── 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: var(--diwa-select-option-min-height);
+    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);
+  }
+
+  ${getFocusStyle('.option')}
+
+  /* ── Check mark ─────────────────────────────────────────────────────── */
+
+  .check {
+    flex-shrink: 0;
+    width: var(--diwa-icon-size-md);
+    height: var(--diwa-icon-size-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--diwa-accent);
+    font-size: var(--diwa-font-size-base);
+    line-height: 1;
+    visibility: hidden;
+  }
+
+  /* ── Selected state ─────────────────────────────────────────────────── */
+
+  :host([selected]) .check {
+    visibility: visible;
+  }
+
+  /* ── 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')}
+`;
+
+const DiwaSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class DiwaSelectOption extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.diwaSelectOptionUpdate = createEvent(this, "diwaSelectOptionUpdate", 7);
+        /** Disables the option — it cannot be selected. */
+        this.disabled = false;
+        /**
+         * Whether the option is currently selected.
+         * Maintained by the parent <diwa-select>.
+         */
+        this.selected = false;
+        /**
+         * Whether the option is currently keyboard-highlighted.
+         * Set exclusively by the parent component.
+         */
+        this.highlighted = false;
+        /** Theme — inherited from the parent diwa-select. */
+        this.theme = 'dark';
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.diwaSelectOptionUpdate.emit({ value: this.value });
+        };
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.diwaSelectOptionUpdate.emit({ value: this.value });
+            }
+        };
+    }
+    /** 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: 'a247949923bad9061915c5e2c85713e396ee6503', "data-theme": this.theme }, h("style", { key: '5e979d5a31b9d1bd3f745de3613282114be80402', innerHTML: getComponentCss() }), h("div", { key: 'a72bd683daec24c92c3e327c1d83f49f383dafde', 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: '38bb5d53e00fc6bac010da4f1096469405d9e782', class: "check", "aria-hidden": "true", part: "check" }, "\u2713"), h("span", { key: '7d15f4d7e6db5c56dcbcb5a6c1feff7128550209', class: "label", part: "label" }, h("slot", { key: 'a09a35aa00ed8c417e1ad6a514c9ba548685887b' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+}, [17, "diwa-select-option", {
+        "value": [513],
+        "disabled": [516],
+        "selected": [1540],
+        "highlighted": [1540],
+        "theme": [1025],
+        "setFocus": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-select-option"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-select-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaSelectOption$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaSelectOption = DiwaSelectOption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaSelectOption, defineCustomElement };
+
+//# sourceMappingURL=diwa-select-option.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-select-option.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiCzC,aAAa,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0DxB,qBAAqB,CAAC,SAAS,CAAC;CACnC;;MCzEYA,kBAAgB;IAJ7B;;;;;;QAW2B,aAAQ,GAAY,KAAK,CAAC;;;;;QAMX,aAAQ,GAAY,KAAK,CAAC;;;;;QAM1B,gBAAW,GAAY,KAAK,CAAC;;QAG5C,UAAK,GAAU,MAAM,CAAC;QAiBvC,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SACzD,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,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;SACF,CAAC;KAyBH;;IA1CC,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,EAAE,GAAI,EACvC,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,OAAO,iBAAa,MAAM,EAAC,IAAI,EAAC,OAAO,aAAS,EAC5D,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC9B,8DAAQ,CACH,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaSelectOption"],"sources":["src/components/diwa-select-option/diwa-select-option-styles.ts","src/components/diwa-select-option/diwa-select-option.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\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 {\r\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: var(--diwa-select-option-min-height);\r\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  ${getFocusStyle('.option')}\r\n\r\n  /* ── Check mark ─────────────────────────────────────────────────────── */\r\n\r\n  .check {\r\n    flex-shrink: 0;\r\n    width: var(--diwa-icon-size-md);\r\n    height: var(--diwa-icon-size-md);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: var(--diwa-accent);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: 1;\r\n    visibility: hidden;\r\n  }\r\n\r\n  /* ── Selected state ─────────────────────────────────────────────────── */\r\n\r\n  :host([selected]) .check {\r\n    visibility: visible;\r\n  }\r\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')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Method, Prop, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-select-option-styles';\r\n\r\n/**\r\n * @component diwa-select-option\r\n *\r\n * Individual option element for use inside <diwa-select>.\r\n * Renders a row with a checkmark indicator and label text.\r\n *\r\n * Not intended for standalone use — must be slotted into <diwa-select>.\r\n *\r\n * Provide an option without a value to allow deselection / show a placeholder:\r\n *   <diwa-select-option>Please select…</diwa-select-option>\r\n *\r\n * @slot default — Option label text (plain text or inline phrasing content)\r\n */\r\n@Component({\r\n  tag: 'diwa-select-option',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaSelectOption {\r\n  @Element() host!: HTMLDiwaSelectOptionElement;\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-select>.\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  /** Theme — inherited from the parent diwa-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  diwaSelectOptionUpdate!: EventEmitter<{ value: string | undefined }>;\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.diwaSelectOptionUpdate.emit({ value: this.value });\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.diwaSelectOptionUpdate.emit({ value: this.value });\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\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=\"check\" aria-hidden=\"true\" part=\"check\">✓</span>\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-select.d.ts

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