@vielzeug/refine 1.1.1 → 1.3.0

package/dist/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import { createStableId, define, html, prop, ref } from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail, SwipeAxis } from '../../headless';\n\nimport { createSwipeControl } from '../../headless';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, elevationMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: SwipeAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, 'title'> {\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  close: OverlayCloseDetail & { placement: DrawerPlacement };\n  open: OverlayOpenDetail & { placement: DrawerPlacement };\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Show the close (×) button in the header (default: true) */\n  dismissible?: boolean;\n  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element ore-drawer\n *\n * @attr {boolean} open - Controlled open/close state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissible - Show the close (×) button (default: true)\n * @attr {string} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @fires open - When the drawer opens with detail: { placement, reason }\n * @fires close - When the drawer closes with detail: { placement, reason }\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps, OreDrawerEvents>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: prop.bool(false),\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props, { el, emit, onCleanup, onEvent, onMounted, slots }) {\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: SwipeAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    // Same \"snap back or commit close\" decision whether the swipe was\n    // interrupted by the platform (onCancel) or simply released without an\n    // intervening move event crossing the threshold (onRelease).\n    const handleSwipeRelease = ({ distance, threshold }: { distance: number; threshold: number }): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      // If the release event crosses the threshold (without an intervening\n      // move event), commit close instead of snapping back to rest first.\n      if (shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    const swipe = createSwipeControl({\n      axis: () => getSwipeConfig().axis,\n      disabled: isSwipeClosing,\n      onCancel: handleSwipeRelease,\n      onCommit: ({ distance }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        startSwipeClose(panel, getSwipeConfig(), distance);\n      },\n      onMove: ({ distance, threshold }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        const swipeConfig = getSwipeConfig();\n        const closingDistance = swipeConfig.closingDistance(distance);\n        const progress = Math.min(closingDistance / threshold, 1);\n\n        // Kill CSS transitions so the panel tracks the finger instantly.\n        panel.style.transition = 'none';\n        panel.style.transform = swipeConfig.translate(distance);\n        panel.style.opacity = String(1 - progress * 0.4);\n      },\n      onRelease: handleSwipeRelease,\n      shouldCommit: ({ distance, threshold }) => shouldCommitSwipeClose(distance, threshold),\n      threshold: () => {\n        const panel = panelRef.value;\n\n        if (!panel) return 48;\n\n        return getSnapThreshold(panel, getSwipeConfig().axis);\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('close', { placement: props.placement.value ?? 'right', reason });\n      },\n      onOpen: (reason) => emit('open', { placement: props.placement.value ?? 'right', reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic', false);\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe.isActive() || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        onEvent(dragHandleEl, 'pointerdown', swipe.handlePointerDown);\n        onEvent(dragHandleEl, 'pointermove', swipe.handlePointerMove);\n        onEvent(dragHandleEl, 'pointerup', swipe.handlePointerUp);\n        onEvent(dragHandleEl, 'pointercancel', swipe.handlePointerCancel);\n      }\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        :aria-label=\"${() => props.label.value ?? null}\"\n        :aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleCloseButtonClick}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":";;;;;;;;AAqBA,IAAM,IAAgE;CACpE,QAAQ;EACN,MAAM;EACN,kBAAkB,MAAa,KAAK,IAAI,GAAG,CAAQ;EACnD,YAAY,MAAa,cAAc,EAAS;CAClD;CACA,MAAM;EACJ,MAAM;EACN,kBAAkB,MAAa,KAAK,IAAI,GAAG,CAAC,CAAQ;EACpD,YAAY,MAAa,cAAc,EAAS;CAClD;CACA,OAAO;EACL,MAAM;EACN,kBAAkB,MAAa,KAAK,IAAI,GAAG,CAAQ;EACnD,YAAY,MAAa,cAAc,EAAS;CAClD;CACA,KAAK;EACH,MAAM;EACN,kBAAkB,MAAa,KAAK,IAAI,GAAG,CAAC,CAAQ;EACpD,YAAY,MAAa,cAAc,EAAS;CAClD;AACF,GAyGa,IAAa;AAC1B,EAAwC,GAAY;CAClD,OAAO;EACL,UAAU,EAAK,OAAuB;EACtC,aAAa,EAAK,KAAK,EAAI;EAC3B,yBAAyB,EAAK,MAAM,CAAC,WAAW,OAAO,GAAY,SAAS;EAC5E,iBAAiB,EAAK,OAAO;EAC7B,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,KAAK,EAAK;EACrB,YAAY,EAAK,KAAK,EAAK;EAC3B,WAAW,EAAK,MAAM;GAAC;GAAQ;GAAS;GAAO;EAAQ,GAAY,OAAO;EAC1E,gBAAgB,EAAK,KAAK,EAAI;EAC9B,MAAM,EAAK,OAAmB;EAC9B,OAAO,EAAK,OAAO;CACrB;CACA,MAAM,GAAO,EAAE,OAAI,SAAM,cAAW,YAAS,cAAW,YAAS;EAC/D,IAAM,IAAgB,EAAe,cAAc,GAC7C,IAAY,EAAuB,GACnC,IAAW,EAAoB,GAG/B,IAAiB,EAAO,EAAK,GAC/B,GAEE,UAAsB,EAAM,MAAM,SAAS,EAAM,MAAM,SAAS,IAChE,UAAuB,EAAM,IAAI,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,EAAc,GAGpE,UAAkB,EAAe,KAAK,EAAM,YAAY,OACxD,UAAkB,EAAM,IAAI,QAAQ,CAAC,CAAC,OAEtC,UAAsC,EAAM,UAAU,SAAS,SAE/D,UAA0C,EAAkB,EAAa,IAEzE,KAAoB,GAAoB,MAAoB;GAChE,IAAM,IAAY,MAAS,MAAM,EAAM,cAAc,EAAM;GAE3D,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,IAAY,GAAI,CAAC;EACpD,GAEM,KAA0B,GAAkB,MACzC,EAAe,CAAC,CAAC,gBAAgB,CAAQ,KAAK,GAGjD,KAAsB,MAAuB;GACjD,IAAI,CAAC,EAAe,OAAO;GAE3B,AAEE,OADA,aAAa,CAAe,GACV,KAAA;GAGpB,IAAM,IAAS,EAAU;GAEzB,IAAI,CAAC,GAAQ;IACX,EAAe,QAAQ;IAEvB;GACF;GAOA,AALA,EAAO,MAAM,aAAa,QAC1B,EAAM,MAAM,UAAU,KACtB,EAAM,MAAM,aAAa,UACzB,EAAY,aAEZ,EAAa,OAAO;EACtB,GAEM,KAAmB,GAAoB,GAA0B,MAA8B;GACnG,IAAI,EAAe,OAAO;GAE1B,EAAe,QAAQ;GAEvB,IAAM,IAAY,EAAM,SAAS,MAAM,EAAM,cAAc,EAAM,cAE3D,IACJ,KAAqB,IAAI,KAAK,IAAI,GAAmB,CAAS,IAAI,KAAK,IAAI,GAAmB,CAAC,CAAS,GACpG,IAAgB,EAAM,UAAU,CAAY;GAKlD,AADA,EAAM,MAAM,aAAa,0EACzB,EAAW;GAEX,IAAM,KAAuB,MAAwB;IAC/C,EAAG,WAAW,KAAS,EAAG,iBAAiB,gBAE/C,EAAM,oBAAoB,iBAAiB,CAAmB,GAC9D,EAAmB,CAAK;GAC1B;GAEA,EAAM,iBAAiB,iBAAiB,CAAmB;GAE3D,IAAM,IAAa,WAAW,iBAAiB,CAAK,CAAC,CAAC,kBAAkB,IAAI;GAQ5E,AANA,IAAkB,iBAAiB;IAEjC,AADA,EAAM,oBAAoB,iBAAiB,CAAmB,GAC9D,EAAmB,CAAK;GAC1B,GAAG,IAAa,EAAE,GAElB,EAAM,MAAM,YAAY,GACxB,EAAM,MAAM,UAAU;EACxB,GAEM,KAAwB,MAAuB;GAWnD,AAVA,AAEE,OADA,aAAa,CAAe,GACV,KAAA,IAIpB,EAAM,MAAM,aAAa,IACzB,EAAM,MAAM,YAAY,IACxB,EAAM,MAAM,UAAU,IACtB,EAAM,MAAM,aAAa,IACzB,EAAe,QAAQ;EACzB,GAKM,KAAsB,EAAE,aAAU,mBAA+D;GACrG,IAAM,IAAQ,EAAS;GAElB,OAIL;QAAI,EAAuB,GAAU,CAAS,GAAG;KAC/C,EAAgB,GAAO,EAAe,GAAG,CAAQ;KAEjD;IACF;IAEA,EAAqB,CAAK;GAF1B;EAGF,GAEM,IAAQ,EAAmB;GAC/B,YAAY,EAAe,CAAC,CAAC;GAC7B,UAAU;GACV,UAAU;GACV,WAAW,EAAE,kBAAe;IAC1B,IAAM,IAAQ,EAAS;IAElB,KAEL,EAAgB,GAAO,EAAe,GAAG,CAAQ;GACnD;GACA,SAAS,EAAE,aAAU,mBAAgB;IACnC,IAAM,IAAQ,EAAS;IAEvB,IAAI,CAAC,GAAO;IAEZ,IAAM,IAAc,EAAe,GAC7B,IAAkB,EAAY,gBAAgB,CAAQ,GACtD,IAAW,KAAK,IAAI,IAAkB,GAAW,CAAC;IAKxD,AAFA,EAAM,MAAM,aAAa,QACzB,EAAM,MAAM,YAAY,EAAY,UAAU,CAAQ,GACtD,EAAM,MAAM,UAAU,OAAO,IAAI,IAAW,EAAG;GACjD;GACA,WAAW;GACX,eAAe,EAAE,aAAU,mBAAgB,EAAuB,GAAU,CAAS;GACrF,iBAAiB;IACf,IAAM,IAAQ,EAAS;IAIvB,OAFK,IAEE,EAAiB,GAAO,EAAe,CAAC,CAAC,IAAI,IAFjC;GAGrB;EACF,CAAC,GAMK,EAAE,uBAAoB,iBAAc,YAAS,iBAAc,qBAAkB,EAAiB;GAClG,aAAa,MAAW;IAGtB,IAAM,IAAQ,EAAS;IAEvB,AAAI,KAAO,EAAqB,CAAK;GAGvC;GACA,qBAAqB,OAAa,EAAE,WAAW,EAAM,UAAU,SAAS,QAAQ;GAChF;GACA,kBAAkB,EAAS;GAC3B,MAAM;GACN,cAAc,EAAM;GACpB,oBAAoB,EAAQ,EAAM,WAAW;GAC7C;GACA;GACA,gBAAgB,MAAW;IACzB,IAAM,IAAU,EAAS;IAKzB,AAAI,KAAW,MAAW,WAAS,EAAqB,CAAO;IAE/D,IAAM,IAAS,EAAU;IAIzB,AAFI,MAAQ,EAAO,MAAM,aAAa,KAEtC,EAAK,SAAS;KAAE,WAAW,EAAM,UAAU,SAAS;KAAS;IAAO,CAAC;GACvE;GACA,SAAS,MAAW,EAAK,QAAQ;IAAE,WAAW,EAAM,UAAU,SAAS;IAAS;GAAO,CAAC;GACxF,UAAU,EAAM;GAChB,eAAe,GAAQ,MAAW;IAChC,AAAI,MAAW,UACb,EAAO,MAAM,IAEb,EAAmB;GAEvB;GACA,aAAa,EAAM;EACrB,CAAC;EAkED,OAxDA,QAAgB;GACd,IAAM,IAAS,EAAU;GAEzB,IAAI,CAAC,GAAQ;GAGb,IAAM,IAAW;GA+BjB,AA7BA,EAAS,aAAa;IACpB,EAAQ,KAAK,cAAc;GAC7B,GAEA,EAAS,aAAa;IACpB,EAAQ,MAAM,gBAAgB,EAAK;GACrC,GAoBA,EAAc,GAEd,EAAQ,GAAQ,UAAU,CAAY,GACtC,EAAQ,GAAQ,UAba,MAAkB;IACzC,EAAM,WAAW,SAEjB,EAAM,SAAS,KAAK,EAAe,SAEnC,EAAE,WAAW,KAEjB,EAAa,cAAc;GAC7B,CAK4C;GAK5C,IAAM,IADQ,EAAS,OACK,cAA2B,wBAAsB;GAS7E,OAPI,MACF,EAAQ,GAAc,eAAe,EAAM,iBAAiB,GAC5D,EAAQ,GAAc,eAAe,EAAM,iBAAiB,GAC5D,EAAQ,GAAc,aAAa,EAAM,eAAe,GACxD,EAAQ,GAAc,iBAAiB,EAAM,mBAAmB,UAGrD;IACX,EAAQ,QAAQ;GAClB;EACF,CAAC,GAEM,CAAI;;cAED,EAAU;;6BAEK,EAAM,MAAM,SAAS,KAAK;kCACnB,EAAM,MAAM,QAAwB,OAAhB,EAAsB;8CAChC,EAAS;;4DAEK,CAAC,EAAU,EAAE;6CAC5B,EAAc,kBAAkB,CAAC,EAAe,EAAE;0CACrD,EAAc,EAAE;;;;;;;8BAO5B,CAAC,EAAM,YAAY,MAAM;6BAjFd;GACnC,EAAa,SAAS;EACxB,EAgF0C;;;;;;;4DAOc,CAAC,EAAU,EAAE;;;;;;CAMvE;CACA,QAAQ;EAAC;EAAgB;EAAmB;EAAoB;EAAoB;CAAM;AAC5F,CAAC"}
+{"version":3,"file":"drawer.js","names":[],"sources":["../src/overlay/drawer/drawer.ts"],"sourcesContent":["import {\n  createStableId,\n  define,\n  html,\n  prop,\n  ref,\n  getHost,\n  onCleanup,\n  onEvent,\n  onMounted,\n  useEmit,\n  useSlots,\n} from '@vielzeug/ore';\nimport { signal } from '@vielzeug/ripple';\n\nimport type { OverlayCloseDetail, OverlayOpenDetail, SwipeAxis } from '../../headless';\n\nimport { createSwipeControl } from '../../headless';\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, elevationMixin, forcedColorsMixin, reducedMotionMixin } from '../../styles';\nimport { useDialogControl } from '../shared/use-dialog';\nimport styles from './drawer.css?inline';\n\ntype DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\ntype DrawerSize = 'sm' | 'lg' | 'full';\ntype DrawerBackdrop = 'opaque' | 'blur' | 'transparent';\ntype DrawerDragHandlePlacement = 'outside' | 'inset';\ntype DrawerSwipeConfig = {\n  axis: SwipeAxis;\n  closingDistance: (distance: number) => number;\n  translate: (distance: number) => string;\n};\n\nconst drawerSwipeConfig: Record<DrawerPlacement, DrawerSwipeConfig> = {\n  bottom: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n  left: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  right: {\n    axis: 'x',\n    closingDistance: (distance) => Math.max(0, distance),\n    translate: (distance) => `translateX(${distance}px)`,\n  },\n  top: {\n    axis: 'y',\n    closingDistance: (distance) => Math.max(0, -distance),\n    translate: (distance) => `translateY(${distance}px)`,\n  },\n};\n\n/** Element interface exposing the imperative API for `ore-drawer`. */\nexport interface DrawerElement extends HTMLElement, Omit<OreDrawerProps, 'title'> {\n  /** Programmatically open the drawer. Equivalent to setting `open`. */\n  show(): void;\n  /** Programmatically close the drawer with the exit animation. */\n  hide(): void;\n}\n\n/** Drawer component properties */\n\nexport type OreDrawerEvents = {\n  close: OverlayCloseDetail & { placement: DrawerPlacement };\n  open: OverlayOpenDetail & { placement: DrawerPlacement };\n};\n\nexport type OreDrawerProps = {\n  /** Backdrop style — 'opaque' (default), 'blur', or 'transparent' */\n  backdrop?: DrawerBackdrop;\n  /** Show the close (×) button in the header (default: true) */\n  dismissible?: boolean;\n  /** Drag handle position used for swipe-to-close gestures */\n  'drag-handle-placement'?: DrawerDragHandlePlacement;\n  /**\n   * CSS selector for the element inside the drawer that should receive focus on open.\n   * Defaults to native dialog focus management (first focusable element).\n   * @example '#submit-btn' | 'input[name=\"email\"]'\n   */\n  'initial-focus'?: string;\n  /**\n   * Invisible accessible label for the dialog (`aria-label`).\n   * Use when the drawer has no visible title (e.g. image-only content).\n   * When omitted, `aria-labelledby` points to the visible header title instead.\n   */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n  /** When true, backdrop clicks do not close the drawer (default: false) */\n  persistent?: boolean;\n  /** Side from which the drawer slides in */\n  placement?: DrawerPlacement;\n  /**\n   * When true (default), focus returns to the triggering element after the drawer closes.\n   * Set to false to manage focus manually.\n   */\n  'return-focus'?: boolean;\n  /** Drawer width/height preset */\n  size?: DrawerSize;\n  /**\n   * Visible title text rendered inside the header.\n   * Used as the dialog's accessible label via `aria-labelledby` when `label` is not set.\n   */\n  title?: string;\n};\n\n/**\n * A panel that slides in from any edge of the screen, built on the native `<dialog>` element.\n *\n * @element ore-drawer\n *\n * @attr {boolean} open - Controlled open/close state\n * @attr {string} placement - 'left' | 'right' (default) | 'top' | 'bottom'\n * @attr {string} size - 'sm' | 'lg' | 'full'\n * @attr {string} title - Visible header title text\n * @attr {string} label - Invisible aria-label (for drawers without a visible title)\n * @attr {boolean} dismissible - Show the close (×) button (default: true)\n * @attr {string} drag-handle-placement - 'outside' (default) | 'inset'\n * @attr {string} backdrop - Backdrop style: 'opaque' (default) | 'blur' | 'transparent'\n * @attr {boolean} persistent - Prevent backdrop-click from closing (default: false)\n *\n * @fires open - When the drawer opens with detail: { placement, reason }\n * @fires close - When the drawer closes with detail: { placement, reason }\n *\n * @slot header - Drawer header content\n * @slot - Main body content\n * @slot footer - Drawer footer content\n *\n * @cssprop --drawer-backdrop-bg - Backdrop background color\n * @cssprop --drawer-bg - Panel background color\n * @cssprop --drawer-size - Panel width (horizontal) or height (vertical)\n * @cssprop --drawer-shadow - Panel box-shadow\n * @cssprop --drawer-panel-blur - Panel backdrop blur amount\n *\n * @part drag-handle - Drawer drag handle.\n * @part panel - Panel container.\n * @part header - Header container.\n * @part close-btn - Close button.\n * @part body - Body content container.\n * @part footer - Footer container.\n * @example\n * ```html\n * <!-- With visible title -->\n * <ore-drawer open title=\"Settings\" placement=\"right\">\n *   <p>Settings content here.</p>\n * </ore-drawer>\n *\n * <!-- With custom header slot -->\n * <ore-drawer open placement=\"right\">\n *   <span slot=\"header\">Settings</span>\n *   <p>Settings content here.</p>\n * </ore-drawer>\n * ```\n */\n\nexport const DRAWER_TAG = 'ore-drawer' as const;\ndefine<OreDrawerProps>(DRAWER_TAG, {\n  props: {\n    backdrop: prop.string<DrawerBackdrop>(),\n    dismissible: prop.bool(true),\n    'drag-handle-placement': prop.oneOf(['outside', 'inset'] as const, 'outside'),\n    'initial-focus': prop.string(),\n    label: prop.string(),\n    open: prop.bool(false),\n    persistent: prop.bool(false),\n    placement: prop.oneOf(['left', 'right', 'top', 'bottom'] as const, 'right'),\n    'return-focus': prop.bool(true),\n    size: prop.string<DrawerSize>(),\n    title: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreDrawerEvents>();\n    const slots = useSlots();\n\n    const drawerLabelId = createStableId('drawer-label');\n    const dialogRef = ref<HTMLDialogElement>();\n    const panelRef = ref<HTMLDivElement>();\n\n    // Drag-to-close state\n    const isSwipeClosing = signal(false);\n    let swipeCloseTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const getHeaderText = () => props.label.value ?? props.title.value ?? '';\n    const hasHeaderTitle = () => slots.has('header').value || !!getHeaderText();\n\n    // Header is visible when there is slot content, a text label, or a close button.\n    const hasHeader = () => hasHeaderTitle() || props.dismissible.value;\n    const hasFooter = () => slots.has('footer').value;\n\n    const getPlacement = (): DrawerPlacement => props.placement.value || 'right';\n\n    const getSwipeConfig = (): DrawerSwipeConfig => drawerSwipeConfig[getPlacement()];\n\n    const getSnapThreshold = (panel: HTMLElement, axis: SwipeAxis) => {\n      const panelSize = axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n\n      return Math.min(96, Math.max(36, panelSize * 0.18));\n    };\n\n    const shouldCommitSwipeClose = (distance: number, threshold: number) => {\n      return getSwipeConfig().closingDistance(distance) >= threshold;\n    };\n\n    const finalizeSwipeClose = (panel: HTMLElement) => {\n      if (!isSwipeClosing.value) return;\n\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      const dialog = dialogRef.value;\n\n      if (!dialog) {\n        isSwipeClosing.value = false;\n\n        return;\n      }\n\n      dialog.style.transition = 'none';\n      panel.style.opacity = '0';\n      panel.style.visibility = 'hidden';\n      void dialog.offsetWidth;\n\n      requestClose('swipe');\n    };\n\n    const startSwipeClose = (panel: HTMLElement, swipe: DrawerSwipeConfig, committedDistance: number) => {\n      if (isSwipeClosing.value) return;\n\n      isSwipeClosing.value = true;\n\n      const panelSize = swipe.axis === 'x' ? panel.offsetWidth : panel.offsetHeight;\n      // Preserve overshoot so closing continues from the dragged position instead of snapping back.\n      const exitDistance =\n        committedDistance >= 0 ? Math.max(committedDistance, panelSize) : Math.min(committedDistance, -panelSize);\n      const exitTransform = swipe.translate(exitDistance);\n\n      // Commit the current drag position first so the magnetic snap continues\n      // from the finger instead of jumping back to rest.\n      panel.style.transition = 'transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out';\n      void panel.offsetWidth;\n\n      const onExitTransitionEnd = (ev: TransitionEvent) => {\n        if (ev.target !== panel || ev.propertyName !== 'transform') return;\n\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      };\n\n      panel.addEventListener('transitionend', onExitTransitionEnd);\n\n      const durationMs = parseFloat(getComputedStyle(panel).transitionDuration) * 1000;\n\n      swipeCloseTimer = setTimeout(() => {\n        panel.removeEventListener('transitionend', onExitTransitionEnd);\n        finalizeSwipeClose(panel);\n      }, durationMs + 50);\n\n      panel.style.transform = exitTransform;\n      panel.style.opacity = '0.2';\n    };\n\n    const resetPanelDragStyles = (panel: HTMLElement) => {\n      if (swipeCloseTimer) {\n        clearTimeout(swipeCloseTimer);\n        swipeCloseTimer = undefined;\n      }\n\n      // Re-enable transitions so the snap-back or exit animates.\n      panel.style.transition = '';\n      panel.style.transform = '';\n      panel.style.opacity = '';\n      panel.style.visibility = '';\n      isSwipeClosing.value = false;\n    };\n\n    // Same \"snap back or commit close\" decision whether the swipe was\n    // interrupted by the platform (onCancel) or simply released without an\n    // intervening move event crossing the threshold (onRelease).\n    const handleSwipeRelease = ({ distance, threshold }: { distance: number; threshold: number }): void => {\n      const panel = panelRef.value;\n\n      if (!panel) return;\n\n      // If the release event crosses the threshold (without an intervening\n      // move event), commit close instead of snapping back to rest first.\n      if (shouldCommitSwipeClose(distance, threshold)) {\n        startSwipeClose(panel, getSwipeConfig(), distance);\n\n        return;\n      }\n\n      resetPanelDragStyles(panel);\n    };\n\n    const swipe = createSwipeControl({\n      axis: () => getSwipeConfig().axis,\n      disabled: isSwipeClosing,\n      onCancel: handleSwipeRelease,\n      onCommit: ({ distance }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        startSwipeClose(panel, getSwipeConfig(), distance);\n      },\n      onMove: ({ distance, threshold }) => {\n        const panel = panelRef.value;\n\n        if (!panel) return;\n\n        const swipeConfig = getSwipeConfig();\n        const closingDistance = swipeConfig.closingDistance(distance);\n        const progress = Math.min(closingDistance / threshold, 1);\n\n        // Kill CSS transitions so the panel tracks the finger instantly.\n        panel.style.transition = 'none';\n        panel.style.transform = swipeConfig.translate(distance);\n        panel.style.opacity = String(1 - progress * 0.4);\n      },\n      onRelease: handleSwipeRelease,\n      shouldCommit: ({ distance, threshold }) => shouldCommitSwipeClose(distance, threshold),\n      threshold: () => {\n        const panel = panelRef.value;\n\n        if (!panel) return 48;\n\n        return getSnapThreshold(panel, getSwipeConfig().axis);\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Overlay State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const { closeWithAnimation, handleCancel, overlay, requestClose, watchOpenProp } = useDialogControl({\n      beforeOpen: (dialog) => {\n        // Clear any inline drag styles from a previous swipe-close so the CSS\n        // entry animation starts from the correct base state.\n        const panel = panelRef.value;\n\n        if (panel) resetPanelDragStyles(panel);\n\n        void dialog;\n      },\n      closeRequestDetail: (_reason) => ({ placement: props.placement.value ?? 'right' }),\n      dialogRef,\n      getPanelEl: () => panelRef.value,\n      host: el,\n      initialFocus: props['initial-focus'],\n      isPersistent: () => Boolean(props.persistent.value),\n      onCleanup,\n      onEvent,\n      onNativeClose: (reason) => {\n        const panelEl = panelRef.value;\n\n        // For swipe-close, keep the panel hidden and off-screen until the next\n        // open cycle — resetting inline styles during native close can produce\n        // a visible frame at the rest position on some browsers.\n        if (panelEl && reason !== 'swipe') resetPanelDragStyles(panelEl);\n\n        const dialog = dialogRef.value;\n\n        if (dialog) dialog.style.transition = '';\n\n        emit('close', { placement: props.placement.value ?? 'right', reason });\n      },\n      onOpen: (reason) => emit('open', { placement: props.placement.value ?? 'right', reason }),\n      openProp: props.open,\n      performClose: (dialog, reason) => {\n        if (reason === 'swipe') {\n          dialog.close();\n        } else {\n          closeWithAnimation();\n        }\n      },\n      returnFocus: props['return-focus'],\n    });\n\n    const handleCloseButtonClick = () => {\n      requestClose('trigger');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle: Setup Drawer Integration\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const dialog = dialogRef.value;\n\n      if (!dialog) return;\n\n      // Expose imperative API\n      const drawerEl = el as DrawerElement;\n\n      drawerEl.show = () => {\n        overlay.open('programmatic');\n      };\n\n      drawerEl.hide = () => {\n        overlay.close('programmatic', false);\n      };\n\n      // ────────────────────────────────────────────────────────────\n      // Event Handlers: Cancel, Backdrop Click\n      // ────────────────────────────────────────────────────────────\n      // `handleCancel` (Escape via the native `cancel` event) is provided by\n      // `useDialogControl` above — drawer only needs its own backdrop-click\n      // handler since it has swipe-to-dismiss logic the shared dialog helper\n      // doesn't know about.\n\n      const handleBackdropClick = (e: MouseEvent) => {\n        if (props.persistent.value) return;\n\n        if (swipe.isActive() || isSwipeClosing.value) return;\n\n        if (e.target !== dialog) return; // Click inside panel\n\n        requestClose('outsideClick');\n      };\n\n      watchOpenProp();\n\n      onEvent(dialog, 'cancel', handleCancel);\n      onEvent(dialog, 'click', handleBackdropClick);\n\n      // Drag-to-close handlers — scoped to the handle element only so interactions\n      // with panel content don't accidentally start a drag.\n      const panel = panelRef.value;\n      const dragHandleEl = panel?.querySelector<HTMLElement>('[part=\"drag-handle\"]');\n\n      if (dragHandleEl) {\n        onEvent(dragHandleEl, 'pointerdown', swipe.handlePointerDown);\n        onEvent(dragHandleEl, 'pointermove', swipe.handlePointerMove);\n        onEvent(dragHandleEl, 'pointerup', swipe.handlePointerUp);\n        onEvent(dragHandleEl, 'pointercancel', swipe.handlePointerCancel);\n      }\n\n      return () => {\n        overlay.dispose();\n      };\n    });\n\n    return html`\n      <dialog\n        ref=${dialogRef}\n        aria-modal=\"true\"\n        :aria-label=\"${() => props.label.value ?? null}\"\n        :aria-labelledby=\"${() => (!props.label.value ? drawerLabelId : null)}\">\n        <div class=\"panel\" part=\"panel\" ref=${panelRef}>\n          <div class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Drag to close\" role=\"button\"></div>\n          <div class=\"header\" part=\"header\" ?hidden=${() => !hasHeader()}>\n            <span class=\"header-title\" id=\"${drawerLabelId}\" ?hidden=${() => !hasHeaderTitle()}>\n              <slot name=\"header\">${() => getHeaderText()}</slot>\n            </span>\n            <button\n              class=\"close-btn\"\n              part=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close\"\n              ?hidden=${() => !props.dismissible.value}\n              @click=${handleCloseButtonClick}>\n              <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n            </button>\n          </div>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  },\n  styles: [elevationMixin, forcedColorsMixin, coarsePointerMixin, reducedMotionMixin, styles],\n});\n"],"mappings":"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"}

package/dist/feedback/alert/{alert.css?inline.cjs → alert.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--_bg:var(--alert-bg,var(--_theme-backdrop));--_color:var(--alert-color,var(--_theme-base));--_border-color:var(--alert-border-color,var(--_theme-border));--_radius:var(--alert-radius,var(--rounded-lg));--_padding:var(--alert-padding,var(--size-4));--_gap:var(--alert-gap,var(--size-3));--_font-size:var(--alert-font-size,var(--text-sm));--_shadow:var(--alert-shadow,var(--shadow-none));display:block}.sr-announce{white-space:nowrap;clip-path:inset(50%);border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:host([dismissed]){display:none}:host([dismissing]){pointer-events:none;animation:var(--_motion-animation,ore-alert-exit var(--transition-slow) var(--ease-in-out) forwards);overflow:hidden}@keyframes ore-alert-exit{0%{max-height:600px;margin-bottom:var(--size-3);opacity:1;transform:scaleY(1)}60%{opacity:0;transform:scaleY(.8)}to{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:scaleY(0)}}.alert{row-gap:var(--size-1);padding:var(--_padding);font-size:var(--_font-size);line-height:var(--leading-normal);color:var(--_color);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);grid-template-columns:auto 1fr auto;display:grid;overflow:hidden}.icon{grid-area:1/1;justify-content:center;align-self:start;align-items:center;display:inline-flex}.icon:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--_gap)}.icon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--_gap)}.alert:has(.header[hidden]) .icon{align-self:center}.icon[hidden]{display:none}.header{gap:var(--size-2);grid-area:1/2;align-items:baseline;display:flex}.header[hidden]{display:none}.heading{text-overflow:ellipsis;font-weight:var(--font-semibold);line-height:var(--leading-normal);white-space:nowrap;overflow:hidden}.meta{font-size:var(--text-xs);white-space:nowrap;opacity:.7}.meta:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:auto}.meta:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host(:not(:has([slot=meta]))) .meta{display:none}.body{min-width:0;margin-top:var(--size-1);grid-area:2/1/auto/-1}.alert:has(.header[hidden]) .body{grid-area:1/2;margin-top:0}.content{line-height:var(--leading-relaxed)}.actions{gap:var(--size-2);margin-top:var(--size-2);flex-wrap:wrap;grid-area:3/1/auto/-1;display:flex}.alert:has(.header[hidden]) .actions{grid-row:2}.actions[hidden]{display:none}:host([horizontal]) .alert{grid-template-columns:auto 1fr auto auto}:host([horizontal]) .body{grid-area:1/2;align-self:center;margin-top:0}:host([horizontal]) .actions:not([hidden]){flex-wrap:nowrap;grid-area:1/3;margin-top:0}:host([horizontal]) .actions:not([hidden]):not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--_gap)}:host([horizontal]) .actions:not([hidden]):-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--_gap)}:host([horizontal]) .actions:not([hidden]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--_gap)}:host([horizontal]) .close{grid-column:4;align-self:center}.close{width:var(--size-5);min-width:var(--_touch-target);height:var(--size-5);min-height:var(--_touch-target);color:inherit;cursor:pointer;border-radius:var(--rounded-sm);opacity:.7;transition:opacity var(--transition-fast), background var(--transition-fast);background:0 0;border:none;grid-area:1/3;justify-content:center;align-self:start;align-items:center;padding:0;display:inline-flex}.close:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--_gap)}.close:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--_gap)}.close[hidden]{display:none}.close:hover{background:color-mix(in oklch, currentcolor 12%, transparent);opacity:1}.close:focus-visible{outline:var(--border-2) solid currentcolor;outline-offset:var(--border-2);opacity:1}:host([variant=flat][accented]) .alert:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([variant=bordered][accented]) .alert:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-width:var(--border-4,4px)}:host([variant=flat][accented]) .alert:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-width:var(--border-4,4px)}:host([variant=bordered][accented]) .alert:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-width:var(--border-4,4px)}}@layer refine.variants{:host(:not([variant])),:host([variant=flat]){--_bg:var(--alert-bg,var(--color-canvas));--_color:var(--alert-color,var(--_theme-base));--_border-color:var(--alert-border-color,var(--_theme-base));--_shadow:var(--alert-shadow,var(--shadow-none))}:host([variant=solid]){--_bg:var(--alert-bg,var(--_theme-base));--_color:var(--alert-color,var(--_theme-contrast));--_border-color:var(--alert-border-color,var(--_theme-base));--_shadow:var(--alert-shadow,var(--shadow-xs))}:host([variant=bordered]){--_bg:var(--alert-bg,color-mix(in oklch, var(--_theme-backdrop), var(--color-canvas)));--_color:var(--alert-color,var(--_theme-base));--_border-color:var(--alert-border-color,color-mix(in oklch, var(--_theme-focus) 30%, transparent));--_shadow:var(--alert-shadow,var(--inset-shadow-2xs))}}`;exports.default=e;
-//# sourceMappingURL=alert.css?inline.cjs.map
+//# sourceMappingURL=alert.css.cjs.map

package/dist/feedback/alert/alert.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.css.cjs","names":[],"sources":["../../../src/feedback/alert/alert.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--alert-bg, var(--_theme-backdrop));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, var(--_theme-border));\n    --_radius: var(--alert-radius, var(--rounded-lg));\n    --_padding: var(--alert-padding, var(--size-4));\n    --_gap: var(--alert-gap, var(--size-3));\n    --_font-size: var(--alert-font-size, var(--text-sm));\n    --_shadow: var(--alert-shadow, var(--shadow-none));\n\n    display: block;\n  }\n\n  .sr-announce {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n\n  :host([dismissed]) {\n    display: none;\n  }\n\n  :host([dismissing]) {\n    overflow: hidden;\n    pointer-events: none;\n    animation: var(--_motion-animation, ore-alert-exit var(--transition-slow) var(--ease-in-out) forwards);\n  }\n\n  @keyframes ore-alert-exit {\n    0% {\n      /* Use a large enough value to cover any realistic alert height. */\n      max-height: 600px;\n      margin-bottom: var(--size-3);\n      opacity: 1;\n      transform: scaleY(1);\n    }\n\n    60% {\n      opacity: 0;\n      transform: scaleY(0.8);\n    }\n\n    100% {\n      max-height: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      margin-bottom: 0;\n      opacity: 0;\n      transform: scaleY(0);\n    }\n  }\n\n  .alert {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    row-gap: var(--size-1);\n    padding: var(--_padding);\n    overflow: hidden;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal);\n  }\n\n  /* ── Icon ──────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 1;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    margin-inline-end: var(--_gap);\n  }\n\n  /* Without heading: icon aligns with the body content */\n  .alert:has(.header[hidden]) .icon {\n    align-self: center;\n  }\n\n  .icon[hidden] {\n    display: none;\n  }\n\n  /* ── Header row (heading + meta) ───────────────── */\n\n  .header {\n    display: flex;\n    grid-row: 1;\n    grid-column: 2;\n    gap: var(--size-2);\n    align-items: baseline;\n  }\n\n  .header[hidden] {\n    display: none;\n  }\n\n  .heading {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-normal);\n    white-space: nowrap;\n  }\n\n  .meta {\n    margin-inline-start: auto;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n    opacity: 0.7;\n  }\n\n  :host(:not(:has([slot='meta']))) .meta {\n    display: none;\n  }\n\n  /* ── Body ──────────────────────────────────────── */\n\n  .body {\n    grid-row: 2;\n    grid-column: 1 / -1;\n    min-width: 0;\n    margin-top: var(--size-1);\n  }\n\n  /* Without heading: body moves up to share row with icon and close */\n  .alert:has(.header[hidden]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    margin-top: 0;\n  }\n\n  /* ── Content ───────────────────────────────────── */\n\n  .content {\n    line-height: var(--leading-relaxed);\n  }\n\n  /* ── Actions ───────────────────────────────────── */\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    grid-row: 3;\n    grid-column: 1 / -1;\n    gap: var(--size-2);\n    margin-top: var(--size-2);\n  }\n\n  /* Without heading: actions move to row 2 */\n  .alert:has(.header[hidden]) .actions {\n    grid-row: 2;\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n\n  /* Horizontal mode: 4-column grid — icon | body | actions | close */\n  :host([horizontal]) .alert {\n    grid-template-columns: auto 1fr auto auto;\n  }\n\n  :host([horizontal]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    align-self: center;\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .actions:not([hidden]) {\n    flex-wrap: nowrap;\n    grid-row: 1;\n    grid-column: 3;\n    margin-inline-start: var(--_gap);\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .close {\n    grid-column: 4;\n    align-self: center;\n  }\n\n  /* ── Close button ──────────────────────────────── */\n\n  .close {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 3;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    margin-inline-start: var(--_gap);\n    color: inherit;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    opacity: 0.7;\n    transition:\n      opacity var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .close[hidden] {\n    display: none;\n  }\n\n  .close:hover {\n    background: color-mix(in oklch, currentcolor 12%, transparent);\n    opacity: 1;\n  }\n\n  .close:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    opacity: 1;\n  }\n\n  /* Accented left border for flat and bordered variants */\n  :host([variant='flat'][accented]) .alert,\n  :host([variant='bordered'][accented]) .alert {\n    border-inline-start-width: var(--border-4, 4px);\n  }\n}\n\n@layer refine.variants {\n  /* Flat (Default) — canvas background, theme-colored border and text */\n  :host(:not([variant])),\n  :host([variant='flat']) {\n    --_bg: var(--alert-bg, var(--color-canvas));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, var(--_theme-base));\n    --_shadow: var(--alert-shadow, var(--shadow-none));\n  }\n\n  /* Solid — fully filled with theme color */\n  :host([variant='solid']) {\n    --_bg: var(--alert-bg, var(--_theme-base));\n    --_color: var(--alert-color, var(--_theme-contrast));\n    --_border-color: var(--alert-border-color, var(--_theme-base));\n    --_shadow: var(--alert-shadow, var(--shadow-xs));\n  }\n\n  /* Bordered — tinted background with a subtle themed border */\n  :host([variant='bordered']) {\n    --_bg: var(--alert-bg, color-mix(in oklch, var(--_theme-backdrop), var(--color-canvas)));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, color-mix(in oklch, var(--_theme-focus) 30%, transparent));\n    --_shadow: var(--alert-shadow, var(--inset-shadow-2xs));\n  }\n}\n"],"mappings":""}

package/dist/feedback/alert/{alert.css?inline.js → alert.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_bg:var(--alert-bg,var(--_theme-backdrop));-
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=alert.css?inline.js.map
+//# sourceMappingURL=alert.css.js.map

package/dist/feedback/alert/alert.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.css.js","names":[],"sources":["../../../src/feedback/alert/alert.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--alert-bg, var(--_theme-backdrop));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, var(--_theme-border));\n    --_radius: var(--alert-radius, var(--rounded-lg));\n    --_padding: var(--alert-padding, var(--size-4));\n    --_gap: var(--alert-gap, var(--size-3));\n    --_font-size: var(--alert-font-size, var(--text-sm));\n    --_shadow: var(--alert-shadow, var(--shadow-none));\n\n    display: block;\n  }\n\n  .sr-announce {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n\n  :host([dismissed]) {\n    display: none;\n  }\n\n  :host([dismissing]) {\n    overflow: hidden;\n    pointer-events: none;\n    animation: var(--_motion-animation, ore-alert-exit var(--transition-slow) var(--ease-in-out) forwards);\n  }\n\n  @keyframes ore-alert-exit {\n    0% {\n      /* Use a large enough value to cover any realistic alert height. */\n      max-height: 600px;\n      margin-bottom: var(--size-3);\n      opacity: 1;\n      transform: scaleY(1);\n    }\n\n    60% {\n      opacity: 0;\n      transform: scaleY(0.8);\n    }\n\n    100% {\n      max-height: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      margin-bottom: 0;\n      opacity: 0;\n      transform: scaleY(0);\n    }\n  }\n\n  .alert {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    row-gap: var(--size-1);\n    padding: var(--_padding);\n    overflow: hidden;\n    font-size: var(--_font-size);\n    line-height: var(--leading-normal);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal);\n  }\n\n  /* ── Icon ──────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 1;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    margin-inline-end: var(--_gap);\n  }\n\n  /* Without heading: icon aligns with the body content */\n  .alert:has(.header[hidden]) .icon {\n    align-self: center;\n  }\n\n  .icon[hidden] {\n    display: none;\n  }\n\n  /* ── Header row (heading + meta) ───────────────── */\n\n  .header {\n    display: flex;\n    grid-row: 1;\n    grid-column: 2;\n    gap: var(--size-2);\n    align-items: baseline;\n  }\n\n  .header[hidden] {\n    display: none;\n  }\n\n  .heading {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-normal);\n    white-space: nowrap;\n  }\n\n  .meta {\n    margin-inline-start: auto;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n    opacity: 0.7;\n  }\n\n  :host(:not(:has([slot='meta']))) .meta {\n    display: none;\n  }\n\n  /* ── Body ──────────────────────────────────────── */\n\n  .body {\n    grid-row: 2;\n    grid-column: 1 / -1;\n    min-width: 0;\n    margin-top: var(--size-1);\n  }\n\n  /* Without heading: body moves up to share row with icon and close */\n  .alert:has(.header[hidden]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    margin-top: 0;\n  }\n\n  /* ── Content ───────────────────────────────────── */\n\n  .content {\n    line-height: var(--leading-relaxed);\n  }\n\n  /* ── Actions ───────────────────────────────────── */\n\n  .actions {\n    display: flex;\n    flex-wrap: wrap;\n    grid-row: 3;\n    grid-column: 1 / -1;\n    gap: var(--size-2);\n    margin-top: var(--size-2);\n  }\n\n  /* Without heading: actions move to row 2 */\n  .alert:has(.header[hidden]) .actions {\n    grid-row: 2;\n  }\n\n  .actions[hidden] {\n    display: none;\n  }\n\n  /* Horizontal mode: 4-column grid — icon | body | actions | close */\n  :host([horizontal]) .alert {\n    grid-template-columns: auto 1fr auto auto;\n  }\n\n  :host([horizontal]) .body {\n    grid-row: 1;\n    grid-column: 2;\n    align-self: center;\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .actions:not([hidden]) {\n    flex-wrap: nowrap;\n    grid-row: 1;\n    grid-column: 3;\n    margin-inline-start: var(--_gap);\n    margin-top: 0;\n  }\n\n  :host([horizontal]) .close {\n    grid-column: 4;\n    align-self: center;\n  }\n\n  /* ── Close button ──────────────────────────────── */\n\n  .close {\n    display: inline-flex;\n    grid-row: 1;\n    grid-column: 3;\n    align-items: center;\n    align-self: start;\n    justify-content: center;\n    width: var(--size-5);\n    min-width: var(--_touch-target);\n    height: var(--size-5);\n    min-height: var(--_touch-target);\n    padding: 0;\n    margin-inline-start: var(--_gap);\n    color: inherit;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-sm);\n    opacity: 0.7;\n    transition:\n      opacity var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .close[hidden] {\n    display: none;\n  }\n\n  .close:hover {\n    background: color-mix(in oklch, currentcolor 12%, transparent);\n    opacity: 1;\n  }\n\n  .close:focus-visible {\n    outline: var(--border-2) solid currentcolor;\n    outline-offset: var(--border-2);\n    opacity: 1;\n  }\n\n  /* Accented left border for flat and bordered variants */\n  :host([variant='flat'][accented]) .alert,\n  :host([variant='bordered'][accented]) .alert {\n    border-inline-start-width: var(--border-4, 4px);\n  }\n}\n\n@layer refine.variants {\n  /* Flat (Default) — canvas background, theme-colored border and text */\n  :host(:not([variant])),\n  :host([variant='flat']) {\n    --_bg: var(--alert-bg, var(--color-canvas));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, var(--_theme-base));\n    --_shadow: var(--alert-shadow, var(--shadow-none));\n  }\n\n  /* Solid — fully filled with theme color */\n  :host([variant='solid']) {\n    --_bg: var(--alert-bg, var(--_theme-base));\n    --_color: var(--alert-color, var(--_theme-contrast));\n    --_border-color: var(--alert-border-color, var(--_theme-base));\n    --_shadow: var(--alert-shadow, var(--shadow-xs));\n  }\n\n  /* Bordered — tinted background with a subtle themed border */\n  :host([variant='bordered']) {\n    --_bg: var(--alert-bg, color-mix(in oklch, var(--_theme-backdrop), var(--color-canvas)));\n    --_color: var(--alert-color, var(--_theme-base));\n    --_border-color: var(--alert-border-color, color-mix(in oklch, var(--_theme-focus) 30%, transparent));\n    --_shadow: var(--alert-shadow, var(--inset-shadow-2xs));\n  }\n}\n"],"mappings":""}

package/dist/feedback/async/{async.css?inline.cjs → async.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--_color:var(--async-color,var(--color-contrast-500));--_icon-size:var(--async-icon-size,var(--size-12));--_gap:var(--async-gap,var(--size-3));display:block}.region{display:none}:host([status=idle]) .region-idle,:host([status=loading]) .region-loading,:host([status=empty]) .region-empty,:host([status=error]) .region-error,:host([status=success]) .region-success,:host(:not([status])) .region-success{display:block}.empty-state{gap:var(--_gap);padding:var(--size-10) var(--size-6);color:var(--_color);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state .icon{width:var(--_icon-size);height:var(--_icon-size);opacity:.4;justify-content:center;align-items:center;display:flex}.empty-state .icon svg{width:100%;height:100%}.empty-state .icon ore-icon{width:100%;height:100%;display:flex}.empty-state .title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-contrast-700)}.empty-state .description{max-width:28ch;font-size:var(--text-sm);line-height:var(--leading-relaxed);opacity:.75}.error-state{gap:var(--_gap);padding:var(--size-10) var(--size-6);color:var(--color-error-600);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.error-state .icon{width:var(--_icon-size);height:var(--_icon-size);opacity:.7;justify-content:center;align-items:center;display:flex}.error-state .icon svg{width:100%;height:100%}.error-state .icon ore-icon{width:100%;height:100%;display:flex}.error-state .title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-error-700)}.error-state .description{max-width:32ch;font-size:var(--text-sm);line-height:var(--leading-relaxed);opacity:.85}.error-state .retry-btn{gap:var(--size-1-5);padding:var(--size-2) var(--size-4);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-error-700);cursor:pointer;border-radius:var(--rounded-md);transition:var(--_motion-transition,background var(--transition-fast), opacity var(--transition-fast));background:0 0;border:1px solid;align-items:center;display:inline-flex}.error-state .retry-btn ore-icon{flex:none}.error-state .retry-btn:hover{background:color-mix(in oklch, var(--color-error-500) 10%, transparent)}.error-state .retry-btn:focus-visible{outline:2px solid var(--color-error-500);outline-offset:2px}.loading-default{gap:var(--size-2);padding:var(--size-4);flex-direction:column;display:flex}}`;exports.default=e;
-//# sourceMappingURL=async.css?inline.cjs.map
+//# sourceMappingURL=async.css.cjs.map

