@vielzeug/refine 1.1.1

package/dist/drawer.cjs

@@ -0,0 +1,32 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./headless/swipe.cjs"),r=require("./overlay/shared/use-dialog.cjs"),i=require("./overlay/drawer/drawer.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s={bottom:{axis:`y`,closingDistance:e=>Math.max(0,e),translate:e=>`translateY(${e}px)`},left:{axis:`x`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateX(${e}px)`},right:{axis:`x`,closingDistance:e=>Math.max(0,e),translate:e=>`translateX(${e}px)`},top:{axis:`y`,closingDistance:e=>Math.max(0,-e),translate:e=>`translateY(${e}px)`}},c=`ore-drawer`;(0,a.define)(c,{props:{backdrop:a.prop.string(),dismissible:a.prop.bool(!0),"drag-handle-placement":a.prop.oneOf([`outside`,`inset`],`outside`),"initial-focus":a.prop.string(),label:a.prop.string(),open:a.prop.bool(!1),persistent:a.prop.bool(!1),placement:a.prop.oneOf([`left`,`right`,`top`,`bottom`],`right`),"return-focus":a.prop.bool(!0),size:a.prop.string(),title:a.prop.string()},setup(e,{el:t,emit:i,onCleanup:c,onEvent:l,onMounted:u,slots:d}){let f=(0,a.createStableId)(`drawer-label`),p=(0,a.ref)(),m=(0,a.ref)(),h=(0,o.signal)(!1),g,_=()=>e.label.value??e.title.value??``,v=()=>d.has(`header`).value||!!_(),y=()=>v()||e.dismissible.value,b=()=>d.has(`footer`).value,x=()=>e.placement.value||`right`,S=()=>s[x()],C=(e,t)=>{let n=t===`x`?e.offsetWidth:e.offsetHeight;return Math.min(96,Math.max(36,n*.18))},w=(e,t)=>S().closingDistance(e)>=t,T=e=>{if(!h.value)return;g&&=(clearTimeout(g),void 0);let t=p.value;if(!t){h.value=!1;return}t.style.transition=`none`,e.style.opacity=`0`,e.style.visibility=`hidden`,t.offsetWidth,N(`swipe`)},E=(e,t,n)=>{if(h.value)return;h.value=!0;let r=t.axis===`x`?e.offsetWidth:e.offsetHeight,i=n>=0?Math.max(n,r):Math.min(n,-r),a=t.translate(i);e.style.transition=`transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out`,e.offsetWidth;let o=t=>{t.target!==e||t.propertyName!==`transform`||(e.removeEventListener(`transitionend`,o),T(e))};e.addEventListener(`transitionend`,o);let s=parseFloat(getComputedStyle(e).transitionDuration)*1e3;g=setTimeout(()=>{e.removeEventListener(`transitionend`,o),T(e)},s+50),e.style.transform=a,e.style.opacity=`0.2`},D=e=>{g&&=(clearTimeout(g),void 0),e.style.transition=``,e.style.transform=``,e.style.opacity=``,e.style.visibility=``,h.value=!1},O=({distance:e,threshold:t})=>{let n=m.value;if(n){if(w(e,t)){E(n,S(),e);return}D(n)}},k=n.createSwipeControl({axis:()=>S().axis,disabled:h,onCancel:O,onCommit:({distance:e})=>{let t=m.value;t&&E(t,S(),e)},onMove:({distance:e,threshold:t})=>{let n=m.value;if(!n)return;let r=S(),i=r.closingDistance(e),a=Math.min(i/t,1);n.style.transition=`none`,n.style.transform=r.translate(e),n.style.opacity=String(1-a*.4)},onRelease:O,shouldCommit:({distance:e,threshold:t})=>w(e,t),threshold:()=>{let e=m.value;return e?C(e,S().axis):48}}),{closeWithAnimation:A,handleCancel:j,overlay:M,requestClose:N,watchOpenProp:P}=r.useDialogControl({beforeOpen:e=>{let t=m.value;t&&D(t)},closeRequestDetail:t=>({placement:e.placement.value??`right`}),dialogRef:p,getPanelEl:()=>m.value,host:t,initialFocus:e[`initial-focus`],isPersistent:()=>!!e.persistent.value,onCleanup:c,onEvent:l,onNativeClose:t=>{let n=m.value;n&&t!==`swipe`&&D(n);let r=p.value;r&&(r.style.transition=``),i(`close`,{placement:e.placement.value??`right`,reason:t})},onOpen:t=>i(`open`,{placement:e.placement.value??`right`,reason:t}),openProp:e.open,performClose:(e,t)=>{t===`swipe`?e.close():A()},returnFocus:e[`return-focus`]});return u(()=>{let n=p.value;if(!n)return;let r=t;r.show=()=>{M.open(`programmatic`)},r.hide=()=>{M.close(`programmatic`,!1)},P(),l(n,`cancel`,j),l(n,`click`,t=>{e.persistent.value||k.isActive()||h.value||t.target===n&&N(`outsideClick`)});let i=m.value?.querySelector(`[part="drag-handle"]`);return i&&(l(i,`pointerdown`,k.handlePointerDown),l(i,`pointermove`,k.handlePointerMove),l(i,`pointerup`,k.handlePointerUp),l(i,`pointercancel`,k.handlePointerCancel)),()=>{M.dispose()}}),a.html`
+      <dialog
+        ref=${p}
+        aria-modal="true"
+        :aria-label="${()=>e.label.value??null}"
+        :aria-labelledby="${()=>e.label.value?null:f}">
+        <div class="panel" part="panel" ref=${m}>
+          <div class="drag-handle" part="drag-handle" aria-label="Drag to close" role="button"></div>
+          <div class="header" part="header" ?hidden=${()=>!y()}>
+            <span class="header-title" id="${f}" ?hidden=${()=>!v()}>
+              <slot name="header">${()=>_()}</slot>
+            </span>
+            <button
+              class="close-btn"
+              part="close-btn"
+              type="button"
+              aria-label="Close"
+              ?hidden=${()=>!e.dismissible.value}
+              @click=${()=>{N(`trigger`)}}>
+              <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
+            </button>
+          </div>
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+          <div class="footer" part="footer" ?hidden=${()=>!b()}>
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </dialog>
+    `},styles:[t.elevationMixin,t.forcedColorsMixin,e.coarsePointerMixin,e.reducedMotionMixin,i.default]}),exports.DRAWER_TAG=c;
+//# sourceMappingURL=drawer.cjs.map

package/dist/drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.cjs","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":"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"}

package/dist/drawer.js

@@ -0,0 +1,199 @@
+import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import { elevationMixin as n, forcedColorsMixin as r } from "./styles/mixins/theme.css.js";
+import { createSwipeControl as i } from "./headless/swipe.js";
+import { useDialogControl as a } from "./overlay/shared/use-dialog.js";
+import o from "./overlay/drawer/drawer.css?inline.js";
+import { createStableId as s, define as c, html as l, prop as u, ref as d } from "@vielzeug/ore";
+import { signal as f } from "@vielzeug/ripple";
+//#region src/overlay/drawer/drawer.ts
+var p = {
+	bottom: {
+		axis: "y",
+		closingDistance: (e) => Math.max(0, e),
+		translate: (e) => `translateY(${e}px)`
+	},
+	left: {
+		axis: "x",
+		closingDistance: (e) => Math.max(0, -e),
+		translate: (e) => `translateX(${e}px)`
+	},
+	right: {
+		axis: "x",
+		closingDistance: (e) => Math.max(0, e),
+		translate: (e) => `translateX(${e}px)`
+	},
+	top: {
+		axis: "y",
+		closingDistance: (e) => Math.max(0, -e),
+		translate: (e) => `translateY(${e}px)`
+	}
+}, m = "ore-drawer";
+c(m, {
+	props: {
+		backdrop: u.string(),
+		dismissible: u.bool(!0),
+		"drag-handle-placement": u.oneOf(["outside", "inset"], "outside"),
+		"initial-focus": u.string(),
+		label: u.string(),
+		open: u.bool(!1),
+		persistent: u.bool(!1),
+		placement: u.oneOf([
+			"left",
+			"right",
+			"top",
+			"bottom"
+		], "right"),
+		"return-focus": u.bool(!0),
+		size: u.string(),
+		title: u.string()
+	},
+	setup(e, { el: t, emit: n, onCleanup: r, onEvent: o, onMounted: c, slots: u }) {
+		let m = s("drawer-label"), h = d(), g = d(), _ = f(!1), v, y = () => e.label.value ?? e.title.value ?? "", b = () => u.has("header").value || !!y(), x = () => b() || e.dismissible.value, S = () => u.has("footer").value, C = () => e.placement.value || "right", w = () => p[C()], T = (e, t) => {
+			let n = t === "x" ? e.offsetWidth : e.offsetHeight;
+			return Math.min(96, Math.max(36, n * .18));
+		}, E = (e, t) => w().closingDistance(e) >= t, D = (e) => {
+			if (!_.value) return;
+			v &&= (clearTimeout(v), void 0);
+			let t = h.value;
+			if (!t) {
+				_.value = !1;
+				return;
+			}
+			t.style.transition = "none", e.style.opacity = "0", e.style.visibility = "hidden", t.offsetWidth, F("swipe");
+		}, O = (e, t, n) => {
+			if (_.value) return;
+			_.value = !0;
+			let r = t.axis === "x" ? e.offsetWidth : e.offsetHeight, i = n >= 0 ? Math.max(n, r) : Math.min(n, -r), a = t.translate(i);
+			e.style.transition = "transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-out", e.offsetWidth;
+			let o = (t) => {
+				t.target !== e || t.propertyName !== "transform" || (e.removeEventListener("transitionend", o), D(e));
+			};
+			e.addEventListener("transitionend", o);
+			let s = parseFloat(getComputedStyle(e).transitionDuration) * 1e3;
+			v = setTimeout(() => {
+				e.removeEventListener("transitionend", o), D(e);
+			}, s + 50), e.style.transform = a, e.style.opacity = "0.2";
+		}, k = (e) => {
+			v &&= (clearTimeout(v), void 0), e.style.transition = "", e.style.transform = "", e.style.opacity = "", e.style.visibility = "", _.value = !1;
+		}, A = ({ distance: e, threshold: t }) => {
+			let n = g.value;
+			if (n) {
+				if (E(e, t)) {
+					O(n, w(), e);
+					return;
+				}
+				k(n);
+			}
+		}, j = i({
+			axis: () => w().axis,
+			disabled: _,
+			onCancel: A,
+			onCommit: ({ distance: e }) => {
+				let t = g.value;
+				t && O(t, w(), e);
+			},
+			onMove: ({ distance: e, threshold: t }) => {
+				let n = g.value;
+				if (!n) return;
+				let r = w(), i = r.closingDistance(e), a = Math.min(i / t, 1);
+				n.style.transition = "none", n.style.transform = r.translate(e), n.style.opacity = String(1 - a * .4);
+			},
+			onRelease: A,
+			shouldCommit: ({ distance: e, threshold: t }) => E(e, t),
+			threshold: () => {
+				let e = g.value;
+				return e ? T(e, w().axis) : 48;
+			}
+		}), { closeWithAnimation: M, handleCancel: N, overlay: P, requestClose: F, watchOpenProp: I } = a({
+			beforeOpen: (e) => {
+				let t = g.value;
+				t && k(t);
+			},
+			closeRequestDetail: (t) => ({ placement: e.placement.value ?? "right" }),
+			dialogRef: h,
+			getPanelEl: () => g.value,
+			host: t,
+			initialFocus: e["initial-focus"],
+			isPersistent: () => !!e.persistent.value,
+			onCleanup: r,
+			onEvent: o,
+			onNativeClose: (t) => {
+				let r = g.value;
+				r && t !== "swipe" && k(r);
+				let i = h.value;
+				i && (i.style.transition = ""), n("close", {
+					placement: e.placement.value ?? "right",
+					reason: t
+				});
+			},
+			onOpen: (t) => n("open", {
+				placement: e.placement.value ?? "right",
+				reason: t
+			}),
+			openProp: e.open,
+			performClose: (e, t) => {
+				t === "swipe" ? e.close() : M();
+			},
+			returnFocus: e["return-focus"]
+		});
+		return c(() => {
+			let n = h.value;
+			if (!n) return;
+			let r = t;
+			r.show = () => {
+				P.open("programmatic");
+			}, r.hide = () => {
+				P.close("programmatic", !1);
+			}, I(), o(n, "cancel", N), o(n, "click", (t) => {
+				e.persistent.value || j.isActive() || _.value || t.target === n && F("outsideClick");
+			});
+			let i = g.value?.querySelector("[part=\"drag-handle\"]");
+			return i && (o(i, "pointerdown", j.handlePointerDown), o(i, "pointermove", j.handlePointerMove), o(i, "pointerup", j.handlePointerUp), o(i, "pointercancel", j.handlePointerCancel)), () => {
+				P.dispose();
+			};
+		}), l`
+      <dialog
+        ref=${h}
+        aria-modal="true"
+        :aria-label="${() => e.label.value ?? null}"
+        :aria-labelledby="${() => e.label.value ? null : m}">
+        <div class="panel" part="panel" ref=${g}>
+          <div class="drag-handle" part="drag-handle" aria-label="Drag to close" role="button"></div>
+          <div class="header" part="header" ?hidden=${() => !x()}>
+            <span class="header-title" id="${m}" ?hidden=${() => !b()}>
+              <slot name="header">${() => y()}</slot>
+            </span>
+            <button
+              class="close-btn"
+              part="close-btn"
+              type="button"
+              aria-label="Close"
+              ?hidden=${() => !e.dismissible.value}
+              @click=${() => {
+			F("trigger");
+		}}>
+              <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
+            </button>
+          </div>
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+          <div class="footer" part="footer" ?hidden=${() => !S()}>
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
+	},
+	styles: [
+		n,
+		r,
+		e,
+		t,
+		o
+	]
+});
+//#endregion
+export { m as DRAWER_TAG };
+
+//# sourceMappingURL=drawer.js.map

