@vielzeug/refine 3.2.1 → 3.3.0

package/dist/frameworks/elements.d.ts

@@ -1,5 +1,5 @@
 // Generated from src/types/elements.d.ts. Do not edit directly.
 import type {} from '../types/elements.js';
 
-export type RefineElementTag = 'ore-accordion' | 'ore-accordion-item' | 'ore-alert' | 'ore-async' | 'ore-avatar' | 'ore-avatar-group' | 'ore-badge' | 'ore-box' | 'ore-breadcrumb' | 'ore-breadcrumb-item' | 'ore-button' | 'ore-button-group' | 'ore-calendar' | 'ore-card' | 'ore-carousel' | 'ore-carousel-slide' | 'ore-chat-message' | 'ore-checkbox' | 'ore-checkbox-group' | 'ore-chip' | 'ore-code-window' | 'ore-column' | 'ore-combobox' | 'ore-combobox-option' | 'ore-command-palette' | 'ore-command-palette-item' | 'ore-copy-command' | 'ore-datagrid' | 'ore-date-picker' | 'ore-dialog' | 'ore-drawer' | 'ore-file-input' | 'ore-grid' | 'ore-grid-item' | 'ore-icon' | 'ore-input' | 'ore-list' | 'ore-list-item' | 'ore-marquee' | 'ore-menu' | 'ore-menu-item' | 'ore-menu-separator' | 'ore-message-composer' | 'ore-navbar' | 'ore-navbar-item' | 'ore-navigation-menu' | 'ore-navigation-menu-item' | 'ore-navigation-menu-panel' | 'ore-number-input' | 'ore-otp-input' | 'ore-pagination' | 'ore-password-strength' | 'ore-popover' | 'ore-progress' | 'ore-radio' | 'ore-radio-group' | 'ore-rating' | 'ore-select' | 'ore-separator' | 'ore-sidebar' | 'ore-sidebar-group' | 'ore-sidebar-item' | 'ore-skeleton' | 'ore-slider' | 'ore-stats' | 'ore-step' | 'ore-stepper' | 'ore-switch' | 'ore-tab-item' | 'ore-tab-panel' | 'ore-table' | 'ore-tabs' | 'ore-td' | 'ore-text' | 'ore-textarea' | 'ore-th' | 'ore-time-picker' | 'ore-toast' | 'ore-tooltip' | 'ore-tr' | 'ore-typing-indicator';
+export type RefineElementTag = 'ore-accordion' | 'ore-accordion-item' | 'ore-alert' | 'ore-async' | 'ore-avatar' | 'ore-avatar-group' | 'ore-badge' | 'ore-box' | 'ore-breadcrumb' | 'ore-breadcrumb-item' | 'ore-button' | 'ore-button-group' | 'ore-calendar' | 'ore-card' | 'ore-carousel' | 'ore-carousel-slide' | 'ore-chat-message' | 'ore-checkbox' | 'ore-checkbox-group' | 'ore-chip' | 'ore-code-window' | 'ore-column' | 'ore-combobox' | 'ore-combobox-option' | 'ore-command-palette' | 'ore-command-palette-item' | 'ore-copy-command' | 'ore-counter' | 'ore-datagrid' | 'ore-date-picker' | 'ore-dialog' | 'ore-drawer' | 'ore-file-input' | 'ore-grid' | 'ore-grid-item' | 'ore-icon' | 'ore-input' | 'ore-keyboard-key' | 'ore-keyboard-shortcut' | 'ore-list' | 'ore-list-item' | 'ore-marquee' | 'ore-menu' | 'ore-menu-item' | 'ore-menu-separator' | 'ore-message-composer' | 'ore-navbar' | 'ore-navbar-item' | 'ore-navigation-menu' | 'ore-navigation-menu-item' | 'ore-navigation-menu-panel' | 'ore-number-input' | 'ore-otp-input' | 'ore-pagination' | 'ore-password-strength' | 'ore-popover' | 'ore-progress' | 'ore-qr-code' | 'ore-qr-scanner' | 'ore-radio' | 'ore-radio-group' | 'ore-rating' | 'ore-select' | 'ore-separator' | 'ore-sidebar' | 'ore-sidebar-group' | 'ore-sidebar-item' | 'ore-skeleton' | 'ore-slider' | 'ore-stats' | 'ore-step' | 'ore-stepper' | 'ore-switch' | 'ore-tab-item' | 'ore-tab-panel' | 'ore-table' | 'ore-tabs' | 'ore-td' | 'ore-text' | 'ore-textarea' | 'ore-th' | 'ore-time-picker' | 'ore-toast' | 'ore-tooltip' | 'ore-tr' | 'ore-typing-indicator';
 export type RefineElementMap = Pick<HTMLElementTagNameMap, RefineElementTag>;