package/dist/feedback/async/async.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.css.cjs","names":[],"sources":["../../../src/feedback/async/async.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_color: var(--async-color, var(--color-contrast-500));\n    --_icon-size: var(--async-icon-size, var(--size-12));\n    --_gap: var(--async-gap, var(--size-3));\n\n    display: block;\n  }\n\n  /* ── Status regions ─────────────────────────────────────────────── */\n\n  /* All regions always exist in the shadow DOM; only one is visible at a time. */\n  .region {\n    display: none;\n  }\n\n  :host([status='idle']) .region-idle,\n  :host([status='loading']) .region-loading,\n  :host([status='empty']) .region-empty,\n  :host([status='error']) .region-error,\n  :host([status='success']) .region-success,\n  :host(:not([status])) .region-success {\n    display: block;\n  }\n\n  /* ── Empty state ─────────────────────────────────────────────────── */\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--_color);\n    text-align: center;\n  }\n\n  .empty-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.4;\n  }\n\n  .empty-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .icon ore-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n  }\n\n  .empty-state .description {\n    max-width: 28ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.75;\n  }\n\n  /* ── Error state ─────────────────────────────────────────────────── */\n\n  .error-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--color-error-600);\n    text-align: center;\n  }\n\n  .error-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.7;\n  }\n\n  .error-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .icon ore-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-error-700);\n  }\n\n  .error-state .description {\n    max-width: 32ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.85;\n  }\n\n  .error-state .retry-btn {\n    display: inline-flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-error-700);\n    cursor: pointer;\n    background: none;\n    border: 1px solid currentcolor;\n    border-radius: var(--rounded-md);\n    transition: var(--_motion-transition, background var(--transition-fast), opacity var(--transition-fast));\n  }\n\n  .error-state .retry-btn ore-icon {\n    flex: none;\n  }\n\n  .error-state .retry-btn:hover {\n    background: color-mix(in oklch, var(--color-error-500) 10%, transparent);\n  }\n\n  .error-state .retry-btn:focus-visible {\n    outline: 2px solid var(--color-error-500);\n    outline-offset: 2px;\n  }\n\n  /* ── Loading (fallback skeleton block) ───────────────────────────── */\n\n  .loading-default {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    padding: var(--size-4);\n  }\n}\n"],"mappings":""}

