@vielzeug/refine 26.10.0 → 26.10.1

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.css.cjs","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Status Icon & Loading Spinner (top-right corner — clear of the\n       bottom-right native resize handle)\n       ======================================== */\n\n  .status-icon,\n  .field-spinner {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-end: var(--size-2);\n  }\n\n  .status-icon {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\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  .field-spinner {\n    display: none;\n    width: var(--size-4);\n    height: var(--size-4);\n    border: var(--border-2) solid var(--_theme-focus, currentcolor);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  :host([loading]) .field-spinner {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n\n  /* Success State */\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n}\n\n/*\n * Focus/error/success `box-shadow` on `.field` — moved out of `@layer refine.base` into\n * `refine.variants` (alongside `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/\n * ghost) so normal specificity decides the winner. Cascade layers beat specificity outright, so\n * a `refine.base` box-shadow here always lost to every variant's unconditional rest-state\n * `box-shadow`, focused/error/success or not — the same bug class fixed for `ore-otp-input`'s\n * focus ring.\n */\n@layer refine.variants {\n  :host(:not([disabled], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .field:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', text: 'textarea', tokenPrefix: 'textarea' })`\n * in `textarea.ts`'s `styles` array — shared with `ore-input`/`ore-message-composer` instead of\n * hand-duplicated across all three (see the mixin's own doc comment for what it covers and why).\n */\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .field {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) textarea {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) textarea::placeholder {\n  color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}
+{"version":3,"file":"textarea.css.cjs","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Status Icon & Loading Spinner (top-right corner: clear of the\n       bottom-right native resize handle)\n       ======================================== */\n\n  .status-icon,\n  .field-spinner {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-end: var(--size-2);\n  }\n\n  .status-icon {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\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  .field-spinner {\n    display: none;\n    width: var(--size-4);\n    height: var(--size-4);\n    border: var(--border-2) solid var(--_theme-focus, currentcolor);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  :host([loading]) .field-spinner {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n\n  /* Success State */\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n}\n\n/*\n * Focus/error/success `box-shadow` on `.field`: moved out of `@layer refine.base` into\n * `refine.variants` (alongside `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/\n * ghost) so normal specificity decides the winner. Cascade layers beat specificity outright, so\n * a `refine.base` box-shadow here always lost to every variant's unconditional rest-state\n * `box-shadow`, focused/error/success or not: the same bug class fixed for `ore-otp-input`'s\n * focus ring.\n */\n@layer refine.variants {\n  :host(:not([disabled], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .field:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', text: 'textarea', tokenPrefix: 'textarea' })`\n * in `textarea.ts`'s `styles` array: shared with `ore-input`/`ore-message-composer` instead of\n * hand-duplicated across all three (see the mixin's own doc comment for what it covers and why).\n */\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State: intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op: this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .field {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) textarea {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) textarea::placeholder {\n  color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.css.js","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Status Icon & Loading Spinner (top-right corner — clear of the\n       bottom-right native resize handle)\n       ======================================== */\n\n  .status-icon,\n  .field-spinner {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-end: var(--size-2);\n  }\n\n  .status-icon {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\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  .field-spinner {\n    display: none;\n    width: var(--size-4);\n    height: var(--size-4);\n    border: var(--border-2) solid var(--_theme-focus, currentcolor);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  :host([loading]) .field-spinner {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n\n  /* Success State */\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n}\n\n/*\n * Focus/error/success `box-shadow` on `.field` — moved out of `@layer refine.base` into\n * `refine.variants` (alongside `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/\n * ghost) so normal specificity decides the winner. Cascade layers beat specificity outright, so\n * a `refine.base` box-shadow here always lost to every variant's unconditional rest-state\n * `box-shadow`, focused/error/success or not — the same bug class fixed for `ore-otp-input`'s\n * focus ring.\n */\n@layer refine.variants {\n  :host(:not([disabled], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .field:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', text: 'textarea', tokenPrefix: 'textarea' })`\n * in `textarea.ts`'s `styles` array — shared with `ore-input`/`ore-message-composer` instead of\n * hand-duplicated across all three (see the mixin's own doc comment for what it covers and why).\n */\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op — this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .field {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) textarea {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) textarea::placeholder {\n  color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}
+{"version":3,"file":"textarea.css.js","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  /* Inset placement (default): label positioned inside field border */\n  :host(:not([label-placement='outside'])) .textarea-wrapper {\n    position: relative;\n  }\n\n  :host(:not([label-placement='outside'])) .label {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--_padding-x, var(--size-3));\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  :host(:not([label-placement='outside'])) .textarea-wrapper:has(.label:not([hidden])) .field {\n    padding-block-start: calc(var(--size-2) + 1lh + 2px);\n  }\n\n  .field {\n    position: relative;\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* ========================================\n       Status Icon & Loading Spinner (top-right corner: clear of the\n       bottom-right native resize handle)\n       ======================================== */\n\n  .status-icon,\n  .field-spinner {\n    position: absolute;\n    inset-block-start: var(--size-2);\n    inset-inline-end: var(--size-2);\n  }\n\n  .status-icon {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\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  .field-spinner {\n    display: none;\n    width: var(--size-4);\n    height: var(--size-4);\n    border: var(--border-2) solid var(--_theme-focus, currentcolor);\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  :host([loading]) .field-spinner {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label,\n  label.label {\n    /* Default: inset style */\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  /* Outside placement overrides */\n  :host([label-placement='outside']) .label,\n  :host([label-placement='outside']) label.label {\n    margin-bottom: 0;\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--textarea-color, var(--text-color-body));\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled])) .field:focus-within ~ .label,\n  :host(:not([disabled])) .textarea-wrapper:has(.field:focus-within) .label {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .label {\n    color: var(--color-error);\n  }\n\n  /* Success State */\n  :host([success]) .field {\n    border-color: var(--color-success);\n  }\n}\n\n/*\n * Focus/error/success `box-shadow` on `.field`: moved out of `@layer refine.base` into\n * `refine.variants` (alongside `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/\n * ghost) so normal specificity decides the winner. Cascade layers beat specificity outright, so\n * a `refine.base` box-shadow here always lost to every variant's unconditional rest-state\n * `box-shadow`, focused/error/success or not: the same bug class fixed for `ore-otp-input`'s\n * focus ring.\n */\n@layer refine.variants {\n  :host(:not([disabled], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .field:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', text: 'textarea', tokenPrefix: 'textarea' })`\n * in `textarea.ts`'s `styles` array: shared with `ore-input`/`ore-message-composer` instead of\n * hand-duplicated across all three (see the mixin's own doc comment for what it covers and why).\n */\n\n@layer refine.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n\n/* ========================================\n     Disabled State: intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` (pulled in via `fieldMixins`) dims `:host([disabled])`\n * with `opacity: 0.5` as bare, unlayered CSS. Cascade layers always lose to unlayered rules\n * regardless of source order or specificity, so overriding that from inside any `@layer`\n * block in this file (including `refine.overrides`) would be a no-op: this has to stay\n * unlayered too, to actually win. See `ore-input`'s `input.css` for the same pattern.\n *\n * Per the field-state UX review: opacity-based dimming reads as a washed-out/loading look\n * and can mimic reduced-contrast content for low-vision users, rather than a clearly locked\n * field. Swapped for an explicit grayscale surface + `not-allowed` cursor (the cursor already\n * comes from the shared mixin, left untouched here).\n */\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .field {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) textarea {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) textarea::placeholder {\n  color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n  color: var(--color-contrast-400);\n}\n"],"mappings":""}

package/dist/inputs/textarea/textarea.d.ts

@@ -11,7 +11,7 @@ export type OreTextareaProps = TextFieldProps<Exclude<VisualVariant, 'frost' | '
     'auto-resize'?: boolean;
     /**
      * Shows an inline spinner inside the field and forces the inner `<textarea>` into
-     * `disabled` for the duration — use while an async validation/submission request
+     * `disabled` for the duration: use while an async validation/submission request
      * is in flight to prevent double-submits.
      */
     loading?: boolean;

package/dist/inputs/time-picker/time-picker.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.css.cjs","names":[],"sources":["../../../src/inputs/time-picker/time-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-focus));\n    --_hover-bg: var(--time-picker-option-hover-bg, color-mix(in oklch, var(--_selected-bg) 12%, transparent));\n    --_bg: var(--time-picker-bg, var(--color-canvas));\n    --_border-color: var(--time-picker-border-color, var(--color-contrast-200));\n    --_radius: var(--time-picker-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-base));\n  }\n\n  /* Prevent display:flex/grid from overriding [hidden] attribute */\n  [hidden] {\n    display: none;\n  }\n\n  /* ── Trigger ─────────────────────────────────────────────────────────────── */\n\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Dropdown ────────────────────────────────────────────────────────────── */\n\n  /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n     time-picker.ts), same as ore-date-picker's own `.calendar`. Laid out relative to the\n     viewport, so it never affects any ancestor's box size or scrollable-overflow area. */\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    min-width: 12rem;\n    overflow: hidden;\n    pointer-events: none;\n    background: var(--time-picker-bg, var(--_bg));\n    border: var(--border) solid var(--time-picker-border-color, var(--_border-color));\n    border-radius: var(--time-picker-radius, var(--_radius));\n    box-shadow: var(--time-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ── Columns row ────────────────────────────────────────────────────────── */\n\n  .cols-row {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n  }\n\n  /* ── Columns (hours / sep / minutes / [period]) ──────────────────────────── */\n\n  .col,\n  .col-sep {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .col {\n    flex: 1;\n    min-width: var(--size-14);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .col-period {\n    flex: 0 0 auto;\n    min-width: var(--size-16);\n  }\n\n  /* ── Column header label ─────────────────────────────────────────────────── */\n\n  .col-label {\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-400);\n    text-align: center;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Scrollable option list ──────────────────────────────────────────────── */\n\n  .col-scroll {\n    width: 100%;\n    max-height: 11rem;\n    padding-block: var(--size-1);\n    overflow-y: auto;\n    scrollbar-width: thin;\n  }\n\n  /* ── Separator between hours and minutes ─────────────────────────────────── */\n\n  .col-sep {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding-block-start: var(--size-8); /* visually align with first option row */\n    padding-inline: var(--size-0-5);\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    user-select: none;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Option cells ────────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--size-8);\n    padding-inline: var(--size-2);\n    margin-inline: var(--size-1);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .option:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: var(--_hover-bg);\n  }\n\n  .option:focus-visible {\n    box-shadow: 0 0 0 2px var(--_selected-bg);\n  }\n\n  .option[aria-selected='true'] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_selected-bg);\n  }\n\n  .option[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .option {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"time-picker.css.cjs","names":[],"sources":["../../../src/inputs/time-picker/time-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-focus));\n    --_hover-bg: var(--time-picker-option-hover-bg, color-mix(in oklch, var(--_selected-bg) 12%, transparent));\n    --_bg: var(--time-picker-bg, var(--color-canvas));\n    --_border-color: var(--time-picker-border-color, var(--color-contrast-200));\n    --_radius: var(--time-picker-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-base));\n  }\n\n  /* Prevent display:flex/grid from overriding [hidden] attribute */\n  [hidden] {\n    display: none;\n  }\n\n  /* ── Trigger ─────────────────────────────────────────────────────────────── */\n\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Dropdown ────────────────────────────────────────────────────────────── */\n\n  /* `fixed` (not `absolute`): positioned via JS-computed top/left (see the positioner in\n     time-picker.ts), same as ore-date-picker's own `.calendar`. Laid out relative to the\n     viewport, so it never affects any ancestor's box size or scrollable-overflow area. */\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    min-width: 12rem;\n    overflow: hidden;\n    pointer-events: none;\n    background: var(--time-picker-bg, var(--_bg));\n    border: var(--border) solid var(--time-picker-border-color, var(--_border-color));\n    border-radius: var(--time-picker-radius, var(--_radius));\n    box-shadow: var(--time-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ── Columns row ────────────────────────────────────────────────────────── */\n\n  .cols-row {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n  }\n\n  /* ── Columns (hours / sep / minutes / [period]) ──────────────────────────── */\n\n  .col,\n  .col-sep {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .col {\n    flex: 1;\n    min-width: var(--size-14);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .col-period {\n    flex: 0 0 auto;\n    min-width: var(--size-16);\n  }\n\n  /* ── Column header label ─────────────────────────────────────────────────── */\n\n  .col-label {\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-400);\n    text-align: center;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Scrollable option list ──────────────────────────────────────────────── */\n\n  .col-scroll {\n    width: 100%;\n    max-height: 11rem;\n    padding-block: var(--size-1);\n    overflow-y: auto;\n    scrollbar-width: thin;\n  }\n\n  /* ── Separator between hours and minutes ─────────────────────────────────── */\n\n  .col-sep {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding-block-start: var(--size-8); /* visually align with first option row */\n    padding-inline: var(--size-0-5);\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    user-select: none;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Option cells ────────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--size-8);\n    padding-inline: var(--size-2);\n    margin-inline: var(--size-1);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .option:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: var(--_hover-bg);\n  }\n\n  .option:focus-visible {\n    box-shadow: 0 0 0 2px var(--_selected-bg);\n  }\n\n  .option[aria-selected='true'] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_selected-bg);\n  }\n\n  .option[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .option {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/time-picker/time-picker.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.css.js","names":[],"sources":["../../../src/inputs/time-picker/time-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-focus));\n    --_hover-bg: var(--time-picker-option-hover-bg, color-mix(in oklch, var(--_selected-bg) 12%, transparent));\n    --_bg: var(--time-picker-bg, var(--color-canvas));\n    --_border-color: var(--time-picker-border-color, var(--color-contrast-200));\n    --_radius: var(--time-picker-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-base));\n  }\n\n  /* Prevent display:flex/grid from overriding [hidden] attribute */\n  [hidden] {\n    display: none;\n  }\n\n  /* ── Trigger ─────────────────────────────────────────────────────────────── */\n\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Dropdown ────────────────────────────────────────────────────────────── */\n\n  /* `fixed` (not `absolute`) — positioned via JS-computed top/left (see the positioner in\n     time-picker.ts), same as ore-date-picker's own `.calendar`. Laid out relative to the\n     viewport, so it never affects any ancestor's box size or scrollable-overflow area. */\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    min-width: 12rem;\n    overflow: hidden;\n    pointer-events: none;\n    background: var(--time-picker-bg, var(--_bg));\n    border: var(--border) solid var(--time-picker-border-color, var(--_border-color));\n    border-radius: var(--time-picker-radius, var(--_radius));\n    box-shadow: var(--time-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ── Columns row ────────────────────────────────────────────────────────── */\n\n  .cols-row {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n  }\n\n  /* ── Columns (hours / sep / minutes / [period]) ──────────────────────────── */\n\n  .col,\n  .col-sep {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .col {\n    flex: 1;\n    min-width: var(--size-14);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .col-period {\n    flex: 0 0 auto;\n    min-width: var(--size-16);\n  }\n\n  /* ── Column header label ─────────────────────────────────────────────────── */\n\n  .col-label {\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-400);\n    text-align: center;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Scrollable option list ──────────────────────────────────────────────── */\n\n  .col-scroll {\n    width: 100%;\n    max-height: 11rem;\n    padding-block: var(--size-1);\n    overflow-y: auto;\n    scrollbar-width: thin;\n  }\n\n  /* ── Separator between hours and minutes ─────────────────────────────────── */\n\n  .col-sep {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding-block-start: var(--size-8); /* visually align with first option row */\n    padding-inline: var(--size-0-5);\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    user-select: none;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Option cells ────────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--size-8);\n    padding-inline: var(--size-2);\n    margin-inline: var(--size-1);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .option:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: var(--_hover-bg);\n  }\n\n  .option:focus-visible {\n    box-shadow: 0 0 0 2px var(--_selected-bg);\n  }\n\n  .option[aria-selected='true'] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_selected-bg);\n  }\n\n  .option[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .option {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"time-picker.css.js","names":[],"sources":["../../../src/inputs/time-picker/time-picker.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-focus));\n    --_hover-bg: var(--time-picker-option-hover-bg, color-mix(in oklch, var(--_selected-bg) 12%, transparent));\n    --_bg: var(--time-picker-bg, var(--color-canvas));\n    --_border-color: var(--time-picker-border-color, var(--color-contrast-200));\n    --_radius: var(--time-picker-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_selected-bg: var(--time-picker-selected-bg, var(--_theme-base));\n  }\n\n  /* Prevent display:flex/grid from overriding [hidden] attribute */\n  [hidden] {\n    display: none;\n  }\n\n  /* ── Trigger ─────────────────────────────────────────────────────────────── */\n\n  .trigger {\n    cursor: pointer;\n  }\n\n  .trigger::part(input) {\n    cursor: pointer;\n    caret-color: transparent;\n    user-select: none;\n  }\n\n  /* ── Dropdown ────────────────────────────────────────────────────────────── */\n\n  /* `fixed` (not `absolute`): positioned via JS-computed top/left (see the positioner in\n     time-picker.ts), same as ore-date-picker's own `.calendar`. Laid out relative to the\n     viewport, so it never affects any ancestor's box size or scrollable-overflow area. */\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: var(--z-dropdown, 200);\n    display: flex;\n    flex-direction: column;\n    min-width: 12rem;\n    overflow: hidden;\n    pointer-events: none;\n    background: var(--time-picker-bg, var(--_bg));\n    border: var(--border) solid var(--time-picker-border-color, var(--_border-color));\n    border-radius: var(--time-picker-radius, var(--_radius));\n    box-shadow: var(--time-picker-shadow, var(--shadow-lg));\n\n    /* Hidden by default */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ── Columns row ────────────────────────────────────────────────────────── */\n\n  .cols-row {\n    display: flex;\n    flex-direction: row;\n    align-items: stretch;\n  }\n\n  /* ── Columns (hours / sep / minutes / [period]) ──────────────────────────── */\n\n  .col,\n  .col-sep {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .col {\n    flex: 1;\n    min-width: var(--size-14);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .col-period {\n    flex: 0 0 auto;\n    min-width: var(--size-16);\n  }\n\n  /* ── Column header label ─────────────────────────────────────────────────── */\n\n  .col-label {\n    width: 100%;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-400);\n    text-align: center;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Scrollable option list ──────────────────────────────────────────────── */\n\n  .col-scroll {\n    width: 100%;\n    max-height: 11rem;\n    padding-block: var(--size-1);\n    overflow-y: auto;\n    scrollbar-width: thin;\n  }\n\n  /* ── Separator between hours and minutes ─────────────────────────────────── */\n\n  .col-sep {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    padding-block-start: var(--size-8); /* visually align with first option row */\n    padding-inline: var(--size-0-5);\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    user-select: none;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Option cells ────────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: var(--size-8);\n    padding-inline: var(--size-2);\n    margin-inline: var(--size-1);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .option:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: var(--_hover-bg);\n  }\n\n  .option:focus-visible {\n    box-shadow: 0 0 0 2px var(--_selected-bg);\n  }\n\n  .option[aria-selected='true'] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_selected-bg);\n  }\n\n  .option[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .option {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/time-picker/time-picker.d.ts

@@ -38,7 +38,7 @@ export type OreTimePickerProps = {
     size?: string;
     /**
      * Shows an inline green check icon inside the field to confirm the value has
-     * passed validation. Ignored while `error` is set — an error always wins.
+     * passed validation. Ignored while `error` is set: an error always wins.
      */
     success?: boolean;
     /** Display format: '12' for AM/PM, '24' for 24-hour (default: '24') */

package/dist/layout/box/box.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"box.css.cjs","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-divider));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      backdrop-filter var(--transition-fast),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n}\n\n@layer refine.variants {\n  /* Color theme integration — custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Subtle hover for solid/default + color (frost manages its own hover) */\n  :host([color]:not([variant='frost']):hover) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"box.css.cjs","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-divider));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      backdrop-filter var(--transition-fast),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n}\n\n@layer refine.variants {\n  /* Color theme integration: custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Subtle hover for solid/default + color (frost manages its own hover) */\n  :host([color]:not([variant='frost']):hover) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/box/box.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.css.js","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-divider));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      backdrop-filter var(--transition-fast),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n}\n\n@layer refine.variants {\n  /* Color theme integration — custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Subtle hover for solid/default + color (frost manages its own hover) */\n  :host([color]:not([variant='frost']):hover) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"box.css.js","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-divider));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    backdrop-filter: blur(var(--blur-md));\n    transition:\n      backdrop-filter var(--transition-fast),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n  }\n}\n\n@layer refine.variants {\n  /* Color theme integration: custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Subtle hover for solid/default + color (frost manages its own hover) */\n  :host([color]:not([variant='frost']):hover) {\n    --_bg: color-mix(in oklch, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer refine.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/box/box.d.ts

@@ -17,7 +17,7 @@ export type OreBoxProps = {
     variant?: 'solid' | 'flat' | 'frost';
 };
 /**
- * ore-box — A foundational layout primitive with theming support.
+ * ore-box: A foundational layout primitive with theming support.
  *
  * @element ore-box
  *

package/dist/layout/grid/grid.d.ts

@@ -43,7 +43,7 @@ export type OreGridProps = {
     rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';
 };
 /**
- * ore-grid — Flexible grid layout with responsive column control.
+ * ore-grid: Flexible grid layout with responsive column control.
  *
  * Columns are computed in JS and applied as `--_cols` inline, so they respond
  * to the element's own width via ResizeObserver. CSS custom properties

package/dist/layout/grid-item/grid-item.d.ts

@@ -4,19 +4,19 @@ export type OreGridItemProps = {
     align?: 'start' | 'center' | 'end' | 'stretch';
     /** Named grid area to place the item into. */
     area?: string;
-    /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */
+    /** Explicit grid-column value: overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */
     col?: string;
     /** Span N columns. Use 'full' to span all columns (1 / -1). */
     colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';
     /** Justify self horizontally within the grid cell */
     justify?: 'start' | 'center' | 'end' | 'stretch';
-    /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */
+    /** Explicit grid-row value: overrides row-span (e.g. '1 / 3', 'span 2'). */
     row?: string;
     /** Span N rows. Use 'full' to span all rows (1 / -1). */
     rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';
 };
 /**
- * ore-grid-item — A grid cell with declarative placement and span control.
+ * ore-grid-item: A grid cell with declarative placement and span control.
  *
  * Use `col-span` / `row-span` for the common case of spanning columns/rows.
  * Use `col` / `row` for full CSS grid-column / grid-row shorthand power

package/dist/layout/grid-item/grid-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid-item.d.ts","sourceRoot":"","sources":["../../../src/layout/grid-item/grid-item.ts"],"names":[],"mappings":"AAKA,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC5F,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,6EAA6E;IAC7E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;CACtD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}
+{"version":3,"file":"grid-item.d.ts","sourceRoot":"","sources":["../../../src/layout/grid-item/grid-item.ts"],"names":[],"mappings":"AAKA,qCAAqC;AACrC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC/C,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yFAAyF;IACzF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC5F,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;CACtD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,aAAa,EAAG,eAAwB,CAAC"}

package/dist/layout/navbar/navbar.css.cjs

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_navbar-height:var(--navbar-height,var(--size-14));--_navbar-width:var(--navbar-width,min(100%, 80rem));--_navbar-offset:var(--navbar-offset,var(--size-3));--_navbar-bg:var(--navbar-bg,var(--color-canvas));--_navbar-color:var(--navbar-color,var(--color-contrast-900));--_navbar-border-color:var(--navbar-border-color,var(--color-divider));--_navbar-shadow:var(--navbar-shadow,var(--shadow-md));--_navbar-radius:var(--navbar-radius,var(--rounded-lg));box-sizing:border-box;width:100%;color:var(--_navbar-color);display:block}:host([data-mode=sticky]){z-index:var(--z-sticky);position:sticky;top:0}:host([data-mode=floating]){inset-inline:var(--_navbar-offset);top:var(--_navbar-offset);z-index:var(--z-sticky);position:fixed}:host([data-preview-mode][data-mode=floating]){inset-inline:var(--_navbar-offset);position:absolute;top:auto}:host([floating][sticky][data-scrolled]){width:100%;top:0;left:0;right:0}:host([data-preview-mode][floating][sticky][data-scrolled]){width:auto;position:absolute;top:auto;left:0;right:0}:host>nav{flex-direction:column;width:100%;display:flex;position:relative}.navbar{box-sizing:border-box;gap:var(--size-2);width:100%;max-width:var(--_navbar-width);min-height:var(--_navbar-height);padding:var(--size-2) var(--size-4);color:inherit;white-space:nowrap;background:var(--_navbar-bg);border-top:none;border-right:none;border-bottom:var(--border) solid var(--_navbar-border-color);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal));border-left:none;border-radius:0;flex-wrap:nowrap;align-items:center;margin-left:auto;margin-right:auto;display:flex;overflow:auto hidden}:host([data-mode=floating]) .navbar{border-top:var(--border) solid var(--_navbar-border-color);border-right:var(--border) solid var(--_navbar-border-color);border-bottom:var(--border) solid var(--_navbar-border-color);border-left:var(--border) solid var(--_navbar-border-color);border-radius:var(--_navbar-radius)}:host([data-mode=sticky]) .navbar,:host([floating][sticky][data-scrolled]) .navbar{border-left:none;border-right:none;border-radius:0;max-width:100%}:host([data-mode-transitioning][data-mode=sticky]) .navbar{animation:navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out)}:host([data-mode-transitioning][data-mode=floating]) .navbar{animation:navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out)}.navbar-logo[hidden],.navbar-start[hidden],.navbar-center[hidden],.navbar-end[hidden],.navbar-persistent[hidden]{display:none}.navbar-logo,.navbar-start,.navbar-center,.navbar-end,.navbar-persistent{white-space:nowrap;align-items:center;min-width:0;display:flex}.navbar-logo{flex:none}.navbar-start{gap:var(--size-1);flex:none}.navbar-center{gap:var(--size-1);flex:0 auto;justify-content:flex-start;min-width:0;display:flex}.navbar-end{gap:var(--size-1);flex:none}.navbar-end: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))){margin-left:auto}.navbar-end:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.navbar-persistent{gap:var(--size-1);flex:none}.navbar-persistent: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))){margin-left:auto}.navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.navbar-end:not([hidden])+.navbar-persistent: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))){margin-left:var(--size-1)}.navbar-end:not([hidden])+.navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--size-1)}:host([data-mobile]) .navbar-persistent: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))){margin-left:auto}:host([data-mobile]) .navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.mobile-toggle{width:var(--size-9);height:var(--size-9);color:var(--color-contrast-700);cursor:pointer;border:var(--border) solid transparent;border-radius:var(--rounded-md);transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.mobile-toggle:hover{color:var(--color-contrast-900);background:var(--color-contrast-100);border-color:var(--color-contrast-200)}.mobile-toggle:focus-visible{outline:var(--focus-ring)}.mobile-menu-panel{z-index:1;box-sizing:border-box;width:100%;max-width:var(--_navbar-width);padding:var(--size-2);background:var(--_navbar-bg);border:var(--border) solid var(--_navbar-border-color);border-radius:var(--rounded-lg);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transform-origin:top;animation:navbar-mobile-in var(--transition-fast) var(--ease-out);margin-top:var(--size-2);margin-left:auto;margin-right:auto;display:none;position:relative}:host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]){gap:var(--size-1);display:grid}:host([data-mobile][data-mobile-open][data-mode=floating]) .mobile-menu-panel{margin-top:var(--size-1-5)}:host([data-mobile][data-mobile-open][data-mode=sticky]) .mobile-menu-panel,:host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel{z-index:2;border-radius:0 0 var(--rounded-md) var(--rounded-md);border-top:none;border-left:none;border-right:none;max-width:100%;margin:0;position:absolute;top:100%;left:0;right:0}:host([data-mobile]) .mobile-toggle:not([hidden]){order:-1;display:inline-flex}:host([data-mobile]) .navbar-start,:host([data-mobile]) .navbar-center,:host([data-mobile]) .navbar-end{display:none}:host([data-mobile][data-mobile-open]) .navbar{border-bottom-right-radius:var(--rounded-md);border-bottom-left-radius:var(--rounded-md)}@starting-style{.mobile-menu-panel{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}@keyframes navbar-mobile-in{0%{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}to{opacity:1;transform:translateY(0)}}@keyframes navbar-floating-to-sticky{0%{opacity:.92;transform:translateY(6px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes navbar-sticky-to-floating{0%{opacity:.95;transform:translateY(-2px)scale(1)}to{opacity:1;transform:translateY(0)scale(.99)}}.item{box-sizing:border-box;gap:var(--size-1);min-height:var(--_touch-target,var(--size-9));padding:var(--size-1-5) var(--size-2-5);font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--navbar-item-color,var(--color-contrast-700));white-space:nowrap;appearance:none;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;align-items:center;text-decoration:none;display:inline-flex}.item:hover,.item:focus-visible{color:var(--navbar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--navbar-item-hover-bg,var(--color-contrast-100))}:host([active]) .item{color:var(--navbar-item-active-color,var(--color-primary));background:var(--navbar-item-active-bg,color-mix(in oklch, var(--color-primary) 12%, transparent))}:host([disabled]) .item,:host([disabled]) .item:hover,:host([disabled]) .item:focus-visible{color:var(--color-contrast-400);pointer-events:none;cursor:not-allowed;background:0 0;outline:none}.item-icon,.item-end{align-items:center;display:inline-flex}.item-label{white-space:nowrap;min-width:0}:host([icon-only]) .item-label{display:none}:host([icon-only]) .item{padding:var(--size-1-5)}:host([navbar-mobile]){width:100%;display:block}:host([navbar-mobile]) .item{justify-content:flex-start;width:100%;display:flex}}@layer refine.variants{:host([variant=flat]){--_navbar-bg:color-mix(in oklch, var(--color-canvas) 88%, transparent);--_navbar-shadow:none}:host([variant=bordered]){--_navbar-bg:var(--color-canvas);--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 32%, transparent)}:host([variant=outline]){--_navbar-bg:transparent;--_navbar-shadow:none;--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 40%, transparent)}:host([color]){--_navbar-border-color:color-mix(in oklch, var(--_theme-border) 30%, transparent)}}@media (width<=768px){@layer refine.base{:host([data-mode=floating]){inset-inline:var(--size-2);top:var(--size-2)}:host([floating][sticky][data-scrolled]){top:0;left:0;right:0}}}`;exports.default=e;
+var e=`@layer refine.base{:host{--_navbar-height:var(--navbar-height,var(--size-14));--_navbar-width:var(--navbar-width,min(100%, 80rem));--_navbar-offset:var(--navbar-offset,var(--size-3));--_navbar-bg:var(--navbar-bg,var(--color-canvas));--_navbar-color:var(--navbar-color,var(--color-contrast-900));--_navbar-border-color:var(--navbar-border-color,var(--color-divider));--_navbar-shadow:var(--navbar-shadow,var(--shadow-md));--_navbar-radius:var(--navbar-radius,var(--rounded-lg));box-sizing:border-box;width:100%;color:var(--_navbar-color);display:block}:host([data-mode=sticky]){z-index:var(--z-sticky);position:sticky;top:0}:host([data-mode=floating]){inset-inline:var(--_navbar-offset);top:var(--_navbar-offset);z-index:var(--z-sticky);position:fixed}:host([data-preview-mode][data-mode=floating]){inset-inline:var(--_navbar-offset);position:absolute;top:auto}:host([floating][sticky][data-scrolled]){width:100%;top:0;left:0;right:0}:host([data-preview-mode][floating][sticky][data-scrolled]){width:auto;position:absolute;top:auto;left:0;right:0}:host>nav{flex-direction:column;width:100%;display:flex;position:relative}.navbar{box-sizing:border-box;gap:var(--size-2);width:100%;max-width:var(--_navbar-width);min-height:var(--_navbar-height);padding:var(--size-2) var(--size-4);color:inherit;white-space:nowrap;background:var(--_navbar-bg);border-top:none;border-right:none;border-bottom:var(--border) solid var(--_navbar-border-color);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal));border-left:none;border-radius:0;flex-wrap:nowrap;align-items:center;margin-left:auto;margin-right:auto;display:flex;overflow:auto hidden}:host([data-mode=floating]) .navbar{border-top:var(--border) solid var(--_navbar-border-color);border-right:var(--border) solid var(--_navbar-border-color);border-bottom:var(--border) solid var(--_navbar-border-color);border-left:var(--border) solid var(--_navbar-border-color);border-radius:var(--_navbar-radius)}:host([data-mode=sticky]) .navbar,:host([floating][sticky][data-scrolled]) .navbar{border-left:none;border-right:none;border-radius:0;max-width:100%}:host([data-mode-transitioning][data-mode=sticky]) .navbar{animation:navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out)}:host([data-mode-transitioning][data-mode=floating]) .navbar{animation:navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out)}.navbar-logo[hidden],.navbar-start[hidden],.navbar-center[hidden],.navbar-end[hidden],.navbar-persistent[hidden]{display:none}.navbar-logo,.navbar-start,.navbar-center,.navbar-end,.navbar-persistent{white-space:nowrap;align-items:center;min-width:0;display:flex}.navbar-logo{flex:none}.navbar-start{gap:var(--size-1);flex:none}.navbar-center{gap:var(--size-1);flex:0 auto;justify-content:flex-start;min-width:0;display:flex}.navbar-end{gap:var(--size-1);flex:none}.navbar-end: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))){margin-left:auto}.navbar-end:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.navbar-persistent{gap:var(--size-1);flex:none}.navbar-persistent: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))){margin-left:auto}.navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.navbar-end:not([hidden])+.navbar-persistent: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))){margin-left:var(--size-1)}.navbar-end:not([hidden])+.navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--size-1)}:host([data-mobile]) .navbar-persistent: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))){margin-left:auto}:host([data-mobile]) .navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.mobile-toggle{width:var(--size-9);height:var(--size-9);color:var(--color-contrast-700);cursor:pointer;border:var(--border) solid transparent;border-radius:var(--rounded-md);transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.mobile-toggle:hover{color:var(--color-contrast-900);background:var(--color-contrast-100);border-color:var(--color-contrast-200)}.mobile-toggle:focus-visible{outline:var(--focus-ring)}.mobile-menu-panel{z-index:1;box-sizing:border-box;width:100%;max-width:var(--_navbar-width);padding:var(--size-2);background:var(--_navbar-bg);border:var(--border) solid var(--_navbar-border-color);border-radius:var(--rounded-lg);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transform-origin:top;animation:navbar-mobile-in var(--transition-fast) var(--ease-out);margin-top:var(--size-2);margin-left:auto;margin-right:auto;display:none;position:relative}:host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]){gap:var(--size-1);display:grid}:host([data-mobile][data-mobile-open][data-mode=floating]) .mobile-menu-panel{margin-top:var(--size-1-5)}:host([data-mobile][data-mobile-open][data-mode=sticky]) .mobile-menu-panel,:host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel{z-index:2;border-radius:0 0 var(--rounded-md) var(--rounded-md);border-top:none;border-left:none;border-right:none;max-width:100%;margin:0;position:absolute;top:100%;left:0;right:0}:host([data-mobile]) .mobile-toggle:not([hidden]){order:-1;display:inline-flex}:host([data-mobile]) .navbar-start,:host([data-mobile]) .navbar-center,:host([data-mobile]) .navbar-end{display:none}:host([data-mobile][data-mobile-open]) .navbar{border-bottom-right-radius:var(--rounded-md);border-bottom-left-radius:var(--rounded-md)}@starting-style{.mobile-menu-panel{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}@keyframes navbar-mobile-in{0%{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}to{opacity:1;transform:translateY(0)}}@keyframes navbar-floating-to-sticky{0%{opacity:.92;transform:translateY(6px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes navbar-sticky-to-floating{0%{opacity:.95;transform:translateY(-2px)scale(1)}to{opacity:1;transform:translateY(0)scale(.99)}}.item{box-sizing:border-box;gap:var(--size-1);min-height:var(--_touch-target,var(--size-9));padding:var(--size-1-5) var(--size-2-5);font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--navbar-item-color,var(--color-contrast-700));white-space:nowrap;appearance:none;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;align-items:center;text-decoration:none;display:inline-flex}.item:hover,.item:focus-visible{color:var(--navbar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--navbar-item-hover-bg,var(--color-contrast-100))}:host([active]) .item{color:var(--navbar-item-active-color,var(--color-primary));background:var(--navbar-item-active-bg,color-mix(in oklch, var(--color-primary) 12%, transparent))}:host([disabled]) .item,:host([disabled]) .item:hover,:host([disabled]) .item:focus-visible{color:var(--color-contrast-400);pointer-events:none;cursor:not-allowed;background:0 0;outline:none}.item-icon,.item-end{align-items:center;display:inline-flex}.item-label{white-space:nowrap;min-width:0}:host([icon-only]) .item-label{display:none}:host([icon-only]) .item{padding:var(--size-1-5)}:host([navbar-mobile]){width:100%;display:block}:host([navbar-mobile]) .item{justify-content:flex-start;width:100%;display:flex}}@layer refine.variants{:host([variant=flat]){--_navbar-bg:var(--navbar-bg,color-mix(in oklch, var(--color-canvas) 88%, transparent));--_navbar-shadow:none}:host([variant=bordered]){--_navbar-bg:var(--navbar-bg,var(--color-canvas));--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 32%, transparent)}:host([variant=outline]){--_navbar-bg:var(--navbar-bg,transparent);--_navbar-shadow:none;--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 40%, transparent)}:host([color]){--_navbar-border-color:color-mix(in oklch, var(--_theme-border) 30%, transparent)}}@media (width<=768px){@layer refine.base{:host([data-mode=floating]){inset-inline:var(--size-2);top:var(--size-2)}:host([floating][sticky][data-scrolled]){top:0;left:0;right:0}}}`;exports.default=e;
 //# sourceMappingURL=navbar.css.cjs.map

package/dist/layout/navbar/navbar.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.css.cjs","names":[],"sources":["../../../src/layout/navbar/navbar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_navbar-height: var(--navbar-height, var(--size-14));\n    --_navbar-width: var(--navbar-width, min(100%, 80rem));\n    --_navbar-offset: var(--navbar-offset, var(--size-3));\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-color: var(--navbar-color, var(--color-contrast-900));\n    --_navbar-border-color: var(--navbar-border-color, var(--color-divider));\n    --_navbar-shadow: var(--navbar-shadow, var(--shadow-md));\n    --_navbar-radius: var(--navbar-radius, var(--rounded-lg));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    color: var(--_navbar-color);\n  }\n\n  :host([data-mode='sticky']) {\n    position: sticky;\n    top: 0;\n    z-index: var(--z-sticky);\n  }\n\n  :host([data-mode='floating']) {\n    position: fixed;\n    inset-inline: var(--_navbar-offset);\n    top: var(--_navbar-offset);\n    z-index: var(--z-sticky);\n  }\n\n  /* Preview mode: use absolute positioning so component stays within container bounds */\n  :host([data-preview-mode][data-mode='floating']) {\n    position: absolute;\n    inset-inline: var(--_navbar-offset);\n    top: auto;\n  }\n\n  :host([floating][sticky][data-scrolled]) {\n    inset-inline: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  :host([data-preview-mode][floating][sticky][data-scrolled]) {\n    position: absolute;\n    inset-inline: 0;\n    top: auto;\n    width: auto;\n  }\n\n  :host > nav {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .navbar {\n    box-sizing: border-box;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    min-height: var(--_navbar-height);\n    padding: var(--size-2) var(--size-4);\n    margin-inline: auto;\n    overflow: auto hidden;\n    color: inherit;\n    white-space: nowrap;\n    background: var(--_navbar-bg);\n    border-top: none;\n    border-right: none;\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: none;\n    border-radius: 0;\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal)\n    );\n  }\n\n  :host([data-mode='floating']) .navbar {\n    border-top: var(--border) solid var(--_navbar-border-color);\n    border-right: var(--border) solid var(--_navbar-border-color);\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--_navbar-radius);\n  }\n\n  :host([data-mode='sticky']) .navbar,\n  :host([floating][sticky][data-scrolled]) .navbar {\n    max-width: 100%;\n    border-inline: none;\n    border-radius: 0;\n  }\n\n  :host([data-mode-transitioning][data-mode='sticky']) .navbar {\n    animation: navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out);\n  }\n\n  :host([data-mode-transitioning][data-mode='floating']) .navbar {\n    animation: navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out);\n  }\n\n  .navbar-logo[hidden],\n  .navbar-start[hidden],\n  .navbar-center[hidden],\n  .navbar-end[hidden],\n  .navbar-persistent[hidden] {\n    display: none;\n  }\n\n  .navbar-logo,\n  .navbar-start,\n  .navbar-center,\n  .navbar-end,\n  .navbar-persistent {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  .navbar-logo {\n    flex: 0 0 auto;\n  }\n\n  .navbar-start {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n  }\n\n  .navbar-center {\n    display: flex;\n    flex: 0 1 auto;\n    gap: var(--size-1);\n    justify-content: flex-start;\n    min-width: 0;\n  }\n\n  .navbar-end {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  /* The persistent region stays in the bar through the mobile collapse; it owns the\n     right edge whenever the end region is not there to claim it. */\n  .navbar-persistent {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  .navbar-end:not([hidden]) + .navbar-persistent {\n    margin-inline-start: var(--size-1);\n  }\n\n  /* The mobile collapse hides the end region with display, not the hidden attribute —\n     reclaim the right edge for the persistent region there. */\n  :host([data-mobile]) .navbar-persistent {\n    margin-inline-start: auto;\n  }\n\n  .mobile-toggle {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-9);\n    height: var(--size-9);\n    padding: 0;\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    background: transparent;\n    border: var(--border) solid transparent;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .mobile-toggle:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-100);\n    border-color: var(--color-contrast-200);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .mobile-menu-panel {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: none;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    padding: var(--size-2);\n    margin-block-start: var(--size-2);\n    margin-inline: auto;\n    background: var(--_navbar-bg);\n    border: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transform-origin: top;\n    animation: navbar-mobile-in var(--transition-fast) var(--ease-out);\n  }\n\n  /* `:not([hidden])` — same reasoning as `.mobile-toggle` above: this panel's own `?hidden=`\n     binding (navbar.ts) already covers \"not mobile\" / \"menu closed\" / \"no mobile-menu content\",\n     but an unconditional `display: grid` here would still override that `[hidden]` for the \"no\n     content\" case specifically, since author styles always win over the UA stylesheet. */\n  :host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]) {\n    display: grid;\n    gap: var(--size-1);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='floating']) .mobile-menu-panel {\n    margin-block-start: var(--size-1-5);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='sticky']) .mobile-menu-panel,\n  :host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel {\n    position: absolute;\n    inset-inline: 0;\n    top: 100%;\n    z-index: 2;\n    max-width: 100%;\n    margin: 0;\n    border-inline: none;\n    border-top: none;\n    border-radius: 0 0 var(--rounded-md) var(--rounded-md);\n  }\n\n  /* `:not([hidden])` matters — the component's own `?hidden=` binding (navbar.ts) hides this\n     button when there's neither `mobile-menu` slot content nor a `mobile-sidebar` target to\n     toggle. Without it, this rule's `display: inline-flex` — an author-stylesheet declaration —\n     unconditionally overrides the UA stylesheet's `[hidden] { display: none }`, since author\n     styles always win over UA styles regardless of selector specificity. That left the button\n     visibly clickable while toggling a `mobile-menu-panel` that stays hidden too (its own\n     `?hidden=` binding includes the same \"nothing to show\" check) — clicking did nothing\n     visible at all. */\n  :host([data-mobile]) .mobile-toggle:not([hidden]) {\n    display: inline-flex;\n    order: -1;\n  }\n\n  :host([data-mobile]) .navbar-start,\n  :host([data-mobile]) .navbar-center,\n  :host([data-mobile]) .navbar-end {\n    display: none;\n  }\n\n  :host([data-mobile][data-mobile-open]) .navbar {\n    border-bottom-right-radius: var(--rounded-md);\n    border-bottom-left-radius: var(--rounded-md);\n  }\n\n  @starting-style {\n    .mobile-menu-panel {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  @keyframes navbar-mobile-in {\n    from {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes navbar-floating-to-sticky {\n    from {\n      opacity: 0.92;\n      transform: translateY(6px) scale(0.985);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes navbar-sticky-to-floating {\n    from {\n      opacity: 0.95;\n      transform: translateY(-2px) scale(1);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(0.99);\n    }\n  }\n\n  .item {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    min-height: var(--_touch-target, var(--size-9));\n    padding: var(--size-1-5) var(--size-2-5);\n    font-family: inherit;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--navbar-item-color, var(--color-contrast-700));\n    white-space: nowrap;\n    text-decoration: none;\n    appearance: none;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--navbar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--navbar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    color: var(--navbar-item-active-color, var(--color-primary));\n    background: var(--navbar-item-active-bg, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--color-contrast-400);\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: transparent;\n  }\n\n  .item-icon,\n  .item-end {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .item-label {\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  /* Icon-only items (no visible label — name conveyed via aria-label) hide the empty label\n     region so it stops reserving a `gap` slot next to the icon, and switch to compact,\n     symmetric padding instead of the icon+label layout's wider horizontal padding. Without\n     this, an icon-only item ends up lopsided: too much horizontal space around the icon plus\n     a phantom gap left over for a label that never renders. */\n  :host([icon-only]) .item-label {\n    display: none;\n  }\n\n  :host([icon-only]) .item {\n    padding: var(--size-1-5);\n  }\n\n  :host([navbar-mobile]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([navbar-mobile]) .item {\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='flat']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 88%, transparent);\n    --_navbar-shadow: none;\n  }\n\n  :host([variant='bordered']) {\n    --_navbar-bg: var(--color-canvas);\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 32%, transparent);\n  }\n\n  :host([variant='outline']) {\n    --_navbar-bg: transparent;\n    --_navbar-shadow: none;\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 40%, transparent);\n  }\n\n  :host([color]) {\n    --_navbar-border-color: color-mix(in oklch, var(--_theme-border) 30%, transparent);\n  }\n}\n\n@media (width <= 768px) {\n  @layer refine.base {\n    :host([data-mode='floating']) {\n      inset-inline: var(--size-2);\n      top: var(--size-2);\n    }\n\n    :host([floating][sticky][data-scrolled]) {\n      inset-inline: 0;\n      top: 0;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"navbar.css.cjs","names":[],"sources":["../../../src/layout/navbar/navbar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_navbar-height: var(--navbar-height, var(--size-14));\n    --_navbar-width: var(--navbar-width, min(100%, 80rem));\n    --_navbar-offset: var(--navbar-offset, var(--size-3));\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-color: var(--navbar-color, var(--color-contrast-900));\n    --_navbar-border-color: var(--navbar-border-color, var(--color-divider));\n    --_navbar-shadow: var(--navbar-shadow, var(--shadow-md));\n    --_navbar-radius: var(--navbar-radius, var(--rounded-lg));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    color: var(--_navbar-color);\n  }\n\n  :host([data-mode='sticky']) {\n    position: sticky;\n    top: 0;\n    z-index: var(--z-sticky);\n  }\n\n  :host([data-mode='floating']) {\n    position: fixed;\n    inset-inline: var(--_navbar-offset);\n    top: var(--_navbar-offset);\n    z-index: var(--z-sticky);\n  }\n\n  /* Preview mode: use absolute positioning so component stays within container bounds */\n  :host([data-preview-mode][data-mode='floating']) {\n    position: absolute;\n    inset-inline: var(--_navbar-offset);\n    top: auto;\n  }\n\n  :host([floating][sticky][data-scrolled]) {\n    inset-inline: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  :host([data-preview-mode][floating][sticky][data-scrolled]) {\n    position: absolute;\n    inset-inline: 0;\n    top: auto;\n    width: auto;\n  }\n\n  :host > nav {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .navbar {\n    box-sizing: border-box;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    min-height: var(--_navbar-height);\n    padding: var(--size-2) var(--size-4);\n    margin-inline: auto;\n    overflow: auto hidden;\n    color: inherit;\n    white-space: nowrap;\n    background: var(--_navbar-bg);\n    border-top: none;\n    border-right: none;\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: none;\n    border-radius: 0;\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal)\n    );\n  }\n\n  :host([data-mode='floating']) .navbar {\n    border-top: var(--border) solid var(--_navbar-border-color);\n    border-right: var(--border) solid var(--_navbar-border-color);\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--_navbar-radius);\n  }\n\n  :host([data-mode='sticky']) .navbar,\n  :host([floating][sticky][data-scrolled]) .navbar {\n    max-width: 100%;\n    border-inline: none;\n    border-radius: 0;\n  }\n\n  :host([data-mode-transitioning][data-mode='sticky']) .navbar {\n    animation: navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out);\n  }\n\n  :host([data-mode-transitioning][data-mode='floating']) .navbar {\n    animation: navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out);\n  }\n\n  .navbar-logo[hidden],\n  .navbar-start[hidden],\n  .navbar-center[hidden],\n  .navbar-end[hidden],\n  .navbar-persistent[hidden] {\n    display: none;\n  }\n\n  .navbar-logo,\n  .navbar-start,\n  .navbar-center,\n  .navbar-end,\n  .navbar-persistent {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  .navbar-logo {\n    flex: 0 0 auto;\n  }\n\n  .navbar-start {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n  }\n\n  .navbar-center {\n    display: flex;\n    flex: 0 1 auto;\n    gap: var(--size-1);\n    justify-content: flex-start;\n    min-width: 0;\n  }\n\n  .navbar-end {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  /* The persistent region stays in the bar through the mobile collapse; it owns the\n     right edge whenever the end region is not there to claim it. */\n  .navbar-persistent {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  .navbar-end:not([hidden]) + .navbar-persistent {\n    margin-inline-start: var(--size-1);\n  }\n\n  /* The mobile collapse hides the end region with display, not the hidden attribute :\n     reclaim the right edge for the persistent region there. */\n  :host([data-mobile]) .navbar-persistent {\n    margin-inline-start: auto;\n  }\n\n  .mobile-toggle {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-9);\n    height: var(--size-9);\n    padding: 0;\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    background: transparent;\n    border: var(--border) solid transparent;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .mobile-toggle:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-100);\n    border-color: var(--color-contrast-200);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .mobile-menu-panel {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: none;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    padding: var(--size-2);\n    margin-block-start: var(--size-2);\n    margin-inline: auto;\n    background: var(--_navbar-bg);\n    border: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transform-origin: top;\n    animation: navbar-mobile-in var(--transition-fast) var(--ease-out);\n  }\n\n  /* `:not([hidden])`: same reasoning as `.mobile-toggle` above: this panel's own `?hidden=`\n     binding (navbar.ts) already covers \"not mobile\" / \"menu closed\" / \"no mobile-menu content\",\n     but an unconditional `display: grid` here would still override that `[hidden]` for the \"no\n     content\" case specifically, since author styles always win over the UA stylesheet. */\n  :host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]) {\n    display: grid;\n    gap: var(--size-1);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='floating']) .mobile-menu-panel {\n    margin-block-start: var(--size-1-5);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='sticky']) .mobile-menu-panel,\n  :host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel {\n    position: absolute;\n    inset-inline: 0;\n    top: 100%;\n    z-index: 2;\n    max-width: 100%;\n    margin: 0;\n    border-inline: none;\n    border-top: none;\n    border-radius: 0 0 var(--rounded-md) var(--rounded-md);\n  }\n\n  /* `:not([hidden])` matters: the component's own `?hidden=` binding (navbar.ts) hides this\n     button when there's neither `mobile-menu` slot content nor a `mobile-sidebar` target to\n     toggle. Without it, this rule's `display: inline-flex`: an author-stylesheet declaration :\n     unconditionally overrides the UA stylesheet's `[hidden] { display: none }`, since author\n     styles always win over UA styles regardless of selector specificity. That left the button\n     visibly clickable while toggling a `mobile-menu-panel` that stays hidden too (its own\n     `?hidden=` binding includes the same \"nothing to show\" check): clicking did nothing\n     visible at all. */\n  :host([data-mobile]) .mobile-toggle:not([hidden]) {\n    display: inline-flex;\n    order: -1;\n  }\n\n  :host([data-mobile]) .navbar-start,\n  :host([data-mobile]) .navbar-center,\n  :host([data-mobile]) .navbar-end {\n    display: none;\n  }\n\n  :host([data-mobile][data-mobile-open]) .navbar {\n    border-bottom-right-radius: var(--rounded-md);\n    border-bottom-left-radius: var(--rounded-md);\n  }\n\n  @starting-style {\n    .mobile-menu-panel {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  @keyframes navbar-mobile-in {\n    from {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes navbar-floating-to-sticky {\n    from {\n      opacity: 0.92;\n      transform: translateY(6px) scale(0.985);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes navbar-sticky-to-floating {\n    from {\n      opacity: 0.95;\n      transform: translateY(-2px) scale(1);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(0.99);\n    }\n  }\n\n  .item {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    min-height: var(--_touch-target, var(--size-9));\n    padding: var(--size-1-5) var(--size-2-5);\n    font-family: inherit;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--navbar-item-color, var(--color-contrast-700));\n    white-space: nowrap;\n    text-decoration: none;\n    appearance: none;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--navbar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--navbar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    color: var(--navbar-item-active-color, var(--color-primary));\n    background: var(--navbar-item-active-bg, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--color-contrast-400);\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: transparent;\n  }\n\n  .item-icon,\n  .item-end {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .item-label {\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  /* Icon-only items (no visible label: name conveyed via aria-label) hide the empty label\n     region so it stops reserving a `gap` slot next to the icon, and switch to compact,\n     symmetric padding instead of the icon+label layout's wider horizontal padding. Without\n     this, an icon-only item ends up lopsided: too much horizontal space around the icon plus\n     a phantom gap left over for a label that never renders. */\n  :host([icon-only]) .item-label {\n    display: none;\n  }\n\n  :host([icon-only]) .item {\n    padding: var(--size-1-5);\n  }\n\n  :host([navbar-mobile]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([navbar-mobile]) .item {\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='flat']) {\n    --_navbar-bg: var(--navbar-bg, color-mix(in oklch, var(--color-canvas) 88%, transparent));\n    --_navbar-shadow: none;\n  }\n\n  :host([variant='bordered']) {\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 32%, transparent);\n  }\n\n  :host([variant='outline']) {\n    --_navbar-bg: var(--navbar-bg, transparent);\n    --_navbar-shadow: none;\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 40%, transparent);\n  }\n\n  :host([color]) {\n    --_navbar-border-color: color-mix(in oklch, var(--_theme-border) 30%, transparent);\n  }\n}\n\n@media (width <= 768px) {\n  @layer refine.base {\n    :host([data-mode='floating']) {\n      inset-inline: var(--size-2);\n      top: var(--size-2);\n    }\n\n    :host([floating][sticky][data-scrolled]) {\n      inset-inline: 0;\n      top: 0;\n    }\n  }\n}\n"],"mappings":""}

package/dist/layout/navbar/navbar.css.js

@@ -1,2 +1,2 @@
-var e=`@layer refine.base{:host{--_navbar-height:var(--navbar-height,var(--size-14));--_navbar-width:var(--navbar-width,min(100%, 80rem));--_navbar-offset:var(--navbar-offset,var(--size-3));--_navbar-bg:var(--navbar-bg,var(--color-canvas));--_navbar-color:var(--navbar-color,var(--color-contrast-900));--_navbar-border-color:var(--navbar-border-color,var(--color-divider));--_navbar-shadow:var(--navbar-shadow,var(--shadow-md));--_navbar-radius:var(--navbar-radius,var(--rounded-lg));box-sizing:border-box;width:100%;color:var(--_navbar-color);display:block}:host([data-mode=sticky]){z-index:var(--z-sticky);position:sticky;top:0}:host([data-mode=floating]){inset-inline:var(--_navbar-offset);top:var(--_navbar-offset);z-index:var(--z-sticky);position:fixed}:host([data-preview-mode][data-mode=floating]){inset-inline:var(--_navbar-offset);position:absolute;top:auto}:host([floating][sticky][data-scrolled]){width:100%;top:0;left:0;right:0}:host([data-preview-mode][floating][sticky][data-scrolled]){width:auto;position:absolute;top:auto;left:0;right:0}:host>nav{flex-direction:column;width:100%;display:flex;position:relative}.navbar{box-sizing:border-box;gap:var(--size-2);width:100%;max-width:var(--_navbar-width);min-height:var(--_navbar-height);padding:var(--size-2) var(--size-4);color:inherit;white-space:nowrap;background:var(--_navbar-bg);border-top:none;border-right:none;border-bottom:var(--border) solid var(--_navbar-border-color);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal));border-left:none;border-radius:0;flex-wrap:nowrap;align-items:center;margin-left:auto;margin-right:auto;display:flex;overflow:auto hidden}:host([data-mode=floating]) .navbar{border-top:var(--border) solid var(--_navbar-border-color);border-right:var(--border) solid var(--_navbar-border-color);border-bottom:var(--border) solid var(--_navbar-border-color);border-left:var(--border) solid var(--_navbar-border-color);border-radius:var(--_navbar-radius)}:host([data-mode=sticky]) .navbar,:host([floating][sticky][data-scrolled]) .navbar{border-left:none;border-right:none;border-radius:0;max-width:100%}:host([data-mode-transitioning][data-mode=sticky]) .navbar{animation:navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out)}:host([data-mode-transitioning][data-mode=floating]) .navbar{animation:navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out)}.navbar-logo[hidden],.navbar-start[hidden],.navbar-center[hidden],.navbar-end[hidden],.navbar-persistent[hidden]{display:none}.navbar-logo,.navbar-start,.navbar-center,.navbar-end,.navbar-persistent{white-space:nowrap;align-items:center;min-width:0;display:flex}.navbar-logo{flex:none}.navbar-start{gap:var(--size-1);flex:none}.navbar-center{gap:var(--size-1);flex:0 auto;justify-content:flex-start;min-width:0;display:flex}.navbar-end{gap:var(--size-1);flex:none}.navbar-end: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))){margin-left:auto}.navbar-end:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.navbar-persistent{gap:var(--size-1);flex:none}.navbar-persistent: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))){margin-left:auto}.navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.navbar-end:not([hidden])+.navbar-persistent: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))){margin-left:var(--size-1)}.navbar-end:not([hidden])+.navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--size-1)}:host([data-mobile]) .navbar-persistent: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))){margin-left:auto}:host([data-mobile]) .navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.mobile-toggle{width:var(--size-9);height:var(--size-9);color:var(--color-contrast-700);cursor:pointer;border:var(--border) solid transparent;border-radius:var(--rounded-md);transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.mobile-toggle:hover{color:var(--color-contrast-900);background:var(--color-contrast-100);border-color:var(--color-contrast-200)}.mobile-toggle:focus-visible{outline:var(--focus-ring)}.mobile-menu-panel{z-index:1;box-sizing:border-box;width:100%;max-width:var(--_navbar-width);padding:var(--size-2);background:var(--_navbar-bg);border:var(--border) solid var(--_navbar-border-color);border-radius:var(--rounded-lg);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transform-origin:top;animation:navbar-mobile-in var(--transition-fast) var(--ease-out);margin-top:var(--size-2);margin-left:auto;margin-right:auto;display:none;position:relative}:host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]){gap:var(--size-1);display:grid}:host([data-mobile][data-mobile-open][data-mode=floating]) .mobile-menu-panel{margin-top:var(--size-1-5)}:host([data-mobile][data-mobile-open][data-mode=sticky]) .mobile-menu-panel,:host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel{z-index:2;border-radius:0 0 var(--rounded-md) var(--rounded-md);border-top:none;border-left:none;border-right:none;max-width:100%;margin:0;position:absolute;top:100%;left:0;right:0}:host([data-mobile]) .mobile-toggle:not([hidden]){order:-1;display:inline-flex}:host([data-mobile]) .navbar-start,:host([data-mobile]) .navbar-center,:host([data-mobile]) .navbar-end{display:none}:host([data-mobile][data-mobile-open]) .navbar{border-bottom-right-radius:var(--rounded-md);border-bottom-left-radius:var(--rounded-md)}@starting-style{.mobile-menu-panel{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}@keyframes navbar-mobile-in{0%{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}to{opacity:1;transform:translateY(0)}}@keyframes navbar-floating-to-sticky{0%{opacity:.92;transform:translateY(6px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes navbar-sticky-to-floating{0%{opacity:.95;transform:translateY(-2px)scale(1)}to{opacity:1;transform:translateY(0)scale(.99)}}.item{box-sizing:border-box;gap:var(--size-1);min-height:var(--_touch-target,var(--size-9));padding:var(--size-1-5) var(--size-2-5);font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--navbar-item-color,var(--color-contrast-700));white-space:nowrap;appearance:none;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;align-items:center;text-decoration:none;display:inline-flex}.item:hover,.item:focus-visible{color:var(--navbar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--navbar-item-hover-bg,var(--color-contrast-100))}:host([active]) .item{color:var(--navbar-item-active-color,var(--color-primary));background:var(--navbar-item-active-bg,color-mix(in oklch, var(--color-primary) 12%, transparent))}:host([disabled]) .item,:host([disabled]) .item:hover,:host([disabled]) .item:focus-visible{color:var(--color-contrast-400);pointer-events:none;cursor:not-allowed;background:0 0;outline:none}.item-icon,.item-end{align-items:center;display:inline-flex}.item-label{white-space:nowrap;min-width:0}:host([icon-only]) .item-label{display:none}:host([icon-only]) .item{padding:var(--size-1-5)}:host([navbar-mobile]){width:100%;display:block}:host([navbar-mobile]) .item{justify-content:flex-start;width:100%;display:flex}}@layer refine.variants{:host([variant=flat]){--_navbar-bg:color-mix(in oklch, var(--color-canvas) 88%, transparent);--_navbar-shadow:none}:host([variant=bordered]){--_navbar-bg:var(--color-canvas);--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 32%, transparent)}:host([variant=outline]){--_navbar-bg:transparent;--_navbar-shadow:none;--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 40%, transparent)}:host([color]){--_navbar-border-color:color-mix(in oklch, var(--_theme-border) 30%, transparent)}}@media (width<=768px){@layer refine.base{:host([data-mode=floating]){inset-inline:var(--size-2);top:var(--size-2)}:host([floating][sticky][data-scrolled]){top:0;left:0;right:0}}}`;export{e as default};
+var e=`@layer refine.base{:host{--_navbar-height:var(--navbar-height,var(--size-14));--_navbar-width:var(--navbar-width,min(100%, 80rem));--_navbar-offset:var(--navbar-offset,var(--size-3));--_navbar-bg:var(--navbar-bg,var(--color-canvas));--_navbar-color:var(--navbar-color,var(--color-contrast-900));--_navbar-border-color:var(--navbar-border-color,var(--color-divider));--_navbar-shadow:var(--navbar-shadow,var(--shadow-md));--_navbar-radius:var(--navbar-radius,var(--rounded-lg));box-sizing:border-box;width:100%;color:var(--_navbar-color);display:block}:host([data-mode=sticky]){z-index:var(--z-sticky);position:sticky;top:0}:host([data-mode=floating]){inset-inline:var(--_navbar-offset);top:var(--_navbar-offset);z-index:var(--z-sticky);position:fixed}:host([data-preview-mode][data-mode=floating]){inset-inline:var(--_navbar-offset);position:absolute;top:auto}:host([floating][sticky][data-scrolled]){width:100%;top:0;left:0;right:0}:host([data-preview-mode][floating][sticky][data-scrolled]){width:auto;position:absolute;top:auto;left:0;right:0}:host>nav{flex-direction:column;width:100%;display:flex;position:relative}.navbar{box-sizing:border-box;gap:var(--size-2);width:100%;max-width:var(--_navbar-width);min-height:var(--_navbar-height);padding:var(--size-2) var(--size-4);color:inherit;white-space:nowrap;background:var(--_navbar-bg);border-top:none;border-right:none;border-bottom:var(--border) solid var(--_navbar-border-color);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal));border-left:none;border-radius:0;flex-wrap:nowrap;align-items:center;margin-left:auto;margin-right:auto;display:flex;overflow:auto hidden}:host([data-mode=floating]) .navbar{border-top:var(--border) solid var(--_navbar-border-color);border-right:var(--border) solid var(--_navbar-border-color);border-bottom:var(--border) solid var(--_navbar-border-color);border-left:var(--border) solid var(--_navbar-border-color);border-radius:var(--_navbar-radius)}:host([data-mode=sticky]) .navbar,:host([floating][sticky][data-scrolled]) .navbar{border-left:none;border-right:none;border-radius:0;max-width:100%}:host([data-mode-transitioning][data-mode=sticky]) .navbar{animation:navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out)}:host([data-mode-transitioning][data-mode=floating]) .navbar{animation:navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out)}.navbar-logo[hidden],.navbar-start[hidden],.navbar-center[hidden],.navbar-end[hidden],.navbar-persistent[hidden]{display:none}.navbar-logo,.navbar-start,.navbar-center,.navbar-end,.navbar-persistent{white-space:nowrap;align-items:center;min-width:0;display:flex}.navbar-logo{flex:none}.navbar-start{gap:var(--size-1);flex:none}.navbar-center{gap:var(--size-1);flex:0 auto;justify-content:flex-start;min-width:0;display:flex}.navbar-end{gap:var(--size-1);flex:none}.navbar-end: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))){margin-left:auto}.navbar-end:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.navbar-persistent{gap:var(--size-1);flex:none}.navbar-persistent: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))){margin-left:auto}.navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.navbar-end:not([hidden])+.navbar-persistent: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))){margin-left:var(--size-1)}.navbar-end:not([hidden])+.navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--size-1)}:host([data-mobile]) .navbar-persistent: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))){margin-left:auto}:host([data-mobile]) .navbar-persistent:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.mobile-toggle{width:var(--size-9);height:var(--size-9);color:var(--color-contrast-700);cursor:pointer;border:var(--border) solid transparent;border-radius:var(--rounded-md);transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:none}.mobile-toggle:hover{color:var(--color-contrast-900);background:var(--color-contrast-100);border-color:var(--color-contrast-200)}.mobile-toggle:focus-visible{outline:var(--focus-ring)}.mobile-menu-panel{z-index:1;box-sizing:border-box;width:100%;max-width:var(--_navbar-width);padding:var(--size-2);background:var(--_navbar-bg);border:var(--border) solid var(--_navbar-border-color);border-radius:var(--rounded-lg);box-shadow:var(--_shadow,var(--_navbar-shadow));-webkit-backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));backdrop-filter:var(--navbar-backdrop-filter,blur(var(--blur-md)));transform-origin:top;animation:navbar-mobile-in var(--transition-fast) var(--ease-out);margin-top:var(--size-2);margin-left:auto;margin-right:auto;display:none;position:relative}:host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]){gap:var(--size-1);display:grid}:host([data-mobile][data-mobile-open][data-mode=floating]) .mobile-menu-panel{margin-top:var(--size-1-5)}:host([data-mobile][data-mobile-open][data-mode=sticky]) .mobile-menu-panel,:host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel{z-index:2;border-radius:0 0 var(--rounded-md) var(--rounded-md);border-top:none;border-left:none;border-right:none;max-width:100%;margin:0;position:absolute;top:100%;left:0;right:0}:host([data-mobile]) .mobile-toggle:not([hidden]){order:-1;display:inline-flex}:host([data-mobile]) .navbar-start,:host([data-mobile]) .navbar-center,:host([data-mobile]) .navbar-end{display:none}:host([data-mobile][data-mobile-open]) .navbar{border-bottom-right-radius:var(--rounded-md);border-bottom-left-radius:var(--rounded-md)}@starting-style{.mobile-menu-panel{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}@keyframes navbar-mobile-in{0%{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}to{opacity:1;transform:translateY(0)}}@keyframes navbar-floating-to-sticky{0%{opacity:.92;transform:translateY(6px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes navbar-sticky-to-floating{0%{opacity:.95;transform:translateY(-2px)scale(1)}to{opacity:1;transform:translateY(0)scale(.99)}}.item{box-sizing:border-box;gap:var(--size-1);min-height:var(--_touch-target,var(--size-9));padding:var(--size-1-5) var(--size-2-5);font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--navbar-item-color,var(--color-contrast-700));white-space:nowrap;appearance:none;cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;flex-shrink:0;align-items:center;text-decoration:none;display:inline-flex}.item:hover,.item:focus-visible{color:var(--navbar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--navbar-item-hover-bg,var(--color-contrast-100))}:host([active]) .item{color:var(--navbar-item-active-color,var(--color-primary));background:var(--navbar-item-active-bg,color-mix(in oklch, var(--color-primary) 12%, transparent))}:host([disabled]) .item,:host([disabled]) .item:hover,:host([disabled]) .item:focus-visible{color:var(--color-contrast-400);pointer-events:none;cursor:not-allowed;background:0 0;outline:none}.item-icon,.item-end{align-items:center;display:inline-flex}.item-label{white-space:nowrap;min-width:0}:host([icon-only]) .item-label{display:none}:host([icon-only]) .item{padding:var(--size-1-5)}:host([navbar-mobile]){width:100%;display:block}:host([navbar-mobile]) .item{justify-content:flex-start;width:100%;display:flex}}@layer refine.variants{:host([variant=flat]){--_navbar-bg:var(--navbar-bg,color-mix(in oklch, var(--color-canvas) 88%, transparent));--_navbar-shadow:none}:host([variant=bordered]){--_navbar-bg:var(--navbar-bg,var(--color-canvas));--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 32%, transparent)}:host([variant=outline]){--_navbar-bg:var(--navbar-bg,transparent);--_navbar-shadow:none;--_navbar-border-color:color-mix(in oklch, var(--color-contrast-500) 40%, transparent)}:host([color]){--_navbar-border-color:color-mix(in oklch, var(--_theme-border) 30%, transparent)}}@media (width<=768px){@layer refine.base{:host([data-mode=floating]){inset-inline:var(--size-2);top:var(--size-2)}:host([floating][sticky][data-scrolled]){top:0;left:0;right:0}}}`;export{e as default};
 //# sourceMappingURL=navbar.css.js.map

package/dist/layout/navbar/navbar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.css.js","names":[],"sources":["../../../src/layout/navbar/navbar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_navbar-height: var(--navbar-height, var(--size-14));\n    --_navbar-width: var(--navbar-width, min(100%, 80rem));\n    --_navbar-offset: var(--navbar-offset, var(--size-3));\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-color: var(--navbar-color, var(--color-contrast-900));\n    --_navbar-border-color: var(--navbar-border-color, var(--color-divider));\n    --_navbar-shadow: var(--navbar-shadow, var(--shadow-md));\n    --_navbar-radius: var(--navbar-radius, var(--rounded-lg));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    color: var(--_navbar-color);\n  }\n\n  :host([data-mode='sticky']) {\n    position: sticky;\n    top: 0;\n    z-index: var(--z-sticky);\n  }\n\n  :host([data-mode='floating']) {\n    position: fixed;\n    inset-inline: var(--_navbar-offset);\n    top: var(--_navbar-offset);\n    z-index: var(--z-sticky);\n  }\n\n  /* Preview mode: use absolute positioning so component stays within container bounds */\n  :host([data-preview-mode][data-mode='floating']) {\n    position: absolute;\n    inset-inline: var(--_navbar-offset);\n    top: auto;\n  }\n\n  :host([floating][sticky][data-scrolled]) {\n    inset-inline: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  :host([data-preview-mode][floating][sticky][data-scrolled]) {\n    position: absolute;\n    inset-inline: 0;\n    top: auto;\n    width: auto;\n  }\n\n  :host > nav {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .navbar {\n    box-sizing: border-box;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    min-height: var(--_navbar-height);\n    padding: var(--size-2) var(--size-4);\n    margin-inline: auto;\n    overflow: auto hidden;\n    color: inherit;\n    white-space: nowrap;\n    background: var(--_navbar-bg);\n    border-top: none;\n    border-right: none;\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: none;\n    border-radius: 0;\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal)\n    );\n  }\n\n  :host([data-mode='floating']) .navbar {\n    border-top: var(--border) solid var(--_navbar-border-color);\n    border-right: var(--border) solid var(--_navbar-border-color);\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--_navbar-radius);\n  }\n\n  :host([data-mode='sticky']) .navbar,\n  :host([floating][sticky][data-scrolled]) .navbar {\n    max-width: 100%;\n    border-inline: none;\n    border-radius: 0;\n  }\n\n  :host([data-mode-transitioning][data-mode='sticky']) .navbar {\n    animation: navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out);\n  }\n\n  :host([data-mode-transitioning][data-mode='floating']) .navbar {\n    animation: navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out);\n  }\n\n  .navbar-logo[hidden],\n  .navbar-start[hidden],\n  .navbar-center[hidden],\n  .navbar-end[hidden],\n  .navbar-persistent[hidden] {\n    display: none;\n  }\n\n  .navbar-logo,\n  .navbar-start,\n  .navbar-center,\n  .navbar-end,\n  .navbar-persistent {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  .navbar-logo {\n    flex: 0 0 auto;\n  }\n\n  .navbar-start {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n  }\n\n  .navbar-center {\n    display: flex;\n    flex: 0 1 auto;\n    gap: var(--size-1);\n    justify-content: flex-start;\n    min-width: 0;\n  }\n\n  .navbar-end {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  /* The persistent region stays in the bar through the mobile collapse; it owns the\n     right edge whenever the end region is not there to claim it. */\n  .navbar-persistent {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  .navbar-end:not([hidden]) + .navbar-persistent {\n    margin-inline-start: var(--size-1);\n  }\n\n  /* The mobile collapse hides the end region with display, not the hidden attribute —\n     reclaim the right edge for the persistent region there. */\n  :host([data-mobile]) .navbar-persistent {\n    margin-inline-start: auto;\n  }\n\n  .mobile-toggle {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-9);\n    height: var(--size-9);\n    padding: 0;\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    background: transparent;\n    border: var(--border) solid transparent;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .mobile-toggle:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-100);\n    border-color: var(--color-contrast-200);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .mobile-menu-panel {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: none;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    padding: var(--size-2);\n    margin-block-start: var(--size-2);\n    margin-inline: auto;\n    background: var(--_navbar-bg);\n    border: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transform-origin: top;\n    animation: navbar-mobile-in var(--transition-fast) var(--ease-out);\n  }\n\n  /* `:not([hidden])` — same reasoning as `.mobile-toggle` above: this panel's own `?hidden=`\n     binding (navbar.ts) already covers \"not mobile\" / \"menu closed\" / \"no mobile-menu content\",\n     but an unconditional `display: grid` here would still override that `[hidden]` for the \"no\n     content\" case specifically, since author styles always win over the UA stylesheet. */\n  :host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]) {\n    display: grid;\n    gap: var(--size-1);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='floating']) .mobile-menu-panel {\n    margin-block-start: var(--size-1-5);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='sticky']) .mobile-menu-panel,\n  :host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel {\n    position: absolute;\n    inset-inline: 0;\n    top: 100%;\n    z-index: 2;\n    max-width: 100%;\n    margin: 0;\n    border-inline: none;\n    border-top: none;\n    border-radius: 0 0 var(--rounded-md) var(--rounded-md);\n  }\n\n  /* `:not([hidden])` matters — the component's own `?hidden=` binding (navbar.ts) hides this\n     button when there's neither `mobile-menu` slot content nor a `mobile-sidebar` target to\n     toggle. Without it, this rule's `display: inline-flex` — an author-stylesheet declaration —\n     unconditionally overrides the UA stylesheet's `[hidden] { display: none }`, since author\n     styles always win over UA styles regardless of selector specificity. That left the button\n     visibly clickable while toggling a `mobile-menu-panel` that stays hidden too (its own\n     `?hidden=` binding includes the same \"nothing to show\" check) — clicking did nothing\n     visible at all. */\n  :host([data-mobile]) .mobile-toggle:not([hidden]) {\n    display: inline-flex;\n    order: -1;\n  }\n\n  :host([data-mobile]) .navbar-start,\n  :host([data-mobile]) .navbar-center,\n  :host([data-mobile]) .navbar-end {\n    display: none;\n  }\n\n  :host([data-mobile][data-mobile-open]) .navbar {\n    border-bottom-right-radius: var(--rounded-md);\n    border-bottom-left-radius: var(--rounded-md);\n  }\n\n  @starting-style {\n    .mobile-menu-panel {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  @keyframes navbar-mobile-in {\n    from {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes navbar-floating-to-sticky {\n    from {\n      opacity: 0.92;\n      transform: translateY(6px) scale(0.985);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes navbar-sticky-to-floating {\n    from {\n      opacity: 0.95;\n      transform: translateY(-2px) scale(1);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(0.99);\n    }\n  }\n\n  .item {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    min-height: var(--_touch-target, var(--size-9));\n    padding: var(--size-1-5) var(--size-2-5);\n    font-family: inherit;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--navbar-item-color, var(--color-contrast-700));\n    white-space: nowrap;\n    text-decoration: none;\n    appearance: none;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--navbar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--navbar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    color: var(--navbar-item-active-color, var(--color-primary));\n    background: var(--navbar-item-active-bg, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--color-contrast-400);\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: transparent;\n  }\n\n  .item-icon,\n  .item-end {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .item-label {\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  /* Icon-only items (no visible label — name conveyed via aria-label) hide the empty label\n     region so it stops reserving a `gap` slot next to the icon, and switch to compact,\n     symmetric padding instead of the icon+label layout's wider horizontal padding. Without\n     this, an icon-only item ends up lopsided: too much horizontal space around the icon plus\n     a phantom gap left over for a label that never renders. */\n  :host([icon-only]) .item-label {\n    display: none;\n  }\n\n  :host([icon-only]) .item {\n    padding: var(--size-1-5);\n  }\n\n  :host([navbar-mobile]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([navbar-mobile]) .item {\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='flat']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 88%, transparent);\n    --_navbar-shadow: none;\n  }\n\n  :host([variant='bordered']) {\n    --_navbar-bg: var(--color-canvas);\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 32%, transparent);\n  }\n\n  :host([variant='outline']) {\n    --_navbar-bg: transparent;\n    --_navbar-shadow: none;\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 40%, transparent);\n  }\n\n  :host([color]) {\n    --_navbar-border-color: color-mix(in oklch, var(--_theme-border) 30%, transparent);\n  }\n}\n\n@media (width <= 768px) {\n  @layer refine.base {\n    :host([data-mode='floating']) {\n      inset-inline: var(--size-2);\n      top: var(--size-2);\n    }\n\n    :host([floating][sticky][data-scrolled]) {\n      inset-inline: 0;\n      top: 0;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"navbar.css.js","names":[],"sources":["../../../src/layout/navbar/navbar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_navbar-height: var(--navbar-height, var(--size-14));\n    --_navbar-width: var(--navbar-width, min(100%, 80rem));\n    --_navbar-offset: var(--navbar-offset, var(--size-3));\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-color: var(--navbar-color, var(--color-contrast-900));\n    --_navbar-border-color: var(--navbar-border-color, var(--color-divider));\n    --_navbar-shadow: var(--navbar-shadow, var(--shadow-md));\n    --_navbar-radius: var(--navbar-radius, var(--rounded-lg));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    color: var(--_navbar-color);\n  }\n\n  :host([data-mode='sticky']) {\n    position: sticky;\n    top: 0;\n    z-index: var(--z-sticky);\n  }\n\n  :host([data-mode='floating']) {\n    position: fixed;\n    inset-inline: var(--_navbar-offset);\n    top: var(--_navbar-offset);\n    z-index: var(--z-sticky);\n  }\n\n  /* Preview mode: use absolute positioning so component stays within container bounds */\n  :host([data-preview-mode][data-mode='floating']) {\n    position: absolute;\n    inset-inline: var(--_navbar-offset);\n    top: auto;\n  }\n\n  :host([floating][sticky][data-scrolled]) {\n    inset-inline: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  :host([data-preview-mode][floating][sticky][data-scrolled]) {\n    position: absolute;\n    inset-inline: 0;\n    top: auto;\n    width: auto;\n  }\n\n  :host > nav {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .navbar {\n    box-sizing: border-box;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    min-height: var(--_navbar-height);\n    padding: var(--size-2) var(--size-4);\n    margin-inline: auto;\n    overflow: auto hidden;\n    color: inherit;\n    white-space: nowrap;\n    background: var(--_navbar-bg);\n    border-top: none;\n    border-right: none;\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: none;\n    border-radius: 0;\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal)\n    );\n  }\n\n  :host([data-mode='floating']) .navbar {\n    border-top: var(--border) solid var(--_navbar-border-color);\n    border-right: var(--border) solid var(--_navbar-border-color);\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--_navbar-radius);\n  }\n\n  :host([data-mode='sticky']) .navbar,\n  :host([floating][sticky][data-scrolled]) .navbar {\n    max-width: 100%;\n    border-inline: none;\n    border-radius: 0;\n  }\n\n  :host([data-mode-transitioning][data-mode='sticky']) .navbar {\n    animation: navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out);\n  }\n\n  :host([data-mode-transitioning][data-mode='floating']) .navbar {\n    animation: navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out);\n  }\n\n  .navbar-logo[hidden],\n  .navbar-start[hidden],\n  .navbar-center[hidden],\n  .navbar-end[hidden],\n  .navbar-persistent[hidden] {\n    display: none;\n  }\n\n  .navbar-logo,\n  .navbar-start,\n  .navbar-center,\n  .navbar-end,\n  .navbar-persistent {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  .navbar-logo {\n    flex: 0 0 auto;\n  }\n\n  .navbar-start {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n  }\n\n  .navbar-center {\n    display: flex;\n    flex: 0 1 auto;\n    gap: var(--size-1);\n    justify-content: flex-start;\n    min-width: 0;\n  }\n\n  .navbar-end {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  /* The persistent region stays in the bar through the mobile collapse; it owns the\n     right edge whenever the end region is not there to claim it. */\n  .navbar-persistent {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  .navbar-end:not([hidden]) + .navbar-persistent {\n    margin-inline-start: var(--size-1);\n  }\n\n  /* The mobile collapse hides the end region with display, not the hidden attribute :\n     reclaim the right edge for the persistent region there. */\n  :host([data-mobile]) .navbar-persistent {\n    margin-inline-start: auto;\n  }\n\n  .mobile-toggle {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-9);\n    height: var(--size-9);\n    padding: 0;\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    background: transparent;\n    border: var(--border) solid transparent;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .mobile-toggle:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-100);\n    border-color: var(--color-contrast-200);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .mobile-menu-panel {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: none;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    padding: var(--size-2);\n    margin-block-start: var(--size-2);\n    margin-inline: auto;\n    background: var(--_navbar-bg);\n    border: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transform-origin: top;\n    animation: navbar-mobile-in var(--transition-fast) var(--ease-out);\n  }\n\n  /* `:not([hidden])`: same reasoning as `.mobile-toggle` above: this panel's own `?hidden=`\n     binding (navbar.ts) already covers \"not mobile\" / \"menu closed\" / \"no mobile-menu content\",\n     but an unconditional `display: grid` here would still override that `[hidden]` for the \"no\n     content\" case specifically, since author styles always win over the UA stylesheet. */\n  :host([data-mobile][data-mobile-open]) .mobile-menu-panel:not([hidden]) {\n    display: grid;\n    gap: var(--size-1);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='floating']) .mobile-menu-panel {\n    margin-block-start: var(--size-1-5);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='sticky']) .mobile-menu-panel,\n  :host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel {\n    position: absolute;\n    inset-inline: 0;\n    top: 100%;\n    z-index: 2;\n    max-width: 100%;\n    margin: 0;\n    border-inline: none;\n    border-top: none;\n    border-radius: 0 0 var(--rounded-md) var(--rounded-md);\n  }\n\n  /* `:not([hidden])` matters: the component's own `?hidden=` binding (navbar.ts) hides this\n     button when there's neither `mobile-menu` slot content nor a `mobile-sidebar` target to\n     toggle. Without it, this rule's `display: inline-flex`: an author-stylesheet declaration :\n     unconditionally overrides the UA stylesheet's `[hidden] { display: none }`, since author\n     styles always win over UA styles regardless of selector specificity. That left the button\n     visibly clickable while toggling a `mobile-menu-panel` that stays hidden too (its own\n     `?hidden=` binding includes the same \"nothing to show\" check): clicking did nothing\n     visible at all. */\n  :host([data-mobile]) .mobile-toggle:not([hidden]) {\n    display: inline-flex;\n    order: -1;\n  }\n\n  :host([data-mobile]) .navbar-start,\n  :host([data-mobile]) .navbar-center,\n  :host([data-mobile]) .navbar-end {\n    display: none;\n  }\n\n  :host([data-mobile][data-mobile-open]) .navbar {\n    border-bottom-right-radius: var(--rounded-md);\n    border-bottom-left-radius: var(--rounded-md);\n  }\n\n  @starting-style {\n    .mobile-menu-panel {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  @keyframes navbar-mobile-in {\n    from {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes navbar-floating-to-sticky {\n    from {\n      opacity: 0.92;\n      transform: translateY(6px) scale(0.985);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes navbar-sticky-to-floating {\n    from {\n      opacity: 0.95;\n      transform: translateY(-2px) scale(1);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(0.99);\n    }\n  }\n\n  .item {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    min-height: var(--_touch-target, var(--size-9));\n    padding: var(--size-1-5) var(--size-2-5);\n    font-family: inherit;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--navbar-item-color, var(--color-contrast-700));\n    white-space: nowrap;\n    text-decoration: none;\n    appearance: none;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--navbar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--navbar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    color: var(--navbar-item-active-color, var(--color-primary));\n    background: var(--navbar-item-active-bg, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--color-contrast-400);\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: transparent;\n  }\n\n  .item-icon,\n  .item-end {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .item-label {\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  /* Icon-only items (no visible label: name conveyed via aria-label) hide the empty label\n     region so it stops reserving a `gap` slot next to the icon, and switch to compact,\n     symmetric padding instead of the icon+label layout's wider horizontal padding. Without\n     this, an icon-only item ends up lopsided: too much horizontal space around the icon plus\n     a phantom gap left over for a label that never renders. */\n  :host([icon-only]) .item-label {\n    display: none;\n  }\n\n  :host([icon-only]) .item {\n    padding: var(--size-1-5);\n  }\n\n  :host([navbar-mobile]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([navbar-mobile]) .item {\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='flat']) {\n    --_navbar-bg: var(--navbar-bg, color-mix(in oklch, var(--color-canvas) 88%, transparent));\n    --_navbar-shadow: none;\n  }\n\n  :host([variant='bordered']) {\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 32%, transparent);\n  }\n\n  :host([variant='outline']) {\n    --_navbar-bg: var(--navbar-bg, transparent);\n    --_navbar-shadow: none;\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 40%, transparent);\n  }\n\n  :host([color]) {\n    --_navbar-border-color: color-mix(in oklch, var(--_theme-border) 30%, transparent);\n  }\n}\n\n@media (width <= 768px) {\n  @layer refine.base {\n    :host([data-mode='floating']) {\n      inset-inline: var(--size-2);\n      top: var(--size-2);\n    }\n\n    :host([floating][sticky][data-scrolled]) {\n      inset-inline: 0;\n      top: 0;\n    }\n  }\n}\n"],"mappings":""}

package/dist/layout/navbar/navbar.d.ts

@@ -63,7 +63,7 @@ export type OreNavbarItemProps = {
     /** Link target URL. Renders an anchor when provided. */
     href?: string;
     /**
-     * Icon-only mode — hides the (empty) label region and switches to compact, symmetric
+     * Icon-only mode: hides the (empty) label region and switches to compact, symmetric
      * padding instead of the icon+label layout's wider horizontal padding. Set this whenever
      * the default slot is intentionally left empty (name conveyed via `aria-label` instead),
      * otherwise the empty label still reserves its inter-element gap and the item ends up
@@ -76,7 +76,7 @@ export type OreNavbarItemProps = {
     target?: string;
 };
 /**
- * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.
+ * `ore-navbar`: Responsive navigation with sticky/floating modes and a mobile overflow panel.
  *
  * @element ore-navbar
  * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot
@@ -142,7 +142,7 @@ export type OreNavbarItemProps = {
  */
 export declare const NAVBAR_TAG: "ore-navbar";
 /**
- * `ore-navbar-item` — Navigation item for navbar slots.
+ * `ore-navbar-item`: Navigation item for navbar slots.
  *
  * Renders as an anchor when `href` is provided and item is not disabled.
  *

package/dist/layout/sidebar/sidebar-item.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar-item.css?inline"],"sourcesContent":["/*\n * Simplified and unified sidebar-item CSS:\n * - Unified badge overlay logic\n * - Grouped collapsed mode rules\n * - Combined state rules (active, disabled, hover, focus)\n * - Clarified selectors for maintainability\n */\n\n@layer refine.base {\n  :host {\n    display: block;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .item {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2);\n    font-family: inherit;\n    font-size: var(--sidebar-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    background: transparent;\n    border: 0;\n    border-radius: var(--rounded-lg);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  a.item {\n    text-decoration: none;\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    font-weight: var(--font-semibold);\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  :host([active]) .item::before {\n    display: none;\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: none;\n    opacity: 1;\n  }\n\n  :host([disabled]) .item-icon {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n  }\n\n  .item-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    margin: 0 auto;\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .item-end {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    transition: opacity var(--transition-fast);\n  }\n\n  /* Collapsed sidebar: hide label text, adjust layout, overlay badge */\n  :host([sidebar-collapsed]) .item,\n  :host([sidebar-collapsed]) .item-icon {\n    position: relative;\n  }\n\n  :host([sidebar-collapsed]) .item-label {\n    width: 0;\n    overflow: hidden;\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host([sidebar-collapsed]) .item {\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    min-height: 100%;\n    padding: 0;\n  }\n\n  :host([sidebar-collapsed]) .item::before {\n    inset-block: var(--size-2);\n  }\n\n  :host([sidebar-collapsed]) .item-icon {\n    width: var(--size-7);\n    height: var(--size-7);\n    padding: var(--size-1-5);\n    font-size: 1.5em;\n  }\n\n  :host([sidebar-collapsed][active]) .item {\n    background: none;\n  }\n\n  :host([sidebar-collapsed]) .item:hover {\n    background: none;\n  }\n\n  :host([sidebar-collapsed][active]) .item-icon {\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n    border-radius: var(--rounded-full);\n  }\n\n  :host([sidebar-collapsed]) .item-icon:hover {\n    background: var(--color-contrast-100);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Unified badge overlay logic for collapsed mode */\n  :host([sidebar-collapsed]) .item-end,\n  :host([sidebar-collapsed]) .item-icon .group-badge,\n  :host([sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    position: absolute;\n    right: 0;\n    bottom: calc(var(--size-2) * -1);\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 1.25em;\n    min-height: 1.25em;\n    pointer-events: auto;\n    opacity: 1;\n    transform: translate(40%, -40%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    right: auto;\n    left: 0;\n    transform: translate(-40%, -40%);\n  }\n\n  :host([sidebar-collapsed]) .item-end .group-badge,\n  :host([sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    position: absolute;\n    top: 50%;\n    right: calc(var(--size-0-5) * -1);\n    z-index: 1;\n    transform: translateY(-50%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-end ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    right: auto;\n    left: var(--size-2);\n  }\n\n  /* The bottom tab bar (`.bottom-bar` in sidebar.ts) renders its own promoted-item\n     buttons from the same data — the original <ore-sidebar-item> stays inside the\n     (visually off-screen while closed) <nav>, so it must be fully hidden here to\n     avoid a focusable/AT-visible duplicate of the bottom-bar entry. */\n  :host([sidebar-bottom-nav]) {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"sidebar-item.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar-item.css?inline"],"sourcesContent":["/*\n * Simplified and unified sidebar-item CSS:\n * - Unified badge overlay logic\n * - Grouped collapsed mode rules\n * - Combined state rules (active, disabled, hover, focus)\n * - Clarified selectors for maintainability\n */\n\n@layer refine.base {\n  :host {\n    display: block;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .item {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2);\n    font-family: inherit;\n    font-size: var(--sidebar-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    background: transparent;\n    border: 0;\n    border-radius: var(--rounded-lg);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  a.item {\n    text-decoration: none;\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    font-weight: var(--font-semibold);\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  :host([active]) .item::before {\n    display: none;\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: none;\n    opacity: 1;\n  }\n\n  :host([disabled]) .item-icon {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n  }\n\n  .item-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    margin: 0 auto;\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .item-end {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    transition: opacity var(--transition-fast);\n  }\n\n  /* Collapsed sidebar: hide label text, adjust layout, overlay badge */\n  :host([sidebar-collapsed]) .item,\n  :host([sidebar-collapsed]) .item-icon {\n    position: relative;\n  }\n\n  :host([sidebar-collapsed]) .item-label {\n    width: 0;\n    overflow: hidden;\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host([sidebar-collapsed]) .item {\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    min-height: 100%;\n    padding: 0;\n  }\n\n  :host([sidebar-collapsed]) .item::before {\n    inset-block: var(--size-2);\n  }\n\n  :host([sidebar-collapsed]) .item-icon {\n    width: var(--size-7);\n    height: var(--size-7);\n    padding: var(--size-1-5);\n    font-size: 1.5em;\n  }\n\n  :host([sidebar-collapsed][active]) .item {\n    background: none;\n  }\n\n  :host([sidebar-collapsed]) .item:hover {\n    background: none;\n  }\n\n  :host([sidebar-collapsed][active]) .item-icon {\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n    border-radius: var(--rounded-full);\n  }\n\n  :host([sidebar-collapsed]) .item-icon:hover {\n    background: var(--color-contrast-100);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Unified badge overlay logic for collapsed mode */\n  :host([sidebar-collapsed]) .item-end,\n  :host([sidebar-collapsed]) .item-icon .group-badge,\n  :host([sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    position: absolute;\n    right: 0;\n    bottom: calc(var(--size-2) * -1);\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 1.25em;\n    min-height: 1.25em;\n    pointer-events: auto;\n    opacity: 1;\n    transform: translate(40%, -40%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    right: auto;\n    left: 0;\n    transform: translate(-40%, -40%);\n  }\n\n  :host([sidebar-collapsed]) .item-end .group-badge,\n  :host([sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    position: absolute;\n    top: 50%;\n    right: calc(var(--size-0-5) * -1);\n    z-index: 1;\n    transform: translateY(-50%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-end ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    right: auto;\n    left: var(--size-2);\n  }\n\n  /* The bottom tab bar (`.bottom-bar` in sidebar.ts) renders its own promoted-item\n     buttons from the same data: the original <ore-sidebar-item> stays inside the\n     (visually off-screen while closed) <nav>, so it must be fully hidden here to\n     avoid a focusable/AT-visible duplicate of the bottom-bar entry. */\n  :host([sidebar-bottom-nav]) {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/layout/sidebar/sidebar-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.css.js","names":[],"sources":["../../../src/layout/sidebar/sidebar-item.css?inline"],"sourcesContent":["/*\n * Simplified and unified sidebar-item CSS:\n * - Unified badge overlay logic\n * - Grouped collapsed mode rules\n * - Combined state rules (active, disabled, hover, focus)\n * - Clarified selectors for maintainability\n */\n\n@layer refine.base {\n  :host {\n    display: block;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .item {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2);\n    font-family: inherit;\n    font-size: var(--sidebar-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    background: transparent;\n    border: 0;\n    border-radius: var(--rounded-lg);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  a.item {\n    text-decoration: none;\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    font-weight: var(--font-semibold);\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  :host([active]) .item::before {\n    display: none;\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: none;\n    opacity: 1;\n  }\n\n  :host([disabled]) .item-icon {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n  }\n\n  .item-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    margin: 0 auto;\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .item-end {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    transition: opacity var(--transition-fast);\n  }\n\n  /* Collapsed sidebar: hide label text, adjust layout, overlay badge */\n  :host([sidebar-collapsed]) .item,\n  :host([sidebar-collapsed]) .item-icon {\n    position: relative;\n  }\n\n  :host([sidebar-collapsed]) .item-label {\n    width: 0;\n    overflow: hidden;\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host([sidebar-collapsed]) .item {\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    min-height: 100%;\n    padding: 0;\n  }\n\n  :host([sidebar-collapsed]) .item::before {\n    inset-block: var(--size-2);\n  }\n\n  :host([sidebar-collapsed]) .item-icon {\n    width: var(--size-7);\n    height: var(--size-7);\n    padding: var(--size-1-5);\n    font-size: 1.5em;\n  }\n\n  :host([sidebar-collapsed][active]) .item {\n    background: none;\n  }\n\n  :host([sidebar-collapsed]) .item:hover {\n    background: none;\n  }\n\n  :host([sidebar-collapsed][active]) .item-icon {\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n    border-radius: var(--rounded-full);\n  }\n\n  :host([sidebar-collapsed]) .item-icon:hover {\n    background: var(--color-contrast-100);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Unified badge overlay logic for collapsed mode */\n  :host([sidebar-collapsed]) .item-end,\n  :host([sidebar-collapsed]) .item-icon .group-badge,\n  :host([sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    position: absolute;\n    right: 0;\n    bottom: calc(var(--size-2) * -1);\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 1.25em;\n    min-height: 1.25em;\n    pointer-events: auto;\n    opacity: 1;\n    transform: translate(40%, -40%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    right: auto;\n    left: 0;\n    transform: translate(-40%, -40%);\n  }\n\n  :host([sidebar-collapsed]) .item-end .group-badge,\n  :host([sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    position: absolute;\n    top: 50%;\n    right: calc(var(--size-0-5) * -1);\n    z-index: 1;\n    transform: translateY(-50%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-end ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    right: auto;\n    left: var(--size-2);\n  }\n\n  /* The bottom tab bar (`.bottom-bar` in sidebar.ts) renders its own promoted-item\n     buttons from the same data — the original <ore-sidebar-item> stays inside the\n     (visually off-screen while closed) <nav>, so it must be fully hidden here to\n     avoid a focusable/AT-visible duplicate of the bottom-bar entry. */\n  :host([sidebar-bottom-nav]) {\n    display: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"sidebar-item.css.js","names":[],"sources":["../../../src/layout/sidebar/sidebar-item.css?inline"],"sourcesContent":["/*\n * Simplified and unified sidebar-item CSS:\n * - Unified badge overlay logic\n * - Grouped collapsed mode rules\n * - Combined state rules (active, disabled, hover, focus)\n * - Clarified selectors for maintainability\n */\n\n@layer refine.base {\n  :host {\n    display: block;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .item {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2);\n    font-family: inherit;\n    font-size: var(--sidebar-item-font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    background: transparent;\n    border: 0;\n    border-radius: var(--rounded-lg);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  a.item {\n    text-decoration: none;\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    font-weight: var(--font-semibold);\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  :host([active]) .item::before {\n    display: none;\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: none;\n    opacity: 1;\n  }\n\n  :host([disabled]) .item-icon {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-300));\n  }\n\n  .item-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n    margin: 0 auto;\n  }\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .item-end {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    transition: opacity var(--transition-fast);\n  }\n\n  /* Collapsed sidebar: hide label text, adjust layout, overlay badge */\n  :host([sidebar-collapsed]) .item,\n  :host([sidebar-collapsed]) .item-icon {\n    position: relative;\n  }\n\n  :host([sidebar-collapsed]) .item-label {\n    width: 0;\n    overflow: hidden;\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host([sidebar-collapsed]) .item {\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    min-height: 100%;\n    padding: 0;\n  }\n\n  :host([sidebar-collapsed]) .item::before {\n    inset-block: var(--size-2);\n  }\n\n  :host([sidebar-collapsed]) .item-icon {\n    width: var(--size-7);\n    height: var(--size-7);\n    padding: var(--size-1-5);\n    font-size: 1.5em;\n  }\n\n  :host([sidebar-collapsed][active]) .item {\n    background: none;\n  }\n\n  :host([sidebar-collapsed]) .item:hover {\n    background: none;\n  }\n\n  :host([sidebar-collapsed][active]) .item-icon {\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n    border-radius: var(--rounded-full);\n  }\n\n  :host([sidebar-collapsed]) .item-icon:hover {\n    background: var(--color-contrast-100);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Unified badge overlay logic for collapsed mode */\n  :host([sidebar-collapsed]) .item-end,\n  :host([sidebar-collapsed]) .item-icon .group-badge,\n  :host([sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    position: absolute;\n    right: 0;\n    bottom: calc(var(--size-2) * -1);\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 1.25em;\n    min-height: 1.25em;\n    pointer-events: auto;\n    opacity: 1;\n    transform: translate(40%, -40%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-icon ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-icon ::slotted([slot='end']) {\n    right: auto;\n    left: 0;\n    transform: translate(-40%, -40%);\n  }\n\n  :host([sidebar-collapsed]) .item-end .group-badge,\n  :host([sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    position: absolute;\n    top: 50%;\n    right: calc(var(--size-0-5) * -1);\n    z-index: 1;\n    transform: translateY(-50%);\n  }\n\n  :host([dir='rtl'][sidebar-collapsed]) .item-end .group-badge,\n  :host([dir='rtl'][sidebar-collapsed]) .item-end ::slotted([slot='end']),\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end .group-badge,\n  :host(:dir(rtl)[sidebar-collapsed]) .item-end ::slotted([slot='end']) {\n    right: auto;\n    left: var(--size-2);\n  }\n\n  /* The bottom tab bar (`.bottom-bar` in sidebar.ts) renders its own promoted-item\n     buttons from the same data: the original <ore-sidebar-item> stays inside the\n     (visually off-screen while closed) <nav>, so it must be fully hidden here to\n     avoid a focusable/AT-visible duplicate of the bottom-bar entry. */\n  :host([sidebar-bottom-nav]) {\n    display: none;\n  }\n}\n"],"mappings":""}