package/dist/inputs/button/button.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--_gap,var(--size-2));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));text-decoration:none;display:flex;position:relative}[part=button]:not(: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-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(: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-color:#0000}.loader: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-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullheight]){height:100%;display:flex}:host([fullheight]) [part=button]{height:100%}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--button-gap,var(--_gap,var(--size-2)));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--button-padding,var(--_padding,var(--size-2) var(--size-4)));font-size:var(--button-font-size,var(--_font-size,var(--text-sm)));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));text-decoration:none;display:flex;position:relative}[part=button]:not(: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-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(: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-color:#0000}.loader: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-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullheight]){height:100%;display:flex}:host([fullheight]) [part=button]{height:100%}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}`;exports.default=e;
 //# sourceMappingURL=button.css.cjs.map

package/dist/inputs/button/button.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.css.cjs","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--_padding, var(--size-2) var(--size-4));\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n     (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n     external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n     without moving the visible button surface at all. Both declarations are needed. */\n  :host([fullheight]) {\n    display: flex;\n    height: 100%;\n  }\n\n  :host([fullheight]) [part='button'] {\n    height: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover,\n  [part='button']:active {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* ...nor on :active — stay borderless even though the shared rule above now\n     adds a halo to :active too (physical press transform below still applies,\n     this only cancels border-color/box-shadow). */\n  :host([variant='ghost']) [part='button']:active,\n  :host([variant='text']) [part='button']:active {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button.css.cjs","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--button-gap, var(--_gap, var(--size-2)));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--button-padding, var(--_padding, var(--size-2) var(--size-4)));\n    font-size: var(--button-font-size, var(--_font-size, var(--text-sm)));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n     (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n     external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n     without moving the visible button surface at all. Both declarations are needed. */\n  :host([fullheight]) {\n    display: flex;\n    height: 100%;\n  }\n\n  :host([fullheight]) [part='button'] {\n    height: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover,\n  [part='button']:active {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* ...nor on :active — stay borderless even though the shared rule above now\n     adds a halo to :active too (physical press transform below still applies,\n     this only cancels border-color/box-shadow). */\n  :host([variant='ghost']) [part='button']:active,\n  :host([variant='text']) [part='button']:active {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}

package/dist/inputs/button/button.css.js

@@ -1,5 +1,5 @@
 //#region src/inputs/button/button.css?inline
-var e = "@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--_gap,var(--size-2));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));text-decoration:none;display:flex;position:relative}[part=button]:not(: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-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(: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-color:#0000}.loader: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-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullheight]){height:100%;display:flex}:host([fullheight]) [part=button]{height:100%}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}";
+var e = "@layer refine.base{:host{--_bg:var(--button-bg,var(--color-contrast-100));--_color:var(--button-color,var(--color-contrast-900));--_border-color:var(--button-border-color,var(--color-contrast-300));--_radius:var(--button-radius,var(--rounded-lg));align-items:center;justify-content:var(--button-justify,center);display:inline-flex}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed}:host([loading]) a{cursor:wait}[part=button]{box-sizing:border-box;gap:var(--button-gap,var(--_gap,var(--size-2)));align-items:center;justify-content:var(--button-justify,center);width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--button-padding,var(--_padding,var(--size-2) var(--size-4)));font-size:var(--button-font-size,var(--_font-size,var(--text-sm)));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--button-border,var(--border)) solid var(--_border-color);border-top-width:var(--button-border-top,var(--button-border,var(--border)));border-bottom-width:var(--button-border-bottom,var(--button-border,var(--border)));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), transform .12s var(--ease-spring));text-decoration:none;display:flex;position:relative}[part=button]:not(: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-left-width:var(--button-border-start,var(--button-border,var(--border)));border-right-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]: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(--button-border-start,var(--button-border,var(--border)));border-left-width:var(--button-border-end,var(--button-border,var(--border)))}[part=button]:focus-visible{outline:none}@keyframes spin{to{transform:rotate(360deg)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border-radius:50%;position:absolute}.loader:not(: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-color:#0000}.loader: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-left-color:#0000}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer refine.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullheight]){height:100%;display:flex}:host([fullheight]) [part=button]{height:100%}:host([rounded][icon-only]) [part=button]{border-radius:50%}:host([loading]) .content{visibility:hidden}[part=button]:focus-visible{box-shadow:var(--_theme-shadow), var(--_theme-halo);outline:none}[part=button]:hover,[part=button]:active{border-color:var(--_hover-border-color,var(--_theme-focus));box-shadow:var(--_theme-shadow), var(--_theme-halo)}:host([variant=ghost]) [part=button]:hover,:host([variant=text]) [part=button]:hover{box-shadow:none;border-color:#0000;transform:none}:host([variant=ghost]) [part=button]:active,:host([variant=text]) [part=button]:active{box-shadow:none;border-color:#0000}[part=button]:active{transform:translateY(1px)}}@layer refine.variants{:host([icon-only]) [part=button]{aspect-ratio:1;padding:0}:host(:not([variant])),:host([variant=solid]){--_bg:var(--button-bg,var(--_theme-base));--_color:var(--button-color,var(--_theme-contrast));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]){--_bg:var(--button-bg,color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,color-mix(in oklch, var(--_theme-focus) 20%, transparent));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=flat]) [part=button]{box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]){--_bg:var(--button-bg,var(--_theme-backdrop));--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-border));--_hover-bg:var(--_theme-focus);--_hover-color:var(--_theme-contrast);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-focus) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=bordered]) [part=button],:host([variant=bordered]) [part=button]:hover{box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) [part=button]:active{box-shadow:var(--inset-shadow-sm)}:host([variant=outline]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,var(--_theme-base));--_hover-bg:var(--_theme-backdrop);--_hover-border-color:var(--_theme-focus);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-bg:var(--_theme-backdrop);--_active-bg:color-mix(in oklch, var(--_theme-base) 85%, black);--_active-color:var(--_theme-contrast)}:host([variant=ghost]) [part=button]{border-width:0}:host([variant=text]){--_bg:var(--button-bg,transparent);--_color:var(--button-color,var(--_theme-base));--_border-color:var(--button-border-color,transparent);--_hover-color:var(--_theme-focus);--_active-color:color-mix(in oklch, var(--_theme-focus) 85%, black)}:host([variant=text]) [part=button]{border-width:0}:host([variant=frost]:not([color])){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--color-canvas) 70%, transparent));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 40%, transparent))}:host([variant=frost][color]){--_hover-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_hover-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent));--_active-bg:var(--button-frost-active-bg,color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));--_active-border-color:var(--button-frost-active-border-color,color-mix(in oklch, var(--_theme-focus) 65%, transparent))}[part=button]:hover{color:var(--_hover-color,var(--_color));background:var(--_hover-bg,var(--_bg));border-color:var(--_hover-border-color,var(--_border-color))}[part=button]:active{color:var(--_active-color,var(--_color));background:var(--_active-bg,var(--_bg));border-color:var(--_active-border-color,var(--_border-color));box-shadow:var(--inset-shadow-2xs)}}";
 //#endregion
 export { e as default };
 

package/dist/inputs/button/button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.css.js","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--_padding, var(--size-2) var(--size-4));\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n     (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n     external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n     without moving the visible button surface at all. Both declarations are needed. */\n  :host([fullheight]) {\n    display: flex;\n    height: 100%;\n  }\n\n  :host([fullheight]) [part='button'] {\n    height: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover,\n  [part='button']:active {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* ...nor on :active — stay borderless even though the shared rule above now\n     adds a halo to :active too (physical press transform below still applies,\n     this only cancels border-color/box-shadow). */\n  :host([variant='ghost']) [part='button']:active,\n  :host([variant='text']) [part='button']:active {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button.css.js","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-100));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border-color: var(--button-border-color, var(--color-contrast-300));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: var(--button-justify, center);\n  }\n\n  /* Link mode: disable pointer interaction on the inner <a> while disabled/loading. */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  [part='button'] {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--button-gap, var(--_gap, var(--size-2)));\n    align-items: center;\n    justify-content: var(--button-justify, center);\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--button-padding, var(--_padding, var(--size-2) var(--size-4)));\n    font-size: var(--button-font-size, var(--_font-size, var(--text-sm)));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--button-border, var(--border)) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--button-border, var(--border)));\n    border-block-end-width: var(--button-border-bottom, var(--button-border, var(--border)));\n    border-inline-start-width: var(--button-border-start, var(--button-border, var(--border)));\n    border-inline-end-width: var(--button-border-end, var(--button-border, var(--border)));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      transform 120ms var(--ease-spring)\n    );\n  }\n\n  [part='button']:focus-visible {\n    outline: none;\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loader {\n    position: absolute;\n    width: 1em;\n    height: 1em;\n    border: var(--border-2) solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer refine.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  /* `[part='button']`'s own height otherwise comes from the fixed size-preset var\n     (`--_height`, default `--size-10`) — overriding just the host's own box height (e.g. via an\n     external `height: 100%` from a swipe-action panel container) stretches an invisible wrapper\n     without moving the visible button surface at all. Both declarations are needed. */\n  :host([fullheight]) {\n    display: flex;\n    height: 100%;\n  }\n\n  :host([fullheight]) [part='button'] {\n    height: 100%;\n  }\n\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) [part='button'] {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n@layer refine.variants {\n  :host([icon-only]) [part='button'] {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* ── Per-variant token assignments ─────────────────────────────────────────\n     Each variant sets --_bg/--_color/--_border-color (consuming the public\n     --button-* tokens as overrides) plus optional --_hover-* / --_active-*\n     tokens for interactive states.\n     The shared :is(button, a):hover / :active rules below read these tokens.\n     ─────────────────────────────────────────────────────────────────────── */\n\n  /* Solid (Default) */\n  :host(:not([variant])),\n  :host([variant='solid']) {\n    --_bg: var(--button-bg, var(--_theme-base));\n    --_color: var(--button-color, var(--_theme-contrast));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Flat */\n  :host([variant='flat']) {\n    --_bg: var(--button-bg, color-mix(in oklch, var(--_theme-backdrop) 25%, var(--color-contrast-100)));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, color-mix(in oklch, var(--_theme-focus) 20%, transparent));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='flat']) [part='button'] {\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) {\n    --_bg: var(--button-bg, var(--_theme-backdrop));\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-border));\n    --_hover-bg: var(--_theme-focus);\n    --_hover-color: var(--_theme-contrast);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-focus) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='bordered']) [part='button'] {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:hover {\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) [part='button']:active {\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, var(--_theme-base));\n    --_hover-bg: var(--_theme-backdrop);\n    --_hover-border-color: var(--_theme-focus);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-bg: var(--_theme-backdrop);\n    --_active-bg: color-mix(in oklch, var(--_theme-base) 85%, black);\n    --_active-color: var(--_theme-contrast);\n  }\n\n  :host([variant='ghost']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Text */\n  :host([variant='text']) {\n    --_bg: var(--button-bg, transparent);\n    --_color: var(--button-color, var(--_theme-base));\n    --_border-color: var(--button-border-color, transparent);\n    --_hover-color: var(--_theme-focus);\n    --_active-color: color-mix(in oklch, var(--_theme-focus) 85%, black);\n  }\n\n  :host([variant='text']) [part='button'] {\n    border-width: 0;\n  }\n\n  /* Frost — sets its own interactive tokens so the shared rules below apply uniformly */\n  :host([variant='frost']:not([color])) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n    --_active-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--color-canvas) 70%, transparent));\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 40%, transparent)\n    );\n  }\n\n  :host([variant='frost'][color]) {\n    --_hover-bg: var(--button-frost-active-bg, color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%));\n    --_hover-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n    --_active-bg: var(\n      --button-frost-active-bg,\n      color-mix(in oklch, var(--_theme-backdrop) 50%, var(--_theme-base) 50%)\n    );\n    --_active-border-color: var(\n      --button-frost-active-border-color,\n      color-mix(in oklch, var(--_theme-focus) 65%, transparent)\n    );\n  }\n\n  /* ── Shared interactive states — all variants use --_* tokens set above ── */\n\n  [part='button']:hover {\n    color: var(--_hover-color, var(--_color));\n    background: var(--_hover-bg, var(--_bg));\n    border-color: var(--_hover-border-color, var(--_border-color));\n  }\n\n  [part='button']:active {\n    color: var(--_active-color, var(--_color));\n    background: var(--_active-bg, var(--_bg));\n    border-color: var(--_active-border-color, var(--_border-color));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n\n@layer refine.overrides {\n  /* Focus ring — keyboard navigation only; combines focus shadow + halo to avoid shadow pop */\n  [part='button']:focus-visible {\n    outline: none;\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Hover depth — halo border effect matching ore-input focus style */\n  [part='button']:hover,\n  [part='button']:active {\n    border-color: var(--_hover-border-color, var(--_theme-focus));\n    box-shadow: var(--_theme-shadow), var(--_theme-halo);\n  }\n\n  /* Ghost + Text variants: no border/shadow decoration on hover */\n  :host([variant='ghost']) [part='button']:hover,\n  :host([variant='text']) [part='button']:hover {\n    border-color: transparent;\n    box-shadow: none;\n    transform: none;\n  }\n\n  /* ...nor on :active — stay borderless even though the shared rule above now\n     adds a halo to :active too (physical press transform below still applies,\n     this only cancels border-color/box-shadow). */\n  :host([variant='ghost']) [part='button']:active,\n  :host([variant='text']) [part='button']:active {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  /* Physical press feedback */\n  [part='button']:active {\n    transform: translateY(1px);\n  }\n}\n"],"mappings":""}

package/dist/inputs/counter/counter.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_bg:var(--counter-bg,var(--color-contrast-100));--_border-color:var(--counter-border-color,var(--color-divider));--_radius:var(--counter-radius,var(--rounded-lg));--_gap:var(--counter-gap,var(--size-3));--_button-size:var(--counter-button-size,var(--size-11));--_value-size:var(--counter-value-size,var(--text-2xl));--_icon-size:var(--size-5);--_slot-icon-size:var(--counter-icon-size,var(--size-6));--_label-size:var(--text-sm);--_accent:var(--_theme-base,var(--text-color-heading));box-sizing:border-box;vertical-align:middle;min-width:0;display:inline-flex}:host([size=sm]){--_button-size:var(--counter-button-size,var(--size-10));--_value-size:var(--counter-value-size,var(--text-xl));--_icon-size:var(--size-4);--_slot-icon-size:var(--counter-icon-size,var(--size-5));--_label-size:var(--text-xs)}:host([size=lg]){--_button-size:var(--counter-button-size,var(--size-12));--_value-size:var(--counter-value-size,var(--text-3xl));--_icon-size:var(--size-6);--_slot-icon-size:var(--counter-icon-size,var(--size-8));--_label-size:var(--text-base)}.counter{box-sizing:border-box;gap:var(--size-2);min-width:0;padding:var(--size-3);color:var(--text-color-body);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);flex-direction:column;flex:1;display:flex}.header{gap:var(--size-2);align-items:center;min-width:0;display:flex}::slotted([slot=icon]){width:var(--_slot-icon-size);height:var(--_slot-icon-size);color:var(--_accent);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.label{text-overflow:ellipsis;min-width:0;font-size:var(--_label-size);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--text-color-heading);white-space:nowrap;overflow:hidden}.controls{gap:var(--_gap);justify-content:space-between;align-items:center;display:flex}.btn{all:unset;box-sizing:border-box;width:var(--_button-size);min-width:var(--_touch-target,var(--_button-size));height:var(--_button-size);min-height:var(--_touch-target,var(--_button-size));color:var(--text-color-heading);touch-action:manipulation;cursor:pointer;background:var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast), transform .12s var(--ease-spring);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.btn:hover:not(:disabled){background:var(--color-contrast-300)}.btn:active:not(:disabled){transform:scale(.94)}.btn:disabled{cursor:not-allowed;opacity:.4}.btn[hidden]{display:none}.btn-large{font-size:var(--_label-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;color:var(--text-color-secondary);border:var(--border) solid var(--_border-color);background:0 0}.btn-large:hover:not(:disabled){color:var(--text-color-heading);background:var(--color-contrast-200)}.value{min-width:2ch;font-size:var(--_value-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;line-height:var(--leading-none);color:var(--_accent);text-align:center;touch-action:manipulation;border-radius:var(--rounded-md);flex:1}.value:focus-visible{outline:2px solid var(--_theme-focus,var(--color-primary));outline-offset:2px}:host([data-bump]) .value{animation:var(--_motion-animation,counter-bump .2s var(--ease-spring))}@keyframes counter-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}.hint,::slotted([slot=hint]){font-size:var(--text-xs);line-height:var(--leading-snug,1.35);color:var(--text-color-tertiary)}.hint[hidden]{display:none}:host([readonly]) .controls{justify-content:flex-start}:host([readonly]) .value{flex:0}:host([readonly]) .value:not(: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))){text-align:left}:host([readonly]) .value: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)){text-align:right}}`;exports.default=e;
+//# sourceMappingURL=counter.css.cjs.map

package/dist/inputs/counter/counter.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.css.cjs","names":[],"sources":["../../../src/inputs/counter/counter.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--counter-bg, var(--color-contrast-100));\n    --_border-color: var(--counter-border-color, var(--color-divider));\n    --_radius: var(--counter-radius, var(--rounded-lg));\n    --_gap: var(--counter-gap, var(--size-3));\n    --_button-size: var(--counter-button-size, var(--size-11));\n    --_value-size: var(--counter-value-size, var(--text-2xl));\n    --_icon-size: var(--size-5);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-6));\n    --_label-size: var(--text-sm);\n    --_accent: var(--_theme-base, var(--text-color-heading));\n    box-sizing: border-box;\n\n    display: inline-flex;\n    min-width: 0;\n    vertical-align: middle;\n  }\n\n  :host([size='sm']) {\n    --_button-size: var(--counter-button-size, var(--size-10));\n    --_value-size: var(--counter-value-size, var(--text-xl));\n    --_icon-size: var(--size-4);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-5));\n    --_label-size: var(--text-xs);\n  }\n\n  :host([size='lg']) {\n    --_button-size: var(--counter-button-size, var(--size-12));\n    --_value-size: var(--counter-value-size, var(--text-3xl));\n    --_icon-size: var(--size-6);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-8));\n    --_label-size: var(--text-base);\n  }\n\n  .counter {\n    box-sizing: border-box;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 0;\n    padding: var(--size-3);\n    color: var(--text-color-body);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_slot-icon-size);\n    height: var(--_slot-icon-size);\n    color: var(--_accent);\n  }\n\n  .label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_label-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--text-color-heading);\n    white-space: nowrap;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_button-size);\n    min-width: var(--_touch-target, var(--_button-size));\n    height: var(--_button-size);\n    min-height: var(--_touch-target, var(--_button-size));\n    color: var(--text-color-heading);\n    touch-action: manipulation;\n    cursor: pointer;\n    background: var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  .btn:hover:not(:disabled) {\n    background: var(--color-contrast-300);\n  }\n\n  .btn:active:not(:disabled) {\n    transform: scale(0.94);\n  }\n\n  .btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  .btn[hidden] {\n    display: none;\n  }\n\n  /* Quick-step buttons: same footprint, quieter surface, numeric label instead of an icon. */\n  .btn-large {\n    font-size: var(--_label-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    color: var(--text-color-secondary);\n    background: transparent;\n    border: var(--border) solid var(--_border-color);\n  }\n\n  .btn-large:hover:not(:disabled) {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  .value {\n    flex: 1;\n    min-width: 2ch;\n    font-size: var(--_value-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    line-height: var(--leading-none);\n    color: var(--_accent);\n    text-align: center;\n    touch-action: manipulation;\n    border-radius: var(--rounded-md);\n  }\n\n  .value:focus-visible {\n    outline: 2px solid var(--_theme-focus, var(--color-primary));\n    outline-offset: 2px;\n  }\n\n  :host([data-bump]) .value {\n    animation: var(--_motion-animation, counter-bump 200ms var(--ease-spring));\n  }\n\n  @keyframes counter-bump {\n    0% {\n      transform: scale(1);\n    }\n\n    40% {\n      transform: scale(1.18);\n    }\n\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  .hint,\n  ::slotted([slot='hint']) {\n    font-size: var(--text-xs);\n    line-height: var(--leading-snug, 1.35);\n    color: var(--text-color-tertiary);\n  }\n\n  .hint[hidden] {\n    display: none;\n  }\n\n  :host([readonly]) .controls {\n    justify-content: flex-start;\n  }\n\n  :host([readonly]) .value {\n    flex: 0;\n    text-align: start;\n  }\n}\n"],"mappings":""}

package/dist/inputs/counter/counter.css.js

@@ -0,0 +1,6 @@
+//#region src/inputs/counter/counter.css?inline
+var e = "@layer refine.base{:host{--_bg:var(--counter-bg,var(--color-contrast-100));--_border-color:var(--counter-border-color,var(--color-divider));--_radius:var(--counter-radius,var(--rounded-lg));--_gap:var(--counter-gap,var(--size-3));--_button-size:var(--counter-button-size,var(--size-11));--_value-size:var(--counter-value-size,var(--text-2xl));--_icon-size:var(--size-5);--_slot-icon-size:var(--counter-icon-size,var(--size-6));--_label-size:var(--text-sm);--_accent:var(--_theme-base,var(--text-color-heading));box-sizing:border-box;vertical-align:middle;min-width:0;display:inline-flex}:host([size=sm]){--_button-size:var(--counter-button-size,var(--size-10));--_value-size:var(--counter-value-size,var(--text-xl));--_icon-size:var(--size-4);--_slot-icon-size:var(--counter-icon-size,var(--size-5));--_label-size:var(--text-xs)}:host([size=lg]){--_button-size:var(--counter-button-size,var(--size-12));--_value-size:var(--counter-value-size,var(--text-3xl));--_icon-size:var(--size-6);--_slot-icon-size:var(--counter-icon-size,var(--size-8));--_label-size:var(--text-base)}.counter{box-sizing:border-box;gap:var(--size-2);min-width:0;padding:var(--size-3);color:var(--text-color-body);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);flex-direction:column;flex:1;display:flex}.header{gap:var(--size-2);align-items:center;min-width:0;display:flex}::slotted([slot=icon]){width:var(--_slot-icon-size);height:var(--_slot-icon-size);color:var(--_accent);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.label{text-overflow:ellipsis;min-width:0;font-size:var(--_label-size);font-weight:var(--font-medium);line-height:var(--leading-none);color:var(--text-color-heading);white-space:nowrap;overflow:hidden}.controls{gap:var(--_gap);justify-content:space-between;align-items:center;display:flex}.btn{all:unset;box-sizing:border-box;width:var(--_button-size);min-width:var(--_touch-target,var(--_button-size));height:var(--_button-size);min-height:var(--_touch-target,var(--_button-size));color:var(--text-color-heading);touch-action:manipulation;cursor:pointer;background:var(--color-contrast-200);border-radius:var(--_radius);transition:background var(--transition-fast), transform .12s var(--ease-spring);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.btn:hover:not(:disabled){background:var(--color-contrast-300)}.btn:active:not(:disabled){transform:scale(.94)}.btn:disabled{cursor:not-allowed;opacity:.4}.btn[hidden]{display:none}.btn-large{font-size:var(--_label-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;color:var(--text-color-secondary);border:var(--border) solid var(--_border-color);background:0 0}.btn-large:hover:not(:disabled){color:var(--text-color-heading);background:var(--color-contrast-200)}.value{min-width:2ch;font-size:var(--_value-size);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;line-height:var(--leading-none);color:var(--_accent);text-align:center;touch-action:manipulation;border-radius:var(--rounded-md);flex:1}.value:focus-visible{outline:2px solid var(--_theme-focus,var(--color-primary));outline-offset:2px}:host([data-bump]) .value{animation:var(--_motion-animation,counter-bump .2s var(--ease-spring))}@keyframes counter-bump{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}.hint,::slotted([slot=hint]){font-size:var(--text-xs);line-height:var(--leading-snug,1.35);color:var(--text-color-tertiary)}.hint[hidden]{display:none}:host([readonly]) .controls{justify-content:flex-start}:host([readonly]) .value{flex:0}:host([readonly]) .value:not(: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))){text-align:left}:host([readonly]) .value: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)){text-align:right}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=counter.css.js.map

package/dist/inputs/counter/counter.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.css.js","names":[],"sources":["../../../src/inputs/counter/counter.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--counter-bg, var(--color-contrast-100));\n    --_border-color: var(--counter-border-color, var(--color-divider));\n    --_radius: var(--counter-radius, var(--rounded-lg));\n    --_gap: var(--counter-gap, var(--size-3));\n    --_button-size: var(--counter-button-size, var(--size-11));\n    --_value-size: var(--counter-value-size, var(--text-2xl));\n    --_icon-size: var(--size-5);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-6));\n    --_label-size: var(--text-sm);\n    --_accent: var(--_theme-base, var(--text-color-heading));\n    box-sizing: border-box;\n\n    display: inline-flex;\n    min-width: 0;\n    vertical-align: middle;\n  }\n\n  :host([size='sm']) {\n    --_button-size: var(--counter-button-size, var(--size-10));\n    --_value-size: var(--counter-value-size, var(--text-xl));\n    --_icon-size: var(--size-4);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-5));\n    --_label-size: var(--text-xs);\n  }\n\n  :host([size='lg']) {\n    --_button-size: var(--counter-button-size, var(--size-12));\n    --_value-size: var(--counter-value-size, var(--text-3xl));\n    --_icon-size: var(--size-6);\n    --_slot-icon-size: var(--counter-icon-size, var(--size-8));\n    --_label-size: var(--text-base);\n  }\n\n  .counter {\n    box-sizing: border-box;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 0;\n    padding: var(--size-3);\n    color: var(--text-color-body);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  .header {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    min-width: 0;\n  }\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_slot-icon-size);\n    height: var(--_slot-icon-size);\n    color: var(--_accent);\n  }\n\n  .label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_label-size);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-none);\n    color: var(--text-color-heading);\n    white-space: nowrap;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--_gap);\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_button-size);\n    min-width: var(--_touch-target, var(--_button-size));\n    height: var(--_button-size);\n    min-height: var(--_touch-target, var(--_button-size));\n    color: var(--text-color-heading);\n    touch-action: manipulation;\n    cursor: pointer;\n    background: var(--color-contrast-200);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      transform 120ms var(--ease-spring);\n  }\n\n  .btn:hover:not(:disabled) {\n    background: var(--color-contrast-300);\n  }\n\n  .btn:active:not(:disabled) {\n    transform: scale(0.94);\n  }\n\n  .btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  .btn[hidden] {\n    display: none;\n  }\n\n  /* Quick-step buttons: same footprint, quieter surface, numeric label instead of an icon. */\n  .btn-large {\n    font-size: var(--_label-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    color: var(--text-color-secondary);\n    background: transparent;\n    border: var(--border) solid var(--_border-color);\n  }\n\n  .btn-large:hover:not(:disabled) {\n    color: var(--text-color-heading);\n    background: var(--color-contrast-200);\n  }\n\n  .value {\n    flex: 1;\n    min-width: 2ch;\n    font-size: var(--_value-size);\n    font-weight: var(--font-semibold);\n    font-variant-numeric: tabular-nums;\n    line-height: var(--leading-none);\n    color: var(--_accent);\n    text-align: center;\n    touch-action: manipulation;\n    border-radius: var(--rounded-md);\n  }\n\n  .value:focus-visible {\n    outline: 2px solid var(--_theme-focus, var(--color-primary));\n    outline-offset: 2px;\n  }\n\n  :host([data-bump]) .value {\n    animation: var(--_motion-animation, counter-bump 200ms var(--ease-spring));\n  }\n\n  @keyframes counter-bump {\n    0% {\n      transform: scale(1);\n    }\n\n    40% {\n      transform: scale(1.18);\n    }\n\n    100% {\n      transform: scale(1);\n    }\n  }\n\n  .hint,\n  ::slotted([slot='hint']) {\n    font-size: var(--text-xs);\n    line-height: var(--leading-snug, 1.35);\n    color: var(--text-color-tertiary);\n  }\n\n  .hint[hidden] {\n    display: none;\n  }\n\n  :host([readonly]) .controls {\n    justify-content: flex-start;\n  }\n\n  :host([readonly]) .value {\n    flex: 0;\n    text-align: start;\n  }\n}\n"],"mappings":""}

package/dist/inputs/counter/counter.d.ts

@@ -0,0 +1,100 @@
+import type { ComponentSize, ThemeColor } from '../../types';
+import '../../content/icon/icon';
+export type OreCounterChangeDetail = {
+    /** Difference between the new and the previous value */
+    delta: number;
+    /** New value after clamping */
+    value: number;
+};
+export type OreCounterEvents = {
+    change: OreCounterChangeDetail;
+};
+/** Counter props */
+export type OreCounterProps = {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** One-line timing or usage hint rendered under the controls */
+    hint?: string;
+    /** Visible label; also names the control for assistive technology */
+    label?: string;
+    /** Step for Page Up/Down (default: 10 × step) */
+    'large-step'?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Minimum allowed value (default: 0) */
+    min?: number;
+    /** Render an outer pair of −/+ buttons that move by `large-step` */
+    'quick-steps'?: boolean;
+    /** Show the value without controls */
+    readonly?: boolean;
+    /** Component size */
+    size?: ComponentSize;
+    /** Increment/decrement step (default: 1) */
+    step?: number;
+    /** Current value */
+    value?: number;
+};
+/** Hold delay before auto-repeat starts, then the repeat interval. */
+export declare const COUNTER_HOLD_DELAY_MS = 400;
+export declare const COUNTER_HOLD_REPEAT_MS = 120;
+/**
+ * A large-target tally control for counting things at a glance: `−` / value / `+` with an
+ * optional icon, label and hint. Designed for touch and arm's-length use (tabletop trackers,
+ * inventories, scoreboards) rather than typed form entry — use `ore-number-input` for that.
+ *
+ * Holding any button auto-repeats. The value is announced through a live region and is
+ * keyboard-operable as a spinbutton (Arrow keys, Home/End, Page Up/Down). Set `quick-steps` to add an
+ * outer pair of buttons that move by `large-step`, for values that change in chunks (damage, scores).
+ *
+ * @element ore-counter
+ *
+ * @attr {number} value - Current value (default: 0)
+ * @attr {number} min - Minimum value (default: 0)
+ * @attr {number} max - Maximum value
+ * @attr {number} step - Increment/decrement step (default: 1)
+ * @attr {number} large-step - Step for Page Up/Down and the quick-step buttons (default: 10 × step)
+ * @attr {boolean} quick-steps - Adds an outer −/+ pair that moves by `large-step`
+ * @attr {boolean} disabled - Disables the control
+ * @attr {boolean} readonly - Shows the value without the −/+ buttons
+ * @attr {string} label - Visible label and accessible name
+ * @attr {string} hint - One-line hint under the controls
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - 'sm' | 'md' | 'lg'
+ *
+ * @fires change - Fired after every accepted change. detail: { value: number, delta: number }
+ *
+ * @slot icon - Leading icon or token artwork shown before the label
+ * @slot hint - Custom hint content (replaces the `hint` attribute)
+ *
+ * @cssprop --counter-value-size - Font size of the value
+ * @cssprop --counter-button-size - Width/height of the −/+ buttons
+ * @cssprop --counter-gap - Gap between the buttons and the value
+ * @cssprop --counter-bg - Background of the control
+ * @cssprop --counter-border-color - Border color of the control
+ * @cssprop --counter-radius - Border radius of the control
+ * @cssprop --counter-icon-size - Size of the slotted icon
+ *
+ * @part counter - Root container.
+ * @part header - Icon and label row.
+ * @part label - Label element.
+ * @part controls - Buttons and value row.
+ * @part decrement-large-btn - Quick-step decrement button (`quick-steps` only).
+ * @part decrement-btn - Decrement button.
+ * @part value - Value output.
+ * @part increment-btn - Increment button.
+ * @part increment-large-btn - Quick-step increment button (`quick-steps` only).
+ * @part hint - Hint element.
+ *
+ * @example
+ * ```html
+ * <ore-counter label="Stamina" value="3" hint="Pay for actions">
+ *   <ore-icon slot="icon" name="zap"></ore-icon>
+ * </ore-counter>
+ * <ore-counter label="Score" value="10" min="0" max="99" size="lg" color="primary"></ore-counter>
+ * <ore-counter label="Damage" value="12" large-step="5" quick-steps></ore-counter>
+ * ```
+ */
+export declare const COUNTER_TAG: "ore-counter";
+//# sourceMappingURL=counter.d.ts.map

package/dist/inputs/counter/counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../../src/inputs/counter/counter.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,yBAAyB,CAAC;AAKjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,oBAAoB;AACpB,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,WAAW,EAAG,aAAsB,CAAC"}

package/dist/inputs/index.d.ts

@@ -11,6 +11,8 @@ export type { OreCheckboxGroupEvents, OreCheckboxGroupProps } from './checkbox-g
 export { CHECKBOX_GROUP_CTX, CHECKBOX_GROUP_TAG } from './checkbox-group/checkbox-group';
 export type { ComboboxOptionInput, OreComboboxEvents, OreComboboxOptionProps, OreComboboxProps, } from './combobox/combobox';
 export { COMBOBOX_OPTION_TAG, COMBOBOX_TAG } from './combobox/combobox';
+export type { OreCounterChangeDetail, OreCounterEvents, OreCounterProps } from './counter/counter';
+export { COUNTER_TAG } from './counter/counter';
 export type { DataGridColumn, DataGridLabels, DataGridSource, DataGridView, OreDataGridEvents, OreDataGridProps, } from './datagrid/datagrid';
 export { DATAGRID_TAG } from './datagrid/datagrid';
 export type { OreDatePickerEvents, OreDatePickerProps } from './date-picker/date-picker';
@@ -25,6 +27,8 @@ export type { OreNumberInputEvents, OreNumberInputProps } from './number-input/n
 export { NUMBER_INPUT_TAG } from './number-input/number-input';
 export type { OreOtpInputEvents, OreOtpInputProps } from './otp-input/otp-input';
 export { OTP_INPUT_TAG } from './otp-input/otp-input';
+export type { OreQrScannerEvents, OreQrScannerProps, OreQrScannerStatus, QrScannerFactory, } from './qr-scanner/qr-scanner';
+export { QR_SCANNER_TAG } from './qr-scanner/qr-scanner';
 export type { OreRadioEvents, OreRadioProps } from './radio/radio';
 export { RADIO_TAG } from './radio/radio';
 export type { OreRadioGroupEvents, OreRadioGroupProps } from './radio-group/radio-group';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inputs/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AACrF,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC9F,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACrG,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACzF,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxE,YAAY,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC7G,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC7E,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inputs/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AACrF,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC9F,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACrG,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACzF,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxE,YAAY,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC7G,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC7E,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/inputs/qr-scanner/qr-scanner.css.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_radius:var(--qr-scanner-radius,var(--rounded-md));--_bg:var(--qr-scanner-bg,var(--color-contrast-100));--_viewfinder-color:var(--qr-scanner-viewfinder-color,var(--color-primary));--_status-color:var(--qr-scanner-status-color,var(--text-color-secondary));display:inline-block}:host([hidden]){display:none}.wrapper{--_size:var(--qr-scanner-size,var(--_size-px,280px));gap:var(--size-2);flex-direction:column;align-items:center;max-width:100%;display:inline-flex}.stage{width:var(--_size);max-width:100%;height:var(--_size);background:var(--_bg);border-radius:var(--_radius);position:relative;overflow:hidden}video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.viewfinder{inset:var(--size-4);pointer-events:none;border:var(--border-width,1px) solid var(--_viewfinder-color);border-radius:var(--_radius);position:absolute;box-shadow:0 0 0 9999px #00000026}.overlay{pointer-events:none;justify-content:center;align-items:flex-end;display:flex;position:absolute;inset:0}.overlay ::slotted(*){pointer-events:auto}.state{box-sizing:border-box;gap:var(--size-2);padding:var(--size-4);color:var(--text-color-secondary);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.state-text{font-size:var(--text-sm);overflow-wrap:anywhere}.status{max-width:var(--_size);font-size:var(--text-sm);color:var(--_status-color);text-align:center;overflow-wrap:anywhere}.controls{gap:var(--size-2);display:flex}}`;exports.default=e;