package/dist/feedback/async/{async.css?inline.js → async.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_color:var(--async-color,var(--color-contras
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=async.css?inline.js.map
+//# sourceMappingURL=async.css.js.map

package/dist/feedback/async/async.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.css.js","names":[],"sources":["../../../src/feedback/async/async.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_color: var(--async-color, var(--color-contrast-500));\n    --_icon-size: var(--async-icon-size, var(--size-12));\n    --_gap: var(--async-gap, var(--size-3));\n\n    display: block;\n  }\n\n  /* ── Status regions ─────────────────────────────────────────────── */\n\n  /* All regions always exist in the shadow DOM; only one is visible at a time. */\n  .region {\n    display: none;\n  }\n\n  :host([status='idle']) .region-idle,\n  :host([status='loading']) .region-loading,\n  :host([status='empty']) .region-empty,\n  :host([status='error']) .region-error,\n  :host([status='success']) .region-success,\n  :host(:not([status])) .region-success {\n    display: block;\n  }\n\n  /* ── Empty state ─────────────────────────────────────────────────── */\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--_color);\n    text-align: center;\n  }\n\n  .empty-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.4;\n  }\n\n  .empty-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .icon ore-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n  }\n\n  .empty-state .description {\n    max-width: 28ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.75;\n  }\n\n  /* ── Error state ─────────────────────────────────────────────────── */\n\n  .error-state {\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-10) var(--size-6);\n    color: var(--color-error-600);\n    text-align: center;\n  }\n\n  .error-state .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    opacity: 0.7;\n  }\n\n  .error-state .icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .icon ore-icon {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  .error-state .title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-error-700);\n  }\n\n  .error-state .description {\n    max-width: 32ch;\n    font-size: var(--text-sm);\n    line-height: var(--leading-relaxed);\n    opacity: 0.85;\n  }\n\n  .error-state .retry-btn {\n    display: inline-flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    padding: var(--size-2) var(--size-4);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-error-700);\n    cursor: pointer;\n    background: none;\n    border: 1px solid currentcolor;\n    border-radius: var(--rounded-md);\n    transition: var(--_motion-transition, background var(--transition-fast), opacity var(--transition-fast));\n  }\n\n  .error-state .retry-btn ore-icon {\n    flex: none;\n  }\n\n  .error-state .retry-btn:hover {\n    background: color-mix(in oklch, var(--color-error-500) 10%, transparent);\n  }\n\n  .error-state .retry-btn:focus-visible {\n    outline: 2px solid var(--color-error-500);\n    outline-offset: 2px;\n  }\n\n  /* ── Loading (fallback skeleton block) ───────────────────────────── */\n\n  .loading-default {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    padding: var(--size-4);\n  }\n}\n"],"mappings":""}

