@diwacopilot/components 1.0.0

package/dist/esm/diwa-modal.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-modal.entry.js","mappings":"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","names":[],"sources":["src/components/diwa-modal/diwa-modal-utils.ts","src/components/diwa-modal/diwa-modal-styles.ts","src/components/diwa-modal/diwa-modal.tsx"],"sourcesContent":["/**\r\n * diwa-modal-utils.ts\r\n * ====================\r\n * Accessibility and ARIA utilities for <diwa-modal>.\r\n *\r\n * Mirrors the PDS pattern used in:\r\n *   packages/components/src/components/modal/modal-utils.ts\r\n *\r\n * Separating focus-trap and ARIA logic into a dedicated utility file keeps\r\n * the main component lean and makes accessibility behaviour independently\r\n * testable.\r\n */\r\n\r\n/** CSS selector matching all standard focusable interactive elements. */\r\nconst FOCUSABLE_SELECTOR = [\r\n  'a[href]',\r\n  'button:not([disabled])',\r\n  'input:not([disabled])',\r\n  'select:not([disabled])',\r\n  'textarea:not([disabled])',\r\n  '[tabindex]:not([tabindex=\"-1\"])',\r\n].join(', ');\r\n\r\n/**\r\n * Returns all focusable elements within a root element or shadow root.\r\n * Used to build the focus-trap cycle when the modal is open.\r\n */\r\nexport const getFocusableElements = (root: Element | ShadowRoot): HTMLElement[] =>\r\n  Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\r\n\r\n/**\r\n * Implements a keyboard focus trap within the modal shadow root.\r\n *\r\n * When Tab is pressed on the last focusable element, focus wraps to the first.\r\n * When Shift+Tab is pressed on the first, focus wraps to the last.\r\n *\r\n * WCAG 2.4.3 Focus Order — ensures that only the modal is reachable via\r\n * keyboard while it is open, preventing interaction with background content.\r\n *\r\n * @param e        — The keydown KeyboardEvent (key must be 'Tab').\r\n * @param focusable — Ordered list of focusable elements inside the modal.\r\n * @param activeEl  — The currently focused element (from shadowRoot.activeElement).\r\n */\r\nexport const trapFocus = (\r\n  e: KeyboardEvent,\r\n  focusable: HTMLElement[],\r\n  activeEl: Element | null,\r\n): void => {\r\n  if (!focusable.length) return;\r\n\r\n  const first = focusable[0];\r\n  const last = focusable[focusable.length - 1];\r\n\r\n  if (e.shiftKey) {\r\n    if (activeEl === first) {\r\n      e.preventDefault();\r\n      last.focus();\r\n    }\r\n  } else {\r\n    if (activeEl === last) {\r\n      e.preventDefault();\r\n      first.focus();\r\n    }\r\n  }\r\n};\r\n","/**\r\n * diwa-modal-styles.ts\r\n * =====================\r\n * CSS-in-JS style function for <diwa-modal>.\r\n *\r\n * Follows the PDS CSS-in-JS pattern:\r\n *   packages/components/src/components/modal/modal-styles.ts\r\n *\r\n * Visibility technique — the host is always in the DOM; open/close is driven by\r\n * `visibility`, `pointer-events`, `opacity`, and `transform` transitions so the\r\n * close animation plays fully before the element becomes inert.\r\n *\r\n * All values use CSS custom properties (--diwa-*). Raw color values are never\r\n * hardcoded — theming is handled entirely by the token cascade from app.css.\r\n *\r\n * Design token override API (injectable by consumers):\r\n *   --diwa-modal-width        Width of the panel   (default: 560px)\r\n *   --diwa-modal-max-height   Max height of panel  (default: 85vh)\r\n */\r\n\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\nimport type { ModalBackdrop } from './types';\r\n\r\n/**\r\n * Generates scoped CSS for the <diwa-modal> shadow tree.\r\n *\r\n * @param open             — Whether the modal is currently open.\r\n * @param backdrop         — Visual style of the backdrop overlay.\r\n * @param hasDismissButton — Whether the × dismiss button is rendered.\r\n * @param hasFooter        — Whether the footer slot is populated.\r\n */\r\nexport const getComponentCss = (\r\n  open: boolean,\r\n  backdrop: ModalBackdrop,\r\n  hasDismissButton: boolean,\r\n  hasFooter: boolean,\r\n): string => `\r\n\r\n  /* ── Host (fullscreen flex overlay centering the panel) ──────────────── */\r\n\r\n  :host {\r\n    display: flex;\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: var(--diwa-z-modal);\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: var(--diwa-space-8);\r\n    box-sizing: border-box;\r\n    pointer-events: ${open ? 'auto' : 'none'};\r\n    visibility: ${open ? 'visible' : 'hidden'};\r\n    transition: visibility 0s linear ${open ? '0s' : 'var(--diwa-motion-duration-moderate)'};\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Backdrop ────────────────────────────────────────────────────────── */\r\n\r\n  .backdrop {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 0;\r\n    ${\r\n      backdrop === 'blur'\r\n        ? `\r\n    background: var(--diwa-bg-frosted);\r\n    backdrop-filter: blur(var(--diwa-blur-lg));\r\n    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`\r\n        : `\r\n    background: var(--diwa-bg-shading);`\r\n    }\r\n    opacity: ${open ? '1' : '0'};\r\n    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* ── Modal panel ─────────────────────────────────────────────────────── */\r\n\r\n  .modal {\r\n    position: relative;\r\n    z-index: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    /* Sizing */\r\n    width: var(--diwa-modal-width, 560px);\r\n    max-width: calc(100vw - var(--diwa-space-10));\r\n    max-height: var(--diwa-modal-max-height, 85vh);\r\n\r\n    /* Appearance */\r\n    background: var(--diwa-bg-surface);\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    border-radius: var(--diwa-radius-xl);\r\n    box-shadow: var(--diwa-shadow-xl);\r\n    overflow: hidden;\r\n    outline: none;\r\n\r\n    /* Entry / exit animation */\r\n    opacity: ${open ? '1' : '0'};\r\n    transform: ${open ? 'translateY(0) scale(1)' : 'translateY(-10px) scale(0.98)'};\r\n    transition:\r\n      opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out),\r\n      transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\r\n  }\r\n\r\n  /* ── Header ──────────────────────────────────────────────────────────── */\r\n\r\n  .header {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n  }\r\n\r\n  .header-top {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-4) var(--diwa-space-8);\r\n    padding-right: ${hasDismissButton ? 'var(--diwa-space-5)' : 'var(--diwa-space-8)'};\r\n    min-height: var(--diwa-modal-header-min-height);\r\n  }\r\n\r\n  /* Heading element */\r\n  .heading {\r\n    flex: 1;\r\n    min-width: 0;\r\n    margin: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n    font-size: var(--diwa-font-size-fluid-xl);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    line-height: var(--diwa-line-height-tight);\r\n    color: var(--diwa-text-primary);\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n  }\r\n\r\n  /* Dismiss (×) button */\r\n  .dismiss {\r\n    flex-shrink: 0;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-space-10);\r\n    height: var(--diwa-space-10);\r\n    padding: 0;\r\n    background: transparent;\r\n    border: var(--diwa-border-width-thin) solid transparent;\r\n    cursor: pointer;\r\n    font-size: var(--diwa-font-size-xl);\r\n    line-height: 1;\r\n    transition:\r\n      background-color var(--diwa-transition-fast),\r\n      color var(--diwa-transition-fast),\r\n      border-color var(--diwa-transition-fast);\r\n    -webkit-font-smoothing: antialiased;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  .dismiss:hover {\r\n    background-color: var(--diwa-state-hover);\r\n    color: var(--diwa-text-primary);\r\n  }\r\n\r\n  .dismiss:active {\r\n    background-color: var(--diwa-state-active);\r\n  }\r\n\r\n  ${getFocusStyle('.dismiss')}\r\n\r\n  /* Sub-header slot area (optional description / metadata below the title) */\r\n  .header-sub {\r\n    padding: 0 var(--diwa-space-8) var(--diwa-space-5);\r\n    color: var(--diwa-text-secondary);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Scrollable body ─────────────────────────────────────────────────── */\r\n\r\n  .body {\r\n    flex: 1 1 auto;\r\n    overflow-y: auto;\r\n    padding: var(--diwa-space-8);\r\n    ${!hasFooter ? 'padding-bottom: var(--diwa-space-9);' : ''}\r\n    overscroll-behavior: contain;\r\n    color: var(--diwa-text-secondary);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Sticky footer ───────────────────────────────────────────────────── */\r\n\r\n  .footer {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-5) var(--diwa-space-8);\r\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.modal', '.backdrop')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\r\nimport type { ModalBackdrop } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getFocusableElements, trapFocus } from './diwa-modal-utils';\r\nimport { getComponentCss } from './diwa-modal-styles';\r\n\r\n/** Module-level counter — guarantees unique heading IDs across all DiwaModal instances. */\r\nlet _headingIdCounter = 0;\r\n\r\n/**\r\n * @component diwa-modal\r\n *\r\n * A controlled overlay dialog box for focused interactions.\r\n * Follows the PDS controlled-component pattern — the consumer owns open state\r\n * and responds to the `dismiss` event to close the modal.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-modal-width       Panel width            (default: 560px)\r\n *   --diwa-modal-max-height  Maximum panel height   (default: 85vh)\r\n *\r\n * Usage:\r\n *   <diwa-modal open heading=\"Confirm deletion\" ondismiss={() => setOpen(false)}>\r\n *     <p>Are you sure you want to delete this item? This action cannot be undone.</p>\r\n *     <div slot=\"footer\">\r\n *       <diwa-button variant=\"danger\">Delete</diwa-button>\r\n *       <diwa-button variant=\"secondary\" onDiwaClick={handleClose}>Cancel</diwa-button>\r\n *     </div>\r\n *   </diwa-modal>\r\n *\r\n * @slot default — Scrollable body content.\r\n * @slot header  — Optional sub-header below the title bar (e.g. description, metadata).\r\n * @slot footer  — Sticky footer content (e.g. action buttons). Hidden when empty.\r\n *\r\n * @controlled {\"props\": [\"open\"], \"event\": \"dismiss\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-modal',\r\n  /**\r\n   * No styleUrl — styles are injected dynamically via getComponentCss().\r\n   * This follows the PDS CSS-in-JS pattern so styles re-evaluate whenever\r\n   * open/backdrop/dismissButton/hasFooter change, enabling state-driven CSS.\r\n   */\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaModal {\r\n  @Element() host!: HTMLElement;\r\n\r\n  private readonly _headingId = `diwa-modal-heading-${++_headingIdCounter}`;\r\n  private _modalEl?: HTMLDivElement;\r\n  private _savedFocus: HTMLElement | null = null;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Per-component theme override.\r\n   * Reflects data-theme onto the host element so the light/dark token\r\n   * overrides in app.css cascade into the Shadow DOM via CSS inheritance.\r\n   */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Whether the modal is open.\r\n   *\r\n   * Controlled prop — set `open={true}` to open and `open={false}` to close.\r\n   * The component emits `dismiss` when the user requests a close; the\r\n   * consumer must set `open={false}` in response.\r\n   */\r\n  @Prop({ reflect: true }) open: boolean = false;\r\n\r\n  /** Heading text displayed in the modal title bar. */\r\n  @Prop() heading?: string;\r\n\r\n  /**\r\n   * When false, the dismiss (×) button in the header is hidden.\r\n   * Pair with a close action in the footer or programmatic `open = false`.\r\n   */\r\n  @Prop() dismissButton: boolean = true;\r\n\r\n  /**\r\n   * When true, clicking the backdrop does not emit `dismiss`.\r\n   * Use for required confirmations requiring an explicit user choice.\r\n   */\r\n  @Prop() disableBackdropClick: boolean = false;\r\n\r\n  /**\r\n   * Controls the visual style of the backdrop overlay.\r\n   *\r\n   * `blur`    — frosted glass via backdrop-filter (default).\r\n   *             Use when the modal is opened by direct user interaction (e.g. a button click).\r\n   *\r\n   * `shading` — solid dark scrim via --diwa-bg-shading.\r\n   *             Use for system-triggered modals (e.g. session timeout, cookie consent).\r\n   */\r\n  @Prop() backdrop: ModalBackdrop = 'blur';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Internal state — updated in componentWillRender\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** True when the footer slot contains at least one element. */\r\n  @State() private _hasFooter = false;\r\n\r\n  /** True when the header slot contains at least one element. */\r\n  @State() private _hasHeader = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user requests the modal to close:\r\n   *   - Clicking the backdrop (unless `disableBackdropClick` is true)\r\n   *   - Pressing the Escape key\r\n   *   - Clicking the dismiss (×) button\r\n   *\r\n   * The consumer MUST set `open={false}` in response:\r\n   * ```html\r\n   * <diwa-modal open ondismiss={() => (this.open = false)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Lifecycle\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  componentWillRender(): void {\r\n    // Check light DOM children for slotted content.\r\n    // PDS pattern: host.querySelector('[slot=\"...\"]') is the most reliable\r\n    // way to detect slot occupancy before the shadow DOM renders.\r\n    this._hasFooter = this.host.querySelector('[slot=\"footer\"]') !== null;\r\n    this._hasHeader = this.host.querySelector('[slot=\"header\"]') !== null;\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    // Ensure scroll lock is always released if the element is removed from DOM.\r\n    document.body.style.overflow = '';\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Watch('open')\r\n  onOpenChange(isOpen: boolean): void {\r\n    if (isOpen) {\r\n      // Save the currently focused element so we can return focus on close.\r\n      this._savedFocus = document.activeElement as HTMLElement;\r\n      // Lock page scroll while the modal is visible (PDS: setScrollLock pattern).\r\n      document.body.style.overflow = 'hidden';\r\n      // Move focus into the modal after the current render frame.\r\n      requestAnimationFrame(() => {\r\n        this._modalEl?.focus();\r\n      });\r\n    } else {\r\n      document.body.style.overflow = '';\r\n      // Return focus to the element that triggered the modal open.\r\n      this._savedFocus?.focus();\r\n      this._savedFocus = null;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Keyboard handling\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  onKeyDown(e: KeyboardEvent): void {\r\n    if (!this.open) return;\r\n\r\n    if (e.key === 'Escape') {\r\n      // WCAG 2.1.2 — provide a way to close without a pointer device.\r\n      e.preventDefault();\r\n      this.handleDismiss();\r\n      return;\r\n    }\r\n\r\n    if (e.key === 'Tab') {\r\n      // Focus trap: cycle focus within the modal shadow root.\r\n      // WCAG 2.4.3 — prevents background content from being reachable.\r\n      const sr = this.host.shadowRoot;\r\n      if (!sr) return;\r\n      const focusable = getFocusableElements(sr);\r\n      trapFocus(e, focusable, sr.activeElement);\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  private handleBackdropClick = (): void => {\r\n    if (!this.disableBackdropClick) {\r\n      this.handleDismiss();\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const { open, heading, dismissButton, backdrop, _hasFooter, _hasHeader } = this;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style>{getComponentCss(open, backdrop, dismissButton, _hasFooter)}</style>\r\n\r\n        {/* Backdrop — covers the viewport behind the panel */}\r\n        <div\r\n          class=\"backdrop\"\r\n          aria-hidden=\"true\"\r\n          onClick={this.handleBackdropClick}\r\n        />\r\n\r\n        {/*\r\n         * Modal panel.\r\n         * role=\"dialog\" + aria-modal=\"true\" declares this as a modal dialog.\r\n         * aria-labelledby links to the heading text for screen readers.\r\n         * tabIndex={-1} allows the panel itself to receive focus programmatically\r\n         * (via @Watch open → _modalEl.focus()) — it is not in the natural tab order.\r\n         */}\r\n        <div\r\n          class=\"modal\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={heading ? this._headingId : undefined}\r\n          aria-label={!heading ? 'Dialog' : undefined}\r\n          aria-hidden={open ? undefined : 'true'}\r\n          tabIndex={-1}\r\n          ref={(el) => { this._modalEl = el as HTMLDivElement; }}\r\n        >\r\n          {/* Title bar */}\r\n          <div class=\"header\">\r\n            <div class=\"header-top\">\r\n              {heading && (\r\n                <h2 class=\"heading\" id={this._headingId}>\r\n                  {heading}\r\n                </h2>\r\n              )}\r\n              {dismissButton && (\r\n                <button\r\n                  class=\"dismiss\"\r\n                  type=\"button\"\r\n                  aria-label=\"Close dialog\"\r\n                  onClick={this.handleDismiss}\r\n                >\r\n                  {/* Close × icon */}\r\n                  <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    width=\"16\"\r\n                    height=\"16\"\r\n                    aria-hidden=\"true\"\r\n                  >\r\n                    <path d=\"M18 6 6 18M6 6l12 12\" />\r\n                  </svg>\r\n                </button>\r\n              )}\r\n            </div>\r\n\r\n            {/* Optional sub-header slot (description, metadata, etc.) */}\r\n            {_hasHeader && (\r\n              <div class=\"header-sub\">\r\n                <slot name=\"header\" />\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {/* Scrollable body */}\r\n          <div class=\"body\">\r\n            <slot />\r\n          </div>\r\n\r\n          {/* Sticky footer — rendered only when slot is occupied */}\r\n          {_hasFooter && (\r\n            <div class=\"footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/diwa-multi-select-option.entry.js

@@ -0,0 +1,168 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './styles-e5a47a2d.js';
+import { g as getCheckboxBoxCss, c as checkmarkSvg } from './checkbox-mark-37be8b2e.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+    static get watchers() { return {
+        "selected": ["handlePropChange"],
+        "highlighted": ["handlePropChange"],
+        "disabled": ["handlePropChange"]
+    }; }
+};
+
+export { DiwaMultiSelectOption as diwa_multi_select_option };
+
+//# sourceMappingURL=diwa-multi-select-option.entry.js.map

package/dist/esm/diwa-multi-select-option.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-multi-select-option.entry.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;;MCtFY,qBAAqB;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":[],"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}