+//# sourceMappingURL=qr-scanner.css.cjs.map

package/dist/inputs/qr-scanner/qr-scanner.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-scanner.css.cjs","names":[],"sources":["../../../src/inputs/qr-scanner/qr-scanner.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_radius: var(--qr-scanner-radius, var(--rounded-md));\n    --_bg: var(--qr-scanner-bg, var(--color-contrast-100));\n    --_viewfinder-color: var(--qr-scanner-viewfinder-color, var(--color-primary));\n    --_status-color: var(--qr-scanner-status-color, var(--text-color-secondary));\n\n    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .wrapper {\n    /* --_size resolves here (not :host) so it can see the inline --_size-px set on this element. */\n    --_size: var(--qr-scanner-size, var(--_size-px, 280px));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    max-width: 100%;\n  }\n\n  .stage {\n    position: relative;\n    width: var(--_size);\n    max-width: 100%;\n    height: var(--_size);\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  video {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .viewfinder {\n    position: absolute;\n    inset: var(--size-4);\n    pointer-events: none;\n    border: var(--border-width, 1px) solid var(--_viewfinder-color);\n    border-radius: var(--_radius);\n    box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.15);\n  }\n\n  .overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n    pointer-events: none;\n  }\n\n  .overlay ::slotted(*) {\n    pointer-events: auto;\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-4);\n    color: var(--text-color-secondary);\n    text-align: center;\n  }\n\n  .state-text {\n    font-size: var(--text-sm);\n    overflow-wrap: anywhere;\n  }\n\n  .status {\n    max-width: var(--_size);\n    font-size: var(--text-sm);\n    color: var(--_status-color);\n    text-align: center;\n    overflow-wrap: anywhere;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--size-2);\n  }\n}\n"],"mappings":""}