package/dist/feedback/badge/{badge.css?inline.cjs → badge.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--_bg:var(--badge-bg,var(--_theme-backdrop));--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-border));--_radius:var(--badge-radius,var(--rounded-lg));--_font-size:var(--badge-font-size,var(--text-xs));--_font-weight:var(--badge-font-weight,var(--font-semibold));--_padding-x:var(--badge-padding-x,var(--size-1-5));--_padding-y:var(--badge-padding-y,var(--size-0-5));--_gap:var(--badge-gap,var(--size-1));vertical-align:middle;display:inline-flex}.badge{gap:var(--_gap);min-width:var(--size-2);max-width:var(--badge-max-width,24ch);padding:var(--_padding-y) var(--_padding-x);text-overflow:ellipsis;font-size:var(--_font-size);font-weight:var(--_font-weight);color:var(--_color);white-space:nowrap;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:hidden}.badge-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;width:1em;height:1em;display:inline-flex}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--badge-bg,var(--_theme-base));--_color:var(--badge-color,var(--_theme-contrast));--_border-color:var(--badge-border-color,var(--_theme-base))}:host([variant=flat]){--_bg:var(--badge-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent))}:host([variant=bordered]){--_bg:var(--badge-bg,var(--_theme-backdrop));--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-border))}:host([variant=outline]){--_bg:var(--badge-bg,transparent);--_color:var(--badge-color,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-base))}:host([dot]) .badge{min-width:unset;padding:var(--_dot-padding,var(--size-1));line-height:0}}@layer refine.sizes{:host([size=xs]){--_padding-x:var(--size-1);--_padding-y:0px;--_font-size:var(--text-2xs);--_dot-padding:var(--size-0-5)}}@layer refine.overrides{:host([dot]){--_bg:var(--badge-bg,var(--_theme-base));--_border-color:var(--badge-border-color,var(--_theme-base))}:host([anchor]){display:inline-flex;position:relative}:host{--_dir:1}:host(:dir(rtl)){--_dir:-1}:host([anchor]) .badge{z-index:1;transform:translate(calc(var(--_dir) * 30%), -30%);position:absolute;top:0}:host([anchor]) .badge:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([anchor]) .badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}:host([anchor=top-start]) .badge{transform:translate(calc(var(--_dir) * -30%), -30%)}:host([anchor=top-start]) .badge:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0;right:unset}:host([anchor=top-start]) .badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0;left:unset}:host([anchor=bottom-end]) .badge{top:unset;transform:translate(calc(var(--_dir) * 30%), 30%);bottom:0}:host([anchor=bottom-start]) .badge{top:unset;transform:translate(calc(var(--_dir) * -30%), 30%);bottom:0}:host([anchor=bottom-start]) .badge:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0;right:unset}:host([anchor=bottom-start]) .badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0;left:unset}}`;exports.default=e;
-//# sourceMappingURL=badge.css?inline.cjs.map
+//# sourceMappingURL=badge.css.cjs.map

package/dist/feedback/badge/badge.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.css.cjs","names":[],"sources":["../../../src/feedback/badge/badge.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n    --_radius: var(--badge-radius, var(--rounded-lg));\n    --_font-size: var(--badge-font-size, var(--text-xs));\n    --_font-weight: var(--badge-font-weight, var(--font-semibold));\n    --_padding-x: var(--badge-padding-x, var(--size-1-5));\n    --_padding-y: var(--badge-padding-y, var(--size-0-5));\n    --_gap: var(--badge-gap, var(--size-1));\n\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .badge {\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n\n    /* Dot-only (no text slot) gets circular shape */\n    min-width: var(--size-2);\n    max-width: var(--badge-max-width, 24ch);\n    padding: var(--_padding-y) var(--_padding-x);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .badge-label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) - Full theme color background */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_color: var(--badge-color, var(--_theme-contrast));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Flat - Subtle background with theme color text */\n  :host([variant='flat']) {\n    --_bg: var(--badge-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  /* Bordered - Outlined with filled background */\n  :host([variant='bordered']) {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n  }\n\n  /* Outline - Transparent with colored border */\n  :host([variant='outline']) {\n    --_bg: var(--badge-bg, transparent);\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Dot-only mode */\n  :host([dot]) .badge {\n    min-width: unset;\n    padding: var(--_dot-padding, var(--size-1));\n    line-height: 0;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='xs']) {\n    --_padding-x: var(--size-1);\n    --_padding-y: 0px;\n    --_font-size: var(--text-2xs);\n    --_dot-padding: var(--size-0-5);\n  }\n}\n\n@layer refine.overrides {\n  /* Dot — always force badge background and border regardless of variant */\n  :host([dot]) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* ========================================\n       Anchor overlay mode\n       ======================================== */\n\n  :host([anchor]) {\n    position: relative;\n    display: inline-flex;\n  }\n\n  /*\n     * Per-direction multiplier: +1 in LTR, -1 in RTL.\n     * Used to flip the translateX offset so the badge always overflows\n     * the correct physical edge that corresponds to its logical corner.\n     */\n  :host {\n    --_dir: 1;\n  }\n\n  :host(:dir(rtl)) {\n    --_dir: -1;\n  }\n\n  /* Default position: top-end */\n  :host([anchor]) .badge {\n    position: absolute;\n    inset-inline-end: 0;\n    top: 0;\n    z-index: 1;\n    transform: translate(calc(var(--_dir) * 30%), -30%);\n  }\n\n  :host([anchor='top-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    transform: translate(calc(var(--_dir) * -30%), -30%);\n  }\n\n  :host([anchor='bottom-end']) .badge {\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * 30%), 30%);\n  }\n\n  :host([anchor='bottom-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * -30%), 30%);\n  }\n}\n"],"mappings":""}

package/dist/feedback/badge/{badge.css?inline.js → badge.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_bg:var(--badge-bg,var(--_theme-backdrop));-
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=badge.css?inline.js.map
+//# sourceMappingURL=badge.css.js.map

package/dist/feedback/badge/badge.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.css.js","names":[],"sources":["../../../src/feedback/badge/badge.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n    --_radius: var(--badge-radius, var(--rounded-lg));\n    --_font-size: var(--badge-font-size, var(--text-xs));\n    --_font-weight: var(--badge-font-weight, var(--font-semibold));\n    --_padding-x: var(--badge-padding-x, var(--size-1-5));\n    --_padding-y: var(--badge-padding-y, var(--size-0-5));\n    --_gap: var(--badge-gap, var(--size-1));\n\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  .badge {\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: center;\n\n    /* Dot-only (no text slot) gets circular shape */\n    min-width: var(--size-2);\n    max-width: var(--badge-max-width, 24ch);\n    padding: var(--_padding-y) var(--_padding-x);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .badge-label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) - Full theme color background */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_color: var(--badge-color, var(--_theme-contrast));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Flat - Subtle background with theme color text */\n  :host([variant='flat']) {\n    --_bg: var(--badge-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n  }\n\n  /* Bordered - Outlined with filled background */\n  :host([variant='bordered']) {\n    --_bg: var(--badge-bg, var(--_theme-backdrop));\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-border));\n  }\n\n  /* Outline - Transparent with colored border */\n  :host([variant='outline']) {\n    --_bg: var(--badge-bg, transparent);\n    --_color: var(--badge-color, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* Dot-only mode */\n  :host([dot]) .badge {\n    min-width: unset;\n    padding: var(--_dot-padding, var(--size-1));\n    line-height: 0;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='xs']) {\n    --_padding-x: var(--size-1);\n    --_padding-y: 0px;\n    --_font-size: var(--text-2xs);\n    --_dot-padding: var(--size-0-5);\n  }\n}\n\n@layer refine.overrides {\n  /* Dot — always force badge background and border regardless of variant */\n  :host([dot]) {\n    --_bg: var(--badge-bg, var(--_theme-base));\n    --_border-color: var(--badge-border-color, var(--_theme-base));\n  }\n\n  /* ========================================\n       Anchor overlay mode\n       ======================================== */\n\n  :host([anchor]) {\n    position: relative;\n    display: inline-flex;\n  }\n\n  /*\n     * Per-direction multiplier: +1 in LTR, -1 in RTL.\n     * Used to flip the translateX offset so the badge always overflows\n     * the correct physical edge that corresponds to its logical corner.\n     */\n  :host {\n    --_dir: 1;\n  }\n\n  :host(:dir(rtl)) {\n    --_dir: -1;\n  }\n\n  /* Default position: top-end */\n  :host([anchor]) .badge {\n    position: absolute;\n    inset-inline-end: 0;\n    top: 0;\n    z-index: 1;\n    transform: translate(calc(var(--_dir) * 30%), -30%);\n  }\n\n  :host([anchor='top-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    transform: translate(calc(var(--_dir) * -30%), -30%);\n  }\n\n  :host([anchor='bottom-end']) .badge {\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * 30%), 30%);\n  }\n\n  :host([anchor='bottom-start']) .badge {\n    inset-inline-start: 0;\n    inset-inline-end: unset;\n    top: unset;\n    bottom: 0;\n    transform: translate(calc(var(--_dir) * -30%), 30%);\n  }\n}\n"],"mappings":""}

package/dist/feedback/chip/{chip.css?inline.cjs → chip.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--_bg:var(--chip-bg,var(--color-contrast-150));--_color:var(--chip-color,var(--color-contrast-800));--_border-color:var(--chip-border-color,transparent);--_radius:var(--chip-radius,var(--rounded-lg));--_font-size:var(--chip-font-size,var(--text-sm));--_font-weight:var(--chip-font-weight,var(--font-medium));--_padding-x:var(--chip-padding-x,var(--size-2-5));--_padding-y:var(--chip-padding-y,var(--size-0-5));--_gap:var(--chip-gap,var(--size-1));vertical-align:middle;align-items:center;max-width:100%;display:inline-flex}.chip{box-sizing:border-box;gap:var(--_gap);max-width:100%;padding:var(--_padding-y) var(--_padding-x);font-size:var(--_font-size);font-weight:var(--_font-weight);color:var(--_color);white-space:nowrap;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);align-items:center;line-height:1.2;display:inline-flex;position:relative}.label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.remove-btn{width:1.35em;height:1.35em;margin-inline:var(--size-0-5) calc(var(--size-2) * -1);color:inherit;cursor:pointer;background:color-mix(in oklch, currentcolor 12%, transparent);border-radius:var(--_radius);opacity:.7;transition:background var(--transition-fast), opacity var(--transition-fast);border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.remove-btn:hover{background:color-mix(in oklch, currentcolor 28%, transparent);opacity:1}.remove-btn:focus-visible{outline-offset:1px;opacity:1;outline:2px solid}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;width:1em;height:1em;display:inline-flex}.chip-btn{width:100%;font:inherit;color:inherit;text-align:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0;display:inline-flex}.chip-btn:disabled{cursor:not-allowed}:host([mode=selectable][checked]) .chip{outline:var(--border-2) solid var(--_theme-base,currentColor);outline-offset:-2px}:host([mode=selectable]:not([disabled])) .chip,:host([mode=action]:not([disabled])) .chip{cursor:pointer}.chip-btn:focus-visible{outline:2px solid var(--_theme-base,currentColor);outline-offset:2px;border-radius:var(--_radius)}}@layer refine.variants{:host(:not([variant])),:host([variant=solid]){--_bg:var(--chip-bg,var(--_theme-base,var(--color-contrast-700)));--_color:var(--chip-color,var(--_theme-contrast,var(--color-contrast-50)));--_border-color:var(--chip-border-color,transparent);--_hover-bg:var(--chip-hover-bg,var(--_theme-focus,var(--color-contrast-800)));--_active-bg:var(--chip-active-bg,color-mix(in oklch, var(--_theme-focus,var(--color-contrast-800)) 85%, black))}:host([variant=flat]){--_bg:var(--chip-bg,color-mix(in oklch, var(--_theme-backdrop,var(--color-contrast-200)) 55%, transparent));--_color:var(--chip-color,var(--_theme-base,var(--color-contrast-800)));--_border-color:var(--chip-border-color,transparent);--_hover-bg:var(--chip-hover-bg,var(--_theme-focus,var(--color-contrast-700)));--_hover-color:var(--chip-hover-color,var(--_theme-contrast,var(--color-contrast-50)));--_active-bg:var(--chip-active-bg,color-mix(in oklch, var(--_theme-focus,var(--color-contrast-800)) 85%, black));--_active-color:var(--chip-active-color,var(--_theme-contrast,var(--color-contrast-50)))}:host([variant=bordered]){--_bg:var(--chip-bg,var(--_theme-backdrop,var(--color-contrast-50)));--_color:var(--chip-color,var(--_theme-base,var(--color-contrast-900)));--_border-color:var(--chip-border-color,var(--_theme-border,var(--color-contrast-300)));--_remove-bg:var(--chip-remove-bg,var(--_theme-focus,var(--color-contrast-700)));--_remove-color:var(--chip-remove-color,var(--_theme-backdrop,var(--color-contrast-50)));--_hover-bg:var(--chip-hover-bg,var(--_theme-focus,var(--color-contrast-700)));--_hover-color:var(--chip-hover-color,var(--_theme-contrast,var(--color-contrast-50)));--_hover-border-color:var(--chip-hover-border-color,var(--_theme-focus,var(--color-contrast-700)));--_active-bg:var(--chip-active-bg,color-mix(in oklch, var(--_theme-focus,var(--color-contrast-800)) 85%, black));--_active-color:var(--chip-active-color,var(--_theme-contrast,var(--color-contrast-50)))}:host([variant=outline]){--_bg:var(--chip-bg,transparent);--_color:var(--chip-color,var(--_theme-base,var(--color-contrast-900)));--_border-color:var(--chip-border-color,var(--_theme-base,var(--color-contrast-400)));--_remove-bg:var(--chip-remove-bg,var(--_theme-focus,var(--color-contrast-700)));--_remove-color:var(--chip-remove-color,var(--_theme-backdrop,var(--color-contrast-50)));--_hover-bg:var(--chip-hover-bg,var(--_theme-backdrop,var(--color-contrast-100)));--_hover-border-color:var(--chip-hover-border-color,var(--_theme-focus,var(--color-contrast-700)));--_active-bg:var(--chip-active-bg,var(--_theme-base,var(--color-contrast-700)));--_active-color:var(--chip-active-color,var(--_theme-contrast,var(--color-contrast-50)))}:host([variant=ghost]){--_bg:var(--chip-bg,transparent);--_color:var(--chip-color,var(--_theme-base,var(--color-contrast-900)));--_border-color:var(--chip-border-color,transparent);--_hover-bg:var(--chip-hover-bg,var(--_theme-backdrop,var(--color-contrast-100)));--_active-bg:var(--chip-active-bg,var(--_theme-base,var(--color-contrast-700)));--_active-color:var(--chip-active-color,var(--_theme-contrast,var(--color-contrast-50)))}:host([variant=bordered]) .remove-btn,:host([variant=outline]) .remove-btn{color:var(--_remove-color);background:var(--_remove-bg);border:var(--border) solid var(--_remove-bg)}:host([variant=bordered]) .remove-btn:hover,:host([variant=outline]) .remove-btn:hover{background:var(--chip-remove-hover-bg,color-mix(in oklch, var(--_remove-bg) 80%, var(--color-contrast-900)));opacity:1}:host([variant=ghost]) .remove-btn{border:var(--border) solid var(--_theme-focus,var(--color-contrast-400))}:host([variant=ghost]) .remove-btn:hover{background:var(--chip-remove-hover-bg,color-mix(in oklch, currentcolor 15%, transparent))}:host(:is(:not([variant]),[variant=solid],[variant=flat],[variant=bordered],[variant=outline],[variant=ghost]):is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}:host(:is(:not([variant]),[variant=solid],[variant=flat],[variant=bordered],[variant=outline],[variant=ghost]):is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));box-shadow:var(--inset-shadow-2xs)}}`;exports.default=e;
-//# sourceMappingURL=chip.css?inline.cjs.map
+//# sourceMappingURL=chip.css.cjs.map