package/dist/drawer.js.map

@@ -0,0 +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":"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"}

package/dist/errors.cjs

@@ -0,0 +1,2 @@
+var e=class e extends Error{constructor(e,t){super(e,t),this.name=new.target.name,Object.setPrototypeOf(this,new.target.prototype)}static is(t){return t instanceof e}},t=class extends e{};exports.RefineConfigError=t,exports.RefineError=e;
+//# sourceMappingURL=errors.cjs.map

package/dist/errors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.cjs","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n  constructor(message: string, opts?: ErrorOptions) {\n    super(message, opts);\n    this.name = new.target.name;\n    Object.setPrototypeOf(this, new.target.prototype);\n  }\n\n  static is(err: unknown): err is RefineError {\n    return err instanceof RefineError;\n  }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":"AACA,IAAa,EAAb,MAAa,UAAoB,KAAM,CACrC,YAAY,EAAiB,EAAqB,CAChD,MAAM,EAAS,CAAI,EACnB,KAAK,KAAO,IAAI,OAAO,KACvB,OAAO,eAAe,KAAM,IAAI,OAAO,SAAS,CAClD,CAEA,OAAO,GAAG,EAAkC,CAC1C,OAAO,aAAe,CACxB,CACF,EAGa,EAAb,cAAuC,CAAY,CAAC"}