package/dist/inputs/qr-scanner/qr-scanner.css.js

@@ -0,0 +1,6 @@
+//#region src/inputs/qr-scanner/qr-scanner.css?inline
+var e = "@layer refine.base{:host{--_radius:var(--qr-scanner-radius,var(--rounded-md));--_bg:var(--qr-scanner-bg,var(--color-contrast-100));--_viewfinder-color:var(--qr-scanner-viewfinder-color,var(--color-primary));--_status-color:var(--qr-scanner-status-color,var(--text-color-secondary));display:inline-block}:host([hidden]){display:none}.wrapper{--_size:var(--qr-scanner-size,var(--_size-px,280px));gap:var(--size-2);flex-direction:column;align-items:center;max-width:100%;display:inline-flex}.stage{width:var(--_size);max-width:100%;height:var(--_size);background:var(--_bg);border-radius:var(--_radius);position:relative;overflow:hidden}video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.viewfinder{inset:var(--size-4);pointer-events:none;border:var(--border-width,1px) solid var(--_viewfinder-color);border-radius:var(--_radius);position:absolute;box-shadow:0 0 0 9999px #00000026}.overlay{pointer-events:none;justify-content:center;align-items:flex-end;display:flex;position:absolute;inset:0}.overlay ::slotted(*){pointer-events:auto}.state{box-sizing:border-box;gap:var(--size-2);padding:var(--size-4);color:var(--text-color-secondary);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.state-text{font-size:var(--text-sm);overflow-wrap:anywhere}.status{max-width:var(--_size);font-size:var(--text-sm);color:var(--_status-color);text-align:center;overflow-wrap:anywhere}.controls{gap:var(--size-2);display:flex}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=qr-scanner.css.js.map

