@diwacopilot/components 1.2.0 → 1.2.1

package/dist/diwa-components/p-0028e799.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["FOCUSABLE_SELECTOR","join","getFocusableElements","root","Array","from","querySelectorAll","trapFocus","e","focusable","activeEl","length","first","last","shiftKey","preventDefault","focus","getComponentCss","open","backdrop","hasDismissButton","hasFooter","getFocusStyle","getReducedMotionStyle","_headingIdCounter","DiwaModal","constructor","hostRef","this","_headingId","_savedFocus","theme","dismissButton","disableBackdropClick","_hasFooter","_hasHeader","handleDismiss","dismiss","emit","handleBackdropClick","componentWillRender","host","querySelector","disconnectedCallback","document","body","style","overflow","onOpenChange","isOpen","activeElement","requestAnimationFrame","_a","_modalEl","onKeyDown","key","sr","shadowRoot","render","heading","h","Host","class","onClick","role","undefined","tabIndex","ref","el","id","type","viewBox","fill","stroke","width","height","d","name"],"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"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-008bdfa4.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as e,h as t,H as i,g as a}from"./p-ed4017f0.js";import{g as h}from"./p-35c7c864.js";import"./p-70bbb21a.js";const d=class{constructor(t){s(this,t);this.change=e(this,"change",7);this.input=e(this,"input",7);this.blur=e(this,"blur",3);this.focus=e(this,"focus",3);this._hasStart=false;this._hasEnd=false;this.label="";this.description="";this.message="";this.state="none";this.name="";this.value="";this.placeholder="";this.disabled=false;this.required=false;this.readonly=false;this.hideLabel=false;this.compact=false;this.theme="dark";this.showClearButton=true;this.handleInput=s=>{this.value=s.target.value;this.input.emit(this.value)};this.handleChange=s=>{this.value=s.target.value;this.change.emit(this.value)};this.handleBlur=s=>{this.blur.emit(s)};this.handleFocus=s=>{this.focus.emit(s)};this.handleClear=()=>{this.value="";this.input.emit("");this.change.emit("")}}connectedCallback(){this._hasStart=!!this.el.querySelector('[slot="start"]');this._hasEnd=!!this.el.querySelector('[slot="end"]')}render(){const s="input";const e="desc";const a="msg";const d=this.showClearButton&&!!this.value&&!this.disabled&&!this.readonly;return t(i,{key:"31d147be6a3be7636052091c56b44912ab02003d","data-theme":this.theme},t("style",{key:"263d9d8c493350b855c80efd830253be0c5b56d4",innerHTML:h(this.state,this.disabled,this.readonly,this.compact,this._hasStart,this._hasEnd,d)}),t("div",{key:"adec0693218224c0031649320946ee34d6d6b06f",class:"root"},!this.hideLabel&&this.label&&t("div",{key:"23b26ea9a30c6484c6661641e821d6476339c8a2",class:"label-row"},t("label",{key:"f13e94da3243031970f12ba6925ab57eba9b8d12",class:"label",htmlFor:s},this.label,this.required&&t("span",{key:"744a3b770e5c8d45976c699c29fc9009e0cc8330",class:"required","aria-hidden":"true"}," *")),t("slot",{key:"cc51b5721f0f62e80dffbb15787509a4bb3f4bd6",name:"label-after"})),t("div",{key:"58fbd5e42e30cf5c1adbe687fbe59f0ec634cecf",class:"input-wrapper"},this._hasStart&&t("div",{key:"bdead83f49e612de8aa4a7b7bffc9febe2e26892",class:"slot-start"},t("slot",{key:"37f2fb05bfceb8cd9453d90d56624fd2e9b03496",name:"start"})),t("input",{key:"b81455b6e07526d57eaf9a9a2ec309628ef68aec",id:s,class:"input",type:"search",name:this.name||undefined,value:this.value,placeholder:this.placeholder||undefined,disabled:this.disabled,required:this.required,readOnly:this.readonly,autocomplete:this.autoComplete,"aria-label":this.hideLabel&&this.label?this.label:undefined,"aria-invalid":this.state==="error"?"true":undefined,"aria-required":this.required?"true":undefined,"aria-describedby":this.message?a:this.description?e:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus}),this._hasEnd&&t("div",{key:"a9154d5474a264e5023d11966693623fbd3995f6",class:"slot-end"},t("slot",{key:"0df9b3e2ad104f2f0b2fac71656c31cbf9d5b00a",name:"end"})),d&&t("button",{key:"a8f0a67e158bff535f07648aad3151c954bbe331",class:"suffix-btn",type:"button","aria-label":"Clear search",onClick:this.handleClear},t("diwa-icon",{key:"5d3e54d606c753775813ae8491f26192ed622ba4",name:"x",size:14}))),!this.message&&this.description&&t("p",{key:"034b1939498d9990aefa263d8081bf2cdbce448a",id:e,class:"description"},this.description),this.message&&t("p",{key:"f5e2fcb68225c412ae8e56e6c70187aae658280b",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get el(){return a(this)}};export{d as diwa_input_search};
-//# sourceMappingURL=p-008bdfa4.entry.js.map

package/dist/diwa-components/p-008bdfa4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DiwaInputSearch","constructor","hostRef","this","_hasStart","_hasEnd","label","description","message","state","name","value","placeholder","disabled","required","readonly","hideLabel","compact","theme","showClearButton","handleInput","e","target","input","emit","handleChange","change","handleBlur","blur","handleFocus","focus","handleClear","connectedCallback","el","querySelector","render","inputId","descId","msgId","hasSuffix","h","Host","key","innerHTML","getComponentCss","class","htmlFor","id","type","undefined","readOnly","autocomplete","autoComplete","onInput","onChange","onBlur","onFocus","onClick","size"],"sources":["src/components/diwa-input-search/diwa-input-search.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-search-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-search',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputSearch {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  /** Show the clear (×) button when the field has a value. */\r\n  @Prop() showClearButton: boolean = true;\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  private handleClear = (): void => {\r\n    this.value = '';\r\n    this.input.emit('');\r\n    this.change.emit('');\r\n  };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n    const hasSuffix = this.showClearButton && !!this.value && !this.disabled && !this.readonly;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"search\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n            {hasSuffix && (\r\n              <button\r\n                class=\"suffix-btn\"\r\n                type=\"button\"\r\n                aria-label=\"Clear search\"\r\n                onClick={this.handleClear}\r\n              >\r\n                <diwa-icon name=\"x\" size={14} />\r\n              </button>\r\n            )}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-027e5299.entry.js

@@ -1,2 +0,0 @@
-import{r as n,h as a,H as e,g as r}from"./p-ed4017f0.js";import{g as t,a as i}from"./p-70bbb21a.js";const o=()=>`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Inner element (the real <a> or <span> in Shadow DOM) ───────────── */\n\n  .inner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--diwa-space-2);\n\n    height: var(--diwa-button-height, 40px);\n    padding: 0 var(--diwa-button-padding-x, 16px);\n    box-sizing: border-box;\n    width: 100%;\n\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\n    border: var(--diwa-border-width-thin) solid transparent;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\n    font-family: inherit;\n    line-height: 1;\n    white-space: nowrap;\n    text-decoration: none;\n\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    position: relative;\n\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${t(".inner")}\n\n  /* ── Variant: primary ───────────────────────────────────────────────── */\n\n  :host([variant="primary"]) .inner {\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\n    border-color: transparent;\n  }\n\n  :host([variant="primary"]) .inner:hover {\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\n  }\n\n  :host([variant="primary"]) .inner:active {\n    background-color: var(--diwa-accent-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\n\n  :host([variant="secondary"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n  }\n\n  :host([variant="secondary"]) .inner:hover {\n    background-color: var(--diwa-accent-bg);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  :host([variant="secondary"]) .inner:active {\n    background-color: var(--diwa-accent-muted);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\n\n  :host([variant="ghost"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-text-secondary);\n    border-color: transparent;\n  }\n\n  :host([variant="ghost"]) .inner:hover {\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  :host([variant="ghost"]) .inner:active {\n    background-color: var(--diwa-bg-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: danger ────────────────────────────────────────────────── */\n\n  :host([variant="danger"]) .inner {\n    background-color: var(--diwa-danger);\n    color: var(--diwa-text-inverse);\n    border-color: transparent;\n  }\n\n  :host([variant="danger"]) .inner:hover {\n    background-color: var(--diwa-danger-hover);\n  }\n\n  :host([variant="danger"]) .inner:active {\n    background-color: var(--diwa-danger-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Compact ────────────────────────────────────────────────────────── */\n\n  :host([compact]) .inner {\n    height: var(--diwa-button-height-sm, 32px);\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\n    font-size: var(--diwa-font-size-md);\n  }\n\n  /* ── State: disabled ────────────────────────────────────────────────── */\n\n  :host([disabled]) .inner {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Icon-only mode ─────────────────────────────────────────────────── */\n\n  :host([hide-label]) .inner {\n    width: var(--diwa-button-height, 40px);\n    padding: 0;\n  }\n\n  :host([hide-label][compact]) .inner {\n    width: var(--diwa-button-height-sm, 32px);\n  }\n\n  /* ── Span (no href) — not interactive ───────────────────────────────── */\n\n  span.inner {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${i(".inner",".label",".icon")}\n`;const d=class{constructor(a){n(this,a);this.theme="dark";this.variant="primary";this.target="_self";this.icon="none";this.hideLabel=false;this.compact=false;this.disabled=false}render(){var n;const r=!!this.href;const t=r?"a":"span";const i=this.icon!=="none";const d=this.compact?16:20;const s=r?Object.assign(Object.assign({href:this.href,target:this.target,download:this.download,rel:(n=this.rel)!==null&&n!==void 0?n:this.target==="_blank"?"noopener noreferrer":undefined},this.label?{"aria-label":this.label}:{}),this.disabled?{"aria-disabled":"true",tabIndex:-1}:{}):{};return a(e,{key:"3084d48e4054064d4cded143a1ca8abe50c5ff6e","data-theme":this.theme},a("style",{key:"b4a2af6ea1f3fcc270716ab43d9dbb2906d0cc9a",innerHTML:o()}),a(t,Object.assign({key:"5e0728ea634713e1b8bb1dceb633591567ab4d10",class:"inner"},s,{part:"base"}),i&&a("span",{key:"a972160dc036db8ec2ad42e3ce5ea6378917cc57",class:"icon","aria-hidden":"true"},a("diwa-icon",{key:"b4a442de79d1842ee5157a78ba722250b6ab7129",name:this.icon,size:d})),a("span",{key:"34bc94660fd0f1d350db1b324bd846bfbd39a936",class:`label${this.hideLabel?" label--hidden":""}`,part:"label"},a("slot",{key:"28ad8f5a6bc2238beb524e58ac919be76fc9f716"}))))}static get delegatesFocus(){return true}get host(){return r(this)}};export{d as diwa_link};
-//# sourceMappingURL=p-027e5299.entry.js.map

package/dist/diwa-components/p-027e5299.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","getFocusStyle","getReducedMotionStyle","DiwaLink","constructor","hostRef","this","theme","variant","target","icon","hideLabel","compact","disabled","render","isAnchor","href","Tag","hasIcon","iconSize","anchorProps","download","rel","_a","undefined","label","tabIndex","h","Host","key","innerHTML","Object","assign","class","part","name","size"],"sources":["src/components/diwa-link/diwa-link-styles.ts","src/components/diwa-link/diwa-link.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\nexport const getComponentCss = (): string => `\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Inner element (the real <a> or <span> in Shadow DOM) ───────────── */\n\n  .inner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--diwa-space-2);\n\n    height: var(--diwa-button-height, 40px);\n    padding: 0 var(--diwa-button-padding-x, 16px);\n    box-sizing: border-box;\n    width: 100%;\n\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\n    border: var(--diwa-border-width-thin) solid transparent;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\n    font-family: inherit;\n    line-height: 1;\n    white-space: nowrap;\n    text-decoration: none;\n\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    position: relative;\n\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${getFocusStyle('.inner')}\n\n  /* ── Variant: primary ───────────────────────────────────────────────── */\n\n  :host([variant=\"primary\"]) .inner {\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\n    border-color: transparent;\n  }\n\n  :host([variant=\"primary\"]) .inner:hover {\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\n  }\n\n  :host([variant=\"primary\"]) .inner:active {\n    background-color: var(--diwa-accent-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\n\n  :host([variant=\"secondary\"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n  }\n\n  :host([variant=\"secondary\"]) .inner:hover {\n    background-color: var(--diwa-accent-bg);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  :host([variant=\"secondary\"]) .inner:active {\n    background-color: var(--diwa-accent-muted);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\n\n  :host([variant=\"ghost\"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-text-secondary);\n    border-color: transparent;\n  }\n\n  :host([variant=\"ghost\"]) .inner:hover {\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  :host([variant=\"ghost\"]) .inner:active {\n    background-color: var(--diwa-bg-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: danger ────────────────────────────────────────────────── */\n\n  :host([variant=\"danger\"]) .inner {\n    background-color: var(--diwa-danger);\n    color: var(--diwa-text-inverse);\n    border-color: transparent;\n  }\n\n  :host([variant=\"danger\"]) .inner:hover {\n    background-color: var(--diwa-danger-hover);\n  }\n\n  :host([variant=\"danger\"]) .inner:active {\n    background-color: var(--diwa-danger-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Compact ────────────────────────────────────────────────────────── */\n\n  :host([compact]) .inner {\n    height: var(--diwa-button-height-sm, 32px);\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\n    font-size: var(--diwa-font-size-md);\n  }\n\n  /* ── State: disabled ────────────────────────────────────────────────── */\n\n  :host([disabled]) .inner {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Icon-only mode ─────────────────────────────────────────────────── */\n\n  :host([hide-label]) .inner {\n    width: var(--diwa-button-height, 40px);\n    padding: 0;\n  }\n\n  :host([hide-label][compact]) .inner {\n    width: var(--diwa-button-height-sm, 32px);\n  }\n\n  /* ── Span (no href) — not interactive ───────────────────────────────── */\n\n  span.inner {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${getReducedMotionStyle('.inner', '.label', '.icon')}\n`;\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport type { LinkVariant, LinkTarget } from \"./types\";\nimport type { Theme } from \"../../utils/styles\";\nimport { getComponentCss } from \"./diwa-link-styles\";\n\n/**\n * @component diwa-link\n *\n * A fully accessible link primitive. Renders as <a> when href is provided,\n * otherwise as a non-interactive <span>. Mirrors the PDS p-link component.\n *\n * Usage:\n *   <diwa-link href=\"/home\">Home</diwa-link>\n *   <diwa-link href=\"/docs\" variant=\"secondary\" target=\"_blank\">Docs</diwa-link>\n *   <diwa-link href=\"/about\" variant=\"ghost\" icon=\"arrow-right\">About</diwa-link>\n *\n * @slot default — Link label text\n */\n@Component({\n  tag: \"diwa-link\",\n  shadow: { delegatesFocus: true },\n})\nexport class DiwaLink {\n  @Element() host!: HTMLDiwaLinkElement;\n\n  /** Per-component theme override. */\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\n\n  /** Visual style variant. */\n  @Prop({ reflect: true }) variant: LinkVariant = \"primary\";\n\n  /** The URL the link points to. When set, renders as <a>. */\n  @Prop() href?: string;\n\n  /** Target attribute — where to open the linked URL. */\n  @Prop() target: LinkTarget = \"_self\";\n\n  /** Native download attribute for triggering file downloads. */\n  @Prop() download?: string;\n\n  /** Relationship between the current document and the linked resource. */\n  @Prop() rel?: string;\n\n  /** Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide. */\n  @Prop() icon: string = \"none\";\n\n  /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */\n  @Prop({ reflect: true }) hideLabel: boolean = false;\n\n  /** Compact (smaller) size variant. */\n  @Prop({ reflect: true }) compact: boolean = false;\n\n  /** Accessible aria-label override — useful for icon-only links. */\n  @Prop() label?: string;\n\n  /** Disabled state. Sets aria-disabled and prevents interaction. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const isAnchor = !!this.href;\n    const Tag = isAnchor ? (\"a\" as any) : (\"span\" as any);\n    const hasIcon = this.icon !== \"none\";\n    const iconSize = this.compact ? 16 : 20;\n\n    const anchorProps = isAnchor\n      ? {\n          href: this.href,\n          target: this.target,\n          download: this.download,\n          rel:\n            this.rel ??\n            (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          ...(this.label ? { \"aria-label\": this.label } : {}),\n          ...(this.disabled ? { \"aria-disabled\": \"true\", tabIndex: -1 } : {}),\n        }\n      : {};\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss()} />\n        <Tag class=\"inner\" {...anchorProps} part=\"base\">\n          {hasIcon && (\n            <span class=\"icon\" aria-hidden=\"true\">\n              <diwa-icon name={this.icon} size={iconSize} />\n            </span>\n          )}\n          <span\n            class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`}\n            part=\"label\"\n          >\n            <slot />\n          </span>\n        </Tag>\n      </Host>\n    );\n  }\n}"],"mappings":"oGAEO,MAAMA,EAAkB,IAAc,0zCAiDzCC,EAAc,u9GAmIdC,EAAsB,SAAU,SAAU,a,MChKjCC,EAAQ,MAJrB,WAAAC,CAAAC,G,UAQ2BC,KAAAC,MAAe,OAGfD,KAAAE,QAAuB,UAMxCF,KAAAG,OAAqB,QASrBH,KAAAI,KAAe,OAGEJ,KAAAK,UAAqB,MAGrBL,KAAAM,QAAmB,MAMnBN,KAAAO,SAAoB,K,CAE7C,MAAAC,G,MACE,MAAMC,IAAaT,KAAKU,KACxB,MAAMC,EAAMF,EAAY,IAAe,OACvC,MAAMG,EAAUZ,KAAKI,OAAS,OAC9B,MAAMS,EAAWb,KAAKM,QAAU,GAAK,GAErC,MAAMQ,EAAcL,E,6BAEdC,KAAMV,KAAKU,KACXP,OAAQH,KAAKG,OACbY,SAAUf,KAAKe,SACfC,KACEC,EAAAjB,KAAKgB,OAAG,MAAAC,SAAA,EAAAA,EACPjB,KAAKG,SAAW,SAAW,sBAAwBe,WAClDlB,KAAKmB,MAAQ,CAAE,aAAcnB,KAAKmB,OAAU,IAC5CnB,KAAKO,SAAW,CAAE,gBAAiB,OAAQa,UAAW,GAAM,IAElE,GAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAavB,KAAKC,OACrBoB,EAAA,SAAAE,IAAA,2CAAOC,UAAW9B,MAClB2B,EAACV,EAAGc,OAAAC,OAAA,CAAAH,IAAA,2CAACI,MAAM,SAAYb,EAAW,CAAEc,KAAK,SACtChB,GACCS,EAAA,QAAAE,IAAA,2CAAMI,MAAM,OAAM,cAAa,QAC7BN,EAAA,aAAAE,IAAA,2CAAWM,KAAM7B,KAAKI,KAAM0B,KAAMjB,KAGtCQ,EAAA,QAAAE,IAAA,2CACEI,MAAO,QAAQ3B,KAAKK,UAAY,iBAAmB,KACnDuB,KAAK,SAELP,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/dist/diwa-components/p-03a4902e.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as n,h as a,H as e}from"./p-ed4017f0.js";const t={info:{bg:"var(--diwa-notification-info-soft)",border:"var(--diwa-color-info-300)",iconColor:"var(--diwa-notification-info)"},success:{bg:"var(--diwa-notification-success-soft)",border:"var(--diwa-color-success-100)",iconColor:"var(--diwa-notification-success)"},warning:{bg:"var(--diwa-notification-warning-soft)",border:"var(--diwa-color-warning-100)",iconColor:"var(--diwa-notification-warning)"},error:{bg:"var(--diwa-notification-error-soft)",border:"var(--diwa-color-danger-200)",iconColor:"var(--diwa-notification-error)"}};const o=i=>{const{bg:n,border:a,iconColor:e}=t[i];return`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    width: 100%;\n    font-family: var(--diwa-font-family-base);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Root wrapper — carries all visual styling ───────────────────── */\n\n  .root {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-5) var(--diwa-space-6);\n    border-radius: var(--diwa-radius-md);\n    border: var(--diwa-border-width-thin) solid ${a};\n    background: ${n};\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ── Status icon ────────────────────────────────────────────────────── */\n\n  .icon-wrap {\n    flex-shrink: 0;\n    margin-top: var(--diwa-space-px);\n    color: ${e};\n    line-height: 0;\n  }\n\n  /* ── Content ────────────────────────────────────────────────────────── */\n\n  .content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--diwa-space-1);\n  }\n\n  .heading {\n    display: block;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-primary);\n    line-height: var(--diwa-line-height-tight);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Actions ────────────────────────────────────────────────────────── */\n\n  .actions {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-2);\n    margin-top: var(--diwa-space-px);\n  }\n`};const s={info:"info",success:"circle-check",warning:"triangle-alert",error:"circle-alert"};const r=class{constructor(a){i(this,a);this.dismiss=n(this,"dismiss",1);this.action=n(this,"action",1);this.theme="dark";this.state="info";this.heading="";this.description="";this.dismissButton=true;this.actionLoading=false;this.handleDismiss=()=>{this.dismiss.emit()};this.handleAction=()=>{this.action.emit()}}render(){const i=this.state==="error";const n=this.dismissButton||Boolean(this.actionLabel);return a(e,{key:"ffbc48506e71547e9f670fada7b45ebbe0bbd9d2","data-theme":this.theme},a("style",{key:"4ccbe4e0e6b325dedc6263ea80481cecd39cac26",innerHTML:o(this.state)}),a("div",{key:"e304af7c978c4da1240c31e0468b2ec3895c7c3d",class:"root"},a("div",{key:"1aea476763f19125e6ae889065014d0c24936025",class:"icon-wrap","aria-hidden":"true"},a("diwa-icon",{key:"3260c5b0aa23d6b995af704be6177a05ef85baa8",name:s[this.state],size:16})),a("div",{key:"79e994cb29375faede44260d9d77bee71a5e6e83",class:"content",role:i?"alert":"status","aria-live":i?"assertive":"polite"},this.heading&&a("span",{key:"2d4964d50c797e7cf16480de07160a910374b0eb",class:"heading"},this.heading),a("p",{key:"e226d8728b99240e6e65b98eca4d87e369a50094",class:"description"},this.description||a("slot",{key:"662f76be60914522329dd61a807133bcda44fa9f"}))),n&&a("div",{key:"20beaa3f3fc15584953092caa3f2a7176faf42d8",class:"actions"},this.actionLabel&&a("diwa-button-pure",{key:"4631e465e1919bdb709473c7a0f8946c72882151",icon:"arrow-right",size:"sm",loading:this.actionLoading,theme:this.theme,onClick:this.handleAction},this.actionLabel),this.dismissButton&&a("diwa-button-pure",{key:"244273af8b94b76093e2f0065df740ea53bcdd33",icon:"x",label:"Dismiss notification",hideLabel:true,size:"sm",theme:this.theme,onClick:this.handleDismiss}))))}};export{r as diwa_inline_notification};
-//# sourceMappingURL=p-03a4902e.entry.js.map

package/dist/diwa-components/p-03a4902e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["STATE_TOKENS","info","bg","border","iconColor","success","warning","error","getComponentCss","state","STATE_ICON","DiwaInlineNotification","constructor","hostRef","this","theme","heading","description","dismissButton","actionLoading","handleDismiss","dismiss","emit","handleAction","action","render","isAlert","showActions","Boolean","actionLabel","h","Host","key","innerHTML","class","name","size","role","icon","loading","onClick","label","hideLabel"],"sources":["src/components/diwa-inline-notification/diwa-inline-notification-styles.ts","src/components/diwa-inline-notification/diwa-inline-notification.tsx"],"sourcesContent":["/**\r\n * diwa-inline-notification-styles.ts\r\n * ====================================\r\n * CSS-in-JS styles for <diwa-inline-notification>.\r\n *\r\n * The notification is a static flex-row banner:\r\n *   [icon-wrap] [content: heading + description] [actions: action-btn + dismiss-btn]\r\n *\r\n * Background and border colours are driven entirely by the `state` prop.\r\n * All values are CSS custom properties so that the [data-theme=\"light\"]\r\n * overrides in app.css cascade into the Shadow DOM correctly.\r\n */\r\n\r\nimport type { InlineNotificationState } from './types';\r\n\r\ntype StateTokens = { bg: string; border: string; iconColor: string };\r\n\r\nconst STATE_TOKENS: Record<InlineNotificationState, StateTokens> = {\r\n  info: {\r\n    bg: 'var(--diwa-notification-info-soft)',\r\n    border: 'var(--diwa-color-info-300)',\r\n    iconColor: 'var(--diwa-notification-info)',\r\n  },\r\n  success: {\r\n    bg: 'var(--diwa-notification-success-soft)',\r\n    border: 'var(--diwa-color-success-100)',\r\n    iconColor: 'var(--diwa-notification-success)',\r\n  },\r\n  warning: {\r\n    bg: 'var(--diwa-notification-warning-soft)',\r\n    border: 'var(--diwa-color-warning-100)',\r\n    iconColor: 'var(--diwa-notification-warning)',\r\n  },\r\n  error: {\r\n    bg: 'var(--diwa-notification-error-soft)',\r\n    border: 'var(--diwa-color-danger-200)',\r\n    iconColor: 'var(--diwa-notification-error)',\r\n  },\r\n};\r\n\r\nexport const getComponentCss = (state: InlineNotificationState): string => {\r\n  const { bg, border, iconColor } = STATE_TOKENS[state];\r\n\r\n  return `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    width: 100%;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Root wrapper — carries all visual styling ───────────────────── */\r\n\r\n  .root {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-5) var(--diwa-space-6);\r\n    border-radius: var(--diwa-radius-md);\r\n    border: var(--diwa-border-width-thin) solid ${border};\r\n    background: ${bg};\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n  }\r\n\r\n  /* ── Status icon ────────────────────────────────────────────────────── */\r\n\r\n  .icon-wrap {\r\n    flex-shrink: 0;\r\n    margin-top: var(--diwa-space-px);\r\n    color: ${iconColor};\r\n    line-height: 0;\r\n  }\r\n\r\n  /* ── Content ────────────────────────────────────────────────────────── */\r\n\r\n  .content {\r\n    flex: 1;\r\n    min-width: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--diwa-space-1);\r\n  }\r\n\r\n  .heading {\r\n    display: block;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    color: var(--diwa-text-primary);\r\n    line-height: var(--diwa-line-height-tight);\r\n  }\r\n\r\n  .description {\r\n    margin: 0;\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Actions ────────────────────────────────────────────────────────── */\r\n\r\n  .actions {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-2);\r\n    margin-top: var(--diwa-space-px);\r\n  }\r\n`;\r\n};\r\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InlineNotificationState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-inline-notification-styles';\r\n\r\nconst STATE_ICON: Record<InlineNotificationState, string> = {\r\n  info: 'info',\r\n  success: 'circle-check',\r\n  warning: 'triangle-alert',\r\n  error: 'circle-alert',\r\n};\r\n\r\n/**\r\n * @component diwa-inline-notification\r\n *\r\n * A static inline banner that communicates contextual feedback.\r\n * Supports four semantic states — info, success, warning, error — each with\r\n * a distinct colour treatment and Lucide status icon.\r\n *\r\n * Accessibility:\r\n *   - state=\"error\" uses role=\"alert\" (assertive live region)\r\n *   - All other states use role=\"status\" (polite live region)\r\n *   - The icon is aria-hidden — semantic meaning is carried by the text\r\n *   - The dismiss button has an accessible label via label + hideLabel\r\n *\r\n * Usage:\r\n *   <diwa-inline-notification\r\n *     state=\"success\"\r\n *     heading=\"Saved\"\r\n *     description=\"Your changes have been saved.\"\r\n *   />\r\n *\r\n * @slot default — Fallback description content when the description prop is empty.\r\n */\r\n@Component({\r\n  tag: 'diwa-inline-notification',\r\n  shadow: true,\r\n})\r\nexport class DiwaInlineNotification {\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Semantic state — governs colour treatment, icon, and ARIA live role.\r\n   * - `info`    — neutral informational  (role=\"status\", polite)\r\n   * - `success` — positive confirmation  (role=\"status\", polite)\r\n   * - `warning` — non-blocking caution   (role=\"status\", polite)\r\n   * - `error`   — critical or blocking   (role=\"alert\",  assertive)\r\n   */\r\n  @Prop({ reflect: true }) state: InlineNotificationState = 'info';\r\n\r\n  /** Bold heading text rendered above the description. */\r\n  @Prop() heading: string = '';\r\n\r\n  /**\r\n   * Description text.\r\n   * When empty, the default slot is rendered instead — allowing rich markup.\r\n   */\r\n  @Prop() description: string = '';\r\n\r\n  /**\r\n   * Whether to show the dismiss (×) button.\r\n   * When `false`, the notification can only be removed programmatically.\r\n   */\r\n  @Prop() dismissButton: boolean = true;\r\n\r\n  /**\r\n   * Optional label for a secondary action button rendered beside the dismiss button.\r\n   * When set, a diwa-button-pure with an arrow icon emits the `action` event on click.\r\n   */\r\n  @Prop() actionLabel?: string;\r\n\r\n  /**\r\n   * Shows a loading indicator on the action button and blocks its interaction.\r\n   * Has no effect when `actionLabel` is not set.\r\n   */\r\n  @Prop() actionLoading: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the dismiss (×) button is clicked.\r\n   * The consumer is responsible for removing or hiding the notification in response.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  /**\r\n   * Emitted when the action button is clicked.\r\n   * Only fired when `actionLabel` is set and the button is not in a loading state.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  action!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Handlers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  private handleAction = (): void => {\r\n    this.action.emit();\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const isAlert = this.state === 'error';\r\n    const showActions = this.dismissButton || Boolean(this.actionLabel);\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state)} />\r\n\r\n        <div class=\"root\">\r\n          {/* Status icon — decorative, hidden from assistive technology */}\r\n          <div class=\"icon-wrap\" aria-hidden=\"true\">\r\n            <diwa-icon name={STATE_ICON[this.state]} size={16} />\r\n          </div>\r\n\r\n          {/* Content — ARIA live region */}\r\n          <div\r\n            class=\"content\"\r\n            role={isAlert ? 'alert' : 'status'}\r\n            aria-live={isAlert ? 'assertive' : 'polite'}\r\n          >\r\n            {this.heading && <span class=\"heading\">{this.heading}</span>}\r\n            <p class=\"description\">{this.description || <slot />}</p>\r\n          </div>\r\n\r\n          {/* Actions row */}\r\n          {showActions && (\r\n            <div class=\"actions\">\r\n              {this.actionLabel && (\r\n                <diwa-button-pure\r\n                  icon=\"arrow-right\"\r\n                  size=\"sm\"\r\n                  loading={this.actionLoading}\r\n                  theme={this.theme}\r\n                  onClick={this.handleAction}\r\n                >\r\n                  {this.actionLabel}\r\n                </diwa-button-pure>\r\n              )}\r\n              {this.dismissButton && (\r\n                <diwa-button-pure\r\n                  icon=\"x\"\r\n                  label=\"Dismiss notification\"\r\n                  hideLabel={true}\r\n                  size=\"sm\"\r\n                  theme={this.theme}\r\n                  onClick={this.handleDismiss}\r\n                />\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAiBA,MAAMA,EAA6D,CACjEC,KAAM,CACJC,GAAI,qCACJC,OAAQ,6BACRC,UAAW,iCAEbC,QAAS,CACPH,GAAI,wCACJC,OAAQ,gCACRC,UAAW,oCAEbE,QAAS,CACPJ,GAAI,wCACJC,OAAQ,gCACRC,UAAW,oCAEbG,MAAO,CACLL,GAAI,sCACJC,OAAQ,+BACRC,UAAW,mCAIR,MAAMI,EAAmBC,IAC9B,MAAMP,GAAEA,EAAEC,OAAEA,EAAMC,UAAEA,GAAcJ,EAAaS,GAE/C,MAAO,0iBAqByCN,uBAChCD,qOAULE,o3BAsCZ,EC5GD,MAAMM,EAAsD,CAC1DT,KAAM,OACNI,QAAS,eACTC,QAAS,iBACTC,MAAO,gB,MA6BII,EAAsB,MAJnC,WAAAC,CAAAC,G,0EAU2BC,KAAAC,MAAe,OASfD,KAAAL,MAAiC,OAGlDK,KAAAE,QAAkB,GAMlBF,KAAAG,YAAsB,GAMtBH,KAAAI,cAAyB,KAYzBJ,KAAAK,cAAyB,MAwBzBL,KAAAM,cAAgB,KACtBN,KAAKO,QAAQC,MAAM,EAGbR,KAAAS,aAAe,KACrBT,KAAKU,OAAOF,MAAM,C,CAOpB,MAAAG,GACE,MAAMC,EAAUZ,KAAKL,QAAU,QAC/B,MAAMkB,EAAcb,KAAKI,eAAiBU,QAAQd,KAAKe,aAEvD,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAalB,KAAKC,OACrBe,EAAA,SAAAE,IAAA,2CAAOC,UAAWzB,EAAgBM,KAAKL,SAEvCqB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,QAETJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YAAW,cAAa,QACjCJ,EAAA,aAAAE,IAAA,2CAAWG,KAAMzB,EAAWI,KAAKL,OAAQ2B,KAAM,MAIjDN,EAAA,OAAAE,IAAA,2CACEE,MAAM,UACNG,KAAMX,EAAU,QAAU,SAAQ,YACvBA,EAAU,YAAc,UAElCZ,KAAKE,SAAWc,EAAA,QAAAE,IAAA,2CAAME,MAAM,WAAWpB,KAAKE,SAC7Cc,EAAA,KAAAE,IAAA,2CAAGE,MAAM,eAAepB,KAAKG,aAAea,EAAA,QAAAE,IAAA,+CAI7CL,GACCG,EAAA,OAAAE,IAAA,2CAAKE,MAAM,WACRpB,KAAKe,aACJC,EAAA,oBAAAE,IAAA,2CACEM,KAAK,cACLF,KAAK,KACLG,QAASzB,KAAKK,cACdJ,MAAOD,KAAKC,MACZyB,QAAS1B,KAAKS,cAEbT,KAAKe,aAGTf,KAAKI,eACJY,EAAA,oBAAAE,IAAA,2CACEM,KAAK,IACLG,MAAM,uBACNC,UAAW,KACXN,KAAK,KACLrB,MAAOD,KAAKC,MACZyB,QAAS1B,KAAKM,kB","ignoreList":[]}

package/dist/diwa-components/p-05a02076.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as e,h as t,H as i,g as a}from"./p-ed4017f0.js";import{g as d}from"./p-35c7c864.js";import"./p-70bbb21a.js";const h=class{constructor(t){s(this,t);this.change=e(this,"change",7);this.input=e(this,"input",7);this.blur=e(this,"blur",3);this.focus=e(this,"focus",3);this._hasStart=false;this._hasEnd=false;this.label="";this.description="";this.message="";this.state="none";this.name="";this.value="";this.placeholder="";this.disabled=false;this.required=false;this.readonly=false;this.hideLabel=false;this.compact=false;this.theme="dark";this.handleInput=s=>{this.value=s.target.value;this.input.emit(this.value)};this.handleChange=s=>{this.value=s.target.value;this.change.emit(this.value)};this.handleBlur=s=>{this.blur.emit(s)};this.handleFocus=s=>{this.focus.emit(s)}}connectedCallback(){this._hasStart=!!this.el.querySelector('[slot="start"]');this._hasEnd=!!this.el.querySelector('[slot="end"]')}render(){const s="input";const e="desc";const a="msg";return t(i,{key:"19d243cb4c64e1415899c00628aa8aa8280453b3","data-theme":this.theme},t("style",{key:"2d1f7f9086d563f74f5691b431d1a4981adc6cf0",innerHTML:d(this.state,this.disabled,this.readonly,this.compact,this._hasStart,this._hasEnd,false)}),t("div",{key:"be47368b657e4f6919b1f9271b681a7a50ce27d8",class:"root"},!this.hideLabel&&this.label&&t("div",{key:"4f364dddf12b43bbbbbe6417556ed76004dfd093",class:"label-row"},t("label",{key:"fead244ec4a55389a152a1428867596b51460dad",class:"label",htmlFor:s},this.label,this.required&&t("span",{key:"39f9ecc43ace5e092d79e5a9500a93d033f0e40e",class:"required","aria-hidden":"true"}," *")),t("slot",{key:"465b316c80bbae7bab971fc06c0cdba1b8386429",name:"label-after"})),t("div",{key:"443e4b4dda59cfd189f7d00eed7e8d424c910270",class:"input-wrapper"},this._hasStart&&t("div",{key:"0b0bc109876064698e73ec7c334d0720bc8a4800",class:"slot-start"},t("slot",{key:"9d299bd4c5754d84220a544da4a4df1a173c2a4d",name:"start"})),t("input",{key:"f8bc36dc96a185d10de64792b16bd298500932c0",id:s,class:"input",type:"email",name:this.name||undefined,value:this.value,placeholder:this.placeholder||undefined,disabled:this.disabled,required:this.required,readOnly:this.readonly,autocomplete:this.autoComplete,"aria-label":this.hideLabel&&this.label?this.label:undefined,"aria-invalid":this.state==="error"?"true":undefined,"aria-required":this.required?"true":undefined,"aria-describedby":this.message?a:this.description?e:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus}),this._hasEnd&&t("div",{key:"c655080c8ceda416b90c4c31c0a70405b4a70a5b",class:"slot-end"},t("slot",{key:"edd82f220119a4713f3704fa1f26bbf60169ef87",name:"end"}))),!this.message&&this.description&&t("p",{key:"d9b214c7babe02676ea9344b5f0eb8f33339c35e",id:e,class:"description"},this.description),this.message&&t("p",{key:"402b36643504d83a035ea4d3b4d597c1726eb7c0",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get el(){return a(this)}};export{h as diwa_input_email};
-//# sourceMappingURL=p-05a02076.entry.js.map

package/dist/diwa-components/p-05a02076.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DiwaInputEmail","constructor","hostRef","this","_hasStart","_hasEnd","label","description","message","state","name","value","placeholder","disabled","required","readonly","hideLabel","compact","theme","handleInput","e","target","input","emit","handleChange","change","handleBlur","blur","handleFocus","focus","connectedCallback","el","querySelector","render","inputId","descId","msgId","h","Host","key","innerHTML","getComponentCss","class","htmlFor","id","type","undefined","readOnly","autocomplete","autoComplete","onInput","onChange","onBlur","onFocus"],"sources":["src/components/diwa-input-email/diwa-input-email.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-email-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-email',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputEmail {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"email\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-090f557b.entry.js

@@ -1,2 +0,0 @@
-import{r as n,h as a,H as e,g as t}from"./p-ed4017f0.js";import{g as i,a as r}from"./p-70bbb21a.js";const o=(n,a,e,t)=>`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Inner element (the real <button> or <a> in Shadow DOM) ─────────── */\n\n  .inner {\n    /* Layout */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--diwa-space-2);\n\n    /* Sizing defaults (md) */\n    height: var(--diwa-button-height, 40px);\n    padding: 0 var(--diwa-button-padding-x, 16px);\n    box-sizing: border-box;\n    width: 100%;\n\n    /* Shape */\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\n    border: var(--diwa-border-width-thin) solid transparent;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\n    font-family: inherit;\n    line-height: 1;\n    white-space: nowrap;\n    text-decoration: none;\n\n    /* Interaction */\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    position: relative;\n\n    /* Motion */\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n\n    /* Reset native button styles */\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${i(".inner")}\n\n  /* ── Variant: primary ───────────────────────────────────────────────── */\n\n  :host([variant="primary"]) .inner {\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\n    border-color: transparent;\n  }\n\n  :host([variant="primary"]) .inner:hover:not(:disabled) {\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\n  }\n\n  :host([variant="primary"]) .inner:active:not(:disabled) {\n    background-color: var(--diwa-accent-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\n\n  :host([variant="secondary"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n  }\n\n  :host([variant="secondary"]) .inner:hover:not(:disabled) {\n    background-color: var(--diwa-accent-bg);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  :host([variant="secondary"]) .inner:active:not(:disabled) {\n    background-color: var(--diwa-accent-muted);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\n\n  :host([variant="ghost"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-text-secondary);\n    border-color: transparent;\n  }\n\n  :host([variant="ghost"]) .inner:hover:not(:disabled) {\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  :host([variant="ghost"]) .inner:active:not(:disabled) {\n    background-color: var(--diwa-bg-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: danger ────────────────────────────────────────────────── */\n\n  :host([variant="danger"]) .inner {\n    background-color: var(--diwa-danger);\n    color: var(--diwa-text-inverse);\n    border-color: transparent;\n  }\n\n  :host([variant="danger"]) .inner:hover:not(:disabled) {\n    background-color: var(--diwa-danger-hover);\n  }\n\n  :host([variant="danger"]) .inner:active:not(:disabled) {\n    background-color: var(--diwa-danger-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Size: sm ───────────────────────────────────────────────────────── */\n\n  :host([size="sm"]) .inner {\n    height: var(--diwa-button-height-sm, 32px);\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\n    font-size: var(--diwa-font-size-md);\n  }\n\n  /* ── Size: lg ───────────────────────────────────────────────────────── */\n\n  :host([size="lg"]) .inner {\n    height: var(--diwa-button-height-lg, 44px);\n    padding: 0 var(--diwa-space-10);\n    font-size: var(--diwa-font-size-lg);\n  }\n\n  /* ── State: disabled ────────────────────────────────────────────────── */\n\n  :host([disabled]) .inner,\n  .inner:disabled {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── State: loading ─────────────────────────────────────────────────── */\n\n  :host([loading]) .inner {\n    cursor: wait;\n    pointer-events: none;\n  }\n\n  /* ── Spinner ────────────────────────────────────────────────────────── */\n\n  .spinner {\n    width: var(--diwa-spinner-size-sm);\n    height: var(--diwa-spinner-size-sm);\n    flex-shrink: 0;\n    border: var(--diwa-border-width-base) solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: diwa-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\n  }\n\n  @keyframes diwa-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  /* ── Icon slots ─────────────────────────────────────────────────────── */\n\n  .icon-start,\n  .icon-end {\n    display: contents;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Icon-only mode ─────────────────────────────────────────────────── */\n\n  :host([hide-label]) .inner {\n    width: var(--diwa-button-height, 40px);\n    padding: 0;\n  }\n\n  :host([hide-label][size="sm"]) .inner {\n    width: var(--diwa-button-height-sm, 32px);\n  }\n\n  :host([hide-label][size="lg"]) .inner {\n    width: var(--diwa-button-height-lg, 44px);\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${r(".inner",".label",".spinner")}\n`;const s=(n,a,e,t)=>{const i={};if(e){i["aria-label"]=e}if(a){i["aria-busy"]="true"}if(t&&(n||a)){i["aria-disabled"]="true"}return i};const d=class{constructor(a){n(this,a);this.theme="dark";this.variant="primary";this.size="md";this.type="button";this.disabled=false;this.loading=false;this.hideLabel=false;this.icon="none";this.handleClick=n=>{if(!this.isInteractive){n.preventDefault();n.stopPropagation()}}}get isInteractive(){return!this.disabled&&!this.loading}get iconSize(){return this.size==="sm"?16:this.size==="lg"?24:20}render(){const n=!!this.href;const t=n?"a":"button";const i=s(this.disabled,this.loading,this.label,n);const r=Object.assign({class:"inner",onClick:this.handleClick},i);const d=n?{href:this.href,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined,tabIndex:this.disabled||this.loading?-1:undefined}:{type:this.type,name:this.name,value:this.value,disabled:this.disabled||this.loading};return a(e,{key:"40eee896f96707aa7e552ecb4a1dd9329dae5ec4","data-theme":this.theme,role:n?undefined:"button","aria-disabled":(this.disabled||this.loading)&&n?"true":undefined},a("style",{key:"d41a20f5d58d5408efeec81ea452d1bf4c160cbe",innerHTML:o()}),a(t,Object.assign({key:"e4cb9b0f3b1d581803cee8a82ca9d838c48dd5f2"},r,d,{part:"base"}),this.loading&&a("span",{key:"d57fe6c27bd115e73f136003e9cb3c3de494020e",class:"spinner","aria-hidden":"true",part:"spinner"}),a("span",{key:"bfdcd738e1b4541bae233a7be5804d1ba4fc02df",class:"icon-start",part:"icon-start","aria-hidden":"true"},this.icon!=="none"&&!this.loading&&a("diwa-icon",{key:"674cf3892909a537d376dfb17bc4e14e6e5343ff",name:this.icon,size:this.iconSize}),a("slot",{key:"8bf7e06b4eab2814dccec4996a38f7fce76dedf9",name:"icon-start"})),a("span",{key:"efa94bbd8858dba301646d8f072dac475cf16fc5",class:`label${this.hideLabel?" label--hidden":""}`,part:"label"},a("slot",{key:"c296751f944fae738500ada889f0e057f6919e1f"})),a("span",{key:"d057b75d8cf65aafc87d0b3996e0a024fff3e4f0",class:"icon-end",part:"icon-end","aria-hidden":"true"},a("slot",{key:"b329bec720506f3b322c244cbf31139a57514a03",name:"icon-end"}))))}static get delegatesFocus(){return true}get host(){return t(this)}};export{d as diwa_button};
-//# sourceMappingURL=p-090f557b.entry.js.map

package/dist/diwa-components/p-090f557b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","_variant","_size","_disabled","_loading","getFocusStyle","getReducedMotionStyle","getButtonAriaAttributes","disabled","loading","label","isLink","attrs","DiwaButton","constructor","hostRef","this","theme","variant","size","type","hideLabel","icon","handleClick","e","isInteractive","preventDefault","stopPropagation","iconSize","render","href","Tag","ariaAttrs","commonProps","Object","assign","class","onClick","buttonProps","target","rel","undefined","tabIndex","name","value","h","Host","key","role","innerHTML","part"],"sources":["src/components/diwa-button/diwa-button-styles.ts","src/components/diwa-button/diwa-button-utils.ts","src/components/diwa-button/diwa-button.tsx"],"sourcesContent":["/**\r\n * diwa-button-styles.ts\r\n * ======================\r\n * CSS-in-JS style function for <diwa-button>.\r\n *\r\n * Returns a complete, scoped CSS string injected into the component's Shadow DOM\r\n * via a <style innerHTML={...}> element in render(). This follows the shared\n * Diwa component styling architecture used across web components.\n *\r\n * All colour values use CSS custom properties (--diwa-*) — raw values are never\r\n * hardcoded. This means theming is entirely handled by the token cascade: when the\r\n * host element carries data-theme=\"light\", the [data-theme=\"light\"] overrides\r\n * defined in app.css cascade into the Shadow DOM via custom property inheritance.\r\n *\r\n * The function accepts the full prop surface for future conditional optimisation\r\n * (e.g. generating only variant- or size-specific CSS to reduce payload), but\r\n * currently outputs the complete ruleset regardless of prop values.\r\n */\r\n\r\nimport type { ButtonSize, ButtonVariant } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\n/**\r\n * Generates scoped CSS for the <diwa-button> shadow tree.\r\n *\r\n * @param _variant  — current ButtonVariant (reserved for conditional CSS)\r\n * @param _size     — current ButtonSize    (reserved for conditional CSS)\r\n * @param _disabled — disabled state        (reserved for conditional CSS)\r\n * @param _loading  — loading state         (reserved for conditional CSS)\r\n */\r\nexport const getComponentCss = (\r\n  _variant: ButtonVariant,\r\n  _size: ButtonSize,\r\n  _disabled: boolean,\r\n  _loading: boolean,\r\n): string => `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: inline-flex;\r\n    position: relative;\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  /* ── Inner element (the real <button> or <a> in Shadow DOM) ─────────── */\r\n\r\n  .inner {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: var(--diwa-space-2);\r\n\r\n    /* Sizing defaults (md) */\r\n    height: var(--diwa-button-height, 40px);\r\n    padding: 0 var(--diwa-button-padding-x, 16px);\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n\r\n    /* Shape */\r\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\r\n    border: var(--diwa-border-width-thin) solid transparent;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\r\n    font-family: inherit;\r\n    line-height: 1;\r\n    white-space: nowrap;\r\n    text-decoration: none;\r\n\r\n    /* Interaction */\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    position: relative;\r\n\r\n    /* Motion */\r\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\r\n\r\n    /* Reset native button styles */\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.inner')}\r\n\r\n  /* ── Variant: primary ───────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"primary\"]) .inner {\r\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\r\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\r\n    border-color: transparent;\r\n  }\r\n\r\n  :host([variant=\"primary\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\r\n  }\r\n\r\n  :host([variant=\"primary\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-accent-active);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"secondary\"]) .inner {\r\n    background-color: transparent;\r\n    color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n  }\r\n\r\n  :host([variant=\"secondary\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-bg);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  :host([variant=\"secondary\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-accent-muted);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"ghost\"]) .inner {\r\n    background-color: transparent;\r\n    color: var(--diwa-text-secondary);\r\n    border-color: transparent;\r\n  }\r\n\r\n  :host([variant=\"ghost\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-bg-hover);\r\n    color: var(--diwa-text-primary);\r\n  }\r\n\r\n  :host([variant=\"ghost\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-bg-active);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Variant: danger ────────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"danger\"]) .inner {\r\n    background-color: var(--diwa-danger);\r\n    color: var(--diwa-text-inverse);\r\n    border-color: transparent;\r\n  }\r\n\r\n  :host([variant=\"danger\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-danger-hover);\r\n  }\r\n\r\n  :host([variant=\"danger\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-danger-active);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Size: sm ───────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"sm\"]) .inner {\r\n    height: var(--diwa-button-height-sm, 32px);\r\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\r\n    font-size: var(--diwa-font-size-md);\r\n  }\r\n\r\n  /* ── Size: lg ───────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"lg\"]) .inner {\r\n    height: var(--diwa-button-height-lg, 44px);\r\n    padding: 0 var(--diwa-space-10);\r\n    font-size: var(--diwa-font-size-lg);\r\n  }\r\n\r\n  /* ── State: disabled ────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) .inner,\r\n  .inner:disabled {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── State: loading ─────────────────────────────────────────────────── */\r\n\r\n  :host([loading]) .inner {\r\n    cursor: wait;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Spinner ────────────────────────────────────────────────────────── */\r\n\r\n  .spinner {\r\n    width: var(--diwa-spinner-size-sm);\r\n    height: var(--diwa-spinner-size-sm);\r\n    flex-shrink: 0;\r\n    border: var(--diwa-border-width-base) solid currentColor;\r\n    border-top-color: transparent;\r\n    border-radius: 50%;\r\n    animation: diwa-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\r\n  }\r\n\r\n  @keyframes diwa-spin {\r\n    to { transform: rotate(360deg); }\r\n  }\r\n\r\n  /* ── Icon slots ─────────────────────────────────────────────────────── */\r\n\r\n  .icon-start,\r\n  .icon-end {\r\n    display: contents;\r\n    flex-shrink: 0;\r\n    line-height: 0;\r\n  }\r\n\r\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\r\n\r\n  .label--hidden {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  /* ── Icon-only mode ─────────────────────────────────────────────────── */\r\n\r\n  :host([hide-label]) .inner {\r\n    width: var(--diwa-button-height, 40px);\r\n    padding: 0;\r\n  }\r\n\r\n  :host([hide-label][size=\"sm\"]) .inner {\r\n    width: var(--diwa-button-height-sm, 32px);\r\n  }\r\n\r\n  :host([hide-label][size=\"lg\"]) .inner {\r\n    width: var(--diwa-button-height-lg, 44px);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.inner', '.label', '.spinner')}\r\n`;\r\n","/**\r\n * diwa-button-utils.ts\r\n * =====================\r\n * Utility types and helper functions for <diwa-button>.\r\n *\r\n * Mirrors the PDS pattern used in:\r\n *   packages/components/src/components/button/button-utils.ts\r\n *\r\n * Separating ARIA logic into a dedicated utility file keeps the main component\r\n * lean and makes the accessibility mapping independently testable.\r\n */\r\n\r\n/**\r\n * ARIA attributes applied to the inner interactive element (<button> or <a>).\r\n * All keys are optional — only set when semantically appropriate.\r\n */\r\nexport interface ButtonAriaAttributes {\r\n  /** Accessible text label — overrides slot content for AT. */\r\n  'aria-label'?: string;\r\n  /** Signals that the button is performing an async operation. */\r\n  'aria-busy'?: 'true';\r\n  /** Used on <a> elements (which have no native disabled attribute). */\r\n  'aria-disabled'?: 'true';\r\n}\r\n\r\n/**\r\n * Assembles ARIA attributes for the inner interactive element.\r\n *\r\n * Decision table:\r\n * - `aria-label`    → set when `label` prop is provided (icon-only or supplemental name)\r\n * - `aria-busy`     → set when `loading` is true (announces async activity to AT)\r\n * - `aria-disabled` → set when disabled **and** the element is an <a> (links have no\r\n *                     native disabled — we simulate it with aria + tabIndex=-1)\r\n *\r\n * For native <button>: disabled/loading are expressed via the `disabled` HTML attribute\r\n * (handled in the calling component's render), so `aria-disabled` is not needed there.\r\n *\r\n * @param disabled — whether the button interaction is blocked\r\n * @param loading  — whether the button is performing an async operation\r\n * @param label    — accessible label string (optional)\r\n * @param isLink   — true when the component renders as <a> (href is provided)\r\n */\r\nexport const getButtonAriaAttributes = (\r\n  disabled: boolean,\r\n  loading: boolean,\r\n  label: string | undefined,\r\n  isLink: boolean,\r\n): ButtonAriaAttributes => {\r\n  const attrs: ButtonAriaAttributes = {};\r\n\r\n  if (label) {\r\n    attrs['aria-label'] = label;\r\n  }\r\n\r\n  if (loading) {\r\n    attrs['aria-busy'] = 'true';\r\n  }\r\n\r\n  // <a> elements have no native `disabled` attribute — express it via ARIA.\r\n  if (isLink && (disabled || loading)) {\r\n    attrs['aria-disabled'] = 'true';\r\n  }\r\n\r\n  return attrs;\r\n};\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\nimport type { ButtonSize, ButtonType, ButtonVariant } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from \"./diwa-button-styles\";\r\nimport { getButtonAriaAttributes } from \"./diwa-button-utils\";\r\n\r\n/**\r\n * @component diwa-button\r\n *\r\n * A fully encapsulated, accessible button primitive.\r\n * Renders as a native <button> (or <a> when `href` is supplied).\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-button-bg          Background color (primary variant default)\r\n *   --diwa-button-bg-hover    Hover background\r\n *   --diwa-button-color       Foreground / text color\r\n *   --diwa-button-radius      Border radius\r\n *   --diwa-button-height      Height for md size\r\n *   --diwa-button-height-sm   Height for sm size\r\n *   --diwa-button-height-lg   Height for lg size\r\n *   --diwa-button-padding-x   Horizontal padding for md/lg\r\n *   --diwa-button-padding-x-sm Horizontal padding for sm\r\n *\r\n * Usage:\r\n *   <diwa-button variant=\"primary\">Get Started</diwa-button>\r\n *   <diwa-button variant=\"secondary\" size=\"sm\" disabled>Cancel</diwa-button>\r\n *   <diwa-button href=\"/dashboard\" target=\"_blank\">Open Panel</diwa-button>\r\n *\r\n * @slot default — Button label content (text, icons, or mixed)\r\n */\r\n@Component({\r\n  tag: \"diwa-button\",\r\n  /**\r\n   * No styleUrl — styles are injected dynamically via getComponentCss().\r\n   * This follows the PDS CSS-in-JS pattern, enabling per-component theming\r\n   * and keeping style logic co-located with the component.\r\n   *\r\n   * shadow.delegatesFocus = true:\r\n   *   Forwards focus from the host element (<diwa-button>) to the first\r\n   *   focusable element inside the Shadow DOM (<button> or <a>).\r\n   *   This ensures keyboard navigation and :focus-visible work correctly\r\n   *   when host-app code calls .focus() on the custom element.\r\n   */\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaButton {\r\n  @Element() host!: HTMLDiwaButtonElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props — each @Prop generates a corresponding argType in Storybook\r\n  // and an HTML attribute on the custom element.\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Per-component theme override.\r\n   *\r\n   * Setting this reflects data-theme onto the host element, causing the light/dark\r\n   * token overrides in app.css to cascade into the Shadow DOM automatically.\r\n   * Mirrors the `theme` prop on every PDS component.\r\n   */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /** Visual style variant. */\r\n  @Prop({ reflect: true }) variant: ButtonVariant = \"primary\";\r\n\r\n  /** Size tier — controls height and padding. */\r\n  @Prop({ reflect: true }) size: ButtonSize = \"md\";\r\n\r\n  /**\r\n   * Native button type. Only applies when rendered as <button>\r\n   * (i.e., no `href` prop is set).\r\n   */\r\n  @Prop() type: ButtonType = \"button\";\r\n\r\n  /**\r\n   * Disabled state. Blocks all pointer and keyboard interaction.\r\n   * When rendered as <a>, sets aria-disabled instead of disabled\r\n   * (the `disabled` attribute is not valid on anchor elements).\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Loading state. Shows an inline spinner, disables the button,\r\n   * and sets aria-busy=\"true\" to communicate async activity to\r\n   * screen readers.\r\n   */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /**\r\n   * When set, the button renders as an <a> element (link semantics).\r\n   * Pair with `target` for external links.\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /** Link target — only meaningful when `href` is set. */\r\n  @Prop() target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\r\n\r\n  /** Native button name — submitted with form data. */\r\n  @Prop() name?: string;\r\n\r\n  /** Native button value — submitted with form data. */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * Accessible label. Use when the visible slot content is not\r\n   * descriptive enough (e.g., icon-only buttons).\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * When `true`, the default label slot is visually hidden so the button\r\n   * renders as a compact square (icon-only mode). The slot text is kept in\r\n   * the DOM for screen-reader accessible-name calculation.\r\n   *\r\n   * For best accessibility, always pair with the `label` prop **or** ensure\r\n   * the default slot contains descriptive text, so the button has a name.\r\n   *\r\n   * Usage:\r\n   *   <diwa-button hide-label label=\"Save\">\r\n   *     <svg slot=\"icon-start\">…</svg>\r\n   *   </diwa-button>\r\n   */\r\n  @Prop({ reflect: true }) hideLabel: boolean = false;\r\n\r\n  /**\r\n   * Lucide icon name in kebab-case (e.g. `\"star\"`, `\"arrow-right\"`), or `'none'`\r\n   * to show no icon. When set to any value other than `'none'`, renders a\r\n   * `<diwa-icon>` in the leading (icon-start) position.\r\n   *\r\n   * The `icon-start` slot still works alongside this prop — the prop-rendered\r\n   * icon comes first, followed by any slotted content.\r\n   */\r\n  @Prop() icon: string = 'none';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private get isInteractive(): boolean {\r\n    return !this.disabled && !this.loading;\r\n  }\r\n\r\n  private get iconSize(): number {\r\n    return this.size === 'sm' ? 16 : this.size === 'lg' ? 24 : 20;\r\n  }\r\n\r\n  private handleClick = (e: MouseEvent): void => {\r\n    if (!this.isInteractive) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n    }\r\n    // When interactive, allow the native click to retarget to the host element.\r\n    // Framework wrappers expose it as onClick (React) / @click (Vue) / (click) (Angular).\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    /**\r\n     * Render as <a> when href is provided (link semantics).\r\n     * Render as <button> for all interactive / form scenarios.\r\n     */\r\n    const isLink = !!this.href;\r\n    const Tag = isLink ? \"a\" : \"button\";\r\n\r\n    // Consolidate all ARIA attributes via the utility — mirrors PDS getButtonAriaAttributes()\r\n    const ariaAttrs = getButtonAriaAttributes(this.disabled, this.loading, this.label, isLink);\r\n\r\n    const commonProps = {\r\n      class: \"inner\",\r\n      onClick: this.handleClick,\r\n      ...ariaAttrs,\r\n    };\r\n\r\n    const buttonProps = isLink\r\n      ? {\r\n          href: this.href,\r\n          target: this.target,\r\n          rel: this.target === \"_blank\" ? \"noopener noreferrer\" : undefined,\r\n          // Disabled links have no native mechanism — suppress tab stop too\r\n          tabIndex: this.disabled || this.loading ? -1 : undefined,\r\n        }\r\n      : {\r\n          type: this.type,\r\n          name: this.name,\r\n          value: this.value,\r\n          disabled: this.disabled || this.loading,\r\n        };\r\n\r\n    return (\r\n      /**\r\n       * <Host> renders the outer custom element tag itself.\r\n       *\r\n       * data-theme is set from the `theme` prop so that the [data-theme=\"light\"]\r\n       * CSS variable overrides in app.css cascade into this Shadow DOM tree via\r\n       * custom property inheritance — no colour values are hardcoded here.\r\n       *\r\n       * Reflecting `variant` and `size` as attributes allows CSS consumers to\r\n       * target the host from outside:  diwa-button[variant=\"primary\"] { ... }\r\n       *\r\n       * The part=\"base\" exposes internals for ::part() in host-app stylesheets.\r\n       */\r\n      <Host\r\n        data-theme={this.theme}\r\n        role={isLink ? undefined : \"button\"}\r\n        aria-disabled={\r\n          (this.disabled || this.loading) && isLink ? \"true\" : undefined\r\n        }\r\n      >\r\n        {/* CSS-in-JS styles — injected into Shadow DOM, scoped automatically */}\r\n        <style innerHTML={getComponentCss(this.variant, this.size, this.disabled, this.loading)} />\r\n\r\n        <Tag\r\n          {...commonProps}\r\n          {...buttonProps}\r\n          part=\"base\" /* ::part(base) hook for consumers */\r\n        >\r\n          {/* Loading spinner — visually hidden from AT via aria-hidden */}\r\n          {this.loading && (\r\n            <span class=\"spinner\" aria-hidden=\"true\" part=\"spinner\" />\r\n          )}\r\n\r\n          {/* Leading icon slot — decorative; aria-hidden keeps AT focused on label */}\r\n          <span class=\"icon-start\" part=\"icon-start\" aria-hidden=\"true\">\r\n            {this.icon !== 'none' && !this.loading && <diwa-icon name={this.icon} size={this.iconSize} />}\r\n            <slot name=\"icon-start\" />\r\n          </span>\r\n\r\n          {/* Slot — content projection. Text, icons, or mixed content. */}\r\n          <span class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`} part=\"label\">\r\n            <slot />\r\n          </span>\r\n\r\n          {/* Trailing icon slot */}\r\n          <span class=\"icon-end\" part=\"icon-end\" aria-hidden=\"true\">\r\n            <slot name=\"icon-end\" />\r\n          </span>\r\n        </Tag>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oGA8BO,MAAMA,EAAkB,CAC7BC,EACAC,EACAC,EACAC,IACW,48CAuDTC,EAAc,k6IAgKdC,EAAsB,SAAU,SAAU,gBChNvC,MAAMC,EAA0B,CACrCC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAA8B,GAEpC,GAAIF,EAAO,CACTE,EAAM,cAAgBF,C,CAGxB,GAAID,EAAS,CACXG,EAAM,aAAe,M,CAIvB,GAAID,IAAWH,GAAYC,GAAU,CACnCG,EAAM,iBAAmB,M,CAG3B,OAAOA,CAAK,E,MClBDC,EAAU,MAfvB,WAAAC,CAAAC,G,UA8B2BC,KAAAC,MAAe,OAGfD,KAAAE,QAAyB,UAGzBF,KAAAG,KAAmB,KAMpCH,KAAAI,KAAmB,SAOFJ,KAAAR,SAAoB,MAOpBQ,KAAAP,QAAmB,MAoCnBO,KAAAK,UAAqB,MAUtCL,KAAAM,KAAe,OAcfN,KAAAO,YAAeC,IACrB,IAAKR,KAAKS,cAAe,CACvBD,EAAEE,iBACFF,EAAEG,iB,GAXN,iBAAYF,GACV,OAAQT,KAAKR,WAAaQ,KAAKP,O,CAGjC,YAAYmB,GACV,OAAOZ,KAAKG,OAAS,KAAO,GAAKH,KAAKG,OAAS,KAAO,GAAK,E,CAgB7D,MAAAU,GAKE,MAAMlB,IAAWK,KAAKc,KACtB,MAAMC,EAAMpB,EAAS,IAAM,SAG3B,MAAMqB,EAAYzB,EAAwBS,KAAKR,SAAUQ,KAAKP,QAASO,KAAKN,MAAOC,GAEnF,MAAMsB,EAAWC,OAAAC,OAAA,CACfC,MAAO,QACPC,QAASrB,KAAKO,aACXS,GAGL,MAAMM,EAAc3B,EAChB,CACEmB,KAAMd,KAAKc,KACXS,OAAQvB,KAAKuB,OACbC,IAAKxB,KAAKuB,SAAW,SAAW,sBAAwBE,UAExDC,SAAU1B,KAAKR,UAAYQ,KAAKP,SAAW,EAAIgC,WAEjD,CACErB,KAAMJ,KAAKI,KACXuB,KAAM3B,KAAK2B,KACXC,MAAO5B,KAAK4B,MACZpC,SAAUQ,KAAKR,UAAYQ,KAAKP,SAGtC,OAaEoC,EAACC,EAAI,CAAAC,IAAA,wDACS/B,KAAKC,MACjB+B,KAAMrC,EAAS8B,UAAY,SAAQ,iBAEhCzB,KAAKR,UAAYQ,KAAKP,UAAYE,EAAS,OAAS8B,WAIvDI,EAAA,SAAAE,IAAA,2CAAOE,UAAWjD,MAElB6C,EAACd,EAAGG,OAAAC,OAAA,CAAAY,IAAA,4CACEd,EACAK,EAAW,CACfY,KAAK,SAGJlC,KAAKP,SACJoC,EAAA,QAAAE,IAAA,2CAAMX,MAAM,UAAS,cAAa,OAAOc,KAAK,YAIhDL,EAAA,QAAAE,IAAA,2CAAMX,MAAM,aAAac,KAAK,aAAY,cAAa,QACpDlC,KAAKM,OAAS,SAAWN,KAAKP,SAAWoC,EAAA,aAAAE,IAAA,2CAAWJ,KAAM3B,KAAKM,KAAMH,KAAMH,KAAKY,WACjFiB,EAAA,QAAAE,IAAA,2CAAMJ,KAAK,gBAIbE,EAAA,QAAAE,IAAA,2CAAMX,MAAO,QAAQpB,KAAKK,UAAY,iBAAmB,KAAM6B,KAAK,SAClEL,EAAA,QAAAE,IAAA,8CAIFF,EAAA,QAAAE,IAAA,2CAAMX,MAAM,WAAWc,KAAK,WAAU,cAAa,QACjDL,EAAA,QAAAE,IAAA,2CAAMJ,KAAK,e","ignoreList":[]}

package/dist/diwa-components/p-0b6aa730.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as e,h as t,H as i,g as a}from"./p-ed4017f0.js";import{g as h}from"./p-35c7c864.js";import"./p-70bbb21a.js";const d=class{constructor(t){s(this,t);this.change=e(this,"change",7);this.input=e(this,"input",7);this.blur=e(this,"blur",3);this.focus=e(this,"focus",3);this._hasStart=false;this._hasEnd=false;this.label="";this.description="";this.message="";this.state="none";this.name="";this.value="";this.placeholder="";this.disabled=false;this.required=false;this.readonly=false;this.hideLabel=false;this.compact=false;this.theme="dark";this.handleInput=s=>{this.value=s.target.value;this.input.emit(this.value)};this.handleChange=s=>{this.value=s.target.value;this.change.emit(this.value)};this.handleBlur=s=>{this.blur.emit(s)};this.handleFocus=s=>{this.focus.emit(s)}}connectedCallback(){this._hasStart=!!this.el.querySelector('[slot="start"]');this._hasEnd=!!this.el.querySelector('[slot="end"]')}render(){const s="input";const e="desc";const a="msg";return t(i,{key:"cf5f9f2d3ba5bc48d23f13d7074a5cc785f5c021","data-theme":this.theme},t("style",{key:"b7102ec7511e08b137ea2efc422f5b36b81597a0",innerHTML:h(this.state,this.disabled,this.readonly,this.compact,this._hasStart,this._hasEnd,false)}),t("div",{key:"622cf8be5e1478189ccea7214b02fadd9a07bed2",class:"root"},!this.hideLabel&&this.label&&t("div",{key:"d296ac0ab02e8f84ed217af9b01ae2349caa1a18",class:"label-row"},t("label",{key:"44803400cf86e60c59e16ba6bebea76182eabdad",class:"label",htmlFor:s},this.label,this.required&&t("span",{key:"2adf1391b392a6a7b95f6655aa2804980cf05ccf",class:"required","aria-hidden":"true"}," *")),t("slot",{key:"1b379b6699660a72369c9e55a1956df572c14397",name:"label-after"})),t("div",{key:"39224f82800bb8e99bdd53995738526ae65621a4",class:"input-wrapper"},this._hasStart&&t("div",{key:"a867100568d568e48c983665bbd5b061166c4b55",class:"slot-start"},t("slot",{key:"64766d4b417983edb5c36debaa95d7c456b56082",name:"start"})),t("input",{key:"adf19b770e6b6ce184988352faa26b75a8e3789b",id:s,class:"input",type:"text",name:this.name||undefined,value:this.value,placeholder:this.placeholder||undefined,disabled:this.disabled,required:this.required,readOnly:this.readonly,maxLength:this.maxLength,minLength:this.minLength,spellcheck:this.spellCheck,autocomplete:this.autoComplete,"aria-label":this.hideLabel&&this.label?this.label:undefined,"aria-invalid":this.state==="error"?"true":undefined,"aria-required":this.required?"true":undefined,"aria-describedby":this.message?a:this.description?e:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus}),this._hasEnd&&t("div",{key:"2f1e8a238c4a0435b0045b3cecb2949851481802",class:"slot-end"},t("slot",{key:"baf200515708d548e22ea3010e3a5f08081c2eaf",name:"end"}))),!this.message&&this.description&&t("p",{key:"b0e064fb6f48eb930f965c79cf04ac403653b509",id:e,class:"description"},this.description),this.message&&t("p",{key:"d8195e8edbe19a8674dcf067ed5e9d316d204b31",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get el(){return a(this)}};export{d as diwa_input_text};
-//# sourceMappingURL=p-0b6aa730.entry.js.map

package/dist/diwa-components/p-0b6aa730.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DiwaInputText","constructor","hostRef","this","_hasStart","_hasEnd","label","description","message","state","name","value","placeholder","disabled","required","readonly","hideLabel","compact","theme","handleInput","e","target","input","emit","handleChange","change","handleBlur","blur","handleFocus","focus","connectedCallback","el","querySelector","render","inputId","descId","msgId","h","Host","key","innerHTML","getComponentCss","class","htmlFor","id","type","undefined","readOnly","maxLength","minLength","spellcheck","spellCheck","autocomplete","autoComplete","onInput","onChange","onBlur","onFocus"],"sources":["src/components/diwa-input-text/diwa-input-text.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-text-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-text',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputText {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  // ── Shared props ───────────────────────────────────────────────────────\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  // ── Text-specific props ─────────────────────────────────────────────────\r\n\r\n  @Prop() maxLength?: number;\r\n  @Prop() minLength?: number;\r\n  @Prop() spellCheck?: boolean;\r\n\r\n  // ── Events ─────────────────────────────────────────────────────────────\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  // ── Private ────────────────────────────────────────────────────────────\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"text\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              maxLength={this.maxLength}\r\n              minLength={this.minLength}\r\n              spellcheck={this.spellCheck}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-0c2776f7.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as n,H as t,g as s}from"./p-ed4017f0.js";import{a}from"./p-70bbb21a.js";const o=(i,e,n)=>{const t=i==="error"?"var(--diwa-notification-error)":i==="success"?"var(--diwa-notification-success)":"var(--diwa-input-border, var(--diwa-border))";const s=i==="error"?"var(--diwa-notification-error)":i==="success"?"var(--diwa-notification-success)":"var(--diwa-text-secondary)";const o=n?"36px":"44px";return`\n    :host {\n      display: inline-block;\n      font-family: var(--diwa-font-family-base);\n      outline: none;\n    }\n    :host([hidden]) {\n      display: none;\n    }\n    .root {\n      display: flex;\n      flex-direction: column;\n      gap: var(--diwa-space-2);\n    }\n    .label-row {\n      display: flex;\n      align-items: baseline;\n      gap: var(--diwa-space-1);\n    }\n    .label {\n      font-size: var(--diwa-font-size-sm);\n      font-weight: var(--diwa-font-weight-semibold);\n      color: var(--diwa-text-secondary);\n      line-height: var(--diwa-line-height-normal);\n    }\n    .required {\n      color: var(--diwa-notification-error);\n    }\n    .boxes {\n      display: flex;\n      gap: var(--diwa-space-3);\n    }\n    .box {\n      width: ${o};\n      height: ${o};\n      padding: 0;\n      text-align: center;\n      font-family: var(--diwa-font-family-base);\n      font-size: ${n?"var(--diwa-font-size-base)":"var(--diwa-font-size-lg)"};\n      font-weight: var(--diwa-font-weight-semibold);\n      color: var(--diwa-text-primary);\n      background: var(--diwa-bg-input);\n      border: var(--diwa-border-width-thin) solid ${t};\n      border-radius: var(--diwa-radius-md);\n      outline: none;\n      transition: border-color var(--diwa-transition-base);\n      box-sizing: border-box;\n      ${e?"opacity: 0.5; pointer-events: none;":""}\n    }\n    .box:focus {\n      border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));\n    }\n    .description {\n      font-size: var(--diwa-font-size-sm);\n      color: var(--diwa-text-secondary);\n      line-height: var(--diwa-line-height-normal);\n      margin: 0;\n    }\n    .message {\n      font-size: var(--diwa-font-size-sm);\n      color: ${s};\n      line-height: var(--diwa-line-height-normal);\n      margin: 0;\n    }\n\n    ${a("input")}\n  `};const r=class{constructor(n){i(this,n);this.update=e(this,"update",1);this.label="";this.description="";this.state="none";this.message="";this.length=4;this.value="";this.type="number";this.required=false;this.disabled=false;this.compact=false;this.hideLabel=false;this.theme="dark";this.handleInput=(i,e)=>{const n=i.target;const t=n.value.slice(-1);if(this.type==="number"&&t&&!/^\d$/.test(t)){n.value="";return}n.value=t;if(t){const i=this.getBoxes();if(e<i.length-1){i[e+1].focus();i[e+1].select()}}this.emitUpdate()};this.handleKeyDown=(i,e)=>{const n=this.getBoxes();const t=i.target;if(i.key==="Backspace"&&!t.value&&e>0){n[e-1].focus();n[e-1].select()}else if(i.key==="ArrowLeft"&&e>0){n[e-1].focus()}else if(i.key==="ArrowRight"&&e<n.length-1){n[e+1].focus()}};this.handlePaste=i=>{var e,n;i.preventDefault();const t=(n=(e=i.clipboardData)===null||e===void 0?void 0:e.getData("text"))!==null&&n!==void 0?n:"";const s=this.type==="number"?t.replace(/\D/g,""):t;const a=this.getBoxes();s.slice(0,this.length).split("").forEach(((i,e)=>{if(a[e])a[e].value=i}));const o=Math.min(s.length,this.length)-1;if(o>=0){a[o].focus();a[o].select()}this.emitUpdate()}}getBoxes(){var i,e;return Array.from((e=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.querySelectorAll(".box"))!==null&&e!==void 0?e:[])}emitUpdate(){const i=this.getBoxes();const e=i.map((i=>i.value)).join("");const n=e.length===this.length&&!e.includes("");this.update.emit({value:e,isComplete:n})}render(){const i=Math.max(1,Math.min(6,this.length));const e=this.value.padEnd(i,"").slice(0,i);const s="desc";const a="msg";return n(t,{key:"42b316cecb07dd8f38bc0dfe35f2d660071c9d0a","data-theme":this.theme},n("style",{key:"f621d085b00e66aa985160e59df85cd15363c1e6",innerHTML:o(this.state,this.disabled,this.compact)}),n("div",{key:"46f2f396909e1378f6ea3c6175e9c250888fb7f2",class:"root"},!this.hideLabel&&this.label&&n("div",{key:"7a0ed287315f44d87b3b2285799872b031ee85d2",class:"label-row"},n("span",{key:"677e5c6bbfdf9a1fac7ed2357f9b035bbf058c23",class:"label"},this.label,this.required&&n("span",{key:"7acfcc3a89f97eada2c483269828e51390ece4f1",class:"required","aria-hidden":"true"}," *"))),n("div",{key:"b89f8ac92e1f5818fff9e005bda7ae6860fe3ea3",class:"boxes",role:"group","aria-label":this.hideLabel&&this.label?this.label:undefined},Array.from({length:i}).map(((t,o)=>{var r;return n("input",{key:o,class:"box",type:this.type==="password"?"password":"text",inputMode:this.type==="number"?"numeric":"text",maxLength:1,value:(r=e[o])!==null&&r!==void 0?r:"",disabled:this.disabled,required:this.required&&o===0,"aria-label":`Digit ${o+1} of ${i}`,"aria-describedby":o===0?this.message?a:this.description?s:undefined:undefined,onInput:i=>this.handleInput(i,o),onKeyDown:i=>this.handleKeyDown(i,o),onPaste:o===0?this.handlePaste:undefined,onFocus:i=>i.target.select(),autocomplete:o===0?"one-time-code":"off"})}))),!this.message&&this.description&&n("p",{key:"77dedd816520995799988a9dcdfa5cc2019f76ce",id:s,class:"description"},this.description),this.message&&n("p",{key:"886e7f76acc8c15e965bd680ddedc6b100939f0d",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get host(){return s(this)}};export{r as diwa_pin_code};
-//# sourceMappingURL=p-0c2776f7.entry.js.map

package/dist/diwa-components/p-0c2776f7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","state","disabled","compact","borderColor","messageColor","boxSize","getReducedMotionStyle","DiwaPinCode","constructor","hostRef","this","label","description","message","length","value","type","required","hideLabel","theme","handleInput","e","index","input","target","char","slice","test","boxes","getBoxes","focus","select","emitUpdate","handleKeyDown","key","handlePaste","preventDefault","text","_b","_a","clipboardData","getData","digits","replace","split","forEach","i","lastFilled","Math","min","Array","from","host","shadowRoot","querySelectorAll","map","b","join","isComplete","includes","update","emit","render","safeLength","max","valueChars","padEnd","descId","msgId","h","Host","innerHTML","class","role","undefined","_","inputMode","maxLength","onInput","onKeyDown","onPaste","onFocus","autocomplete","id"],"sources":["src/components/diwa-pin-code/diwa-pin-code-styles.ts","src/components/diwa-pin-code/diwa-pin-code.tsx"],"sourcesContent":["import type { InputFieldState } from '../diwa-input/types';\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n  state: InputFieldState,\r\n  disabled: boolean,\r\n  compact: boolean,\r\n): string => {\r\n  const borderColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-input-border, var(--diwa-border))';\r\n\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  const boxSize = compact ? '36px' : '44px';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-block;\r\n      font-family: var(--diwa-font-family-base);\r\n      outline: none;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .root {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--diwa-space-2);\r\n    }\r\n    .label-row {\r\n      display: flex;\r\n      align-items: baseline;\r\n      gap: var(--diwa-space-1);\r\n    }\r\n    .label {\r\n      font-size: var(--diwa-font-size-sm);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n    }\r\n    .required {\r\n      color: var(--diwa-notification-error);\r\n    }\r\n    .boxes {\r\n      display: flex;\r\n      gap: var(--diwa-space-3);\r\n    }\r\n    .box {\r\n      width: ${boxSize};\r\n      height: ${boxSize};\r\n      padding: 0;\r\n      text-align: center;\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${compact ? 'var(--diwa-font-size-base)' : 'var(--diwa-font-size-lg)'};\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-primary);\r\n      background: var(--diwa-bg-input);\r\n      border: var(--diwa-border-width-thin) solid ${borderColor};\r\n      border-radius: var(--diwa-radius-md);\r\n      outline: none;\r\n      transition: border-color var(--diwa-transition-base);\r\n      box-sizing: border-box;\r\n      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}\r\n    }\r\n    .box:focus {\r\n      border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));\r\n    }\r\n    .description {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n    .message {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: ${messageColor};\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('input')}\r\n  `;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { PinCodeType, PinCodeUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-pin-code-styles';\r\n\r\n/**\r\n * @controlled {\"props\": [\"value\"], \"event\": \"update\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-pin-code',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaPinCode {\r\n  @Element() host!: HTMLElement;\r\n\r\n  /** Visible label text. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Supplementary description below the label. */\r\n  @Prop() description: string = '';\r\n\r\n  /** Validation state. */\r\n  @Prop() state: InputFieldState = 'none';\r\n\r\n  /** Feedback message. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Number of input boxes (1–6). */\r\n  @Prop() length: number = 4;\r\n\r\n  /** Current value string. Length should match the length prop. */\r\n  @Prop() value: string = '';\r\n\r\n  /** Input type — \"number\" restricts input to digits; \"password\" masks the value. */\r\n  @Prop() type: PinCodeType = 'number';\r\n\r\n  /** Whether the pin code is required. */\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n\r\n  /** Disables all input boxes. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Renders compact input boxes. */\r\n  @Prop() compact: boolean = false;\r\n\r\n  /** Hides the visible label while preserving it as accessible name. */\r\n  @Prop() hideLabel: boolean = false;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted when any box value changes. */\r\n  @Event({ bubbles: false, composed: false }) update!: EventEmitter<PinCodeUpdateEventDetail>;\r\n\r\n  private getBoxes(): HTMLInputElement[] {\r\n    return Array.from(this.host.shadowRoot?.querySelectorAll('.box') ?? []) as HTMLInputElement[];\r\n  }\r\n\r\n  private emitUpdate(): void {\r\n    const boxes = this.getBoxes();\r\n    const value = boxes.map((b) => b.value).join('');\r\n    const isComplete = value.length === this.length && !value.includes('');\r\n    this.update.emit({ value, isComplete });\r\n  }\r\n\r\n  private handleInput = (e: Event, index: number): void => {\r\n    const input = e.target as HTMLInputElement;\r\n    const char = input.value.slice(-1);\r\n\r\n    if (this.type === 'number' && char && !/^\\d$/.test(char)) {\r\n      input.value = '';\r\n      return;\r\n    }\r\n\r\n    input.value = char;\r\n\r\n    if (char) {\r\n      const boxes = this.getBoxes();\r\n      if (index < boxes.length - 1) {\r\n        boxes[index + 1].focus();\r\n        boxes[index + 1].select();\r\n      }\r\n    }\r\n\r\n    this.emitUpdate();\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent, index: number): void => {\r\n    const boxes = this.getBoxes();\r\n    const input = e.target as HTMLInputElement;\r\n\r\n    if (e.key === 'Backspace' && !input.value && index > 0) {\r\n      boxes[index - 1].focus();\r\n      boxes[index - 1].select();\r\n    } else if (e.key === 'ArrowLeft' && index > 0) {\r\n      boxes[index - 1].focus();\r\n    } else if (e.key === 'ArrowRight' && index < boxes.length - 1) {\r\n      boxes[index + 1].focus();\r\n    }\r\n  };\r\n\r\n  private handlePaste = (e: ClipboardEvent): void => {\r\n    e.preventDefault();\r\n    const text = e.clipboardData?.getData('text') ?? '';\r\n    const digits = this.type === 'number' ? text.replace(/\\D/g, '') : text;\r\n    const boxes = this.getBoxes();\r\n\r\n    digits.slice(0, this.length).split('').forEach((char, i) => {\r\n      if (boxes[i]) boxes[i].value = char;\r\n    });\r\n\r\n    const lastFilled = Math.min(digits.length, this.length) - 1;\r\n    if (lastFilled >= 0) {\r\n      boxes[lastFilled].focus();\r\n      boxes[lastFilled].select();\r\n    }\r\n\r\n    this.emitUpdate();\r\n  };\r\n\r\n  render() {\r\n    const safeLength = Math.max(1, Math.min(6, this.length));\r\n    const valueChars = this.value.padEnd(safeLength, '').slice(0, safeLength);\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.compact)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <span class=\"label\">\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </span>\r\n            </div>\r\n          )}\r\n          <div\r\n            class=\"boxes\"\r\n            role=\"group\"\r\n            aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n          >\r\n            {Array.from({ length: safeLength }).map((_, i) => (\r\n              <input\r\n                key={i}\r\n                class=\"box\"\r\n                type={this.type === 'password' ? 'password' : 'text'}\r\n                inputMode={this.type === 'number' ? 'numeric' : 'text'}\r\n                maxLength={1}\r\n                value={valueChars[i] ?? ''}\r\n                disabled={this.disabled}\r\n                required={this.required && i === 0}\r\n                aria-label={`Digit ${i + 1} of ${safeLength}`}\r\n                aria-describedby={i === 0 ? (this.message ? msgId : this.description ? descId : undefined) : undefined}\r\n                onInput={(e) => this.handleInput(e, i)}\r\n                onKeyDown={(e) => this.handleKeyDown(e, i)}\r\n                onPaste={i === 0 ? this.handlePaste : undefined}\r\n                onFocus={(e) => (e.target as HTMLInputElement).select()}\r\n                autocomplete={i === 0 ? 'one-time-code' : 'off'}\r\n              />\r\n            ))}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-11aae5f1.entry.js

@@ -1,2 +0,0 @@
-import{r as n,h as e,H as i}from"./p-ed4017f0.js";import{a as r}from"./p-70bbb21a.js";import{L as s}from"./p-ac8e14be.js";const t=()=>`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    align-self: center;\n    width: var(--diwa-spinner-size-md);\n    height: var(--diwa-spinner-size-md);\n  }\n\n  :host([size="sm"]) {\n    width: var(--diwa-spinner-size-sm);\n    height: var(--diwa-spinner-size-sm);\n  }\n\n  :host([size="lg"]) {\n    width: var(--diwa-spinner-size-lg);\n    height: var(--diwa-spinner-size-lg);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .glyph {\n    display: block;\n    width: 100%;\n    height: 100%;\n    color: var(--diwa-spinner-color, currentColor);\n    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;\n    transform-origin: center;\n  }\n\n  @keyframes diwa-spinner-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  ${r(".glyph")}\n`;var a;function o(n){return n.map((([n,e])=>{const i=Object.entries(e).map((([n,e])=>`${n}="${e}"`)).join(" ");return`<${n} ${i}/>`})).join("")}const d=o((a=s)!==null&&a!==void 0?a:[]);const h=class{constructor(e){n(this,e);this.size="md";this.theme="dark";this.label="Loading"}componentDidRender(){if(this.svgEl){this.svgEl.innerHTML=d}}render(){return e(i,{key:"5a130b11797c45cf6c3e9d1e1493f35cbef40ed6",role:"status","aria-label":this.label,"data-theme":this.theme},e("style",{key:"b1f1c14a660db1ec56afbf814c6bfc5b21e4cf24",innerHTML:t()}),e("svg",{key:"3e30e5ce78a52ba9904f808641fda6b0a3f5131f",ref:n=>this.svgEl=n,class:"glyph","aria-hidden":"true",part:"ring",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))}};export{h as diwa_spinner};
-//# sourceMappingURL=p-11aae5f1.entry.js.map

package/dist/diwa-components/p-11aae5f1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","getReducedMotionStyle","toInnerSvg","nodes","map","tag","attrs","attrStr","Object","entries","k","v","join","loaderCircleSvg","_a","icons.LoaderCircle","DiwaSpinner","constructor","hostRef","this","size","theme","label","componentDidRender","svgEl","innerHTML","render","h","Host","key","role","ref","el","class","part","xmlns","viewBox","fill","stroke"],"sources":["src/components/diwa-spinner/diwa-spinner-styles.ts","src/components/diwa-spinner/diwa-spinner.tsx"],"sourcesContent":["import { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    align-self: center;\r\n    width: var(--diwa-spinner-size-md);\r\n    height: var(--diwa-spinner-size-md);\r\n  }\r\n\r\n  :host([size=\"sm\"]) {\r\n    width: var(--diwa-spinner-size-sm);\r\n    height: var(--diwa-spinner-size-sm);\r\n  }\r\n\r\n  :host([size=\"lg\"]) {\r\n    width: var(--diwa-spinner-size-lg);\r\n    height: var(--diwa-spinner-size-lg);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .glyph {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    color: var(--diwa-spinner-color, currentColor);\r\n    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;\r\n    transform-origin: center;\r\n  }\r\n\r\n  @keyframes diwa-spinner-spin {\r\n    to {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n\r\n  ${getReducedMotionStyle('.glyph')}\r\n`;\r\n","import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport { icons } from 'lucide';\r\nimport type { SpinnerSize } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from './diwa-spinner-styles';\r\n\r\ntype IconNode = ReadonlyArray<readonly [string, Record<string, string>]>;\r\n\r\nfunction toInnerSvg(nodes: IconNode): string {\r\n  return nodes\r\n    .map(([tag, attrs]) => {\r\n      const attrStr = Object.entries(attrs)\r\n        .map(([k, v]) => `${k}=\"${v}\"`)\r\n        .join(' ');\r\n      return `<${tag} ${attrStr}/>`;\r\n    })\r\n    .join('');\r\n}\r\n\r\nconst loaderCircleSvg = toInnerSvg((icons as Record<string, IconNode>).LoaderCircle ?? []);\r\n\r\n/**\r\n * @component diwa-spinner\r\n *\r\n * An animated loading indicator based on a Lucide circular spinner glyph.\r\n * Communicates asynchronous activity to both sighted users and screen readers\r\n * via role=\"status\" and an accessible label.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-spinner-size-sm    Diameter for the sm tier (default 14px)\r\n *   --diwa-spinner-size-md    Diameter for the md tier (default 16px)\r\n *   --diwa-spinner-size-lg    Diameter for the lg tier (default 20px)\r\n *   --diwa-spinner-color      Spinner stroke colour (defaults to currentColor)\r\n *\r\n * Usage:\r\n *   <diwa-spinner></diwa-spinner>\r\n *   <diwa-spinner size=\"lg\" label=\"Saving changes…\"></diwa-spinner>\r\n *\r\n * Parity: mirrors stateless/stateful spinner behavior with consistent\n * aria-label propagation and size variants.\n */\r\n@Component({\r\n  tag: \"diwa-spinner\",\r\n  shadow: true,\r\n})\r\nexport class DiwaSpinner {\r\n  private svgEl?: SVGSVGElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Size tier — controls diameter of the spinner ring. */\r\n  @Prop({ reflect: true }) size: SpinnerSize = \"md\";\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /**\r\n   * Accessible label announced by screen readers.\r\n   * Defaults to \"Loading\" when omitted.\r\n   */\r\n  @Prop() label: string = \"Loading\";\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  componentDidRender() {\r\n    if (this.svgEl) {\r\n      this.svgEl.innerHTML = loaderCircleSvg;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      /**\r\n       * role=\"status\" on the Host allows screen readers to announce\r\n       * when the spinner appears without stealing focus (live region,\r\n       * polite by default). aria-label provides the announcement text.\r\n       */\r\n      <Host role=\"status\" aria-label={this.label} data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <svg\r\n          ref={(el) => (this.svgEl = el as SVGSVGElement)}\r\n          class=\"glyph\"\r\n          aria-hidden=\"true\"\r\n          part=\"ring\"\r\n          xmlns=\"http://www.w3.org/2000/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        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0HAEO,MAAMA,EAAkB,IAAc,80BAwCzCC,EAAsB,c,MClC1B,SAASC,EAAWC,GAClB,OAAOA,EACJC,KAAI,EAAEC,EAAKC,MACV,MAAMC,EAAUC,OAAOC,QAAQH,GAC5BF,KAAI,EAAEM,EAAGC,KAAO,GAAGD,MAAMC,OACzBC,KAAK,KACR,MAAO,IAAIP,KAAOE,KAAW,IAE9BK,KAAK,GACV,CAEA,MAAMC,EAAkBX,GAAWY,EAACC,KAA+C,MAAAD,SAAA,EAAAA,EAAI,I,MA0B1EE,EAAW,MAJxB,WAAAC,CAAAC,G,UAY2BC,KAAAC,KAAoB,KAGpBD,KAAAE,MAAe,OAMhCF,KAAAG,MAAgB,S,CAMxB,kBAAAC,GACE,GAAIJ,KAAKK,MAAO,CACdL,KAAKK,MAAMC,UAAYZ,C,EAI3B,MAAAa,GACE,OAMEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SAAQ,aAAaX,KAAKG,MAAK,aAAcH,KAAKE,OAC3DM,EAAA,SAAAE,IAAA,2CAAOJ,UAAWzB,MAClB2B,EAAA,OAAAE,IAAA,2CACEE,IAAMC,GAAQb,KAAKK,MAAQQ,EAC3BC,MAAM,QAAO,cACD,OACZC,KAAK,OACLC,MAAM,6BACNC,QAAQ,YACRC,KAAK,OACLC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,kBACN,U","ignoreList":[]}

package/dist/diwa-components/p-13aeda0b.entry.js

@@ -1,2 +0,0 @@
-import{r as n,h as e,H as t}from"./p-ed4017f0.js";const i=n=>{const e=n==="vertical";return`\n\n  /* ── Host ─────────────────────────────────────────────────────────── */\n\n  :host {\n    display: ${e?"inline-flex":"block"};\n    ${e?"align-self: stretch;":"width: 100%;"}\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Rule ─────────────────────────────────────────────────────────── */\n\n  .root {\n    display: block;\n    margin: 0;\n    padding: 0;\n    border: none;\n    background-color: var(--diwa-border);\n    ${e?`width: var(--diwa-border-width-thin);\n    height: 100%;\n    min-height: 1em;`:`width: 100%;\n    height: var(--diwa-border-width-thin);`}\n  }\n`};const r=class{constructor(e){n(this,e);this.theme="dark";this.orientation="horizontal"}render(){return e(t,{key:"ff0589655d6b5e847b3600fd6ba6cf0dd3b247ac","data-theme":this.theme},e("style",{key:"38a30ff84f63f0825702480f686b49ec8d743d27",innerHTML:i(this.orientation)}),e("hr",{key:"17df4c81b9b79b33f794a2f5ea111107b66ae7ce",class:"root",role:"separator","aria-orientation":this.orientation}))}};export{r as diwa_divider};
-//# sourceMappingURL=p-13aeda0b.entry.js.map

package/dist/diwa-components/p-13aeda0b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getComponentCss","orientation","isVertical","DiwaDivider","constructor","hostRef","this","theme","render","h","Host","key","innerHTML","class","role"],"sources":["src/components/diwa-divider/diwa-divider-styles.ts","src/components/diwa-divider/diwa-divider.tsx"],"sourcesContent":["import type { DividerOrientation } from './types';\r\n\r\nexport const getComponentCss = (orientation: DividerOrientation): string => {\r\n  const isVertical = orientation === 'vertical';\r\n\r\n  return `\r\n\r\n  /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: ${isVertical ? 'inline-flex' : 'block'};\r\n    ${isVertical ? 'align-self: stretch;' : 'width: 100%;'}\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Rule ─────────────────────────────────────────────────────────── */\r\n\r\n  .root {\r\n    display: block;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: none;\r\n    background-color: var(--diwa-border);\r\n    ${isVertical\r\n      ? `width: var(--diwa-border-width-thin);\r\n    height: 100%;\r\n    min-height: 1em;`\r\n      : `width: 100%;\r\n    height: var(--diwa-border-width-thin);`}\r\n  }\r\n`;\r\n};\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { DividerOrientation } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-divider-styles';\r\n\r\n/**\r\n * @component diwa-divider\r\n *\r\n * A purely presentational separator line. Renders a native `<hr>` element\r\n * styled via CSS-in-JS. Supports horizontal (default) and vertical orientations.\r\n *\r\n * Accessibility:\r\n *   - Renders as `role=\"separator\"` (implicit from `<hr>`)\r\n *   - `aria-orientation` is set automatically from the `orientation` prop\r\n *   - Non-interactive — no focus, no keyboard handling\r\n *\r\n * Usage:\r\n *   <!-- Horizontal (default) -->\r\n *   <diwa-divider />\r\n *\r\n *   <!-- Vertical — requires a flex or grid parent with a defined height -->\r\n *   <div style=\"display:flex; height:40px\">\r\n *     <span>Left</span>\r\n *     <diwa-divider orientation=\"vertical\" />\r\n *     <span>Right</span>\r\n *   </div>\r\n */\r\n@Component({\r\n  tag: 'diwa-divider',\r\n  shadow: true,\r\n})\r\nexport class DiwaDivider {\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Orientation of the divider line.\r\n   * - `'horizontal'` (default) — a full-width 1 px horizontal rule.\r\n   * - `'vertical'` — a 1 px vertical rule that stretches to the parent's height.\r\n   *   The parent must be a flex or grid container with a defined height.\r\n   */\r\n  @Prop({ reflect: true }) orientation: DividerOrientation = 'horizontal';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.orientation)} />\r\n        <hr\r\n          class=\"root\"\r\n          role=\"separator\"\r\n          aria-orientation={this.orientation}\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAEO,MAAMA,EAAmBC,IAC9B,MAAMC,EAAaD,IAAgB,WAEnC,MAAO,8GAKMC,EAAa,cAAgB,iBACtCA,EAAa,uBAAyB,gTAgBtCA,EACE,iFAGA,mEAGP,E,MCHYC,EAAW,MAJxB,WAAAC,CAAAC,G,UAU2BC,KAAAC,MAAe,OAQfD,KAAAL,YAAkC,Y,CAM3D,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAaL,KAAKC,OACrBE,EAAA,SAAAE,IAAA,2CAAOC,UAAWZ,EAAgBM,KAAKL,eACvCQ,EAAA,MAAAE,IAAA,2CACEE,MAAM,OACNC,KAAK,YAAW,mBACER,KAAKL,c","ignoreList":[]}

package/dist/diwa-components/p-145e5281.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as e,h as t,H as i,g as a}from"./p-ed4017f0.js";import{g as d}from"./p-35c7c864.js";import"./p-70bbb21a.js";const h=class{constructor(t){s(this,t);this.change=e(this,"change",7);this.input=e(this,"input",7);this.blur=e(this,"blur",3);this.focus=e(this,"focus",3);this._hasStart=false;this._hasEnd=false;this.label="";this.description="";this.message="";this.state="none";this.name="";this.value="";this.placeholder="";this.disabled=false;this.required=false;this.readonly=false;this.hideLabel=false;this.compact=false;this.theme="dark";this.handleInput=s=>{this.value=s.target.value;this.input.emit(this.value)};this.handleChange=s=>{this.value=s.target.value;this.change.emit(this.value)};this.handleBlur=s=>{this.blur.emit(s)};this.handleFocus=s=>{this.focus.emit(s)}}connectedCallback(){this._hasStart=!!this.el.querySelector('[slot="start"]');this._hasEnd=!!this.el.querySelector('[slot="end"]')}render(){const s="input";const e="desc";const a="msg";return t(i,{key:"b4f8682b78caaac783e5ad162de7b478b7d4fc23","data-theme":this.theme},t("style",{key:"f9923a8baab1f25596ecae28d5ab0baeef994a68",innerHTML:d(this.state,this.disabled,this.readonly,this.compact,this._hasStart,this._hasEnd,false)}),t("div",{key:"c046d583174983807353668a326ce4523add50b0",class:"root"},!this.hideLabel&&this.label&&t("div",{key:"801af990d4911d2a18a75f9b9928370104d57045",class:"label-row"},t("label",{key:"aa4517f5547742454601b0294e43e44cddfd6c49",class:"label",htmlFor:s},this.label,this.required&&t("span",{key:"4e2cbbbd13de2c0ca16c07c367793dc9c02f79e4",class:"required","aria-hidden":"true"}," *")),t("slot",{key:"5dea4480281cbcba2ffc13ab76dd5976f4f25a58",name:"label-after"})),t("div",{key:"adcc078f982ce097689f7d0a0625536f4ec3168c",class:"input-wrapper"},this._hasStart&&t("div",{key:"6b9c6841af7da338cf3fa0eb4ee5393e276ec79b",class:"slot-start"},t("slot",{key:"6b270d34c9d90240c7c1d31343ca63e3f40b3388",name:"start"})),t("input",{key:"1d57c501e13aedc773338ad3b33634120db4f0e6",id:s,class:"input",type:"number",name:this.name||undefined,value:this.value,placeholder:this.placeholder||undefined,disabled:this.disabled,required:this.required,readOnly:this.readonly,min:this.min!==undefined?String(this.min):undefined,max:this.max!==undefined?String(this.max):undefined,step:this.step!==undefined?String(this.step):undefined,autocomplete:this.autoComplete,"aria-label":this.hideLabel&&this.label?this.label:undefined,"aria-invalid":this.state==="error"?"true":undefined,"aria-required":this.required?"true":undefined,"aria-describedby":this.message?a:this.description?e:undefined,onInput:this.handleInput,onChange:this.handleChange,onBlur:this.handleBlur,onFocus:this.handleFocus}),this._hasEnd&&t("div",{key:"9400a3f7dd14cd75b4429137da53949ac1d113eb",class:"slot-end"},t("slot",{key:"2c44c8873d404c5693d38e4beb2878ebe4a90be9",name:"end"}))),!this.message&&this.description&&t("p",{key:"59028396a49bf08492497f792af3a74f45360366",id:e,class:"description"},this.description),this.message&&t("p",{key:"3117e747339600533d27520fd7062dec5d116d14",id:a,class:"message"},this.message)))}static get delegatesFocus(){return true}get el(){return a(this)}};export{h as diwa_input_number};
-//# sourceMappingURL=p-145e5281.entry.js.map

package/dist/diwa-components/p-145e5281.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DiwaInputNumber","constructor","hostRef","this","_hasStart","_hasEnd","label","description","message","state","name","value","placeholder","disabled","required","readonly","hideLabel","compact","theme","handleInput","e","target","input","emit","handleChange","change","handleBlur","blur","handleFocus","focus","connectedCallback","el","querySelector","render","inputId","descId","msgId","h","Host","key","innerHTML","getComponentCss","class","htmlFor","id","type","undefined","readOnly","min","String","max","step","autocomplete","autoComplete","onInput","onChange","onBlur","onFocus"],"sources":["src/components/diwa-input-number/diwa-input-number.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-input-number-styles';\r\n\r\n@Component({\r\n  tag: 'diwa-input-number',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaInputNumber {\r\n  @Element() el!: HTMLElement;\r\n  @State() private _hasStart = false;\r\n  @State() private _hasEnd = false;\r\n\r\n  @Prop() label: string = '';\r\n  @Prop() description: string = '';\r\n  @Prop() message: string = '';\r\n  @Prop() state: InputFieldState = 'none';\r\n  @Prop() name: string = '';\r\n  @Prop({ mutable: true, reflect: false }) value: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  @Prop() hideLabel: boolean = false;\r\n  @Prop() compact: boolean = false;\r\n  @Prop() autoComplete?: string;\r\n  @Prop() theme: Theme = 'dark';\r\n\r\n  /** Minimum allowed value. */\r\n  @Prop() min?: number;\r\n  /** Maximum allowed value. */\r\n  @Prop() max?: number;\r\n  /** Step increment. */\r\n  @Prop() step?: number;\r\n\r\n  @Event({ bubbles: true }) change!: EventEmitter<string>;\r\n  @Event({ bubbles: true }) input!: EventEmitter<string>;\r\n  @Event({ bubbles: false }) blur!: EventEmitter<FocusEvent>;\r\n  @Event({ bubbles: false }) focus!: EventEmitter<FocusEvent>;\r\n\r\n  connectedCallback(): void {\r\n    this._hasStart = !!this.el.querySelector('[slot=\"start\"]');\r\n    this._hasEnd = !!this.el.querySelector('[slot=\"end\"]');\r\n  }\r\n\r\n  private handleInput = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.input.emit(this.value);\r\n  };\r\n\r\n  private handleChange = (e: Event): void => {\r\n    this.value = (e.target as HTMLInputElement).value;\r\n    this.change.emit(this.value);\r\n  };\r\n\r\n  private handleBlur = (e: FocusEvent): void => { this.blur.emit(e); };\r\n  private handleFocus = (e: FocusEvent): void => { this.focus.emit(e); };\r\n\r\n  render() {\r\n    const inputId = 'input';\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <label class=\"label\" htmlFor={inputId}>\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </label>\r\n              <slot name=\"label-after\" />\r\n            </div>\r\n          )}\r\n          <div class=\"input-wrapper\">\r\n            {this._hasStart && <div class=\"slot-start\"><slot name=\"start\" /></div>}\r\n            <input\r\n              id={inputId}\r\n              class=\"input\"\r\n              type=\"number\"\r\n              name={this.name || undefined}\r\n              value={this.value}\r\n              placeholder={this.placeholder || undefined}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              readOnly={this.readonly}\r\n              min={this.min !== undefined ? String(this.min) : undefined}\r\n              max={this.max !== undefined ? String(this.max) : undefined}\r\n              step={this.step !== undefined ? String(this.step) : undefined}\r\n              autocomplete={this.autoComplete}\r\n              aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n              aria-invalid={this.state === 'error' ? 'true' : undefined}\r\n              aria-required={this.required ? 'true' : undefined}\r\n              aria-describedby={this.message ? msgId : this.description ? descId : undefined}\r\n              onInput={this.handleInput}\r\n              onChange={this.handleChange}\r\n              onBlur={this.handleBlur}\r\n              onFocus={this.handleFocus}\r\n            />\r\n            {this._hasEnd && <div class=\"slot-end\"><slot name=\"end\" /></div>}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/diwa-components/p-20332312.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as n}from"./p-ed4017f0.js";import{g as a}from"./p-70bbb21a.js";const i={top:"flex-start",center:"center",bottom:"flex-end"};const r=(e,t,n,r,s)=>{const o=i[t];return`\n    :host {\n      display: block;\n      position: relative;\n    }\n    :host([hidden]) {\n      display: none;\n    }\n    .scroller {\n      display: grid;\n      grid-template-columns: ${n?"auto minmax(0, 1fr) auto":"minmax(0, 1fr)"};\n      align-items: ${o};\n      gap: var(--diwa-space-2);\n    }\n    .scroll-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--diwa-space-8);\n      height: var(--diwa-space-8);\n      padding: 0;\n      border: var(--diwa-border-width-thin) solid var(--diwa-border);\n      border-radius: var(--diwa-radius-full);\n      background: var(--diwa-bg-surface);\n      color: var(--diwa-text-secondary);\n      cursor: pointer;\n      transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n      flex-shrink: 0;\n    }\n    .scroll-button:hover:not(:disabled) {\n      color: var(--diwa-text-primary);\n      background: var(--diwa-bg-hover);\n    }\n    .scroll-button:disabled {\n      opacity: var(--diwa-opacity-disabled);\n      cursor: not-allowed;\n    }\n    .scroll-button[hidden] {\n      display: none;\n    }\n    ${a(".scroll-button")}\n    ${a(".scroll-area")}\n    .scroll-wrapper {\n      position: relative;\n      min-width: 0;\n      overflow: hidden;\n    }\n    .scroll-area {\n      display: flex;\n      align-items: ${o};\n      overflow-x: auto;\n      overflow-y: hidden;\n      scroll-behavior: smooth;\n      -webkit-overflow-scrolling: touch;\n      ${e?"":"scrollbar-width: none;"}\n    }\n    ::slotted(*) {\n      flex: 0 0 auto;\n    }\n    ${!e?`\n    .scroll-area::-webkit-scrollbar {\n      display: none;\n    }\n    `:""}\n    /* Fade-out gradient masks — fixed at the visible edges via scroll-wrapper */\n    .fade {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: var(--diwa-scroller-fade-width);\n      pointer-events: none;\n      z-index: 1;\n      transition: opacity var(--diwa-transition-fast);\n    }\n    .fade--start {\n      left: 0;\n      background: var(--diwa-gradient-scrim-right);\n      opacity: ${r?"1":"0"};\n    }\n    .fade--end {\n      right: 0;\n      background: var(--diwa-gradient-scrim-left);\n      opacity: ${s?"1":"0"};\n    }\n  `};const s=class{constructor(t){e(this,t);this.alignScrollIndicator="center";this.scrollbar=false;this.theme="dark";this.hasOverflow=false;this.canScrollLeft=false;this.canScrollRight=false;this.setScrollAreaRef=e=>{this.scrollAreaEl=e};this.handleScroll=()=>{this.updateScrollState()};this.handleSlotChange=()=>{requestAnimationFrame((()=>this.updateScrollState()))};this.scrollByPage=e=>{const t=this.scrollAreaEl;if(!t)return;const n=Math.max(t.clientWidth*.8,1);t.scrollBy({left:e==="start"?-n:n,behavior:"smooth"})}}componentDidLoad(){this.updateScrollState();if(this.scrollAreaEl){this.resizeObserver=new ResizeObserver((()=>this.updateScrollState()));this.resizeObserver.observe(this.scrollAreaEl)}}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}updateScrollState(){const e=this.scrollAreaEl;if(!e)return;const t=Math.max(0,e.scrollWidth-e.clientWidth);const n=e.scrollLeft;const a=1;this.hasOverflow=t>a;this.canScrollLeft=n>a;this.canScrollRight=n<t-a}render(){return t(n,{key:"dc9d01bade501000f75086f335d9bf302174a945","data-theme":this.theme},t("style",{key:"a8765192f0a7967cbe3e3531ee891d6352420d03",innerHTML:r(this.scrollbar,this.alignScrollIndicator,this.hasOverflow,this.canScrollLeft,this.canScrollRight)}),t("div",{key:"fb55280f572009f65ed2fc25564264d8e01e2ce0",class:"scroller"},t("button",{key:"8b9d8dbaa725f6b7fa2aec9c36ba53552ae49d17",type:"button",class:"scroll-button scroll-button--start","aria-label":"Scroll left",disabled:!this.canScrollLeft,hidden:!this.hasOverflow,onClick:()=>this.scrollByPage("start")},t("svg",{key:"37f2e8fdd719fd1253864f4cdf9c7297d353c86d",viewBox:"0 0 16 16",width:"16",height:"16",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},t("path",{key:"f842f28a51771992e81bffa1467a3e6980d85835",d:"M10 3.5 5 8l5 4.5"}))),t("div",{key:"f0a55b2be01fe47dc58f94946b92b8fa82235e14",class:"scroll-wrapper"},t("div",{key:"e612dbb880d43d09ee67d879f6c33c8c419899d7",class:"scroll-area",tabIndex:this.hasOverflow?0:undefined,role:this.hasOverflow?"region":undefined,"aria-label":this.hasOverflow?"Scrollable content":undefined,onScroll:this.handleScroll,ref:this.setScrollAreaRef},t("slot",{key:"53572974e4cb804c3012d2ba8f08039accee8e5e",onSlotchange:this.handleSlotChange})),t("div",{key:"a2c66030fa02a387f40f7b3b640e69b35a0d0bd4",class:"fade fade--start","aria-hidden":"true"}),t("div",{key:"a0f79f41b4152bc636f4ad3be6b924c303019cef",class:"fade fade--end","aria-hidden":"true"})),t("button",{key:"3a992435dfb230deea38d9fb2033907bdb15a9a3",type:"button",class:"scroll-button scroll-button--end","aria-label":"Scroll right",disabled:!this.canScrollRight,hidden:!this.hasOverflow,onClick:()=>this.scrollByPage("end")},t("svg",{key:"6b14a8fe8dcdf9fd33f9c05a2aa39859e61599df",viewBox:"0 0 16 16",width:"16",height:"16",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},t("path",{key:"f1c8d634899420420576899086f247b68435d008",d:"M6 3.5 11 8l-5 4.5"})))))}};export{s as diwa_scroller};
-//# sourceMappingURL=p-20332312.entry.js.map

package/dist/diwa-components/p-20332312.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ALIGN_MAP","top","center","bottom","getComponentCss","scrollbar","alignScrollIndicator","hasOverflow","canScrollLeft","canScrollRight","alignItems","getFocusStyle","DiwaScroller","constructor","hostRef","this","theme","setScrollAreaRef","el","scrollAreaEl","handleScroll","updateScrollState","handleSlotChange","requestAnimationFrame","scrollByPage","direction","distance","Math","max","clientWidth","scrollBy","left","behavior","componentDidLoad","resizeObserver","ResizeObserver","observe","disconnectedCallback","_a","disconnect","maxScrollLeft","scrollWidth","currentScrollLeft","scrollLeft","epsilon","render","h","Host","key","innerHTML","class","type","disabled","hidden","onClick","viewBox","width","height","fill","stroke","d","tabIndex","undefined","role","onScroll","ref","onSlotchange"],"sources":["src/components/diwa-scroller/diwa-scroller-styles.ts","src/components/diwa-scroller/diwa-scroller.tsx"],"sourcesContent":["import { getFocusStyle } from '../../utils/styles';\r\nimport type { ScrollerScrollIndicatorPosition } from './types';\r\n\r\nconst ALIGN_MAP: Record<ScrollerScrollIndicatorPosition, string> = {\r\n  top: 'flex-start',\r\n  center: 'center',\r\n  bottom: 'flex-end',\r\n};\r\n\r\nexport const getComponentCss = (\r\n  scrollbar: boolean,\r\n  alignScrollIndicator: ScrollerScrollIndicatorPosition,\r\n  hasOverflow: boolean,\r\n  canScrollLeft: boolean,\r\n  canScrollRight: boolean,\r\n): string => {\r\n  const alignItems = ALIGN_MAP[alignScrollIndicator];\r\n\r\n  return `\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .scroller {\r\n      display: grid;\r\n      grid-template-columns: ${hasOverflow ? 'auto minmax(0, 1fr) auto' : 'minmax(0, 1fr)'};\r\n      align-items: ${alignItems};\r\n      gap: var(--diwa-space-2);\r\n    }\r\n    .scroll-button {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--diwa-space-8);\r\n      height: var(--diwa-space-8);\r\n      padding: 0;\r\n      border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n      border-radius: var(--diwa-radius-full);\r\n      background: var(--diwa-bg-surface);\r\n      color: var(--diwa-text-secondary);\r\n      cursor: pointer;\r\n      transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\r\n      flex-shrink: 0;\r\n    }\r\n    .scroll-button:hover:not(:disabled) {\r\n      color: var(--diwa-text-primary);\r\n      background: var(--diwa-bg-hover);\r\n    }\r\n    .scroll-button:disabled {\r\n      opacity: var(--diwa-opacity-disabled);\r\n      cursor: not-allowed;\r\n    }\r\n    .scroll-button[hidden] {\r\n      display: none;\r\n    }\r\n    ${getFocusStyle('.scroll-button')}\r\n    ${getFocusStyle('.scroll-area')}\r\n    .scroll-wrapper {\r\n      position: relative;\r\n      min-width: 0;\r\n      overflow: hidden;\r\n    }\r\n    .scroll-area {\r\n      display: flex;\r\n      align-items: ${alignItems};\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n      scroll-behavior: smooth;\r\n      -webkit-overflow-scrolling: touch;\r\n      ${scrollbar ? '' : 'scrollbar-width: none;'}\r\n    }\r\n    ::slotted(*) {\r\n      flex: 0 0 auto;\r\n    }\r\n    ${!scrollbar ? `\r\n    .scroll-area::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n    ` : ''}\r\n    /* Fade-out gradient masks — fixed at the visible edges via scroll-wrapper */\r\n    .fade {\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      width: var(--diwa-scroller-fade-width);\r\n      pointer-events: none;\r\n      z-index: 1;\r\n      transition: opacity var(--diwa-transition-fast);\r\n    }\r\n    .fade--start {\r\n      left: 0;\r\n      background: var(--diwa-gradient-scrim-right);\r\n      opacity: ${canScrollLeft ? '1' : '0'};\r\n    }\r\n    .fade--end {\r\n      right: 0;\r\n      background: var(--diwa-gradient-scrim-left);\r\n      opacity: ${canScrollRight ? '1' : '0'};\r\n    }\r\n  `;\r\n};\r\n","import { Component, Host, Prop, State, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { ScrollerScrollIndicatorPosition } from './types';\r\nimport { getComponentCss } from './diwa-scroller-styles';\r\n\r\n/**\r\n * @slot default — Items to be scrolled horizontally.\r\n */\r\n@Component({\r\n  tag: 'diwa-scroller',\r\n  shadow: true,\r\n})\r\nexport class DiwaScroller {\r\n  /** Position of gradient fade indicators relative to the scroll area. */\r\n  @Prop() alignScrollIndicator: ScrollerScrollIndicatorPosition = 'center';\r\n\r\n  /** Whether to show the native horizontal scrollbar. */\r\n  @Prop() scrollbar: boolean = false;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  @State() private hasOverflow: boolean = false;\r\n  @State() private canScrollLeft: boolean = false;\r\n  @State() private canScrollRight: boolean = false;\r\n\r\n  private scrollAreaEl?: HTMLDivElement;\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  componentDidLoad(): void {\r\n    this.updateScrollState();\r\n    if (this.scrollAreaEl) {\r\n      this.resizeObserver = new ResizeObserver(() => this.updateScrollState());\r\n      this.resizeObserver.observe(this.scrollAreaEl);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  private setScrollAreaRef = (el?: HTMLDivElement): void => {\r\n    this.scrollAreaEl = el;\r\n  };\r\n\r\n  private handleScroll = (): void => {\r\n    this.updateScrollState();\r\n  };\r\n\r\n  private handleSlotChange = (): void => {\r\n    requestAnimationFrame(() => this.updateScrollState());\r\n  };\r\n\r\n  private updateScrollState(): void {\r\n    const el = this.scrollAreaEl;\r\n    if (!el) return;\r\n\r\n    const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);\r\n    const currentScrollLeft = el.scrollLeft;\r\n    const epsilon = 1;\r\n\r\n    this.hasOverflow = maxScrollLeft > epsilon;\r\n    this.canScrollLeft = currentScrollLeft > epsilon;\r\n    this.canScrollRight = currentScrollLeft < maxScrollLeft - epsilon;\r\n  }\r\n\r\n  private scrollByPage = (direction: 'start' | 'end'): void => {\r\n    const el = this.scrollAreaEl;\r\n    if (!el) return;\r\n\r\n    const distance = Math.max(el.clientWidth * 0.8, 1);\r\n    el.scrollBy({\r\n      left: direction === 'start' ? -distance : distance,\r\n      behavior: 'smooth',\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          this.scrollbar,\r\n          this.alignScrollIndicator,\r\n          this.hasOverflow,\r\n          this.canScrollLeft,\r\n          this.canScrollRight,\r\n        )} />\r\n        <div class=\"scroller\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"scroll-button scroll-button--start\"\r\n            aria-label=\"Scroll left\"\r\n            disabled={!this.canScrollLeft}\r\n            hidden={!this.hasOverflow}\r\n            onClick={() => this.scrollByPage('start')}\r\n          >\r\n            <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M10 3.5 5 8l5 4.5\" />\r\n            </svg>\r\n          </button>\r\n\r\n          <div class=\"scroll-wrapper\">\r\n            <div\r\n              class=\"scroll-area\"\r\n              tabIndex={this.hasOverflow ? 0 : undefined}\r\n              role={this.hasOverflow ? 'region' : undefined}\r\n              aria-label={this.hasOverflow ? 'Scrollable content' : undefined}\r\n              onScroll={this.handleScroll}\r\n              ref={this.setScrollAreaRef}\r\n            >\r\n              <slot onSlotchange={this.handleSlotChange} />\r\n            </div>\r\n            <div class=\"fade fade--start\" aria-hidden=\"true\" />\r\n            <div class=\"fade fade--end\" aria-hidden=\"true\" />\r\n          </div>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"scroll-button scroll-button--end\"\r\n            aria-label=\"Scroll right\"\r\n            disabled={!this.canScrollRight}\r\n            hidden={!this.hasOverflow}\r\n            onClick={() => this.scrollByPage('end')}\r\n          >\r\n            <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n              <path d=\"M6 3.5 11 8l-5 4.5\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"sFAGA,MAAMA,EAA6D,CACjEC,IAAK,aACLC,OAAQ,SACRC,OAAQ,YAGH,MAAMC,EAAkB,CAC7BC,EACAC,EACAC,EACAC,EACAC,KAEA,MAAMC,EAAaV,EAAUM,GAE7B,MAAO,mMAUsBC,EAAc,2BAA6B,yCACrDG,q4BA6BfC,EAAc,0BACdA,EAAc,wLAQCD,2IAKbL,EAAY,GAAK,2FAKlBA,EAAY,6EAIX,yaAcSG,EAAgB,IAAM,sHAKtBC,EAAiB,IAAM,iBAErC,E,MC1FUG,EAAY,MAJzB,WAAAC,CAAAC,G,UAMUC,KAAAT,qBAAwD,SAGxDS,KAAAV,UAAqB,MAGJU,KAAAC,MAAe,OAEvBD,KAAAR,YAAuB,MACvBQ,KAAAP,cAAyB,MACzBO,KAAAN,eAA0B,MAiBnCM,KAAAE,iBAAoBC,IAC1BH,KAAKI,aAAeD,CAAE,EAGhBH,KAAAK,aAAe,KACrBL,KAAKM,mBAAmB,EAGlBN,KAAAO,iBAAmB,KACzBC,uBAAsB,IAAMR,KAAKM,qBAAoB,EAgB/CN,KAAAS,aAAgBC,IACtB,MAAMP,EAAKH,KAAKI,aAChB,IAAKD,EAAI,OAET,MAAMQ,EAAWC,KAAKC,IAAIV,EAAGW,YAAc,GAAK,GAChDX,EAAGY,SAAS,CACVC,KAAMN,IAAc,SAAWC,EAAWA,EAC1CM,SAAU,UACV,C,CA7CJ,gBAAAC,GACElB,KAAKM,oBACL,GAAIN,KAAKI,aAAc,CACrBJ,KAAKmB,eAAiB,IAAIC,gBAAe,IAAMpB,KAAKM,sBACpDN,KAAKmB,eAAeE,QAAQrB,KAAKI,a,EAIrC,oBAAAkB,G,OACEC,EAAAvB,KAAKmB,kBAAc,MAAAI,SAAA,SAAAA,EAAEC,Y,CAef,iBAAAlB,GACN,MAAMH,EAAKH,KAAKI,aAChB,IAAKD,EAAI,OAET,MAAMsB,EAAgBb,KAAKC,IAAI,EAAGV,EAAGuB,YAAcvB,EAAGW,aACtD,MAAMa,EAAoBxB,EAAGyB,WAC7B,MAAMC,EAAU,EAEhB7B,KAAKR,YAAciC,EAAgBI,EACnC7B,KAAKP,cAAgBkC,EAAoBE,EACzC7B,KAAKN,eAAiBiC,EAAoBF,EAAgBI,C,CAc5D,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,wDAAajC,KAAKC,OACrB8B,EAAA,SAAAE,IAAA,2CAAOC,UAAW7C,EAChBW,KAAKV,UACLU,KAAKT,qBACLS,KAAKR,YACLQ,KAAKP,cACLO,KAAKN,kBAEPqC,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YACTJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAM,qCAAoC,aAC/B,cACXE,UAAWrC,KAAKP,cAChB6C,QAAStC,KAAKR,YACd+C,QAAS,IAAMvC,KAAKS,aAAa,UAEjCsB,EAAA,OAAAE,IAAA,2CAAKO,QAAQ,YAAYC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,OAAO,eAAc,eAAc,MAAK,iBAAgB,QAAO,kBAAiB,QAAO,cAAa,QAC9Jb,EAAA,QAAAE,IAAA,2CAAMY,EAAE,wBAIZd,EAAA,OAAAE,IAAA,2CAAKE,MAAM,kBACTJ,EAAA,OAAAE,IAAA,2CACEE,MAAM,cACNW,SAAU9C,KAAKR,YAAc,EAAIuD,UACjCC,KAAMhD,KAAKR,YAAc,SAAWuD,UAAS,aACjC/C,KAAKR,YAAc,qBAAuBuD,UACtDE,SAAUjD,KAAKK,aACf6C,IAAKlD,KAAKE,kBAEV6B,EAAA,QAAAE,IAAA,2CAAMkB,aAAcnD,KAAKO,oBAE3BwB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,mBAAkB,cAAa,SAC1CJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,iBAAgB,cAAa,UAG1CJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAM,mCAAkC,aAC7B,eACXE,UAAWrC,KAAKN,eAChB4C,QAAStC,KAAKR,YACd+C,QAAS,IAAMvC,KAAKS,aAAa,QAEjCsB,EAAA,OAAAE,IAAA,2CAAKO,QAAQ,YAAYC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,OAAO,eAAc,eAAc,MAAK,iBAAgB,QAAO,kBAAiB,QAAO,cAAa,QAC9Jb,EAAA,QAAAE,IAAA,2CAAMY,EAAE,0B","ignoreList":[]}