package/dist/errors.d.ts

@@ -0,0 +1,9 @@
+/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */
+export declare class RefineError extends Error {
+    constructor(message: string, opts?: ErrorOptions);
+    static is(err: unknown): err is RefineError;
+}
+/** Thrown when a refine component receives an invalid or unsupported configuration. */
+export declare class RefineConfigError extends RefineError {
+}
+//# sourceMappingURL=errors.d.ts.map

package/dist/errors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,qBAAa,WAAY,SAAQ,KAAK;gBACxB,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,YAAY;IAMhD,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,WAAW;CAG5C;AAED,uFAAuF;AACvF,qBAAa,iBAAkB,SAAQ,WAAW;CAAG"}

package/dist/errors.js

@@ -0,0 +1,13 @@
+//#region src/errors.ts
+var e = class e extends Error {
+	constructor(e, t) {
+		super(e, t), this.name = new.target.name, Object.setPrototypeOf(this, new.target.prototype);
+	}
+	static is(t) {
+		return t instanceof e;
+	}
+}, t = class extends e {};
+//#endregion
+export { t as RefineConfigError, e as RefineError };
+
+//# sourceMappingURL=errors.js.map

package/dist/errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.js","names":[],"sources":["../src/errors.ts"],"sourcesContent":["/** Base class for all refine errors. Use `instanceof RefineError` to catch any refine-originated error. */\nexport class RefineError extends Error {\n  constructor(message: string, opts?: ErrorOptions) {\n    super(message, opts);\n    this.name = new.target.name;\n    Object.setPrototypeOf(this, new.target.prototype);\n  }\n\n  static is(err: unknown): err is RefineError {\n    return err instanceof RefineError;\n  }\n}\n\n/** Thrown when a refine component receives an invalid or unsupported configuration. */\nexport class RefineConfigError extends RefineError {}\n"],"mappings":";AACA,IAAa,IAAb,MAAa,UAAoB,MAAM;CACrC,YAAY,GAAiB,GAAqB;EAGhD,AAFA,MAAM,GAAS,CAAI,GACnB,KAAK,OAAO,IAAI,OAAO,MACvB,OAAO,eAAe,MAAM,IAAI,OAAO,SAAS;CAClD;CAEA,OAAO,GAAG,GAAkC;EAC1C,OAAO,aAAe;CACxB;AACF,GAGa,IAAb,cAAuC,EAAY,CAAC"}