package/dist/inputs/qr-scanner/qr-scanner.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-scanner.css.js","names":[],"sources":["../../../src/inputs/qr-scanner/qr-scanner.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_radius: var(--qr-scanner-radius, var(--rounded-md));\n    --_bg: var(--qr-scanner-bg, var(--color-contrast-100));\n    --_viewfinder-color: var(--qr-scanner-viewfinder-color, var(--color-primary));\n    --_status-color: var(--qr-scanner-status-color, var(--text-color-secondary));\n\n    display: inline-block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .wrapper {\n    /* --_size resolves here (not :host) so it can see the inline --_size-px set on this element. */\n    --_size: var(--qr-scanner-size, var(--_size-px, 280px));\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    max-width: 100%;\n  }\n\n  .stage {\n    position: relative;\n    width: var(--_size);\n    max-width: 100%;\n    height: var(--_size);\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  video {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .viewfinder {\n    position: absolute;\n    inset: var(--size-4);\n    pointer-events: none;\n    border: var(--border-width, 1px) solid var(--_viewfinder-color);\n    border-radius: var(--_radius);\n    box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.15);\n  }\n\n  .overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n    pointer-events: none;\n  }\n\n  .overlay ::slotted(*) {\n    pointer-events: auto;\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: center;\n    padding: var(--size-4);\n    color: var(--text-color-secondary);\n    text-align: center;\n  }\n\n  .state-text {\n    font-size: var(--text-sm);\n    overflow-wrap: anywhere;\n  }\n\n  .status {\n    max-width: var(--_size);\n    font-size: var(--text-sm);\n    color: var(--_status-color);\n    text-align: center;\n    overflow-wrap: anywhere;\n  }\n\n  .controls {\n    display: flex;\n    gap: var(--size-2);\n  }\n}\n"],"mappings":""}