package/dist/feedback/chip/chip.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.css.cjs","names":[],"sources":["../../../src/feedback/chip/chip.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chip-bg, var(--color-contrast-150));\n    --_color: var(--chip-color, var(--color-contrast-800));\n    --_border-color: var(--chip-border-color, transparent);\n    --_radius: var(--chip-radius, var(--rounded-lg));\n    --_font-size: var(--chip-font-size, var(--text-sm));\n    --_font-weight: var(--chip-font-weight, var(--font-medium));\n    --_padding-x: var(--chip-padding-x, var(--size-2-5));\n    --_padding-y: var(--chip-padding-y, var(--size-0-5));\n    --_gap: var(--chip-gap, var(--size-1));\n\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    vertical-align: middle;\n  }\n\n  .chip {\n    position: relative;\n    box-sizing: border-box;\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    max-width: 100%;\n    padding: var(--_padding-y) var(--_padding-x);\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1.2;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ========================================\n       Remove Button\n       ======================================== */\n\n  .remove-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.35em;\n    height: 1.35em;\n    padding: 0;\n    margin-inline: var(--size-0-5) calc(var(--size-2) * -1);\n    color: inherit;\n    cursor: pointer;\n    background: color-mix(in oklch, currentcolor 12%, transparent);\n    border: none;\n    border-radius: var(--_radius);\n    opacity: 0.7;\n    transition:\n      background var(--transition-fast),\n      opacity var(--transition-fast);\n  }\n\n  .remove-btn:hover {\n    background: color-mix(in oklch, currentcolor 28%, transparent);\n    opacity: 1;\n  }\n\n  .remove-btn:focus-visible {\n    outline: 2px solid currentcolor;\n    outline-offset: 1px;\n    opacity: 1;\n  }\n\n  /* ========================================\n       Icon slot\n       ======================================== */\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n  }\n\n  .chip-btn {\n    display: inline-flex;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .chip-btn:disabled {\n    cursor: not-allowed;\n  }\n\n  :host([mode='selectable'][checked]) .chip {\n    outline: var(--border-2) solid var(--_theme-base, currentColor);\n    outline-offset: -2px;\n  }\n\n  :host([mode='selectable']:not([disabled])) .chip,\n  :host([mode='action']:not([disabled])) .chip {\n    cursor: pointer;\n  }\n\n  .chip-btn:focus-visible {\n    outline: 2px solid var(--_theme-base, currentColor);\n    outline-offset: 2px;\n    border-radius: var(--_radius);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) — full theme color fill */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--chip-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_color: var(--chip-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-800)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n  }\n\n  /* Flat — subtle tint */\n  :host([variant='flat']) {\n    --_bg: var(--chip-bg, color-mix(in oklch, var(--_theme-backdrop, var(--color-contrast-200)) 55%, transparent));\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-800)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_hover-color: var(--chip-hover-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Bordered — backdrop fill with themed border */\n  :host([variant='bordered']) {\n    --_bg: var(--chip-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, var(--_theme-border, var(--color-contrast-300)));\n    --_remove-bg: var(--chip-remove-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_remove-color: var(--chip-remove-color, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_hover-color: var(--chip-hover-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_hover-border-color: var(--chip-hover-border-color, var(--_theme-focus, var(--color-contrast-700)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Outline — transparent with colored border */\n  :host([variant='outline']) {\n    --_bg: var(--chip-bg, transparent);\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, var(--_theme-base, var(--color-contrast-400)));\n    --_remove-bg: var(--chip-remove-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_remove-color: var(--chip-remove-color, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    --_hover-border-color: var(--chip-hover-border-color, var(--_theme-focus, var(--color-contrast-700)));\n    --_active-bg: var(--chip-active-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Ghost — transparent, no border */\n  :host([variant='ghost']) {\n    --_bg: var(--chip-bg, transparent);\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    --_active-bg: var(--chip-active-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* ── Remove button theming (tokens set per-variant above) ── */\n\n  :host([variant='bordered']) .remove-btn,\n  :host([variant='outline']) .remove-btn {\n    color: var(--_remove-color);\n    background: var(--_remove-bg);\n    border: var(--border) solid var(--_remove-bg);\n  }\n\n  :host([variant='bordered']) .remove-btn:hover,\n  :host([variant='outline']) .remove-btn:hover {\n    background: var(--chip-remove-hover-bg, color-mix(in oklch, var(--_remove-bg) 80%, var(--color-contrast-900)));\n    opacity: 1;\n  }\n\n  :host([variant='ghost']) .remove-btn {\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([variant='ghost']) .remove-btn:hover {\n    background: var(--chip-remove-hover-bg, color-mix(in oklch, currentcolor 15%, transparent));\n  }\n\n  /* ========================================\n     Hover / Active Feedback — interactive modes\n     ======================================== */\n\n  :host(\n      :is(\n          :not([variant]),\n          [variant='solid'],\n          [variant='flat'],\n          [variant='bordered'],\n          [variant='outline'],\n          [variant='ghost']\n        ):is([mode='selectable'], [mode='action']):not([disabled])\n    )\n    .chip-btn:hover\n    .chip {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  :host(\n      :is(\n          :not([variant]),\n          [variant='solid'],\n          [variant='flat'],\n          [variant='bordered'],\n          [variant='outline'],\n          [variant='ghost']\n        ):is([mode='selectable'], [mode='action']):not([disabled])\n    )\n    .chip-btn:active\n    .chip {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n"],"mappings":""}

package/dist/feedback/chip/{chip.css?inline.js → chip.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_bg:var(--chip-bg,var(--color-contrast-150))
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=chip.css?inline.js.map
+//# sourceMappingURL=chip.css.js.map

package/dist/feedback/chip/chip.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.css.js","names":[],"sources":["../../../src/feedback/chip/chip.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--chip-bg, var(--color-contrast-150));\n    --_color: var(--chip-color, var(--color-contrast-800));\n    --_border-color: var(--chip-border-color, transparent);\n    --_radius: var(--chip-radius, var(--rounded-lg));\n    --_font-size: var(--chip-font-size, var(--text-sm));\n    --_font-weight: var(--chip-font-weight, var(--font-medium));\n    --_padding-x: var(--chip-padding-x, var(--size-2-5));\n    --_padding-y: var(--chip-padding-y, var(--size-0-5));\n    --_gap: var(--chip-gap, var(--size-1));\n\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    vertical-align: middle;\n  }\n\n  .chip {\n    position: relative;\n    box-sizing: border-box;\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    max-width: 100%;\n    padding: var(--_padding-y) var(--_padding-x);\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1.2;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ========================================\n       Remove Button\n       ======================================== */\n\n  .remove-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.35em;\n    height: 1.35em;\n    padding: 0;\n    margin-inline: var(--size-0-5) calc(var(--size-2) * -1);\n    color: inherit;\n    cursor: pointer;\n    background: color-mix(in oklch, currentcolor 12%, transparent);\n    border: none;\n    border-radius: var(--_radius);\n    opacity: 0.7;\n    transition:\n      background var(--transition-fast),\n      opacity var(--transition-fast);\n  }\n\n  .remove-btn:hover {\n    background: color-mix(in oklch, currentcolor 28%, transparent);\n    opacity: 1;\n  }\n\n  .remove-btn:focus-visible {\n    outline: 2px solid currentcolor;\n    outline-offset: 1px;\n    opacity: 1;\n  }\n\n  /* ========================================\n       Icon slot\n       ======================================== */\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n  }\n\n  .chip-btn {\n    display: inline-flex;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .chip-btn:disabled {\n    cursor: not-allowed;\n  }\n\n  :host([mode='selectable'][checked]) .chip {\n    outline: var(--border-2) solid var(--_theme-base, currentColor);\n    outline-offset: -2px;\n  }\n\n  :host([mode='selectable']:not([disabled])) .chip,\n  :host([mode='action']:not([disabled])) .chip {\n    cursor: pointer;\n  }\n\n  .chip-btn:focus-visible {\n    outline: 2px solid var(--_theme-base, currentColor);\n    outline-offset: 2px;\n    border-radius: var(--_radius);\n  }\n}\n\n@layer refine.variants {\n  /* Solid (Default) — full theme color fill */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--chip-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_color: var(--chip-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-800)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n  }\n\n  /* Flat — subtle tint */\n  :host([variant='flat']) {\n    --_bg: var(--chip-bg, color-mix(in oklch, var(--_theme-backdrop, var(--color-contrast-200)) 55%, transparent));\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-800)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_hover-color: var(--chip-hover-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Bordered — backdrop fill with themed border */\n  :host([variant='bordered']) {\n    --_bg: var(--chip-bg, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, var(--_theme-border, var(--color-contrast-300)));\n    --_remove-bg: var(--chip-remove-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_remove-color: var(--chip-remove-color, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_hover-color: var(--chip-hover-color, var(--_theme-contrast, var(--color-contrast-50)));\n    --_hover-border-color: var(--chip-hover-border-color, var(--_theme-focus, var(--color-contrast-700)));\n    --_active-bg: var(--chip-active-bg, color-mix(in oklch, var(--_theme-focus, var(--color-contrast-800)) 85%, black));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Outline — transparent with colored border */\n  :host([variant='outline']) {\n    --_bg: var(--chip-bg, transparent);\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, var(--_theme-base, var(--color-contrast-400)));\n    --_remove-bg: var(--chip-remove-bg, var(--_theme-focus, var(--color-contrast-700)));\n    --_remove-color: var(--chip-remove-color, var(--_theme-backdrop, var(--color-contrast-50)));\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    --_hover-border-color: var(--chip-hover-border-color, var(--_theme-focus, var(--color-contrast-700)));\n    --_active-bg: var(--chip-active-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* Ghost — transparent, no border */\n  :host([variant='ghost']) {\n    --_bg: var(--chip-bg, transparent);\n    --_color: var(--chip-color, var(--_theme-base, var(--color-contrast-900)));\n    --_border-color: var(--chip-border-color, transparent);\n    --_hover-bg: var(--chip-hover-bg, var(--_theme-backdrop, var(--color-contrast-100)));\n    --_active-bg: var(--chip-active-bg, var(--_theme-base, var(--color-contrast-700)));\n    --_active-color: var(--chip-active-color, var(--_theme-contrast, var(--color-contrast-50)));\n  }\n\n  /* ── Remove button theming (tokens set per-variant above) ── */\n\n  :host([variant='bordered']) .remove-btn,\n  :host([variant='outline']) .remove-btn {\n    color: var(--_remove-color);\n    background: var(--_remove-bg);\n    border: var(--border) solid var(--_remove-bg);\n  }\n\n  :host([variant='bordered']) .remove-btn:hover,\n  :host([variant='outline']) .remove-btn:hover {\n    background: var(--chip-remove-hover-bg, color-mix(in oklch, var(--_remove-bg) 80%, var(--color-contrast-900)));\n    opacity: 1;\n  }\n\n  :host([variant='ghost']) .remove-btn {\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([variant='ghost']) .remove-btn:hover {\n    background: var(--chip-remove-hover-bg, color-mix(in oklch, currentcolor 15%, transparent));\n  }\n\n  /* ========================================\n     Hover / Active Feedback — interactive modes\n     ======================================== */\n\n  :host(\n      :is(\n          :not([variant]),\n          [variant='solid'],\n          [variant='flat'],\n          [variant='bordered'],\n          [variant='outline'],\n          [variant='ghost']\n        ):is([mode='selectable'], [mode='action']):not([disabled])\n    )\n    .chip-btn:hover\n    .chip {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  :host(\n      :is(\n          :not([variant]),\n          [variant='solid'],\n          [variant='flat'],\n          [variant='bordered'],\n          [variant='outline'],\n          [variant='ghost']\n        ):is([mode='selectable'], [mode='action']):not([disabled])\n    )\n    .chip-btn:active\n    .chip {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n"],"mappings":""}

package/dist/feedback/index.d.ts

@@ -12,6 +12,8 @@ export { PASSWORD_STRENGTH_TAG } from './password-strength/password-strength';
 export type { OrePasswordStrengthProps, PasswordStrengthLevel } from './password-strength/password-strength';
 export { SKELETON_TAG } from './skeleton/skeleton';
 export type { OreSkeletonProps } from './skeleton/skeleton';
+export { TYPING_INDICATOR_TAG } from './typing-indicator/typing-indicator';
+export type { OreTypingIndicatorProps } from './typing-indicator/typing-indicator';
 export { createToastService, toast, TOAST_TAG } from './toast/toast';
 export type { OreToastEvents, OreToastProps, ToastItem, ToastService, ToastServiceConfig } from './toast/toast';
 //# sourceMappingURL=index.d.ts.map

package/dist/feedback/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,YAAY,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC7G,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,YAAY,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC7G,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,YAAY,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC"}

package/dist/feedback/password-strength/{password-strength.css?inline.cjs → password-strength.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--_height:var(--password-strength-height,.375rem);--_gap:var(--password-strength-gap,var(--space-1,.25rem));--_radius:var(--password-strength-radius,var(--rounded-full));--_track-bg:var(--password-strength-track-bg,var(--color-contrast-300,#d1d5db));--_track-border:var(--password-strength-track-border,var(--color-contrast-400,#9ca3af));--_active-color:var(--password-strength-weak-color,var(--color-warning-500,#f59e0b));gap:var(--space-1,.25rem);width:100%;display:grid}:host([data-level=fair]){--_active-color:var(--password-strength-fair-color,var(--color-warning-600,#d97706))}:host([data-level=good]){--_active-color:var(--password-strength-good-color,var(--color-success-500,#22c55e))}:host([data-level=strong]){--_active-color:var(--password-strength-strong-color,var(--color-success-600,#16a34a))}.meter{width:100%;min-width:10rem}.segments{gap:var(--_gap);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.segment{height:var(--_height);background:var(--_track-bg);border:1px solid var(--_track-border);border-radius:var(--_radius);min-height:.35rem;transition:var(--_motion-transition,background-color var(--transition-fast), border-color var(--transition-fast))}.segment.active{background:var(--_active-color);border-color:var(--_active-color)}.level-label{min-height:1.25em;font-size:var(--password-strength-label-size,var(--text-sm,.875rem));color:var(--password-strength-label-color,currentColor);line-height:1.25}}`;exports.default=e;
-//# sourceMappingURL=password-strength.css?inline.cjs.map
+//# sourceMappingURL=password-strength.css.cjs.map

package/dist/feedback/password-strength/password-strength.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-strength.css.cjs","names":[],"sources":["../../../src/feedback/password-strength/password-strength.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_height: var(--password-strength-height, 0.375rem);\n    --_gap: var(--password-strength-gap, var(--space-1, 0.25rem));\n    --_radius: var(--password-strength-radius, var(--rounded-full));\n    --_track-bg: var(--password-strength-track-bg, var(--color-contrast-300, #d1d5db));\n    --_track-border: var(--password-strength-track-border, var(--color-contrast-400, #9ca3af));\n    --_active-color: var(--password-strength-weak-color, var(--color-warning-500, #f59e0b));\n\n    display: grid;\n    gap: var(--space-1, 0.25rem);\n    width: 100%;\n  }\n\n  :host([data-level='fair']) {\n    --_active-color: var(--password-strength-fair-color, var(--color-warning-600, #d97706));\n  }\n\n  :host([data-level='good']) {\n    --_active-color: var(--password-strength-good-color, var(--color-success-500, #22c55e));\n  }\n\n  :host([data-level='strong']) {\n    --_active-color: var(--password-strength-strong-color, var(--color-success-600, #16a34a));\n  }\n\n  .meter {\n    width: 100%;\n    min-width: 10rem;\n  }\n\n  .segments {\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--_gap);\n  }\n\n  .segment {\n    height: var(--_height);\n    min-height: 0.35rem;\n    background: var(--_track-bg);\n    border: 1px solid var(--_track-border);\n    border-radius: var(--_radius);\n    transition: var(--_motion-transition, background-color var(--transition-fast), border-color var(--transition-fast));\n  }\n\n  .segment.active {\n    background: var(--_active-color);\n    border-color: var(--_active-color);\n  }\n\n  .level-label {\n    min-height: 1.25em;\n    font-size: var(--password-strength-label-size, var(--text-sm, 0.875rem));\n    line-height: 1.25;\n    color: var(--password-strength-label-color, currentColor);\n  }\n}\n"],"mappings":""}

package/dist/feedback/password-strength/{password-strength.css?inline.js → password-strength.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_height:var(--password-strength-height,.375r
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=password-strength.css?inline.js.map
+//# sourceMappingURL=password-strength.css.js.map

package/dist/feedback/password-strength/password-strength.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-strength.css.js","names":[],"sources":["../../../src/feedback/password-strength/password-strength.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_height: var(--password-strength-height, 0.375rem);\n    --_gap: var(--password-strength-gap, var(--space-1, 0.25rem));\n    --_radius: var(--password-strength-radius, var(--rounded-full));\n    --_track-bg: var(--password-strength-track-bg, var(--color-contrast-300, #d1d5db));\n    --_track-border: var(--password-strength-track-border, var(--color-contrast-400, #9ca3af));\n    --_active-color: var(--password-strength-weak-color, var(--color-warning-500, #f59e0b));\n\n    display: grid;\n    gap: var(--space-1, 0.25rem);\n    width: 100%;\n  }\n\n  :host([data-level='fair']) {\n    --_active-color: var(--password-strength-fair-color, var(--color-warning-600, #d97706));\n  }\n\n  :host([data-level='good']) {\n    --_active-color: var(--password-strength-good-color, var(--color-success-500, #22c55e));\n  }\n\n  :host([data-level='strong']) {\n    --_active-color: var(--password-strength-strong-color, var(--color-success-600, #16a34a));\n  }\n\n  .meter {\n    width: 100%;\n    min-width: 10rem;\n  }\n\n  .segments {\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--_gap);\n  }\n\n  .segment {\n    height: var(--_height);\n    min-height: 0.35rem;\n    background: var(--_track-bg);\n    border: 1px solid var(--_track-border);\n    border-radius: var(--_radius);\n    transition: var(--_motion-transition, background-color var(--transition-fast), border-color var(--transition-fast));\n  }\n\n  .segment.active {\n    background: var(--_active-color);\n    border-color: var(--_active-color);\n  }\n\n  .level-label {\n    min-height: 1.25em;\n    font-size: var(--password-strength-label-size, var(--text-sm, 0.875rem));\n    line-height: 1.25;\n    color: var(--password-strength-label-color, currentColor);\n  }\n}\n"],"mappings":""}

package/dist/feedback/progress/{progress.css?inline.cjs → progress.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--_height:var(--progress-height,var(--size-2,.5rem));--_radius:var(--progress-radius,var(--rounded-lg));--_circle-size:var(--progress-circle-size,6rem);--_circular-label-size:var(--progress-circular-label-size,var(--text-xl,1.25rem));--_circular-title-size:var(--progress-circular-title-size,var(--text-xs,.75rem));width:100%;display:block}.track{width:100%;height:var(--_height);background:var(--progress-track-bg,var(--color-contrast-300,#ddd));border-radius:var(--_radius);overflow:hidden}.fill{width:var(--_percent,0%);background:var(--progress-fill,var(--_theme-base,#3b82f6));border-radius:inherit;transform-origin:0;height:100%;transition:var(--_motion-transition,width var(--transition-normal))}:host(:dir(rtl)) .fill{transform-origin:100%}@keyframes ore-progress-slide{0%{transform:translate(-150%)scaleX(.6)}50%{transform:translate(50%)scaleX(1)}to{transform:translate(300%)scaleX(.6)}}:host([indeterminate]) .fill{width:40%;animation:var(--_motion-animation,ore-progress-slide var(--duration-1500) var(--ease-linear) infinite)}:host(:dir(rtl)[indeterminate]) .fill{animation-direction:reverse}:host([type=vertical]){--_width:var(--progress-width,var(--size-2,.5rem));width:auto;display:inline-flex}:host([type=vertical]) .wrapper{gap:var(--progress-label-gap,var(--space-1,.25rem));flex-direction:row;width:auto;height:100%}:host([type=vertical]) .track{width:var(--_width);height:100%;overflow:hidden}:host([type=vertical]) .fill{width:100%;height:var(--_percent,0%);transform-origin:bottom;transition:var(--_motion-transition,height var(--transition-normal))}:host([type=vertical][indeterminate]) .fill{height:40%;animation:var(--_motion-animation,ore-progress-slide-v var(--duration-1500) var(--ease-linear) infinite)}@keyframes ore-progress-slide-v{0%{transform:translateY(150%)scaleY(.6)}50%{transform:translateY(-50%)scaleY(1)}to{transform:translateY(-300%)scaleY(.6)}}.bar-row-vertical{flex-direction:column;align-items:center;height:100%;display:flex}:host([type=vertical]) .track-outer{flex:1;justify-content:center;align-items:stretch;width:auto;height:100%;display:flex}.wrapper{gap:var(--progress-label-gap,var(--space-1,.25rem));flex-direction:column;width:100%;display:flex}.header{gap:var(--space-2,.5rem);justify-content:space-between;align-items:baseline;display:none}:host([title]) .header{display:flex}.progress-title{font-size:var(--text-sm,.875rem);font-weight:var(--font-weight-medium,500);color:var(--progress-title-color,currentColor);line-height:1.25}.header-label{display:none}:host([title][label]) .header-label{display:inline}.bar-row{display:contents}:host([label]:not([title])) .bar-row{gap:var(--progress-label-gap,var(--space-2,.5rem));align-items:center;width:100%;display:flex}.track-outer{width:100%;position:relative}:host([label]:not([title])) .track-outer{flex:1;width:auto;min-width:0}.end-label{font-size:var(--text-sm,.875rem);color:var(--progress-label-color,currentColor);white-space:nowrap;flex-shrink:0;line-height:1.25}.row-label{display:none}:host([label]:not([title])) .row-label{display:inline}.floating-label{bottom:calc(100% + var(--space-1,.25rem));left:var(--_percent,0%);padding:var(--space-0-5,.125rem) var(--space-2,.5rem);font-size:var(--text-xs,.75rem);font-weight:var(--font-weight-medium,500);color:var(--color-white,#fff);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;background:var(--progress-fill,var(--_theme-base,#3b82f6));border-radius:var(--rounded-md,.375rem);line-height:1;display:none;position:absolute;transform:translate(-50%)}:host([floating-label]:not([indeterminate])) .floating-label{display:block}:host([floating-label]:not([indeterminate])) .wrapper{padding-top:calc(var(--text-xs,.75rem) + var(--space-1,.25rem) * 3)}.circular-track{width:var(--_circle-size);height:var(--_circle-size);justify-content:center;align-items:center;display:inline-flex;position:relative}.circular-track svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}.circular-inner{gap:var(--space-0-5,.125rem);padding:calc(8% + var(--_height));text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.circular-label{text-overflow:ellipsis;max-width:100%;font-size:var(--_circular-label-size);font-weight:var(--font-weight-semibold,600);color:var(--progress-label-color,currentColor);white-space:nowrap;line-height:1;overflow:hidden}.circular-title{text-overflow:ellipsis;max-width:100%;font-size:var(--_circular-title-size);color:var(--progress-title-color,var(--color-contrast-500,#6b7280));white-space:nowrap;line-height:1.25;overflow:hidden}.circular-label:empty,.circular-title:empty{display:none}.circle-bg{fill:none;stroke:var(--progress-track-bg,var(--color-contrast-300,#ddd));stroke-width:var(--progress-stroke-width,calc(var(--_height) * 1.2))}.circle-fill{fill:none;stroke:var(--progress-fill,var(--_theme-base,#3b82f6));stroke-width:var(--progress-stroke-width,calc(var(--_height) * 1.2));stroke-linecap:round;transition:var(--_motion-transition,stroke-dashoffset var(--transition-normal))}@keyframes ore-progress-spin{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes ore-progress-dash{0%{stroke-dasharray:1px var(--_circ);stroke-dashoffset:var(--_circ)}40%{stroke-dasharray:calc(var(--_circ) * .75) var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.1)}60%{stroke-dasharray:calc(var(--_circ) * .75) var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.1)}to{stroke-dasharray:1px var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.9)}}:host([indeterminate]) .circular-track svg{animation:var(--_motion-animation,ore-progress-spin var(--duration-1400) var(--ease-linear) infinite)}:host([indeterminate]) .circle-fill{animation:var(--_motion-animation,ore-progress-dash var(--duration-1400) var(--ease-in-out) infinite)}}@layer refine.utilities{:host([size=sm]){--_height:var(--size-1,.25rem);--_circle-size:4rem;--_circular-label-size:var(--text-sm,.875rem);--_circular-title-size:var(--text-2xs,.625rem)}:host([size=md]){--_height:var(--size-2,.5rem);--_circle-size:6rem}:host([size=lg]){--_height:var(--size-3-5,.875rem);--_circle-size:9rem;--_circular-label-size:var(--text-3xl);--_circular-title-size:var(--text-sm,.875rem)}}@media (prefers-reduced-motion:reduce){:host([indeterminate]) .fill{opacity:.6;width:100%}:host([indeterminate]) .circle-fill{stroke-dasharray:none}:host([type=vertical][indeterminate]) .fill{opacity:.6;height:100%}}`;exports.default=e;
-//# sourceMappingURL=progress.css?inline.cjs.map
+//# sourceMappingURL=progress.css.cjs.map

package/dist/feedback/progress/progress.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.css.cjs","names":[],"sources":["../../../src/feedback/progress/progress.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_height: var(--progress-height, var(--size-2, 0.5rem));\n    --_radius: var(--progress-radius, var(--rounded-lg));\n    --_circle-size: var(--progress-circle-size, 6rem);\n    --_circular-label-size: var(--progress-circular-label-size, var(--text-xl, 1.25rem));\n    --_circular-title-size: var(--progress-circular-title-size, var(--text-xs, 0.75rem));\n\n    display: block;\n\n    /* Stretch to fill the parent container (matches native <progress> behaviour).\n         The host's width is set against its parent, so % widths inside shadow DOM\n         (.track, .fill) resolve correctly in any flex/grid/block context. */\n    width: 100%;\n  }\n\n  /* ========================================\n       Linear Bar\n       ======================================== */\n\n  .track {\n    width: 100%;\n    height: var(--_height);\n    overflow: hidden;\n\n    /* contrast-300 (88% lightness) gives a visible groove in light mode */\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n  }\n\n  .fill {\n    width: var(--_percent, 0%);\n    height: 100%;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: inherit;\n    transform-origin: left;\n    transition: var(--_motion-transition, width var(--transition-normal));\n  }\n\n  /* In RTL the fill grows from the inline-end (physical right) side */\n  :host(:dir(rtl)) .fill {\n    transform-origin: right;\n  }\n\n  /* Indeterminate: sliding bar */\n  @keyframes ore-progress-slide {\n    0% {\n      transform: translateX(-150%) scaleX(0.6);\n    }\n\n    50% {\n      transform: translateX(50%) scaleX(1);\n    }\n\n    100% {\n      transform: translateX(300%) scaleX(0.6);\n    }\n  }\n\n  :host([indeterminate]) .fill {\n    width: 40%;\n    animation: var(--_motion-animation, ore-progress-slide var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  /* In RTL the indeterminate bar sweeps right-to-left */\n  :host(:dir(rtl)[indeterminate]) .fill {\n    animation-direction: reverse;\n  }\n\n  /* ========================================\n       Vertical Bar\n       ======================================== */\n\n  :host([type='vertical']) {\n    --_width: var(--progress-width, var(--size-2, 0.5rem));\n\n    display: inline-flex;\n    width: auto;\n  }\n\n  :host([type='vertical']) .wrapper {\n    flex-direction: row;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: auto;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track {\n    width: var(--_width);\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :host([type='vertical']) .fill {\n    width: 100%;\n    height: var(--_percent, 0%);\n    transform-origin: bottom;\n    transition: var(--_motion-transition, height var(--transition-normal));\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 40%;\n    animation: var(--_motion-animation, ore-progress-slide-v var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  @keyframes ore-progress-slide-v {\n    0% {\n      transform: translateY(150%) scaleY(0.6);\n    }\n\n    50% {\n      transform: translateY(-50%) scaleY(1);\n    }\n\n    100% {\n      transform: translateY(-300%) scaleY(0.6);\n    }\n  }\n\n  .bar-row-vertical {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track-outer {\n    display: flex;\n    flex: 1 1 0%;\n    align-items: stretch;\n    justify-content: center;\n    width: auto;\n    height: 100%;\n  }\n\n  /* ========================================\n       Wrapper / Label / Title / Floating label\n       ======================================== */\n\n  /* Flex-column shell for the linear variant */\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: 100%;\n  }\n\n  /* Header row ─ visible only when [title] is present */\n  .header {\n    display: none;\n    gap: var(--space-2, 0.5rem);\n    align-items: baseline;\n    justify-content: space-between;\n  }\n\n  :host([title]) .header {\n    display: flex;\n  }\n\n  .progress-title {\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1.25;\n    color: var(--progress-title-color, currentColor);\n  }\n\n  /* Label inside the header ─ only when both [title] and [label] are set */\n  .header-label {\n    display: none;\n  }\n\n  :host([title][label]) .header-label {\n    display: inline;\n  }\n\n  /* Bar row ─ transparent wrapper by default; becomes a flex row when\n       [label] is present without [title] so the label sits beside the bar */\n  .bar-row {\n    display: contents;\n  }\n\n  :host([label]:not([title])) .bar-row {\n    display: flex;\n    gap: var(--progress-label-gap, var(--space-2, 0.5rem));\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Outer track container ─ always position:relative for floating-label */\n  .track-outer {\n    position: relative;\n    width: 100%;\n  }\n\n  :host([label]:not([title])) .track-outer {\n    flex: 1 1 0%;\n    width: auto;\n    min-width: 0;\n  }\n\n  /* Shared label typography */\n  .end-label {\n    flex-shrink: 0;\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.25;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  /* Trailing end label ─ shown only when [label] is present without [title] */\n  .row-label {\n    display: none;\n  }\n\n  :host([label]:not([title])) .row-label {\n    display: inline;\n  }\n\n  /* Floating label chip ─────────────────────────────────────────────────\n       Positioned above the fill endpoint.\n       Formula: left = X% (fill width) − Y (half chip width)\n       Implemented as: left: var(--_percent); transform: translateX(-50%)     */\n  .floating-label {\n    position: absolute;\n    bottom: calc(100% + var(--space-1, 0.25rem));\n    left: var(--_percent, 0%);\n    display: none;\n    padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1;\n    color: var(--color-white, #fff);\n    white-space: nowrap;\n    pointer-events: none;\n    user-select: none;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: var(--rounded-md, 0.375rem);\n    transform: translateX(-50%);\n  }\n\n  :host([floating-label]:not([indeterminate])) .floating-label {\n    display: block;\n  }\n\n  /* Reserve vertical space above the track so the chip does not clip */\n  :host([floating-label]:not([indeterminate])) .wrapper {\n    padding-top: calc(var(--text-xs, 0.75rem) + var(--space-1, 0.25rem) * 3);\n  }\n\n  /* ========================================\n       Circular variant\n       ======================================== */\n\n  .circular-track {\n    position: relative; /* anchor the inner text overlay */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_circle-size);\n    height: var(--_circle-size);\n  }\n\n  .circular-track svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform: rotate(-90deg);\n  }\n\n  /* Inner overlay — label + title stacked and centered inside the ring */\n  .circular-inner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5, 0.125rem);\n    align-items: center;\n    justify-content: center;\n\n    /* Inset from the stroke edge so text stays clear of the ring */\n    padding: calc(8% + var(--_height));\n    overflow: hidden;\n    text-align: center;\n    pointer-events: none;\n  }\n\n  .circular-label {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-label-size);\n    font-weight: var(--font-weight-semibold, 600);\n    line-height: 1;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  .circular-title {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-title-size);\n    line-height: 1.25;\n    color: var(--progress-title-color, var(--color-contrast-500, #6b7280));\n    white-space: nowrap;\n  }\n\n  /* Hide empty inner text nodes so flexbox gap doesn't create phantom space */\n  .circular-label:empty,\n  .circular-title:empty {\n    display: none;\n  }\n\n  .circle-bg {\n    fill: none;\n    stroke: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n  }\n\n  .circle-fill {\n    fill: none;\n    stroke: var(--progress-fill, var(--_theme-base, #3b82f6));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n    stroke-linecap: round;\n    transition: var(--_motion-transition, stroke-dashoffset var(--transition-normal));\n  }\n\n  @keyframes ore-progress-spin {\n    from {\n      transform: rotate(-90deg);\n    }\n\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes ore-progress-dash {\n    0% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: var(--_circ);\n    }\n\n    40% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    60% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    100% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.9);\n    }\n  }\n\n  :host([indeterminate]) .circular-track svg {\n    animation: var(--_motion-animation, ore-progress-spin var(--duration-1400) var(--ease-linear) infinite);\n  }\n\n  :host([indeterminate]) .circle-fill {\n    animation: var(--_motion-animation, ore-progress-dash var(--duration-1400) var(--ease-in-out) infinite);\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-1, 0.25rem);\n    --_circle-size: 4rem;\n    --_circular-label-size: var(--text-sm, 0.875rem);\n    --_circular-title-size: var(--text-2xs, 0.625rem);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-2, 0.5rem);\n    --_circle-size: 6rem;\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-3-5, 0.875rem);\n    --_circle-size: 9rem;\n    --_circular-label-size: var(--text-3xl);\n    --_circular-title-size: var(--text-sm, 0.875rem);\n  }\n}\n\n/* Extra indeterminate state overrides — cannot be expressed via CSS variables alone */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    width: 100%;\n    opacity: 0.6;\n  }\n\n  :host([indeterminate]) .circle-fill {\n    stroke-dasharray: none;\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 100%;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}

package/dist/feedback/progress/{progress.css?inline.js → progress.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_height:var(--progress-height,var(--size-2,.
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=progress.css?inline.js.map
+//# sourceMappingURL=progress.css.js.map

package/dist/feedback/progress/progress.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.css.js","names":[],"sources":["../../../src/feedback/progress/progress.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_height: var(--progress-height, var(--size-2, 0.5rem));\n    --_radius: var(--progress-radius, var(--rounded-lg));\n    --_circle-size: var(--progress-circle-size, 6rem);\n    --_circular-label-size: var(--progress-circular-label-size, var(--text-xl, 1.25rem));\n    --_circular-title-size: var(--progress-circular-title-size, var(--text-xs, 0.75rem));\n\n    display: block;\n\n    /* Stretch to fill the parent container (matches native <progress> behaviour).\n         The host's width is set against its parent, so % widths inside shadow DOM\n         (.track, .fill) resolve correctly in any flex/grid/block context. */\n    width: 100%;\n  }\n\n  /* ========================================\n       Linear Bar\n       ======================================== */\n\n  .track {\n    width: 100%;\n    height: var(--_height);\n    overflow: hidden;\n\n    /* contrast-300 (88% lightness) gives a visible groove in light mode */\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n  }\n\n  .fill {\n    width: var(--_percent, 0%);\n    height: 100%;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: inherit;\n    transform-origin: left;\n    transition: var(--_motion-transition, width var(--transition-normal));\n  }\n\n  /* In RTL the fill grows from the inline-end (physical right) side */\n  :host(:dir(rtl)) .fill {\n    transform-origin: right;\n  }\n\n  /* Indeterminate: sliding bar */\n  @keyframes ore-progress-slide {\n    0% {\n      transform: translateX(-150%) scaleX(0.6);\n    }\n\n    50% {\n      transform: translateX(50%) scaleX(1);\n    }\n\n    100% {\n      transform: translateX(300%) scaleX(0.6);\n    }\n  }\n\n  :host([indeterminate]) .fill {\n    width: 40%;\n    animation: var(--_motion-animation, ore-progress-slide var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  /* In RTL the indeterminate bar sweeps right-to-left */\n  :host(:dir(rtl)[indeterminate]) .fill {\n    animation-direction: reverse;\n  }\n\n  /* ========================================\n       Vertical Bar\n       ======================================== */\n\n  :host([type='vertical']) {\n    --_width: var(--progress-width, var(--size-2, 0.5rem));\n\n    display: inline-flex;\n    width: auto;\n  }\n\n  :host([type='vertical']) .wrapper {\n    flex-direction: row;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: auto;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track {\n    width: var(--_width);\n    height: 100%;\n    overflow: hidden;\n  }\n\n  :host([type='vertical']) .fill {\n    width: 100%;\n    height: var(--_percent, 0%);\n    transform-origin: bottom;\n    transition: var(--_motion-transition, height var(--transition-normal));\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 40%;\n    animation: var(--_motion-animation, ore-progress-slide-v var(--duration-1500) var(--ease-linear) infinite);\n  }\n\n  @keyframes ore-progress-slide-v {\n    0% {\n      transform: translateY(150%) scaleY(0.6);\n    }\n\n    50% {\n      transform: translateY(-50%) scaleY(1);\n    }\n\n    100% {\n      transform: translateY(-300%) scaleY(0.6);\n    }\n  }\n\n  .bar-row-vertical {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: 100%;\n  }\n\n  :host([type='vertical']) .track-outer {\n    display: flex;\n    flex: 1 1 0%;\n    align-items: stretch;\n    justify-content: center;\n    width: auto;\n    height: 100%;\n  }\n\n  /* ========================================\n       Wrapper / Label / Title / Floating label\n       ======================================== */\n\n  /* Flex-column shell for the linear variant */\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: 100%;\n  }\n\n  /* Header row ─ visible only when [title] is present */\n  .header {\n    display: none;\n    gap: var(--space-2, 0.5rem);\n    align-items: baseline;\n    justify-content: space-between;\n  }\n\n  :host([title]) .header {\n    display: flex;\n  }\n\n  .progress-title {\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1.25;\n    color: var(--progress-title-color, currentColor);\n  }\n\n  /* Label inside the header ─ only when both [title] and [label] are set */\n  .header-label {\n    display: none;\n  }\n\n  :host([title][label]) .header-label {\n    display: inline;\n  }\n\n  /* Bar row ─ transparent wrapper by default; becomes a flex row when\n       [label] is present without [title] so the label sits beside the bar */\n  .bar-row {\n    display: contents;\n  }\n\n  :host([label]:not([title])) .bar-row {\n    display: flex;\n    gap: var(--progress-label-gap, var(--space-2, 0.5rem));\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Outer track container ─ always position:relative for floating-label */\n  .track-outer {\n    position: relative;\n    width: 100%;\n  }\n\n  :host([label]:not([title])) .track-outer {\n    flex: 1 1 0%;\n    width: auto;\n    min-width: 0;\n  }\n\n  /* Shared label typography */\n  .end-label {\n    flex-shrink: 0;\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.25;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  /* Trailing end label ─ shown only when [label] is present without [title] */\n  .row-label {\n    display: none;\n  }\n\n  :host([label]:not([title])) .row-label {\n    display: inline;\n  }\n\n  /* Floating label chip ─────────────────────────────────────────────────\n       Positioned above the fill endpoint.\n       Formula: left = X% (fill width) − Y (half chip width)\n       Implemented as: left: var(--_percent); transform: translateX(-50%)     */\n  .floating-label {\n    position: absolute;\n    bottom: calc(100% + var(--space-1, 0.25rem));\n    left: var(--_percent, 0%);\n    display: none;\n    padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1;\n    color: var(--color-white, #fff);\n    white-space: nowrap;\n    pointer-events: none;\n    user-select: none;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: var(--rounded-md, 0.375rem);\n    transform: translateX(-50%);\n  }\n\n  :host([floating-label]:not([indeterminate])) .floating-label {\n    display: block;\n  }\n\n  /* Reserve vertical space above the track so the chip does not clip */\n  :host([floating-label]:not([indeterminate])) .wrapper {\n    padding-top: calc(var(--text-xs, 0.75rem) + var(--space-1, 0.25rem) * 3);\n  }\n\n  /* ========================================\n       Circular variant\n       ======================================== */\n\n  .circular-track {\n    position: relative; /* anchor the inner text overlay */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_circle-size);\n    height: var(--_circle-size);\n  }\n\n  .circular-track svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform: rotate(-90deg);\n  }\n\n  /* Inner overlay — label + title stacked and centered inside the ring */\n  .circular-inner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5, 0.125rem);\n    align-items: center;\n    justify-content: center;\n\n    /* Inset from the stroke edge so text stays clear of the ring */\n    padding: calc(8% + var(--_height));\n    overflow: hidden;\n    text-align: center;\n    pointer-events: none;\n  }\n\n  .circular-label {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-label-size);\n    font-weight: var(--font-weight-semibold, 600);\n    line-height: 1;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  .circular-title {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-title-size);\n    line-height: 1.25;\n    color: var(--progress-title-color, var(--color-contrast-500, #6b7280));\n    white-space: nowrap;\n  }\n\n  /* Hide empty inner text nodes so flexbox gap doesn't create phantom space */\n  .circular-label:empty,\n  .circular-title:empty {\n    display: none;\n  }\n\n  .circle-bg {\n    fill: none;\n    stroke: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n  }\n\n  .circle-fill {\n    fill: none;\n    stroke: var(--progress-fill, var(--_theme-base, #3b82f6));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n    stroke-linecap: round;\n    transition: var(--_motion-transition, stroke-dashoffset var(--transition-normal));\n  }\n\n  @keyframes ore-progress-spin {\n    from {\n      transform: rotate(-90deg);\n    }\n\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes ore-progress-dash {\n    0% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: var(--_circ);\n    }\n\n    40% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    60% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    100% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.9);\n    }\n  }\n\n  :host([indeterminate]) .circular-track svg {\n    animation: var(--_motion-animation, ore-progress-spin var(--duration-1400) var(--ease-linear) infinite);\n  }\n\n  :host([indeterminate]) .circle-fill {\n    animation: var(--_motion-animation, ore-progress-dash var(--duration-1400) var(--ease-in-out) infinite);\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-1, 0.25rem);\n    --_circle-size: 4rem;\n    --_circular-label-size: var(--text-sm, 0.875rem);\n    --_circular-title-size: var(--text-2xs, 0.625rem);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-2, 0.5rem);\n    --_circle-size: 6rem;\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-3-5, 0.875rem);\n    --_circle-size: 9rem;\n    --_circular-label-size: var(--text-3xl);\n    --_circular-title-size: var(--text-sm, 0.875rem);\n  }\n}\n\n/* Extra indeterminate state overrides — cannot be expressed via CSS variables alone */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    width: 100%;\n    opacity: 0.6;\n  }\n\n  :host([indeterminate]) .circle-fill {\n    stroke-dasharray: none;\n  }\n\n  :host([type='vertical'][indeterminate]) .fill {\n    height: 100%;\n    opacity: 0.6;\n  }\n}\n"],"mappings":""}

package/dist/feedback/skeleton/{skeleton.css?inline.cjs → skeleton.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--_bg:var(--skeleton-bg,var(--color-contrast-200));--_highlight:var(--skeleton-highlight,var(--color-contrast-100));--_radius:var(--skeleton-radius,var(--rounded-lg));--_circle-size:var(--skeleton-size,var(--size-10));--_width:var(--skeleton-width,100%);--_height:var(--skeleton-height,var(--size-4));--_line-gap:var(--skeleton-line-gap,var(--size-2));--_last-line-width:var(--skeleton-last-line-width,60%);--_duration:var(--skeleton-duration,1.6s);--_stripe-size:var(--skeleton-stripe-size,8px);width:var(--_width);height:var(--_height);display:inline-block}.stack{gap:var(--_line-gap);width:100%;height:100%;display:grid}.bone{background:var(--_bg);border-radius:var(--_radius);width:100%;height:100%;position:relative;overflow:hidden}.bone:after{content:"";background:linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);animation:var(--_motion-animation,ore-skeleton-shimmer var(--_duration) linear infinite);position:absolute;inset:0;transform:translate(-100%)}:host([data-animated=false]) .bone:after{display:none}:host([data-paused]) .bone:after{animation-play-state:paused}@keyframes ore-skeleton-shimmer{to{transform:translate(100%)}}:host(:dir(rtl)) .bone:after{animation-direction:reverse}}@layer refine.variants{:host([variant=circle]){--_radius:var(--rounded-full);width:var(--skeleton-width,var(--_circle-size));height:var(--skeleton-height,var(--_circle-size));aspect-ratio:1}:host([variant=text]){--_height:var(--size-3);--_radius:var(--rounded-sm);height:auto}:host([variant=text]) .stack{height:auto}:host([variant=text]) .bone{height:var(--_height)}:host([variant=text]) .bone[data-last=true]{width:var(--_last-line-width)}}@layer refine.striped{:host([striped]) .stack{width:99%}:host([striped]) .bone{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-400));border:var(--border) dashed var(--_stripe-color);background-color:#0000}:host([striped]) .bone:before{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-300));content:"";background-color:var(--_stripe-color);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);mask-size:var(--_stripe-size) var(--_stripe-size);position:absolute;inset:0}:host([striped]) .bone:after{display:none}}@layer refine.utilities{:host([size=sm]){--_height:var(--size-3);--_circle-size:var(--size-8)}:host([size=md]){--_height:var(--size-4);--_circle-size:var(--size-10)}:host([size=lg]){--_height:var(--size-6);--_circle-size:var(--size-14)}}@media (forced-colors:active){.bone{background:buttonface;border:1px solid buttontext}.bone:after{display:none}}`;exports.default=e;
-//# sourceMappingURL=skeleton.css?inline.cjs.map
+//# sourceMappingURL=skeleton.css.cjs.map

package/dist/feedback/skeleton/skeleton.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.css.cjs","names":[],"sources":["../../../src/feedback/skeleton/skeleton.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--skeleton-bg, var(--color-contrast-200));\n    --_highlight: var(--skeleton-highlight, var(--color-contrast-100));\n    --_radius: var(--skeleton-radius, var(--rounded-lg));\n    --_circle-size: var(--skeleton-size, var(--size-10));\n    --_width: var(--skeleton-width, 100%);\n    --_height: var(--skeleton-height, var(--size-4));\n    --_line-gap: var(--skeleton-line-gap, var(--size-2));\n    --_last-line-width: var(--skeleton-last-line-width, 60%);\n    --_duration: var(--skeleton-duration, 1.6s);\n    --_stripe-size: var(--skeleton-stripe-size, 8px);\n\n    display: inline-block;\n    width: var(--_width);\n    height: var(--_height);\n  }\n\n  .stack {\n    display: grid;\n    gap: var(--_line-gap);\n    width: 100%;\n    height: 100%;\n  }\n\n  .bone {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .bone::after {\n    position: absolute;\n    inset: 0;\n    content: '';\n    background: linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);\n    transform: translateX(-100%);\n    animation: var(--_motion-animation, ore-skeleton-shimmer var(--_duration) linear infinite);\n  }\n\n  :host([data-animated='false']) .bone::after {\n    display: none;\n  }\n\n  /* Pause shimmer when scrolled out of the viewport — no visible effect, saves GPU */\n  :host([data-paused]) .bone::after {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-skeleton-shimmer {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  /* In RTL the shimmer should sweep right-to-left */\n  :host(:dir(rtl)) .bone::after {\n    animation-direction: reverse;\n  }\n}\n\n@layer refine.variants {\n  /* Circle variant — avatars, icons */\n  :host([variant='circle']) {\n    --_radius: var(--rounded-full);\n\n    width: var(--skeleton-width, var(--_circle-size));\n    height: var(--skeleton-height, var(--_circle-size));\n    aspect-ratio: 1 / 1;\n  }\n\n  /* Text variant — thinner, for inline text lines */\n  :host([variant='text']) {\n    --_height: var(--size-3);\n    --_radius: var(--rounded-sm);\n\n    height: auto;\n  }\n\n  :host([variant='text']) .stack {\n    height: auto;\n  }\n\n  :host([variant='text']) .bone {\n    height: var(--_height);\n  }\n\n  :host([variant='text']) .bone[data-last='true'] {\n    width: var(--_last-line-width);\n  }\n}\n\n@layer refine.striped {\n  :host([striped]) .stack {\n    width: 99%;\n  }\n\n  :host([striped]) .bone {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-400));\n\n    background-color: transparent;\n    border: var(--border) dashed var(--_stripe-color);\n  }\n\n  :host([striped]) .bone::before {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-300));\n\n    position: absolute;\n    inset: 0;\n    content: '';\n    background-color: var(--_stripe-color);\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");\n    mask-size: var(--_stripe-size) var(--_stripe-size);\n  }\n\n  :host([striped]) .bone::after {\n    display: none;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-3);\n    --_circle-size: var(--size-8);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-4);\n    --_circle-size: var(--size-10);\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-6);\n    --_circle-size: var(--size-14);\n  }\n}\n\n@media (forced-colors: active) {\n  .bone {\n    background: ButtonFace;\n    border: 1px solid ButtonText;\n  }\n\n  .bone::after {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/feedback/skeleton/{skeleton.css?inline.js → skeleton.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_bg:var(--skeleton-bg,var(--color-contrast-2
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=skeleton.css?inline.js.map
+//# sourceMappingURL=skeleton.css.js.map

package/dist/feedback/skeleton/skeleton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.css.js","names":[],"sources":["../../../src/feedback/skeleton/skeleton.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--skeleton-bg, var(--color-contrast-200));\n    --_highlight: var(--skeleton-highlight, var(--color-contrast-100));\n    --_radius: var(--skeleton-radius, var(--rounded-lg));\n    --_circle-size: var(--skeleton-size, var(--size-10));\n    --_width: var(--skeleton-width, 100%);\n    --_height: var(--skeleton-height, var(--size-4));\n    --_line-gap: var(--skeleton-line-gap, var(--size-2));\n    --_last-line-width: var(--skeleton-last-line-width, 60%);\n    --_duration: var(--skeleton-duration, 1.6s);\n    --_stripe-size: var(--skeleton-stripe-size, 8px);\n\n    display: inline-block;\n    width: var(--_width);\n    height: var(--_height);\n  }\n\n  .stack {\n    display: grid;\n    gap: var(--_line-gap);\n    width: 100%;\n    height: 100%;\n  }\n\n  .bone {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .bone::after {\n    position: absolute;\n    inset: 0;\n    content: '';\n    background: linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);\n    transform: translateX(-100%);\n    animation: var(--_motion-animation, ore-skeleton-shimmer var(--_duration) linear infinite);\n  }\n\n  :host([data-animated='false']) .bone::after {\n    display: none;\n  }\n\n  /* Pause shimmer when scrolled out of the viewport — no visible effect, saves GPU */\n  :host([data-paused]) .bone::after {\n    animation-play-state: paused;\n  }\n\n  @keyframes ore-skeleton-shimmer {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  /* In RTL the shimmer should sweep right-to-left */\n  :host(:dir(rtl)) .bone::after {\n    animation-direction: reverse;\n  }\n}\n\n@layer refine.variants {\n  /* Circle variant — avatars, icons */\n  :host([variant='circle']) {\n    --_radius: var(--rounded-full);\n\n    width: var(--skeleton-width, var(--_circle-size));\n    height: var(--skeleton-height, var(--_circle-size));\n    aspect-ratio: 1 / 1;\n  }\n\n  /* Text variant — thinner, for inline text lines */\n  :host([variant='text']) {\n    --_height: var(--size-3);\n    --_radius: var(--rounded-sm);\n\n    height: auto;\n  }\n\n  :host([variant='text']) .stack {\n    height: auto;\n  }\n\n  :host([variant='text']) .bone {\n    height: var(--_height);\n  }\n\n  :host([variant='text']) .bone[data-last='true'] {\n    width: var(--_last-line-width);\n  }\n}\n\n@layer refine.striped {\n  :host([striped]) .stack {\n    width: 99%;\n  }\n\n  :host([striped]) .bone {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-400));\n\n    background-color: transparent;\n    border: var(--border) dashed var(--_stripe-color);\n  }\n\n  :host([striped]) .bone::before {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-300));\n\n    position: absolute;\n    inset: 0;\n    content: '';\n    background-color: var(--_stripe-color);\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");\n    mask-size: var(--_stripe-size) var(--_stripe-size);\n  }\n\n  :host([striped]) .bone::after {\n    display: none;\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-3);\n    --_circle-size: var(--size-8);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-4);\n    --_circle-size: var(--size-10);\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-6);\n    --_circle-size: var(--size-14);\n  }\n}\n\n@media (forced-colors: active) {\n  .bone {\n    background: ButtonFace;\n    border: 1px solid ButtonText;\n  }\n\n  .bone::after {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/feedback/toast/{toast.css?inline.cjs → toast.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,1rem);--_inset-right:var(--toast-inset-right,1rem);--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,9999);--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,.5rem);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);gap:var(--_gap);max-width:var(--_max-width);pointer-events:none;flex-direction:column;display:flex}:host([position=top-left]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:1rem;--_inset-right:auto}:host([position=top-center]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-right:1rem;--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:1rem;--_inset-left:1rem;--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:1rem;--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:1rem;--_inset-right:1rem;--_inset-left:auto;--_inset-top:auto}.toast-container{perspective:1200px;perspective-origin:50%;transition:row-gap var(--transition-normal);grid-template-rows:1fr;grid-template-columns:1fr;row-gap:0;display:grid}.toast-live-region{display:contents}:host(.hovered) .toast-container{row-gap:var(--_gap)}:host(:not(.hovered)) .toast-wrapper{grid-area:1/1;align-self:end}:host([position^=top]:not(.hovered)) .toast-wrapper{align-self:start}.toast-wrapper{pointer-events:auto;touch-action:pan-y;position:relative}:host(:not(.hovered)) .toast-wrapper:last-child{z-index:3;transform:translateY(0)scale(1)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(2){z-index:2;pointer-events:none;transform:translateY(-8px)scale(.95)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(3){z-index:1;pointer-events:none;transform:translateY(-14px)scale(.9)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(n+4){visibility:hidden;pointer-events:none}:host([position^=top]) .toast-wrapper{transform-origin:top}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(2){transform:translateY(8px)scale(.95)}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(3){transform:translateY(14px)scale(.9)}:host(.hovered) .toast-wrapper{z-index:auto;visibility:visible;pointer-events:auto;grid-area:auto/1;align-self:stretch;transform:none}:host(.hovered) .toast-wrapper:nth-last-child(2){transition-delay:var(--duration-75)}:host(.hovered) .toast-wrapper:nth-last-child(3){transition-delay:var(--duration-100)}:host(.hovered) .toast-wrapper:nth-last-child(n+4){transition-delay:var(--duration-150)}.toast-inner{opacity:1;transition:opacity var(--toast-exit-duration,.3s) var(--ease-out);position:relative}.toast-inner.entering{opacity:0;transition:none}.toast-inner.exiting{pointer-events:none;opacity:0}::slotted(ore-alert),ore-alert{width:100%;box-shadow:var(--shadow-lg);--_motion-animation:none;margin:0}.toast-actions{gap:var(--size-4);justify-content:flex-end;display:flex}@media (width<=480px){:host{--_max-width:calc(100vw - var(--size-4));--_inset-right:var(--size-2);--_inset-left:var(--size-2)}:host([position=top-center]),:host([position=bottom-center]){--_inset-left:var(--size-2);transform:none}:host([position=top-center]):not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([position=bottom-center]):not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:var(--size-2)}:host([position=top-center]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([position=bottom-center]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}}}`;exports.default=e;
-//# sourceMappingURL=toast.css?inline.cjs.map
+//# sourceMappingURL=toast.css.cjs.map

package/dist/feedback/toast/toast.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.css.cjs","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, 1rem);\n    --_inset-right: var(--toast-inset-right, 1rem);\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, 9999);\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, 0.5rem);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    max-width: var(--_max-width);\n    pointer-events: none;\n  }\n\n  /* ── Position variants ────────────────────────────────────────────────── */\n\n  :host([position='top-left']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: 1rem;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  /* ── Container ────────────────────────────────────────────────────────── */\n\n  .toast-container {\n    display: grid;\n    grid-template-rows: 1fr;\n    grid-template-columns: 1fr;\n    row-gap: 0;\n    perspective: 1200px;\n    perspective-origin: center center;\n    transition: row-gap var(--transition-normal);\n  }\n\n  /* ARIA live regions are layout-transparent. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  :host(.hovered) .toast-container {\n    row-gap: var(--_gap);\n  }\n\n  /* ── Wrapper (layout / stacking only — no animation) ─────────────────── */\n\n  /* .toast-wrapper owns: grid position, z-index, stacking transforms.       */\n\n  /* It never has opacity or transition set on it directly.                  */\n\n  /* This keeps stacking rules and animation rules on separate elements,     */\n\n  /* eliminating all specificity conflicts and !important usage.             */\n\n  :host(:not(.hovered)) .toast-wrapper {\n    grid-row: 1;\n    grid-column: 1;\n    align-self: end;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper {\n    align-self: start;\n  }\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    touch-action: pan-y;\n  }\n\n  /* Stacking (collapsed) — 3D perspective stack */\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(1) {\n    z-index: 3;\n    transform: translateY(0) scale(1);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    z-index: 2;\n    pointer-events: none;\n    transform: translateY(-8px) scale(0.95);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    z-index: 1;\n    pointer-events: none;\n    transform: translateY(-14px) scale(0.9);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(n + 4) {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* Top positions: reverse stacking direction */\n  :host([position^='top']) .toast-wrapper {\n    transform-origin: center top;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    transform: translateY(8px) scale(0.95);\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    transform: translateY(14px) scale(0.9);\n  }\n\n  /* Expanded (hovered) — stacking transforms are released per wrapper */\n  :host(.hovered) .toast-wrapper {\n    z-index: auto;\n    visibility: visible;\n    grid-row: auto;\n    grid-column: 1;\n    align-self: stretch;\n    pointer-events: auto;\n    transform: none;\n  }\n\n  /* Staggered expand delays (applied to wrapper transform only) */\n  :host(.hovered) .toast-wrapper:nth-last-child(2) {\n    transition-delay: var(--duration-75);\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(3) {\n    transition-delay: var(--duration-100);\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(n + 4) {\n    transition-delay: var(--duration-150);\n  }\n\n  /* ── Inner (animation target only — no layout role) ──────────────────── */\n\n  /* .toast-inner owns: opacity, entry/exit transitions.                    */\n\n  /* It never participates in stacking (that's the wrapper's job).          */\n\n  /* Swipe gesture also animates .toast-inner to keep wrapper state clean.  */\n\n  .toast-inner {\n    position: relative;\n    opacity: 1;\n    transition: opacity var(--toast-exit-duration, 300ms) var(--ease-out);\n  }\n\n  /* Entry: snap to invisible with no transition, then rely on class removal to animate in */\n  .toast-inner.entering {\n    opacity: 0;\n    transition: none;\n  }\n\n  /* Exit: fade out — wrapper stays in-flow so grid doesn't snap shut prematurely */\n  .toast-inner.exiting {\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  /* ── Alert inside toast ───────────────────────────────────────────────── */\n\n  ::slotted(ore-alert),\n  ore-alert {\n    width: 100%;\n    margin: 0;\n    box-shadow: var(--shadow-lg);\n\n    /* Suppress ore-alert's own collapse animation — the toast-inner opacity\n       fade is the canonical exit. Passing --motion-animation: none overrides\n       the @keyframes ore-alert-exit that fires on [dismissing]. */\n    --_motion-animation: none;\n  }\n\n  /* ── Action buttons ───────────────────────────────────────────────────── */\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-4);\n    justify-content: flex-end;\n  }\n\n  /* ── Responsive: small screens ────────────────────────────────────────── */\n\n  @media (width <= 480px) {\n    :host {\n      --_max-width: calc(100vw - var(--size-4));\n      --_inset-right: var(--size-2);\n      --_inset-left: var(--size-2);\n    }\n\n    :host([position='top-center']),\n    :host([position='bottom-center']) {\n      --_inset-left: var(--size-2);\n\n      inset-inline-start: var(--size-2);\n      transform: none;\n    }\n  }\n}\n"],"mappings":""}