package/dist/feedback/alert/alert.css?inline.cjs

@@ -0,0 +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

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.css?inline.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

@@ -0,0 +1,6 @@
+//#region src/feedback/alert/alert.css?inline
+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))}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=alert.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.css?inline.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/alert/alert.d.ts

@@ -0,0 +1,74 @@
+import type { ComponentSize, RoundedSize, ThemeColor } from '../../types';
+import '../../content/icon/icon';
+export type OreAlertEvents = {
+    dismiss: {
+        originalEvent: MouseEvent;
+    };
+};
+export type OreAlertProps = {
+    /** Show a left accent border (for flat/bordered variants) */
+    accented?: boolean;
+    /** Theme color */
+    color?: ThemeColor;
+    /** Show a dismissible (×) button */
+    dismissible?: boolean;
+    /** Heading text shown above the content */
+    heading?: string;
+    /** Position action buttons to the right instead of below */
+    horizontal?: boolean;
+    /** Border radius */
+    rounded?: RoundedSize | '';
+    /** Alert size */
+    size?: ComponentSize;
+    /** Visual style variant */
+    variant?: 'solid' | 'flat' | 'bordered';
+};
+/**
+ * A status/feedback banner with optional heading, icon slot, and dismiss button.
+ *
+ * @element ore-alert
+ *
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} variant - Visual style: 'flat' | 'solid' | 'bordered'
+ * @attr {string} size - Size: 'sm' | 'md' | 'lg'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ * @attr {string} heading - Bold heading text above the content
+ * @attr {boolean} dismissible - Show a close (×) button
+ * @attr {boolean} accented - Add a left accent border (flat/bordered only)
+ * @attr {boolean} horizontal - Position action buttons to the right instead of below
+ *
+ * @fires dismiss - Fired when the alert is dismissed. detail: { originalEvent: MouseEvent }
+ *
+ * @slot - Default slot for the alert message content
+ * @slot icon - Icon on the left side
+ * @slot meta - Metadata displayed alongside the heading (lighter, right-aligned)
+ * @slot actions - Action buttons shown below the message
+ *
+ * @cssprop --alert-bg - Background color
+ * @cssprop --alert-color - Text/icon color
+ * @cssprop --alert-border-color - Border color
+ * @cssprop --alert-shadow - Box shadow
+ * @cssprop --alert-radius - Border radius
+ * @cssprop --alert-padding - Padding
+ * @cssprop --alert-gap - Gap between icon, body, and close button
+ * @cssprop --alert-font-size - Font size
+ *
+ * @part alert - Alert root container.
+ * @part icon - Icon container.
+ * @part header - Header container.
+ * @part heading - Heading text element.
+ * @part meta - Meta text container.
+ * @part body - Body content container.
+ * @part content - Content container.
+ * @part actions - Actions slot container.
+ * @part close - Close action control.
+ * @example
+ * ```html
+ * <ore-alert color="success">Your changes have been saved.</ore-alert>
+ * <ore-alert color="error" variant="solid" dismissible heading="Something went wrong">
+ *   Please try again later.
+ * </ore-alert>
+ * ```
+ */
+export declare const ALERT_TAG: "ore-alert";
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/feedback/alert/alert.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,yBAAyB,CAAC;AAajC,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE;QAAE,aAAa,EAAE,UAAU,CAAA;KAAE,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}

package/dist/feedback/async/async.css?inline.cjs

@@ -0,0 +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

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

@@ -0,0 +1 @@
+{"version":3,"file":"async.css?inline.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

@@ -0,0 +1,6 @@
+//#region src/feedback/async/async.css?inline
+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}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=async.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"async.css?inline.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":""}