package/dist/inputs/qr-scanner/qr-scanner.d.ts

@@ -0,0 +1,87 @@
+import { type QrScanner, type QrScannerOptions, SigilError } from '@vielzeug/sigil';
+import type { ComponentSize, RoundedSize } from '../../types';
+import '../../content/icon/icon';
+import '../button/button';
+/** Testing hook — inject a fake `createQrScanner` without touching globals. */
+export type QrScannerFactory = (options: QrScannerOptions) => QrScanner;
+/** Component-level view states; sigil's transport states are mapped onto these. */
+export type OreQrScannerStatus = 'idle' | 'starting' | 'scanning' | 'result' | 'unsupported' | 'denied' | 'error';
+/** QR scanner component properties */
+export type OreQrScannerProps = {
+    /** Start/stop the camera externally; mirrors into internal intent on change */
+    active?: boolean;
+    /** Preferred camera: 'environment' (rear) or 'user' (front) */
+    'facing-mode'?: 'environment' | 'user';
+    /** Minimum ms between detection passes */
+    interval?: number;
+    /** Accessible label for the scanner region */
+    label?: string;
+    /** Stop after the first successful scan (default true) */
+    once?: boolean;
+    /** Border radius size */
+    rounded?: RoundedSize;
+    /** JS-only testing hook: custom scanner factory (defaults to `createQrScanner`) */
+    scannerFactory?: QrScannerFactory;
+    /** Preview size: named scale or pixel number */
+    size?: ComponentSize | number;
+};
+/** QR scanner component events */
+export type OreQrScannerEvents = {
+    /** Emitted on every successful decode. detail: `{ value }` */
+    scan: {
+        value: string;
+    };
+    /** Emitted on permission, support, or detection failure. detail: `{ error }` */
+    error: {
+        error: SigilError;
+    };
+    /** Emitted on every view-state transition. detail: `{ status }` */
+    status: {
+        status: OreQrScannerStatus;
+    };
+};
+/**
+ * Camera QR scanner built on `createQrScanner` (native `BarcodeDetector`).
+ * `active` starts/stops the camera externally; internal Start/Stop controls
+ * drive the same intent. Unsupported browsers render the `unsupported` slot
+ * so apps can substitute a paste fallback.
+ *
+ * @element ore-qr-scanner
+ *
+ * @attr {boolean} active - Start/stop the camera
+ * @attr {string} facing-mode - 'environment' | 'user' (default 'environment')
+ * @attr {number} interval - Ms between detection passes (default 200)
+ * @attr {boolean} once - Stop after first scan (default true)
+ * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value
+ * @attr {string} label - Region label (default "QR code scanner")
+ * @attr {string} rounded - Border radius
+ *
+ * @fires scan - detail: `{ value }` on each decode
+ * @fires error - detail: `{ error }` on permission/support/detection failure
+ * @fires status - detail: `{ status }` on view-state transitions
+ *
+ * @slot overlay - Content layered over the camera preview
+ * @slot unsupported - Fallback UI when scanning is unsupported (e.g. paste input)
+ * @slot footer - Extra content below the status row
+ *
+ * @cssprop --qr-scanner-size - Preview edge length in px (overrides `size`)
+ * @cssprop --qr-scanner-radius - Border radius
+ * @cssprop --qr-scanner-bg - Preview background while idle
+ * @cssprop --qr-scanner-viewfinder-color - Viewfinder frame color
+ * @cssprop --qr-scanner-status-color - Status text color
+ *
+ * @part wrapper - Outer container
+ * @part stage - Square preview area (video + overlays)
+ * @part video - The `<video>` preview element
+ * @part viewfinder - Decorative scan frame over the preview
+ * @part state - Idle/error/denied/unsupported/result panel
+ * @part status - Live status line
+ * @part controls - Button row
+ *
+ * @example
+ * ```html
+ * <ore-qr-scanner active @scan=${(e) => pair(e.detail.value)}></ore-qr-scanner>
+ * ```
+ */
+export declare const QR_SCANNER_TAG: "ore-qr-scanner";
+//# sourceMappingURL=qr-scanner.d.ts.map

package/dist/inputs/qr-scanner/qr-scanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-scanner.d.ts","sourceRoot":"","sources":["../../../src/inputs/qr-scanner/qr-scanner.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,gBAAgB,EAErB,UAAU,EAGX,MAAM,iBAAiB,CAAC;AAGzB,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,yBAAyB,CAAC;AACjC,OAAO,kBAAkB,CAAC;AAG1B,+EAA+E;AAC/E,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,gBAAgB,KAAK,SAAS,CAAC;AAExE,mFAAmF;AACnF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElH,sCAAsC;AACtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IACvC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,mFAAmF;IACnF,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,gDAAgD;IAChD,IAAI,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;CAC/B,CAAC;AAEF,kCAAkC;AAClC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8DAA8D;IAC9D,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACxB,gFAAgF;IAChF,KAAK,EAAE;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,CAAC;IAC7B,mEAAmE;IACnE,MAAM,EAAE;QAAE,MAAM,EAAE,kBAAkB,CAAA;KAAE,CAAC;CACxC,CAAC;AAgBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,cAAc,EAAG,gBAAyB,CAAC"}

package/dist/keyboard-key.cjs

@@ -0,0 +1,9 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./content/keyboard-key/keyboard-key.css.cjs"),n=require("./content/keyboard-key/keyboard-shortcut.css.cjs");let r=require("@vielzeug/ore");var i=`ore-keyboard-shortcut`;(0,r.define)(i,{props:{pressed:r.prop.bool(!1)},setup(e){return r.html`
+      <span class="shortcut" part="shortcut" ?data-pressed="${e.pressed}"><slot></slot></span>
+    `},styles:[e.reducedMotionMixin,n.default]});var a=`ore-keyboard-key`;(0,r.define)(a,{props:{pressed:r.prop.bool(!1),size:r.prop.string(`sm`),symbol:r.prop.string()},setup(e){return r.html`
+      <kbd class="key" part="key" ?data-has-symbol="${()=>!!e.symbol.value}" ?data-pressed="${e.pressed}">
+        <span class="symbol" aria-hidden="true" ?hidden="${()=>!e.symbol.value}">${e.symbol}</span>
+        <span class="label"><slot></slot></span>
+      </kbd>
+    `},styles:[e.reducedMotionMixin,t.default]}),exports.KEYBOARD_KEY_TAG=a,exports.KEYBOARD_SHORTCUT_TAG=i;
+//# sourceMappingURL=keyboard-key.cjs.map

package/dist/keyboard-key.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-key.cjs","names":[],"sources":["../src/content/keyboard-key/keyboard-key.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './keyboard-key.css?inline';\nimport shortcutStyles from './keyboard-shortcut.css?inline';\n\nexport type KeyboardKeySize = 'sm' | 'lg';\n\nexport type OreKeyboardKeyProps = {\n  pressed?: boolean;\n  size?: KeyboardKeySize;\n  symbol?: string;\n};\n\nexport type OreKeyboardShortcutProps = {\n  pressed?: boolean;\n};\n\nexport const KEYBOARD_SHORTCUT_TAG = 'ore-keyboard-shortcut' as const;\ndefine<OreKeyboardShortcutProps>(KEYBOARD_SHORTCUT_TAG, {\n  props: {\n    pressed: prop.bool(false),\n  },\n  setup(props) {\n    return html`\n      <span class=\"shortcut\" part=\"shortcut\" ?data-pressed=\"${props.pressed}\"><slot></slot></span>\n    `;\n  },\n  styles: [reducedMotionMixin, shortcutStyles],\n});\n\nexport const KEYBOARD_KEY_TAG = 'ore-keyboard-key' as const;\ndefine<OreKeyboardKeyProps>(KEYBOARD_KEY_TAG, {\n  props: {\n    pressed: prop.bool(false),\n    size: prop.string<KeyboardKeySize>('sm'),\n    symbol: prop.string(),\n  },\n  setup(props) {\n    return html`\n      <kbd class=\"key\" part=\"key\" ?data-has-symbol=\"${() => Boolean(props.symbol.value)}\" ?data-pressed=\"${props.pressed}\">\n        <span class=\"symbol\" aria-hidden=\"true\" ?hidden=\"${() => !props.symbol.value}\">${props.symbol}</span>\n        <span class=\"label\"><slot></slot></span>\n      </kbd>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"kRAiBA,IAAa,EAAwB,yBACrC,EAAA,EAAA,OAAA,CAAiC,EAAuB,CACtD,MAAO,CACL,QAAS,EAAA,KAAK,KAAK,EAAK,CAC1B,EACA,MAAM,EAAO,CACX,MAAO,GAAA,IAAI;8DAC+C,EAAM,QAAQ;KAE1E,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAc,CAC7C,CAAC,EAED,IAAa,EAAmB,oBAChC,EAAA,EAAA,OAAA,CAA4B,EAAkB,CAC5C,MAAO,CACL,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,KAAM,EAAA,KAAK,OAAwB,IAAI,EACvC,OAAQ,EAAA,KAAK,OAAO,CACtB,EACA,MAAM,EAAO,CACX,MAAO,GAAA,IAAI;0DAC6C,EAAQ,EAAM,OAAO,MAAO,mBAAmB,EAAM,QAAQ;+DACxD,CAAC,EAAM,OAAO,MAAM,IAAI,EAAM,OAAO;;;KAIpG,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}

package/dist/keyboard-key.js

@@ -0,0 +1,36 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import t from "./content/keyboard-key/keyboard-key.css.js";
+import n from "./content/keyboard-key/keyboard-shortcut.css.js";
+import { define as r, html as i, prop as a } from "@vielzeug/ore";
+//#region src/content/keyboard-key/keyboard-key.ts
+var o = "ore-keyboard-shortcut";
+r(o, {
+	props: { pressed: a.bool(!1) },
+	setup(e) {
+		return i`
+      <span class="shortcut" part="shortcut" ?data-pressed="${e.pressed}"><slot></slot></span>
+    `;
+	},
+	styles: [e, n]
+});
+var s = "ore-keyboard-key";
+r(s, {
+	props: {
+		pressed: a.bool(!1),
+		size: a.string("sm"),
+		symbol: a.string()
+	},
+	setup(e) {
+		return i`
+      <kbd class="key" part="key" ?data-has-symbol="${() => !!e.symbol.value}" ?data-pressed="${e.pressed}">
+        <span class="symbol" aria-hidden="true" ?hidden="${() => !e.symbol.value}">${e.symbol}</span>
+        <span class="label"><slot></slot></span>
+      </kbd>
+    `;
+	},
+	styles: [e, t]
+});
+//#endregion
+export { s as KEYBOARD_KEY_TAG, o as KEYBOARD_SHORTCUT_TAG };
+
+//# sourceMappingURL=keyboard-key.js.map