@vielzeug/refine 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion-item.cjs +1 -1
- package/dist/accordion-item.cjs.map +1 -1
- package/dist/accordion-item.js +1 -1
- package/dist/accordion-item.js.map +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.cjs.map +1 -1
- package/dist/card.js +1 -1
- package/dist/card.js.map +1 -1
- package/dist/chat-message.cjs +1 -1
- package/dist/chat-message.cjs.map +1 -1
- package/dist/chat-message.js +1 -1
- package/dist/chat-message.js.map +1 -1
- package/dist/combobox.cjs +9 -7
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +55 -48
- package/dist/combobox.js.map +1 -1
- package/dist/content/index.d.ts +2 -0
- package/dist/content/index.d.ts.map +1 -1
- package/dist/content/list/list-item.css.cjs +1 -1
- package/dist/content/list/list-item.css.cjs.map +1 -1
- package/dist/content/list/list-item.css.js +1 -1
- package/dist/content/list/list-item.css.js.map +1 -1
- package/dist/content/list/list-item.d.ts +9 -0
- package/dist/content/list/list-item.d.ts.map +1 -1
- package/dist/content/stats/stats.css.cjs +2 -0
- package/dist/content/stats/stats.css.cjs.map +1 -0
- package/dist/content/stats/stats.css.js +6 -0
- package/dist/content/stats/stats.css.js.map +1 -0
- package/dist/content/stats/stats.d.ts +72 -0
- package/dist/content/stats/stats.d.ts.map +1 -0
- package/dist/core/auto-resize.cjs +1 -1
- package/dist/core/auto-resize.cjs.map +1 -1
- package/dist/core/auto-resize.js +1 -1
- package/dist/core/auto-resize.js.map +1 -1
- package/dist/custom-elements.json +5087 -4791
- package/dist/datagrid.cjs +199 -179
- package/dist/datagrid.cjs.map +1 -1
- package/dist/datagrid.js +435 -321
- package/dist/datagrid.js.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js.map +1 -1
- package/dist/disclosure/tab-item/tab-item.d.ts +3 -0
- package/dist/disclosure/tab-item/tab-item.d.ts.map +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs.map +1 -1
- package/dist/disclosure/tabs/tabs.css.js +1 -1
- package/dist/disclosure/tabs/tabs.css.js.map +1 -1
- package/dist/disclosure/tabs/tabs.d.ts +4 -0
- package/dist/disclosure/tabs/tabs.d.ts.map +1 -1
- package/dist/frameworks/elements.d.ts +2 -1
- package/dist/icon.cjs +1 -1
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.js +1 -1
- package/dist/icon.js.map +1 -1
- package/dist/input.cjs +5 -4
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +14 -8
- package/dist/input.js.map +1 -1
- package/dist/inputs/combobox/combobox-options.cjs +1 -1
- package/dist/inputs/combobox/combobox-options.cjs.map +1 -1
- package/dist/inputs/combobox/combobox-options.d.ts.map +1 -1
- package/dist/inputs/combobox/combobox-options.js +1 -0
- package/dist/inputs/combobox/combobox-options.js.map +1 -1
- package/dist/inputs/combobox/combobox.css.cjs +1 -1
- package/dist/inputs/combobox/combobox.css.cjs.map +1 -1
- package/dist/inputs/combobox/combobox.css.js +1 -1
- package/dist/inputs/combobox/combobox.css.js.map +1 -1
- package/dist/inputs/combobox/combobox.d.ts +1 -0
- package/dist/inputs/combobox/combobox.d.ts.map +1 -1
- package/dist/inputs/combobox/combobox.types.d.ts +7 -0
- package/dist/inputs/combobox/combobox.types.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.cjs +1 -1
- package/dist/inputs/datagrid/datagrid-model.cjs.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.d.ts +17 -3
- package/dist/inputs/datagrid/datagrid-model.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.js +93 -70
- package/dist/inputs/datagrid/datagrid-model.js.map +1 -1
- package/dist/inputs/datagrid/datagrid.css.cjs +1 -1
- package/dist/inputs/datagrid/datagrid.css.cjs.map +1 -1
- package/dist/inputs/datagrid/datagrid.css.js +1 -1
- package/dist/inputs/datagrid/datagrid.css.js.map +1 -1
- package/dist/inputs/datagrid/datagrid.d.ts +54 -4
- package/dist/inputs/datagrid/datagrid.d.ts.map +1 -1
- package/dist/inputs/index.d.ts +1 -1
- package/dist/inputs/index.d.ts.map +1 -1
- package/dist/inputs/input/input.css.cjs +1 -1
- package/dist/inputs/input/input.css.cjs.map +1 -1
- package/dist/inputs/input/input.css.js +1 -1
- package/dist/inputs/input/input.css.js.map +1 -1
- package/dist/inputs/input/input.d.ts +3 -0
- package/dist/inputs/input/input.d.ts.map +1 -1
- package/dist/inputs/select/select.css.cjs +1 -1
- package/dist/inputs/select/select.css.cjs.map +1 -1
- package/dist/inputs/select/select.css.js +1 -1
- package/dist/inputs/select/select.css.js.map +1 -1
- package/dist/inputs/select/select.d.ts +5 -0
- package/dist/inputs/select/select.d.ts.map +1 -1
- package/dist/layout/navbar/navbar.d.ts +2 -0
- package/dist/layout/navbar/navbar.d.ts.map +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs.map +1 -1
- package/dist/layout/sidebar/sidebar.css.js +1 -1
- package/dist/layout/sidebar/sidebar.css.js.map +1 -1
- package/dist/layout/sidebar/sidebar.d.ts +8 -0
- package/dist/layout/sidebar/sidebar.d.ts.map +1 -1
- package/dist/list-item.cjs +6 -5
- package/dist/list-item.cjs.map +1 -1
- package/dist/list-item.js +23 -17
- package/dist/list-item.js.map +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.cjs.map +1 -1
- package/dist/list.js +1 -1
- package/dist/list.js.map +1 -1
- package/dist/menu.cjs +1 -1
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +1 -1
- package/dist/menu.js.map +1 -1
- package/dist/navbar.cjs +2 -2
- package/dist/navbar.cjs.map +1 -1
- package/dist/navbar.js +7 -5
- package/dist/navbar.js.map +1 -1
- package/dist/navigation-menu.cjs +1 -1
- package/dist/navigation-menu.cjs.map +1 -1
- package/dist/navigation-menu.js +1 -1
- package/dist/navigation-menu.js.map +1 -1
- package/dist/overlay/popover/popover.css.cjs +1 -1
- package/dist/overlay/popover/popover.css.cjs.map +1 -1
- package/dist/overlay/popover/popover.css.js +1 -1
- package/dist/overlay/popover/popover.css.js.map +1 -1
- package/dist/overlay/popover/popover.d.ts +1 -0
- package/dist/overlay/popover/popover.d.ts.map +1 -1
- package/dist/overlay/shared/use-dialog.cjs +1 -1
- package/dist/overlay/shared/use-dialog.cjs.map +1 -1
- package/dist/overlay/shared/use-dialog.js +1 -1
- package/dist/overlay/shared/use-dialog.js.map +1 -1
- package/dist/overlay/shared/use-floating-trigger.cjs +1 -1
- package/dist/overlay/shared/use-floating-trigger.cjs.map +1 -1
- package/dist/overlay/shared/use-floating-trigger.js +1 -1
- package/dist/overlay/shared/use-floating-trigger.js.map +1 -1
- package/dist/popover.cjs.map +1 -1
- package/dist/popover.js.map +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +10 -8
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs +1 -1
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js +1 -1
- package/dist/rating.js.map +1 -1
- package/dist/refine.cjs +372 -323
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +372 -323
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +402 -353
- package/dist/refine.js.map +1 -1
- package/dist/select.cjs +16 -14
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +118 -112
- package/dist/select.js.map +1 -1
- package/dist/sidebar.cjs +28 -23
- package/dist/sidebar.cjs.map +1 -1
- package/dist/sidebar.js +112 -77
- package/dist/sidebar.js.map +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.js +1 -1
- package/dist/slider.js.map +1 -1
- package/dist/stats.cjs +18 -0
- package/dist/stats.cjs.map +1 -0
- package/dist/stats.js +88 -0
- package/dist/stats.js.map +1 -0
- package/dist/stepper.cjs +1 -1
- package/dist/stepper.cjs.map +1 -1
- package/dist/stepper.js +1 -1
- package/dist/stepper.js.map +1 -1
- package/dist/styles/mixins/animation.css.cjs +2 -0
- package/dist/styles/mixins/animation.css.cjs.map +1 -1
- package/dist/styles/mixins/animation.css.d.ts.map +1 -1
- package/dist/styles/mixins/animation.css.js +2 -0
- package/dist/styles/mixins/animation.css.js.map +1 -1
- package/dist/tab-item.cjs +1 -1
- package/dist/tab-item.cjs.map +1 -1
- package/dist/tab-item.js +3 -2
- package/dist/tab-item.js.map +1 -1
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.cjs.map +1 -1
- package/dist/tabs.js +3 -1
- package/dist/tabs.js.map +1 -1
- package/dist/toast.cjs.map +1 -1
- package/dist/toast.js.map +1 -1
- package/package.json +64 -56
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.css.js","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n /* ========================================\n Base Styles & Defaults\n ======================================== */\n\n :host {\n --_font-size: var(--input-font-size, var(--text-sm));\n --_gap: var(--input-gap, var(--size-2));\n --_field-height: var(--input-height, var(--size-10));\n --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n --_label-block-inset: var(--input-label-block-inset, var(--size-2));\n --_label-inset: var(--input-label-inset, var(--size-3));\n --_radius: var(--input-radius, var(--rounded-lg));\n --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n --_bg: var(--input-bg, var(--color-contrast-100));\n --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n display: inline-flex;\n flex-direction: column;\n align-items: stretch;\n min-width: var(--input-min-width, 12rem);\n }\n\n .input-wrapper {\n display: flex;\n flex-direction: column;\n gap: 0;\n width: 100%;\n }\n\n .field {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 0;\n align-items: stretch;\n justify-content: center;\n height: var(--_field-height);\n min-height: var(--_field-height);\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: var(\n --_motion-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 /* Expand height to fit inset label + input row */\n .input-wrapper:has(.label:not([hidden])) .field {\n height: auto;\n }\n\n /* Outside placement: label is above the field (natural flow) */\n\n /* Inset placement (default): label appears inside the field border */\n :host(:not([label-placement='outside'])) .input-wrapper {\n position: relative;\n }\n\n :host(:not([label-placement='outside'])) .label {\n position: absolute;\n inset-block-start: var(--_label-block-inset);\n inset-inline-start: var(--_label-inset);\n z-index: 1;\n pointer-events: none;\n }\n\n :host(:not([label-placement='outside'])) .input-wrapper:has(.label:not([hidden])) .field {\n padding-block-start: calc(var(--_label-block-inset) + 1lh + 2px);\n }\n\n .input-row {\n display: flex;\n flex: 1;\n gap: var(--_gap);\n align-items: center;\n }\n\n /* ========================================\n Label Styles\n ======================================== */\n\n .label,\n label.label {\n margin-bottom: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\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 white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition: var(--_motion-transition, color var(--transition-fast));\n }\n\n /* Outside placement: label moves outside the field via CSS */\n :host([label-placement='outside']) .label,\n :host([label-placement='outside']) label.label {\n order: -1;\n font-size: var(--text-xs);\n line-height: var(--leading-loose);\n }\n\n /* ========================================\n Helper Text\n ======================================== */\n\n .helper-text {\n padding-inline: 2px;\n margin-top: var(--size-1-5);\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 overflow-wrap: anywhere;\n }\n\n .helper-text[hidden] {\n display: none;\n }\n\n /* ========================================\n Slotted Prefix/Suffix Icons\n ======================================== */\n\n ::slotted(svg) {\n flex-shrink: 0;\n width: var(--_icon-size, var(--leading-6));\n height: var(--_icon-size, var(--leading-6));\n }\n}\n\n@layer refine.overrides {\n /* ========================================\n Input Element\n ======================================== */\n\n input {\n flex: 1;\n min-width: 0;\n font: inherit;\n font-size: var(--_font-size);\n line-height: var(--leading-normal);\n\n /* No all: unset needed - reset layer handles it */\n color: var(--color-contrast-900);\n outline: none;\n background: transparent;\n border: none;\n }\n\n input::placeholder {\n color: var(--_placeholder);\n transition: color var(--transition-fast);\n }\n\n input:focus-visible {\n outline: none;\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 color: var(--_theme-focus);\n }\n\n :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n color: var(--_theme-focus);\n }\n\n /* ========================================\n Clear button\n ======================================== */\n\n .clear-btn {\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-5);\n min-width: var(--_touch-target);\n height: var(--size-5);\n min-height: var(--_touch-target);\n padding: 0;\n color: var(--color-contrast-500);\n cursor: pointer;\n background: transparent;\n border: none;\n border-radius: var(--rounded-sm);\n transition: var(--_motion-transition, color var(--transition-fast));\n }\n\n .clear-btn:hover {\n color: var(--color-contrast-900);\n }\n\n .clear-btn:focus-visible {\n outline: var(--border-2) solid var(--_theme-focus);\n outline-offset: var(--border);\n }\n\n :host([clearable]) .clear-btn {\n display: flex;\n }\n\n :host([clearable]:not([has-value])) .clear-btn {\n visibility: hidden;\n pointer-events: none;\n }\n\n /* ========================================\n Password visibility toggle\n ======================================== */\n\n .pwd-toggle-btn {\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-5);\n min-width: var(--_touch-target);\n height: var(--size-5);\n min-height: var(--_touch-target);\n padding: 0;\n color: var(--color-contrast-500);\n cursor: pointer;\n background: transparent;\n border: none;\n border-radius: var(--rounded-sm);\n transition: var(--_motion-transition, color var(--transition-fast));\n }\n\n .pwd-toggle-btn:hover {\n color: var(--color-contrast-900);\n }\n\n .pwd-toggle-btn:focus-visible {\n outline: var(--border-2) solid var(--_theme-focus);\n outline-offset: var(--border);\n }\n\n :host([type='password']) .pwd-toggle-btn {\n display: flex;\n }\n\n /* ========================================\n Character counter\n ======================================== */\n\n .char-counter {\n padding-inline: 2px;\n font-size: var(--text-xs);\n line-height: var(--leading-tight);\n color: var(--color-contrast-400);\n text-align: end;\n white-space: nowrap;\n }\n\n .char-counter[data-near-limit] {\n color: var(--color-warning, #f59e0b);\n }\n\n .char-counter[data-at-limit] {\n color: var(--color-error);\n }\n\n /* ========================================\n Error State\n ======================================== */\n\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 .helper-text[role='alert'] {\n color: var(--color-error);\n }\n\n /* ========================================\n Success State (Signal 04)\n ======================================== */\n\n :host([success]) .field {\n border-color: var(--color-success);\n }\n\n /* ========================================\n Status Icon (Signals 03/04: error/success — never color alone)\n ======================================== */\n\n .status-icon {\n display: none;\n flex-shrink: 0;\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 /* ========================================\n Loading Spinner (Signal 06)\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 flex-shrink: 0;\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/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', tokenPrefix: 'input' })` in `input.ts`'s `styles`\n * array — shared with `ore-textarea`/`ore-message-composer` instead of hand-duplicated across\n * all three (see the mixin's own doc comment for what it covers and why). `ore-input`'s extra\n * `text` variant (below) is not part of that shared set, so it keeps its own block here.\n */\n@layer refine.variants {\n /* Text — underline style */\n :host([variant='text']) {\n --_bg: var(--input-bg, transparent);\n --_border-color: var(--input-border-color, var(--color-contrast-300));\n }\n\n :host([variant='text']) .field {\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n\n :host([variant='text']) .field:focus-within {\n box-shadow: none;\n }\n\n /*\n * Focus/error/success `box-shadow` on `.field` — kept here in `refine.variants` (alongside\n * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n * `refine.overrides`, so normal specificity decides the winner. Cascade layers beat\n * specificity outright, so a `refine.overrides` box-shadow always lost to every variant's\n * unconditional rest-state `box-shadow`, focused/error/success or not — the same bug class\n * fixed for `ore-otp-input`'s focus ring.\n */\n :host(:not([disabled], [variant='text'], [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@layer refine.utilities {\n /* Full width */\n :host([fullwidth]) {\n width: 100%;\n }\n}\n\n/* ========================================\n Disabled State (Signal 05) — 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.\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]) input {\n color: var(--color-contrast-400);\n}\n\n:host([disabled]) input::placeholder {\n color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n color: var(--color-contrast-400);\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"input.css.js","names":[],"sources":["../../../src/inputs/input/input.css?inline"],"sourcesContent":["@layer refine.base {\n /* ========================================\n Base Styles & Defaults\n ======================================== */\n\n :host {\n --_font-size: var(--input-font-size, var(--text-sm));\n --_gap: var(--input-gap, var(--size-2));\n --_field-height: var(--input-height, var(--size-10));\n --_padding: var(--input-padding, var(--size-1-5) var(--size-3));\n --_label-block-inset: var(--input-label-block-inset, var(--size-2));\n --_label-inset: var(--input-label-inset, var(--size-3));\n --_radius: var(--input-radius, var(--rounded-lg));\n --_placeholder: var(--input-placeholder-color, var(--color-contrast-500));\n --_bg: var(--input-bg, var(--color-contrast-100));\n --_border-color: var(--input-border-color, var(--color-contrast-300));\n\n display: inline-flex;\n flex-direction: column;\n align-items: stretch;\n min-width: var(--input-min-width, 12rem);\n }\n\n .input-wrapper {\n display: flex;\n flex-direction: column;\n gap: 0;\n width: 100%;\n }\n\n .field {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 0;\n align-items: stretch;\n justify-content: center;\n height: var(--_field-height);\n min-height: var(--_field-height);\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: var(\n --_motion-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 /* Expand height to fit inset label + input row */\n .input-wrapper:has(.label:not([hidden])) .field {\n height: auto;\n }\n\n /* Outside placement: label is above the field (natural flow) */\n\n /* Inset placement (default): label appears inside the field border */\n :host(:not([label-placement='outside'])) .input-wrapper {\n position: relative;\n }\n\n :host(:not([label-placement='outside'])) .label {\n position: absolute;\n inset-block-start: var(--_label-block-inset);\n inset-inline-start: var(--_label-inset);\n z-index: 1;\n pointer-events: none;\n }\n\n :host(:not([label-placement='outside'])) .input-wrapper:has(.label:not([hidden])) .field {\n padding-block-start: calc(var(--_label-block-inset) + 1lh + 2px);\n }\n\n .input-row {\n display: flex;\n flex: 1;\n gap: var(--_gap);\n align-items: center;\n }\n\n /* ========================================\n Label Styles\n ======================================== */\n\n .label,\n label.label {\n margin-bottom: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\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 white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition: var(--_motion-transition, color var(--transition-fast));\n }\n\n /* Outside placement: label moves outside the field via CSS */\n :host([label-placement='outside']) .label,\n :host([label-placement='outside']) label.label {\n order: -1;\n font-size: var(--text-xs);\n line-height: var(--leading-loose);\n }\n\n /* ========================================\n Helper Text\n ======================================== */\n\n .helper-text {\n padding-inline: 2px;\n margin-top: var(--size-1-5);\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 overflow-wrap: anywhere;\n }\n\n .helper-text[hidden] {\n display: none;\n }\n\n /* ========================================\n Slotted Prefix/Suffix Icons\n ======================================== */\n\n ::slotted(svg) {\n flex-shrink: 0;\n width: var(--_icon-size, var(--leading-6));\n height: var(--_icon-size, var(--leading-6));\n }\n}\n\n@layer refine.overrides {\n /* ========================================\n Input Element\n ======================================== */\n\n input {\n flex: 1;\n min-width: 0;\n min-height: var(--size-6);\n font: inherit;\n font-size: var(--_font-size);\n line-height: var(--leading-normal);\n\n /* No all: unset needed - reset layer handles it */\n color: var(--color-contrast-900);\n outline: none;\n background: transparent;\n border: none;\n }\n\n input::placeholder {\n color: var(--_placeholder);\n transition: color var(--transition-fast);\n }\n\n input:focus-visible {\n outline: none;\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 color: var(--_theme-focus);\n }\n\n :host(:not([disabled])) .field:focus-within ::slotted([slot='prefix']),\n :host(:not([disabled])) .field:focus-within ::slotted([slot='suffix']) {\n color: var(--_theme-focus);\n }\n\n /* ========================================\n Clear button\n ======================================== */\n\n .clear-btn {\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-5);\n min-width: var(--_touch-target);\n height: var(--size-5);\n min-height: var(--_touch-target);\n padding: 0;\n color: var(--color-contrast-500);\n cursor: pointer;\n background: transparent;\n border: none;\n border-radius: var(--rounded-sm);\n transition: var(--_motion-transition, color var(--transition-fast));\n }\n\n .clear-btn:hover {\n color: var(--color-contrast-900);\n }\n\n .clear-btn:focus-visible {\n outline: var(--border-2) solid var(--_theme-focus);\n outline-offset: var(--border);\n }\n\n :host([clearable]) .clear-btn {\n display: flex;\n }\n\n :host([clearable]:not([has-value])) .clear-btn {\n visibility: hidden;\n pointer-events: none;\n }\n\n /* ========================================\n Password visibility toggle\n ======================================== */\n\n .pwd-toggle-btn {\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-5);\n min-width: var(--_touch-target);\n height: var(--size-5);\n min-height: var(--_touch-target);\n padding: 0;\n color: var(--color-contrast-500);\n cursor: pointer;\n background: transparent;\n border: none;\n border-radius: var(--rounded-sm);\n transition: var(--_motion-transition, color var(--transition-fast));\n }\n\n .pwd-toggle-btn:hover {\n color: var(--color-contrast-900);\n }\n\n .pwd-toggle-btn:focus-visible {\n outline: var(--border-2) solid var(--_theme-focus);\n outline-offset: var(--border);\n }\n\n :host([type='password']) .pwd-toggle-btn {\n display: flex;\n }\n\n /* ========================================\n Character counter\n ======================================== */\n\n .char-counter {\n padding-inline: 2px;\n font-size: var(--text-xs);\n line-height: var(--leading-tight);\n color: var(--color-contrast-400);\n text-align: end;\n white-space: nowrap;\n }\n\n .char-counter[data-near-limit] {\n color: var(--color-warning, #f59e0b);\n }\n\n .char-counter[data-at-limit] {\n color: var(--color-error);\n }\n\n /* ========================================\n Error State\n ======================================== */\n\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 .helper-text[role='alert'] {\n color: var(--color-error);\n }\n\n /* ========================================\n Success State (Signal 04)\n ======================================== */\n\n :host([success]) .field {\n border-color: var(--color-success);\n }\n\n /* ========================================\n Status Icon (Signals 03/04: error/success — never color alone)\n ======================================== */\n\n .status-icon {\n display: none;\n flex-shrink: 0;\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 /* ========================================\n Loading Spinner (Signal 06)\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 flex-shrink: 0;\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/*\n * The solid/flat/bordered/outline/ghost variant switch (previously here) now lives in\n * `fieldVariantMixin({ container: '.field', tokenPrefix: 'input' })` in `input.ts`'s `styles`\n * array — shared with `ore-textarea`/`ore-message-composer` instead of hand-duplicated across\n * all three (see the mixin's own doc comment for what it covers and why). `ore-input`'s extra\n * `text` variant (below) is not part of that shared set, so it keeps its own block here.\n */\n@layer refine.variants {\n /* Text — underline style */\n :host([variant='text']) {\n --_bg: var(--input-bg, transparent);\n --_border-color: var(--input-border-color, var(--color-contrast-300));\n }\n\n :host([variant='text']) .field {\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n\n :host([variant='text']) .field:focus-within {\n box-shadow: none;\n }\n\n /*\n * Focus/error/success `box-shadow` on `.field` — kept here in `refine.variants` (alongside\n * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n * `refine.overrides`, so normal specificity decides the winner. Cascade layers beat\n * specificity outright, so a `refine.overrides` box-shadow always lost to every variant's\n * unconditional rest-state `box-shadow`, focused/error/success or not — the same bug class\n * fixed for `ore-otp-input`'s focus ring.\n */\n :host(:not([disabled], [variant='text'], [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@layer refine.utilities {\n /* Full width */\n :host([fullwidth]) {\n width: 100%;\n }\n}\n\n/* ========================================\n Disabled State (Signal 05) — 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.\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]) input {\n color: var(--color-contrast-400);\n}\n\n:host([disabled]) input::placeholder {\n color: var(--color-contrast-300);\n}\n\n:host([disabled]) .label {\n color: var(--color-contrast-400);\n}\n"],"mappings":""}
|
|
@@ -7,6 +7,8 @@ export type OreInputEvents = {
|
|
|
7
7
|
input: InputEvent;
|
|
8
8
|
};
|
|
9
9
|
export type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {
|
|
10
|
+
/** Accessible name used when no visible label is rendered. */
|
|
11
|
+
'aria-label'?: string;
|
|
10
12
|
/** Autocomplete hint */
|
|
11
13
|
autocomplete?: string;
|
|
12
14
|
/** Show a clear (×) button when the field has a value */
|
|
@@ -40,6 +42,7 @@ export type OreInputProps = TextFieldProps<Exclude<VisualVariant, 'frost'>> & {
|
|
|
40
42
|
*
|
|
41
43
|
* @element ore-input
|
|
42
44
|
*
|
|
45
|
+
* @attr {string} aria-label - Accessible name used when no visible label is rendered
|
|
43
46
|
* @attr {string} label - Label text
|
|
44
47
|
* @attr {string} label-placement - Label placement: 'inset' | 'outside'
|
|
45
48
|
* @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AAgBjC,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IAC5E,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAiBF
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/inputs/input/input.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AAgBjC,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IAC5E,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACzF;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,eAAO,MAAM,SAAS,EAAG,WAAoB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`@layer refine.base{:host{min-width:var(--select-min-width,12rem);display:inline-block}:host([fullwidth]){width:100%;display:block}::slotted(option),::slotted(optgroup){display:none}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.chips-row{gap:var(--size-1);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.chips-row[hidden]{display:none}.trigger-suffix{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.trigger-icon{transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;margin:0;display:flex;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.dropdown:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-
|
|
1
|
+
var e=`@layer refine.base{:host{min-width:var(--select-min-width,12rem);display:inline-block}:host([fullwidth]){width:100%;display:block}::slotted(option),::slotted(optgroup){display:none}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.chips-row{gap:var(--size-1);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.chips-row[hidden]{display:none}.trigger-suffix{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.trigger-icon{transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;margin:0;display:flex;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.dropdown:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.disabled-reason:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check: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}.option-check: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}.option[data-selected] .option-check{opacity:1}.optgroup-label{padding:var(--size-1-5) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.dropdown-loading,.dropdown-empty{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-500);text-align:center}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=select.css.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.css.cjs","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n display: inline-block;\n min-width: var(--select-min-width, 12rem);\n }\n\n :host([fullwidth]) {\n display: block;\n width: 100%;\n }\n\n /* Hide native <option> elements — we render our own UI */\n ::slotted(option),\n ::slotted(optgroup) {\n display: none;\n }\n\n /* ore-input is readonly so pointer defaults to text — override to pointer.\n `width: 100%` matters just as much: `:host` is `display: inline-block`, which — unlike a\n flex/grid container with `align-items`/`justify-items: stretch` — never stretches its own\n children to fill its own box. Without this, `.trigger` (an `ore-input`, whose own `:host`\n only guarantees a 12rem *minimum*) stays shrink-wrapped to that minimum even when this\n select's own host has already been stretched wider by an ancestor grid/flex track — visibly\n narrower than a sibling field (e.g. `ore-number-input`) occupying the same-width track. */\n .trigger {\n width: 100%;\n cursor: pointer;\n }\n\n .trigger::part(input) {\n cursor: pointer;\n caret-color: transparent;\n user-select: none;\n }\n\n /* Chips slot inside ore-input prefix */\n .chips-row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--size-1);\n align-items: center;\n min-width: 0;\n }\n\n .chips-row[hidden] {\n display: none;\n }\n\n /* Suffix: loader (left) + chevron (right) */\n .trigger-suffix {\n display: flex;\n gap: var(--size-1);\n align-items: center;\n color: var(--color-contrast-500);\n }\n\n .trigger-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform var(--transition-fast);\n }\n\n :host([open]) .trigger-icon {\n transform: rotate(180deg);\n }\n\n .loader {\n display: none;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border: 2px solid currentcolor;\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n }\n\n /* 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 :host([loading]) .loader {\n display: inline-block;\n }\n\n /* ========================================\n Dropdown Listbox\n ======================================== */\n\n .dropdown {\n position: fixed;\n inset: 0 auto auto 0;\n z-index: var(--z-dropdown, 8000);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--size-0-5);\n max-height: 260px;\n padding: var(--size-1);\n margin: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n text-align: start;\n pointer-events: none;\n background: var(--color-canvas);\n border: var(--border) solid var(--color-contrast-200);\n border-radius: var(--_radius);\n box-shadow: var(--shadow-lg);\n\n /* Hidden by default */\n opacity: 0;\n backdrop-filter: blur(var(--blur-md));\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 .options-list {\n display: flex;\n flex-direction: column;\n gap: 0;\n }\n\n /* ========================================\n Option Items\n ======================================== */\n\n .option {\n display: flex;\n gap: var(--size-2);\n align-items: center;\n padding: var(--size-1-5) var(--size-2-5);\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n cursor: pointer;\n border-radius: var(--rounded-sm);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n /* Truncate long labels to keep option rows compact and readable. */\n .option > span:first-child {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .option:hover:not([data-disabled]) {\n background: var(--color-contrast-100);\n }\n\n .option[data-focused]:not([data-disabled]) {\n color: var(--_theme-base);\n background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n }\n\n .option[data-selected] {\n font-weight: var(--font-medium);\n color: var(--_theme-base);\n background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n }\n\n .option[data-selected][data-focused] {\n background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n }\n\n .option[data-disabled] {\n color: var(--color-contrast-
|
|
1
|
+
{"version":3,"file":"select.css.cjs","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n display: inline-block;\n min-width: var(--select-min-width, 12rem);\n }\n\n :host([fullwidth]) {\n display: block;\n width: 100%;\n }\n\n /* Hide native <option> elements — we render our own UI */\n ::slotted(option),\n ::slotted(optgroup) {\n display: none;\n }\n\n /* ore-input is readonly so pointer defaults to text — override to pointer.\n `width: 100%` matters just as much: `:host` is `display: inline-block`, which — unlike a\n flex/grid container with `align-items`/`justify-items: stretch` — never stretches its own\n children to fill its own box. Without this, `.trigger` (an `ore-input`, whose own `:host`\n only guarantees a 12rem *minimum*) stays shrink-wrapped to that minimum even when this\n select's own host has already been stretched wider by an ancestor grid/flex track — visibly\n narrower than a sibling field (e.g. `ore-number-input`) occupying the same-width track. */\n .trigger {\n width: 100%;\n cursor: pointer;\n }\n\n .trigger::part(input) {\n cursor: pointer;\n caret-color: transparent;\n user-select: none;\n }\n\n /* Chips slot inside ore-input prefix */\n .chips-row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--size-1);\n align-items: center;\n min-width: 0;\n }\n\n .chips-row[hidden] {\n display: none;\n }\n\n /* Suffix: loader (left) + chevron (right) */\n .trigger-suffix {\n display: flex;\n gap: var(--size-1);\n align-items: center;\n color: var(--color-contrast-500);\n }\n\n .trigger-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform var(--transition-fast);\n }\n\n :host([open]) .trigger-icon {\n transform: rotate(180deg);\n }\n\n .loader {\n display: none;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border: 2px solid currentcolor;\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n }\n\n /* 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 :host([loading]) .loader {\n display: inline-block;\n }\n\n /* ========================================\n Dropdown Listbox\n ======================================== */\n\n .dropdown {\n position: fixed;\n inset: 0 auto auto 0;\n z-index: var(--z-dropdown, 8000);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--size-0-5);\n max-height: 260px;\n padding: var(--size-1);\n margin: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n text-align: start;\n pointer-events: none;\n background: var(--color-canvas);\n border: var(--border) solid var(--color-contrast-200);\n border-radius: var(--_radius);\n box-shadow: var(--shadow-lg);\n\n /* Hidden by default */\n opacity: 0;\n backdrop-filter: blur(var(--blur-md));\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 .options-list {\n display: flex;\n flex-direction: column;\n gap: 0;\n }\n\n /* ========================================\n Option Items\n ======================================== */\n\n .option {\n display: flex;\n gap: var(--size-2);\n align-items: center;\n padding: var(--size-1-5) var(--size-2-5);\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n cursor: pointer;\n border-radius: var(--rounded-sm);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n /* Truncate long labels to keep option rows compact and readable. */\n .option > span:first-child {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .disabled-reason {\n flex: 0 1 45%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--text-xs);\n color: var(--text-color-tertiary);\n text-align: end;\n white-space: nowrap;\n }\n\n .option:hover:not([data-disabled]) {\n background: var(--color-contrast-100);\n }\n\n .option[data-focused]:not([data-disabled]) {\n color: var(--_theme-base);\n background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n }\n\n .option[data-selected] {\n font-weight: var(--font-medium);\n color: var(--_theme-base);\n background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n }\n\n .option[data-selected][data-focused] {\n background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n }\n\n .option[data-disabled] {\n color: var(--color-contrast-500);\n cursor: not-allowed;\n }\n\n .option-check {\n display: inline-flex;\n flex-shrink: 0;\n margin-inline-start: auto;\n color: var(--_theme-base);\n opacity: 0;\n transition: opacity var(--transition-fast);\n }\n\n .option[data-selected] .option-check {\n opacity: 1;\n }\n\n /* ========================================\n Option Groups\n ======================================== */\n\n .optgroup-label {\n padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n font-size: var(--text-xs);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-500);\n text-transform: uppercase;\n letter-spacing: var(--tracking-wide, 0.05em);\n }\n\n /* ========================================\n Loading / No-Results\n ======================================== */\n\n .dropdown-loading,\n .dropdown-empty {\n padding: var(--size-3) var(--size-2-5);\n font-size: var(--text-sm);\n color: var(--color-contrast-500);\n text-align: center;\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/inputs/select/select.css?inline
|
|
2
|
-
var e = "@layer refine.base{:host{min-width:var(--select-min-width,12rem);display:inline-block}:host([fullwidth]){width:100%;display:block}::slotted(option),::slotted(optgroup){display:none}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.chips-row{gap:var(--size-1);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.chips-row[hidden]{display:none}.trigger-suffix{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.trigger-icon{transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;margin:0;display:flex;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.dropdown:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-
|
|
2
|
+
var e = "@layer refine.base{:host{min-width:var(--select-min-width,12rem);display:inline-block}:host([fullwidth]){width:100%;display:block}::slotted(option),::slotted(optgroup){display:none}.trigger{cursor:pointer;width:100%}.trigger::part(input){cursor:pointer;caret-color:#0000;-webkit-user-select:none;user-select:none}.chips-row{gap:var(--size-1);flex-wrap:wrap;align-items:center;min-width:0;display:flex}.chips-row[hidden]{display:none}.trigger-suffix{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.trigger-icon{transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex}:host([open]) .trigger-icon{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:var(--z-dropdown,8000);box-sizing:border-box;gap:var(--size-0-5);max-height:260px;padding:var(--size-1);overscroll-behavior:contain;pointer-events:none;background:var(--color-canvas);border:var(--border) solid var(--color-contrast-200);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);flex-direction:column;margin:0;display:flex;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:left}.dropdown:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:right}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.options-list{flex-direction:column;gap:0;display:flex}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:first-child{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.disabled-reason{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);color:var(--text-color-tertiary);white-space:nowrap;flex:0 45%;overflow:hidden}.disabled-reason:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){text-align:right}.disabled-reason:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:left}.option:hover:not([data-disabled]){background:var(--color-contrast-100)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))}.option[data-selected]{font-weight:var(--font-medium);color:var(--_theme-base);background:color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))}.option[data-selected][data-focused]{background:color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))}.option[data-disabled]{color:var(--color-contrast-500);cursor:not-allowed}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check: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}.option-check: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}.option[data-selected] .option-check{opacity:1}.optgroup-label{padding:var(--size-1-5) var(--size-2-5) var(--size-1);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:var(--tracking-wide,.05em)}.dropdown-loading,.dropdown-empty{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-500);text-align:center}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.css.js","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n display: inline-block;\n min-width: var(--select-min-width, 12rem);\n }\n\n :host([fullwidth]) {\n display: block;\n width: 100%;\n }\n\n /* Hide native <option> elements — we render our own UI */\n ::slotted(option),\n ::slotted(optgroup) {\n display: none;\n }\n\n /* ore-input is readonly so pointer defaults to text — override to pointer.\n `width: 100%` matters just as much: `:host` is `display: inline-block`, which — unlike a\n flex/grid container with `align-items`/`justify-items: stretch` — never stretches its own\n children to fill its own box. Without this, `.trigger` (an `ore-input`, whose own `:host`\n only guarantees a 12rem *minimum*) stays shrink-wrapped to that minimum even when this\n select's own host has already been stretched wider by an ancestor grid/flex track — visibly\n narrower than a sibling field (e.g. `ore-number-input`) occupying the same-width track. */\n .trigger {\n width: 100%;\n cursor: pointer;\n }\n\n .trigger::part(input) {\n cursor: pointer;\n caret-color: transparent;\n user-select: none;\n }\n\n /* Chips slot inside ore-input prefix */\n .chips-row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--size-1);\n align-items: center;\n min-width: 0;\n }\n\n .chips-row[hidden] {\n display: none;\n }\n\n /* Suffix: loader (left) + chevron (right) */\n .trigger-suffix {\n display: flex;\n gap: var(--size-1);\n align-items: center;\n color: var(--color-contrast-500);\n }\n\n .trigger-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform var(--transition-fast);\n }\n\n :host([open]) .trigger-icon {\n transform: rotate(180deg);\n }\n\n .loader {\n display: none;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border: 2px solid currentcolor;\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n }\n\n /* 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 :host([loading]) .loader {\n display: inline-block;\n }\n\n /* ========================================\n Dropdown Listbox\n ======================================== */\n\n .dropdown {\n position: fixed;\n inset: 0 auto auto 0;\n z-index: var(--z-dropdown, 8000);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--size-0-5);\n max-height: 260px;\n padding: var(--size-1);\n margin: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n text-align: start;\n pointer-events: none;\n background: var(--color-canvas);\n border: var(--border) solid var(--color-contrast-200);\n border-radius: var(--_radius);\n box-shadow: var(--shadow-lg);\n\n /* Hidden by default */\n opacity: 0;\n backdrop-filter: blur(var(--blur-md));\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 .options-list {\n display: flex;\n flex-direction: column;\n gap: 0;\n }\n\n /* ========================================\n Option Items\n ======================================== */\n\n .option {\n display: flex;\n gap: var(--size-2);\n align-items: center;\n padding: var(--size-1-5) var(--size-2-5);\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n cursor: pointer;\n border-radius: var(--rounded-sm);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n /* Truncate long labels to keep option rows compact and readable. */\n .option > span:first-child {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .option:hover:not([data-disabled]) {\n background: var(--color-contrast-100);\n }\n\n .option[data-focused]:not([data-disabled]) {\n color: var(--_theme-base);\n background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n }\n\n .option[data-selected] {\n font-weight: var(--font-medium);\n color: var(--_theme-base);\n background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n }\n\n .option[data-selected][data-focused] {\n background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n }\n\n .option[data-disabled] {\n color: var(--color-contrast-
|
|
1
|
+
{"version":3,"file":"select.css.js","names":[],"sources":["../../../src/inputs/select/select.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n display: inline-block;\n min-width: var(--select-min-width, 12rem);\n }\n\n :host([fullwidth]) {\n display: block;\n width: 100%;\n }\n\n /* Hide native <option> elements — we render our own UI */\n ::slotted(option),\n ::slotted(optgroup) {\n display: none;\n }\n\n /* ore-input is readonly so pointer defaults to text — override to pointer.\n `width: 100%` matters just as much: `:host` is `display: inline-block`, which — unlike a\n flex/grid container with `align-items`/`justify-items: stretch` — never stretches its own\n children to fill its own box. Without this, `.trigger` (an `ore-input`, whose own `:host`\n only guarantees a 12rem *minimum*) stays shrink-wrapped to that minimum even when this\n select's own host has already been stretched wider by an ancestor grid/flex track — visibly\n narrower than a sibling field (e.g. `ore-number-input`) occupying the same-width track. */\n .trigger {\n width: 100%;\n cursor: pointer;\n }\n\n .trigger::part(input) {\n cursor: pointer;\n caret-color: transparent;\n user-select: none;\n }\n\n /* Chips slot inside ore-input prefix */\n .chips-row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--size-1);\n align-items: center;\n min-width: 0;\n }\n\n .chips-row[hidden] {\n display: none;\n }\n\n /* Suffix: loader (left) + chevron (right) */\n .trigger-suffix {\n display: flex;\n gap: var(--size-1);\n align-items: center;\n color: var(--color-contrast-500);\n }\n\n .trigger-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform var(--transition-fast);\n }\n\n :host([open]) .trigger-icon {\n transform: rotate(180deg);\n }\n\n .loader {\n display: none;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n border: 2px solid currentcolor;\n border-inline-end-color: transparent;\n border-radius: 50%;\n animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n }\n\n /* 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 :host([loading]) .loader {\n display: inline-block;\n }\n\n /* ========================================\n Dropdown Listbox\n ======================================== */\n\n .dropdown {\n position: fixed;\n inset: 0 auto auto 0;\n z-index: var(--z-dropdown, 8000);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--size-0-5);\n max-height: 260px;\n padding: var(--size-1);\n margin: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n text-align: start;\n pointer-events: none;\n background: var(--color-canvas);\n border: var(--border) solid var(--color-contrast-200);\n border-radius: var(--_radius);\n box-shadow: var(--shadow-lg);\n\n /* Hidden by default */\n opacity: 0;\n backdrop-filter: blur(var(--blur-md));\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 .options-list {\n display: flex;\n flex-direction: column;\n gap: 0;\n }\n\n /* ========================================\n Option Items\n ======================================== */\n\n .option {\n display: flex;\n gap: var(--size-2);\n align-items: center;\n padding: var(--size-1-5) var(--size-2-5);\n font-size: var(--text-sm);\n line-height: var(--leading-normal);\n cursor: pointer;\n border-radius: var(--rounded-sm);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n /* Truncate long labels to keep option rows compact and readable. */\n .option > span:first-child {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .disabled-reason {\n flex: 0 1 45%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--text-xs);\n color: var(--text-color-tertiary);\n text-align: end;\n white-space: nowrap;\n }\n\n .option:hover:not([data-disabled]) {\n background: var(--color-contrast-100);\n }\n\n .option[data-focused]:not([data-disabled]) {\n color: var(--_theme-base);\n background: color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100));\n }\n\n .option[data-selected] {\n font-weight: var(--font-medium);\n color: var(--_theme-base);\n background: color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50));\n }\n\n .option[data-selected][data-focused] {\n background: color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100));\n }\n\n .option[data-disabled] {\n color: var(--color-contrast-500);\n cursor: not-allowed;\n }\n\n .option-check {\n display: inline-flex;\n flex-shrink: 0;\n margin-inline-start: auto;\n color: var(--_theme-base);\n opacity: 0;\n transition: opacity var(--transition-fast);\n }\n\n .option[data-selected] .option-check {\n opacity: 1;\n }\n\n /* ========================================\n Option Groups\n ======================================== */\n\n .optgroup-label {\n padding: var(--size-1-5) var(--size-2-5) var(--size-1);\n font-size: var(--text-xs);\n font-weight: var(--font-semibold);\n color: var(--color-contrast-500);\n text-transform: uppercase;\n letter-spacing: var(--tracking-wide, 0.05em);\n }\n\n /* ========================================\n Loading / No-Results\n ======================================== */\n\n .dropdown-loading,\n .dropdown-empty {\n padding: var(--size-3) var(--size-2-5);\n font-size: var(--text-sm);\n color: var(--color-contrast-500);\n text-align: center;\n }\n}\n"],"mappings":""}
|
|
@@ -6,6 +6,8 @@ import '../../content/icon/icon';
|
|
|
6
6
|
import '../input/input';
|
|
7
7
|
export type OreSelectOptionInput = {
|
|
8
8
|
disabled?: boolean;
|
|
9
|
+
/** Explanation displayed and announced when the option is disabled. */
|
|
10
|
+
disabledReason?: string;
|
|
9
11
|
group?: string;
|
|
10
12
|
label?: string;
|
|
11
13
|
value: string;
|
|
@@ -17,6 +19,8 @@ export type OreSelectEvents = {
|
|
|
17
19
|
'open-change': OverlayOpenChangeDetail;
|
|
18
20
|
};
|
|
19
21
|
export type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'frost'>> & {
|
|
22
|
+
/** Hide the visible label while preserving the accessible name via `aria-label` */
|
|
23
|
+
'hide-label'?: boolean;
|
|
20
24
|
/** Show loading state in dropdown */
|
|
21
25
|
loading?: boolean;
|
|
22
26
|
/** Allow selecting multiple options */
|
|
@@ -34,6 +38,7 @@ export type OreSelectProps = SelectableFieldProps<Exclude<VisualVariant, 'frost'
|
|
|
34
38
|
*
|
|
35
39
|
* @attr {string} label - Label text
|
|
36
40
|
* @attr {string} label-placement - 'inset' | 'outside'
|
|
41
|
+
* @attr {boolean} hide-label - Hide the visible label; the label text is exposed as `aria-label` on the trigger instead
|
|
37
42
|
* @attr {string} value - Current selected value(s) (comma-separated for multiple)
|
|
38
43
|
* @attr {string} placeholder - Placeholder when no option selected
|
|
39
44
|
* @attr {string} name - Form field name
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/inputs/select/select.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAqB,MAAM,YAAY,CAAC;AAE7E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/inputs/select/select.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAqB,MAAM,YAAY,CAAC;AAE7E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AAgBxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiBF,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,uBAAuB,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG;IACnF,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC"}
|
|
@@ -35,6 +35,8 @@ export type OreNavbarProps = {
|
|
|
35
35
|
floating?: boolean;
|
|
36
36
|
/** Accessible nav landmark label */
|
|
37
37
|
label?: string;
|
|
38
|
+
'menu-close-label'?: string;
|
|
39
|
+
'menu-open-label'?: string;
|
|
38
40
|
/** CSS selector for an external sidebar toggled by the mobile button */
|
|
39
41
|
'mobile-sidebar'?: string;
|
|
40
42
|
/** Border radius size */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layout/navbar/navbar.ts"],"names":[],"mappings":"AAcA,OAAO,EAAY,KAAK,QAAQ,EAA0B,MAAM,kBAAkB,CAAC;AAGnF,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE1F,OAAO,yBAAyB,CAAC;AAsFjC,sEAAsE;AACtE,MAAM,MAAM,aAAa,GAAG;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,cAAc,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,UAAU,qDAAgD,CAAC;AAExE,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG;IAC5B,oBAAoB,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;CACzC,CAAC;AAEF,yCAAyC;AACzC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,cAAc,GAAG;IACf,eAAe,IAAI,IAAI,CAAC;IACxB,cAAc,IAAI,IAAI,CAAC;IACvB,gBAAgB,IAAI,IAAI,CAAC;CAC1B,CAAC;AAQJ,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mCAAmC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CACpD,CAAC;AAEF,6BAA6B;AAC7B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layout/navbar/navbar.ts"],"names":[],"mappings":"AAcA,OAAO,EAAY,KAAK,QAAQ,EAA0B,MAAM,kBAAkB,CAAC;AAGnF,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE1F,OAAO,yBAAyB,CAAC;AAsFjC,sEAAsE;AACtE,MAAM,MAAM,aAAa,GAAG;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,cAAc,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,UAAU,qDAAgD,CAAC;AAExE,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG;IAC5B,oBAAoB,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;CACzC,CAAC;AAEF,yCAAyC;AACzC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,cAAc,GAAG;IACf,eAAe,IAAI,IAAI,CAAC;IACxB,cAAc,IAAI,IAAI,CAAC;IACvB,gBAAgB,IAAI,IAAI,CAAC;CAC1B,CAAC;AAQJ,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG;IAC3B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mCAAmC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CACpD,CAAC;AAEF,6BAA6B;AAC7B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,UAAU,EAAG,YAAqB,CAAC;AAqhBhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,eAAe,EAAG,iBAA0B,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=`.sidebar-logo[hidden]{min-width:0;min-height:0;margin:0;display:none}@layer refine.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--color-canvas));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--color-divider));--_panel-radius:var(--sidebar-radius,var(--rounded-lg));--_panel-shadow:var(--sidebar-shadow,var(--shadow-md));box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:max-width var(--_sidebar-transition), min-width var(--_sidebar-transition);will-change:max-width;display:block;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);width:100%;height:100%;min-height:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right:var(--border) solid var(--_panel-border-color)}:host>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_panel-border-color)}.mobile-backdrop{z-index:calc(var(--z-sticky) + 1);background:color-mix(in oklch, var(--color-contrast-950) 36%, transparent);border:0;width:100%;height:100%;display:none;position:absolute;inset:0}:host([data-bottom-nav][data-mobile-open]) .mobile-backdrop{z-index:calc(var(--z-sticky) + 1);width:100vw;height:100dvh;display:block;position:fixed;inset:0}:host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop{width:100%;height:100%;position:absolute;inset:0}:host([data-no-transition]),:host([data-no-transition])>nav{transition:none}:host([data-collapsed]){min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}:host([data-bottom-nav]){z-index:calc(var(--z-sticky) + 2);width:100%;min-width:0;max-width:100%;height:var(--sidebar-bottom-nav-height,3.75rem);pointer-events:auto;position:fixed;bottom:0;left:0;right:0}:host([data-preview-mode][data-bottom-nav]){pointer-events:none;width:auto;height:auto;position:absolute;inset:0}:host([data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);width:min(var(--_sidebar-width), 85vw);max-width:85vw;max-height:100dvh;transition:transform var(--transition-normal);position:fixed;top:0;bottom:0;transform:translate(-104%)}:host([data-bottom-nav])>nav: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))){left:0}:host([data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([data-preview-mode][data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);pointer-events:auto;max-height:100%;position:absolute;top:0;bottom:0}:host([data-preview-mode][data-bottom-nav])>nav: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))){left:0}:host([data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host(:dir(rtl)[data-bottom-nav])>nav{transform:translate(104%)}:host([data-bottom-nav][data-mobile-open])>nav{transform:translate(0)}.bottom-bar{gap:var(--size-1);width:100%;height:100%;padding:var(--size-1);pointer-events:none;background:var(--_panel-bg);border-top:var(--border) solid var(--_panel-border-color);box-shadow:var(--shadow-sm);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--_sidebar-transition), transform var(--_sidebar-transition), display var(--_sidebar-transition) allow-discrete;justify-content:space-around;align-items:stretch;display:flex;transform:translateY(100%)}:host([data-bottom-nav]) .bottom-bar{pointer-events:auto;opacity:1;transform:translateY(0)}:host([data-preview-mode][data-bottom-nav]) .bottom-bar{z-index:calc(var(--z-sticky) + 2);height:var(--sidebar-bottom-nav-height,3.75rem);position:absolute;bottom:0;left:0;right:0}:host([data-bottom-nav][data-mobile-open]) .bottom-bar{z-index:calc(var(--z-sticky) + 1);pointer-events:none;opacity:0;transform:translateY(100%)}.bottom-tab{all:unset;box-sizing:border-box;gap:var(--size-0-5);min-width:0;padding:var(--size-1) var(--size-1-5);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.bottom-tab:hover,.bottom-tab:focus-visible{color:var(--sidebar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.bottom-tab:disabled{color:var(--sidebar-item-disabled-color,var(--color-contrast-400));cursor:not-allowed;opacity:.7}.bottom-tab-active,.bottom-tab[data-active=true]{color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in oklch, var(--color-primary) 12%, transparent)))}.bottom-tab-active:before,.bottom-tab[data-active=true]:before{display:none}.bottom-tab-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.bottom-tab-label{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.sidebar-header{gap:var(--size-2);min-height:var(--size-6);padding:var(--size-4);border-bottom:var(--border) solid var(--color-contrast-200);justify-content:space-between;align-items:center;display:flex}.sidebar-header .sidebar-header-content{flex:1;min-width:0;display:block;overflow:hidden}:host([data-collapsed]) .sidebar-header{gap:var(--size-2);min-height:unset;padding-block:var(--size-2);padding-inline:var(--size-2);flex-direction:column;justify-content:flex-start;align-items:center}:host([data-collapsed]) .sidebar-header .sidebar-header-content{display:none}.sidebar-logo{min-width:var(--size-8);min-height:var(--size-8);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo: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-right:var(--size-2)}.sidebar-logo: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-2)}.sidebar-logo:empty{display:none}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo: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-right:0}:host([data-collapsed]) .sidebar-logo: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:0}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggle-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.toggle-btn:focus-visible{outline:var(--focus-ring)}.toggle-icon{transition:var(--_motion-transition,transform var(--_sidebar-transition));justify-content:center;align-items:center;display:flex}:host([data-collapsed]) .toggle-icon{transform:rotate(180deg)}:host([data-bottom-nav]) .toggle-btn{display:none}:host(:not([dir=rtl])[data-collapsed]) .toggle-icon,:host(:dir(ltr)[data-collapsed]) .toggle-icon,:host(:dir(rtl)) .toggle-icon{transform:rotate(180deg)}:host(:dir(rtl)[data-collapsed]) .toggle-icon{transform:rotate(0)}}@layer refine.variants{:host([variant=floating]){--_panel-radius:var(--rounded-lg);height:calc(100% - var(--size-6));margin:var(--size-3)}:host([variant=floating])>nav{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius)}:host([variant=floating][data-bottom-nav]){bottom:var(--size-2);inset-inline:var(--size-2);width:auto;max-width:none}:host([variant=floating][data-preview-mode][data-bottom-nav]){inset:calc(var(--size-1) * -1)}:host([variant=floating][data-bottom-nav]) .bottom-bar{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow)}:host([variant=floating][data-bottom-nav])>nav{top:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav: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))){left:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([variant=floating][data-preview-mode][data-bottom-nav]) .bottom-bar{bottom:var(--size-2);inset-inline:var(--size-2);width:auto}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav{top:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav: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))){left:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-1)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}`;exports.default=e;
|
|
1
|
+
var e=`.sidebar-logo[hidden]{min-width:0;min-height:0;margin:0;display:none}@layer refine.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--color-canvas));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--color-divider));--_panel-radius:var(--sidebar-radius,var(--rounded-lg));--_panel-shadow:var(--sidebar-shadow,var(--shadow-md));z-index:var(--sidebar-z-index,1);box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:max-width var(--_sidebar-transition), min-width var(--_sidebar-transition);will-change:max-width;display:block;position:relative;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);width:100%;height:100%;min-height:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right:var(--border) solid var(--_panel-border-color)}:host>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_panel-border-color)}:host(:not([data-bottom-nav]))>nav{overflow:visible}.mobile-backdrop{z-index:calc(var(--z-sticky) + 1);background:color-mix(in oklch, var(--color-contrast-950) 36%, transparent);border:0;width:100%;height:100%;display:none;position:absolute;inset:0}:host([data-bottom-nav][data-mobile-open]) .mobile-backdrop{z-index:calc(var(--z-sticky) + 1);width:100vw;height:100dvh;display:block;position:fixed;inset:0}:host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop{width:100%;height:100%;position:absolute;inset:0}:host([data-no-transition]),:host([data-no-transition])>nav{transition:none}:host([data-collapsed]){min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}:host([data-bottom-nav]){z-index:calc(var(--z-sticky) + 2);width:100%;min-width:0;max-width:100%;height:var(--sidebar-bottom-nav-height,3.75rem);pointer-events:auto;position:fixed;bottom:0;left:0;right:0}:host([data-preview-mode][data-bottom-nav]){pointer-events:none;width:auto;height:auto;position:absolute;inset:0}:host([data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);width:min(var(--_sidebar-width), 85vw);max-width:85vw;max-height:100dvh;transition:transform var(--transition-normal);position:fixed;top:0;bottom:0;transform:translate(-104%)}:host([data-bottom-nav])>nav: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))){left:0}:host([data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([data-preview-mode][data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);pointer-events:auto;max-height:100%;position:absolute;top:0;bottom:0}:host([data-preview-mode][data-bottom-nav])>nav: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))){left:0}:host([data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host(:dir(rtl)[data-bottom-nav])>nav{transform:translate(104%)}:host([data-bottom-nav][data-mobile-open])>nav{transform:translate(0)}.bottom-bar{box-sizing:border-box;gap:var(--size-1);width:100%;height:100%;padding:var(--size-1);pointer-events:none;background:var(--_panel-bg);border-top:var(--border) solid var(--_panel-border-color);box-shadow:var(--shadow-sm);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--_sidebar-transition), transform var(--_sidebar-transition), display var(--_sidebar-transition) allow-discrete;justify-content:space-around;align-items:stretch;display:flex;transform:translateY(100%)}.bottom-bar[hidden]{display:none}:host([data-bottom-nav]) .bottom-bar{pointer-events:auto;opacity:1;transform:translateY(0)}:host([data-preview-mode][data-bottom-nav]) .bottom-bar{z-index:calc(var(--z-sticky) + 2);height:var(--sidebar-bottom-nav-height,3.75rem);position:absolute;bottom:0;left:0;right:0}:host([data-bottom-nav][data-mobile-open]) .bottom-bar{z-index:calc(var(--z-sticky) + 1);pointer-events:none;opacity:0;transform:translateY(100%)}.bottom-tab{all:unset;box-sizing:border-box;gap:var(--size-0-5);min-width:0;padding:var(--size-1) var(--size-1-5);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.bottom-tab:hover,.bottom-tab:focus-visible{color:var(--sidebar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.bottom-tab:disabled{color:var(--sidebar-item-disabled-color,var(--color-contrast-400));cursor:not-allowed;opacity:.7}.bottom-tab-active,.bottom-tab[data-active=true]{color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in oklch, var(--color-primary) 12%, transparent)))}.bottom-tab-active:before,.bottom-tab[data-active=true]:before{display:none}.bottom-tab-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.bottom-tab-label{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.sidebar-header{box-sizing:border-box;gap:var(--size-2);height:var(--sidebar-header-height,var(--size-16));min-height:var(--sidebar-header-height,var(--size-16));padding:var(--sidebar-header-padding,var(--size-3));border-bottom:var(--border) solid var(--color-contrast-200);justify-content:space-between;align-items:center;display:flex}.sidebar-header .sidebar-header-content{flex:1;min-width:0;display:block;overflow:hidden}:host([data-collapsed]) .sidebar-header{gap:var(--size-2);flex-direction:column;justify-content:flex-start;align-items:center}:host([data-collapsed]) .sidebar-header .sidebar-header-content{display:none}.sidebar-logo{min-width:var(--size-8);min-height:var(--size-8);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo: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-right:var(--size-2)}.sidebar-logo: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-2)}.sidebar-logo:empty{display:none}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo: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-right:0}:host([data-collapsed]) .sidebar-logo: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:0}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;z-index:1;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--sidebar-toggle-color,var(--color-contrast-600));cursor:pointer;background:var(--sidebar-toggle-bg,var(--_panel-bg));border:var(--border) solid var(--sidebar-toggle-border-color,var(--_panel-border-color));border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);top:var(--sidebar-toggle-offset,var(--size-4));justify-content:center;align-items:center;display:inline-flex;position:absolute;transform:translate(50%)}.toggle-btn: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))){right:0}.toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}:host(:dir(rtl)) .toggle-btn{transform:translate(-50%)}:host(:not([data-has-logo])) .toggle-btn{position:static;transform:none}:host(:not([data-has-logo])) .toggle-btn: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(:not([data-has-logo])) .toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host([data-collapsed]:not([data-has-logo])) .toggle-btn: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:0}:host([data-collapsed]:not([data-has-logo])) .toggle-btn: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:0}.toggle-btn:hover{color:var(--sidebar-toggle-hover-color,var(--color-contrast-900));background:var(--sidebar-toggle-hover-bg,var(--color-contrast-100));box-shadow:var(--shadow-md)}.toggle-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--size-0-5)}.toggle-icon{justify-content:center;align-items:center;display:flex}:host([data-bottom-nav]) .toggle-btn{display:none}}@layer refine.variants{:host([variant=floating]){--_panel-radius:var(--rounded-lg);height:calc(100% - var(--size-6));margin:var(--size-3)}:host([variant=floating])>nav{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius)}:host([variant=floating][data-bottom-nav]){bottom:var(--size-2);inset-inline:var(--size-2);width:auto;max-width:none}:host([variant=floating][data-preview-mode][data-bottom-nav]){inset:calc(var(--size-1) * -1)}:host([variant=floating][data-bottom-nav]) .bottom-bar{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow)}:host([variant=floating][data-bottom-nav])>nav{top:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav: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))){left:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([variant=floating][data-preview-mode][data-bottom-nav]) .bottom-bar{bottom:var(--size-2);inset-inline:var(--size-2);width:auto}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav{top:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav: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))){left:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-1)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=sidebar.css.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n display: none;\n min-width: 0;\n min-height: 0;\n margin: 0;\n}\n\n/*\n * Simplified and unified sidebar CSS:\n * - Grouped collapsed/expanded state rules\n * - Consistent use of CSS variables for spacing, color, and transitions\n * - Removed redundant or legacy rules\n * - Clarified variant handling\n */\n\n@layer refine.base {\n :host {\n --_sidebar-width: var(--sidebar-width, 16rem);\n --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n --_sidebar-transition: var(--transition-normal);\n --_panel-bg: var(--sidebar-bg, var(--color-canvas));\n --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n --_panel-border-color: var(--sidebar-border-color, var(--color-divider));\n --_panel-radius: var(--sidebar-radius, var(--rounded-lg));\n --_panel-shadow: var(--sidebar-shadow, var(--shadow-md));\n\n box-sizing: border-box;\n display: block;\n width: 100%;\n min-width: var(--size-2xs);\n max-width: var(--_sidebar-width);\n height: 100%;\n min-height: 0;\n overflow: visible;\n transition:\n max-width var(--_sidebar-transition),\n min-width var(--_sidebar-transition);\n will-change: max-width;\n }\n\n :host > nav {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n background: var(--_panel-bg);\n border-inline-end: var(--border) solid var(--_panel-border-color);\n backdrop-filter: blur(var(--_panel-blur));\n }\n\n .mobile-backdrop {\n position: absolute;\n inset: 0;\n z-index: calc(var(--z-sticky) + 1);\n display: none;\n width: 100%;\n height: 100%;\n background: color-mix(in oklch, var(--color-contrast-950) 36%, transparent);\n border: 0;\n }\n\n :host([data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n position: fixed;\n inset: 0;\n z-index: calc(var(--z-sticky) + 1);\n display: block;\n width: 100vw;\n height: 100dvh;\n }\n\n :host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n }\n\n :host([data-no-transition]),\n :host([data-no-transition]) > nav {\n transition: none;\n }\n\n :host([data-collapsed]) {\n min-width: var(--_sidebar-collapsed-width);\n max-width: var(--_sidebar-collapsed-width);\n }\n\n :host([data-bottom-nav]) {\n position: fixed;\n inset-block-end: 0;\n inset-inline: 0;\n z-index: calc(var(--z-sticky) + 2);\n width: 100%;\n min-width: 0;\n max-width: 100%;\n height: var(--sidebar-bottom-nav-height, 3.75rem);\n pointer-events: auto;\n }\n\n /* Preview mode: constrain bottom-nav to container bounds */\n :host([data-preview-mode][data-bottom-nav]) {\n position: absolute;\n inset: 0;\n width: auto;\n height: auto;\n pointer-events: none;\n }\n\n :host([data-bottom-nav]) > nav {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: calc(var(--z-sticky) + 3);\n width: min(var(--_sidebar-width), 85vw);\n max-width: 85vw;\n max-height: 100dvh;\n transform: translateX(-104%);\n transition: transform var(--transition-normal);\n }\n\n /* Preview mode: use absolute positioning so drawer stays within container */\n :host([data-preview-mode][data-bottom-nav]) > nav {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: calc(var(--z-sticky) + 3);\n max-height: 100%;\n pointer-events: auto;\n }\n\n :host(:dir(rtl)[data-bottom-nav]) > nav {\n transform: translateX(104%);\n }\n\n :host([data-bottom-nav][data-mobile-open]) > nav {\n transform: translateX(0);\n }\n\n .bottom-bar {\n display: flex;\n gap: var(--size-1);\n align-items: stretch;\n justify-content: space-around;\n width: 100%;\n height: 100%;\n padding: var(--size-1);\n pointer-events: none;\n background: var(--_panel-bg);\n border-top: var(--border) solid var(--_panel-border-color);\n box-shadow: var(--shadow-sm);\n opacity: 0;\n backdrop-filter: blur(var(--_panel-blur));\n transform: translateY(100%);\n transition:\n opacity var(--_sidebar-transition),\n transform var(--_sidebar-transition),\n display var(--_sidebar-transition) allow-discrete;\n }\n\n :host([data-bottom-nav]) .bottom-bar {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n }\n\n :host([data-preview-mode][data-bottom-nav]) .bottom-bar {\n position: absolute;\n inset-block-end: 0;\n inset-inline: 0;\n z-index: calc(var(--z-sticky) + 2);\n height: var(--sidebar-bottom-nav-height, 3.75rem);\n }\n\n :host([data-bottom-nav][data-mobile-open]) .bottom-bar {\n z-index: calc(var(--z-sticky) + 1);\n pointer-events: none;\n opacity: 0;\n transform: translateY(100%);\n }\n\n .bottom-tab {\n all: unset;\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n gap: var(--size-0-5);\n align-items: center;\n justify-content: center;\n min-width: 0;\n padding: var(--size-1) var(--size-1-5);\n color: var(--sidebar-item-color, var(--color-contrast-700));\n text-decoration: none;\n cursor: pointer;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .bottom-tab:hover,\n .bottom-tab: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 .bottom-tab:disabled {\n color: var(--sidebar-item-disabled-color, var(--color-contrast-400));\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .bottom-tab-active,\n .bottom-tab[data-active='true'] {\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 .bottom-tab-active::before,\n .bottom-tab[data-active='true']::before {\n display: none;\n }\n\n .bottom-tab-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-5);\n height: var(--size-5);\n }\n\n .bottom-tab-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--text-xs);\n white-space: nowrap;\n }\n\n .sidebar-header {\n display: flex;\n gap: var(--size-2);\n align-items: center;\n justify-content: space-between;\n min-height: var(--size-6);\n padding: var(--size-4);\n border-bottom: var(--border) solid var(--color-contrast-200);\n }\n\n .sidebar-header .sidebar-header-content {\n display: block;\n flex: 1 1 0%;\n min-width: 0;\n overflow: hidden;\n }\n\n :host([data-collapsed]) .sidebar-header {\n flex-direction: column;\n gap: var(--size-2);\n align-items: center;\n justify-content: flex-start;\n min-height: unset;\n padding-block: var(--size-2);\n padding-inline: var(--size-2);\n }\n\n :host([data-collapsed]) .sidebar-header .sidebar-header-content {\n display: none;\n }\n\n .sidebar-logo {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n min-width: var(--size-8);\n min-height: var(--size-8);\n margin-inline-end: var(--size-2);\n }\n\n .sidebar-logo:empty {\n display: none;\n }\n\n :host([data-collapsed]) .sidebar-logo {\n margin-block: var(--size-1);\n margin-inline-end: 0;\n }\n\n .sidebar-content {\n display: grid;\n flex: 1;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--size-2);\n align-content: start;\n min-width: 0;\n padding: var(--size-4);\n overflow: clip auto;\n scrollbar-width: thin;\n }\n\n .sidebar-footer {\n flex-shrink: 0;\n padding: var(--size-4);\n border-top: var(--border) solid var(--color-contrast-200);\n }\n\n .toggle-btn {\n all: unset;\n box-sizing: border-box;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-8);\n height: var(--size-8);\n color: var(--color-contrast-500);\n cursor: pointer;\n border-radius: var(--rounded-sm);\n transition:\n color var(--transition-fast),\n background var(--transition-fast);\n }\n\n .toggle-btn:hover {\n color: var(--color-contrast-800);\n background: var(--color-contrast-200);\n }\n\n .toggle-btn:focus-visible {\n outline: var(--focus-ring);\n }\n\n .toggle-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--_motion-transition, transform var(--_sidebar-transition));\n }\n\n :host([data-collapsed]) .toggle-icon {\n transform: rotate(180deg);\n }\n\n :host([data-bottom-nav]) .toggle-btn {\n display: none;\n }\n\n :host(:not([dir='rtl'])[data-collapsed]) .toggle-icon,\n :host(:dir(ltr)[data-collapsed]) .toggle-icon {\n transform: rotate(180deg);\n }\n\n :host(:dir(rtl)) .toggle-icon {\n transform: rotate(180deg);\n }\n\n :host(:dir(rtl)[data-collapsed]) .toggle-icon {\n transform: rotate(0deg);\n }\n}\n\n@layer refine.variants {\n /* ── floating ── */\n :host([variant='floating']) {\n --_panel-radius: var(--rounded-lg);\n height: calc(100% - var(--size-6));\n margin: var(--size-3);\n }\n\n :host([variant='floating']) > nav {\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_panel-radius);\n }\n\n :host([variant='floating'][data-bottom-nav]) {\n inset-block-end: var(--size-2);\n inset-inline: var(--size-2);\n width: auto;\n max-width: none;\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) {\n inset: calc(var(--size-1) * -1);\n }\n\n :host([variant='floating'][data-bottom-nav]) .bottom-bar {\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_panel-radius);\n box-shadow: var(--_panel-shadow);\n }\n\n :host([variant='floating'][data-bottom-nav]) > nav {\n inset-block-start: var(--size-2);\n inset-inline-start: var(--size-2);\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) .bottom-bar {\n inset-block-end: var(--size-2);\n inset-inline: var(--size-2);\n width: auto;\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) > nav {\n inset-block-start: var(--size-1);\n inset-inline-start: var(--size-1);\n }\n\n /* ── inset ── */\n :host([variant='inset']) {\n --_panel-bg: var(--color-contrast-50);\n --_panel-shadow: none;\n --_panel-border-color: transparent;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"sidebar.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n display: none;\n min-width: 0;\n min-height: 0;\n margin: 0;\n}\n\n/*\n * Simplified and unified sidebar CSS:\n * - Grouped collapsed/expanded state rules\n * - Consistent use of CSS variables for spacing, color, and transitions\n * - Removed redundant or legacy rules\n * - Clarified variant handling\n */\n\n@layer refine.base {\n :host {\n --_sidebar-width: var(--sidebar-width, 16rem);\n --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n --_sidebar-transition: var(--transition-normal);\n --_panel-bg: var(--sidebar-bg, var(--color-canvas));\n --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n --_panel-border-color: var(--sidebar-border-color, var(--color-divider));\n --_panel-radius: var(--sidebar-radius, var(--rounded-lg));\n --_panel-shadow: var(--sidebar-shadow, var(--shadow-md));\n\n position: relative;\n z-index: var(--sidebar-z-index, 1);\n box-sizing: border-box;\n display: block;\n width: 100%;\n min-width: var(--size-2xs);\n max-width: var(--_sidebar-width);\n height: 100%;\n min-height: 0;\n overflow: visible;\n transition:\n max-width var(--_sidebar-transition),\n min-width var(--_sidebar-transition);\n will-change: max-width;\n }\n\n :host > nav {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n background: var(--_panel-bg);\n border-inline-end: var(--border) solid var(--_panel-border-color);\n backdrop-filter: blur(var(--_panel-blur));\n }\n\n :host(:not([data-bottom-nav])) > nav {\n overflow: visible;\n }\n\n .mobile-backdrop {\n position: absolute;\n inset: 0;\n z-index: calc(var(--z-sticky) + 1);\n display: none;\n width: 100%;\n height: 100%;\n background: color-mix(in oklch, var(--color-contrast-950) 36%, transparent);\n border: 0;\n }\n\n :host([data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n position: fixed;\n inset: 0;\n z-index: calc(var(--z-sticky) + 1);\n display: block;\n width: 100vw;\n height: 100dvh;\n }\n\n :host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n }\n\n :host([data-no-transition]),\n :host([data-no-transition]) > nav {\n transition: none;\n }\n\n :host([data-collapsed]) {\n min-width: var(--_sidebar-collapsed-width);\n max-width: var(--_sidebar-collapsed-width);\n }\n\n :host([data-bottom-nav]) {\n position: fixed;\n inset-block-end: 0;\n inset-inline: 0;\n z-index: calc(var(--z-sticky) + 2);\n width: 100%;\n min-width: 0;\n max-width: 100%;\n height: var(--sidebar-bottom-nav-height, 3.75rem);\n pointer-events: auto;\n }\n\n /* Preview mode: constrain bottom-nav to container bounds */\n :host([data-preview-mode][data-bottom-nav]) {\n position: absolute;\n inset: 0;\n width: auto;\n height: auto;\n pointer-events: none;\n }\n\n :host([data-bottom-nav]) > nav {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: calc(var(--z-sticky) + 3);\n width: min(var(--_sidebar-width), 85vw);\n max-width: 85vw;\n max-height: 100dvh;\n transform: translateX(-104%);\n transition: transform var(--transition-normal);\n }\n\n /* Preview mode: use absolute positioning so drawer stays within container */\n :host([data-preview-mode][data-bottom-nav]) > nav {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: calc(var(--z-sticky) + 3);\n max-height: 100%;\n pointer-events: auto;\n }\n\n :host(:dir(rtl)[data-bottom-nav]) > nav {\n transform: translateX(104%);\n }\n\n :host([data-bottom-nav][data-mobile-open]) > nav {\n transform: translateX(0);\n }\n\n .bottom-bar {\n box-sizing: border-box;\n display: flex;\n gap: var(--size-1);\n align-items: stretch;\n justify-content: space-around;\n width: 100%;\n height: 100%;\n padding: var(--size-1);\n pointer-events: none;\n background: var(--_panel-bg);\n border-top: var(--border) solid var(--_panel-border-color);\n box-shadow: var(--shadow-sm);\n opacity: 0;\n backdrop-filter: blur(var(--_panel-blur));\n transform: translateY(100%);\n transition:\n opacity var(--_sidebar-transition),\n transform var(--_sidebar-transition),\n display var(--_sidebar-transition) allow-discrete;\n }\n\n .bottom-bar[hidden] {\n display: none;\n }\n\n :host([data-bottom-nav]) .bottom-bar {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n }\n\n :host([data-preview-mode][data-bottom-nav]) .bottom-bar {\n position: absolute;\n inset-block-end: 0;\n inset-inline: 0;\n z-index: calc(var(--z-sticky) + 2);\n height: var(--sidebar-bottom-nav-height, 3.75rem);\n }\n\n :host([data-bottom-nav][data-mobile-open]) .bottom-bar {\n z-index: calc(var(--z-sticky) + 1);\n pointer-events: none;\n opacity: 0;\n transform: translateY(100%);\n }\n\n .bottom-tab {\n all: unset;\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n gap: var(--size-0-5);\n align-items: center;\n justify-content: center;\n min-width: 0;\n padding: var(--size-1) var(--size-1-5);\n color: var(--sidebar-item-color, var(--color-contrast-700));\n text-decoration: none;\n cursor: pointer;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .bottom-tab:hover,\n .bottom-tab: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 .bottom-tab:disabled {\n color: var(--sidebar-item-disabled-color, var(--color-contrast-400));\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .bottom-tab-active,\n .bottom-tab[data-active='true'] {\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 .bottom-tab-active::before,\n .bottom-tab[data-active='true']::before {\n display: none;\n }\n\n .bottom-tab-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-5);\n height: var(--size-5);\n }\n\n .bottom-tab-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--text-xs);\n white-space: nowrap;\n }\n\n .sidebar-header {\n box-sizing: border-box;\n display: flex;\n gap: var(--size-2);\n align-items: center;\n justify-content: space-between;\n height: var(--sidebar-header-height, var(--size-16));\n min-height: var(--sidebar-header-height, var(--size-16));\n padding: var(--sidebar-header-padding, var(--size-3));\n border-bottom: var(--border) solid var(--color-contrast-200);\n }\n\n .sidebar-header .sidebar-header-content {\n display: block;\n flex: 1 1 0%;\n min-width: 0;\n overflow: hidden;\n }\n\n :host([data-collapsed]) .sidebar-header {\n flex-direction: column;\n gap: var(--size-2);\n align-items: center;\n justify-content: flex-start;\n }\n\n :host([data-collapsed]) .sidebar-header .sidebar-header-content {\n display: none;\n }\n\n .sidebar-logo {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n min-width: var(--size-8);\n min-height: var(--size-8);\n margin-inline-end: var(--size-2);\n }\n\n .sidebar-logo:empty {\n display: none;\n }\n\n :host([data-collapsed]) .sidebar-logo {\n margin-block: var(--size-1);\n margin-inline-end: 0;\n }\n\n .sidebar-content {\n display: grid;\n flex: 1;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--size-2);\n align-content: start;\n min-width: 0;\n padding: var(--size-4);\n overflow: clip auto;\n scrollbar-width: thin;\n }\n\n .sidebar-footer {\n flex-shrink: 0;\n padding: var(--size-4);\n border-top: var(--border) solid var(--color-contrast-200);\n }\n\n .toggle-btn {\n all: unset;\n position: absolute;\n inset-block-start: var(--sidebar-toggle-offset, var(--size-4));\n inset-inline-end: 0;\n z-index: 1;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-8);\n height: var(--size-8);\n color: var(--sidebar-toggle-color, var(--color-contrast-600));\n cursor: pointer;\n background: var(--sidebar-toggle-bg, var(--_panel-bg));\n border: var(--border) solid var(--sidebar-toggle-border-color, var(--_panel-border-color));\n border-radius: var(--rounded-full);\n box-shadow: var(--shadow-sm);\n transform: translateX(50%);\n transition:\n color var(--transition-fast),\n background var(--transition-fast),\n box-shadow var(--transition-fast);\n }\n\n :host(:dir(rtl)) .toggle-btn {\n transform: translateX(-50%);\n }\n\n :host(:not([data-has-logo])) .toggle-btn {\n position: static;\n margin-inline-start: auto;\n transform: none;\n }\n\n :host([data-collapsed]:not([data-has-logo])) .toggle-btn {\n margin-inline-start: 0;\n }\n\n .toggle-btn:hover {\n color: var(--sidebar-toggle-hover-color, var(--color-contrast-900));\n background: var(--sidebar-toggle-hover-bg, var(--color-contrast-100));\n box-shadow: var(--shadow-md);\n }\n\n .toggle-btn:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--size-0-5);\n }\n\n .toggle-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n :host([data-bottom-nav]) .toggle-btn {\n display: none;\n }\n}\n\n@layer refine.variants {\n /* ── floating ── */\n :host([variant='floating']) {\n --_panel-radius: var(--rounded-lg);\n height: calc(100% - var(--size-6));\n margin: var(--size-3);\n }\n\n :host([variant='floating']) > nav {\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_panel-radius);\n }\n\n :host([variant='floating'][data-bottom-nav]) {\n inset-block-end: var(--size-2);\n inset-inline: var(--size-2);\n width: auto;\n max-width: none;\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) {\n inset: calc(var(--size-1) * -1);\n }\n\n :host([variant='floating'][data-bottom-nav]) .bottom-bar {\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_panel-radius);\n box-shadow: var(--_panel-shadow);\n }\n\n :host([variant='floating'][data-bottom-nav]) > nav {\n inset-block-start: var(--size-2);\n inset-inline-start: var(--size-2);\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) .bottom-bar {\n inset-block-end: var(--size-2);\n inset-inline: var(--size-2);\n width: auto;\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) > nav {\n inset-block-start: var(--size-1);\n inset-inline-start: var(--size-1);\n }\n\n /* ── inset ── */\n :host([variant='inset']) {\n --_panel-bg: var(--color-contrast-50);\n --_panel-shadow: none;\n --_panel-border-color: transparent;\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/layout/sidebar/sidebar.css?inline
|
|
2
|
-
var e = ".sidebar-logo[hidden]{min-width:0;min-height:0;margin:0;display:none}@layer refine.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--color-canvas));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--color-divider));--_panel-radius:var(--sidebar-radius,var(--rounded-lg));--_panel-shadow:var(--sidebar-shadow,var(--shadow-md));box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:max-width var(--_sidebar-transition), min-width var(--_sidebar-transition);will-change:max-width;display:block;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);width:100%;height:100%;min-height:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right:var(--border) solid var(--_panel-border-color)}:host>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_panel-border-color)}.mobile-backdrop{z-index:calc(var(--z-sticky) + 1);background:color-mix(in oklch, var(--color-contrast-950) 36%, transparent);border:0;width:100%;height:100%;display:none;position:absolute;inset:0}:host([data-bottom-nav][data-mobile-open]) .mobile-backdrop{z-index:calc(var(--z-sticky) + 1);width:100vw;height:100dvh;display:block;position:fixed;inset:0}:host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop{width:100%;height:100%;position:absolute;inset:0}:host([data-no-transition]),:host([data-no-transition])>nav{transition:none}:host([data-collapsed]){min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}:host([data-bottom-nav]){z-index:calc(var(--z-sticky) + 2);width:100%;min-width:0;max-width:100%;height:var(--sidebar-bottom-nav-height,3.75rem);pointer-events:auto;position:fixed;bottom:0;left:0;right:0}:host([data-preview-mode][data-bottom-nav]){pointer-events:none;width:auto;height:auto;position:absolute;inset:0}:host([data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);width:min(var(--_sidebar-width), 85vw);max-width:85vw;max-height:100dvh;transition:transform var(--transition-normal);position:fixed;top:0;bottom:0;transform:translate(-104%)}:host([data-bottom-nav])>nav: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))){left:0}:host([data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([data-preview-mode][data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);pointer-events:auto;max-height:100%;position:absolute;top:0;bottom:0}:host([data-preview-mode][data-bottom-nav])>nav: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))){left:0}:host([data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host(:dir(rtl)[data-bottom-nav])>nav{transform:translate(104%)}:host([data-bottom-nav][data-mobile-open])>nav{transform:translate(0)}.bottom-bar{gap:var(--size-1);width:100%;height:100%;padding:var(--size-1);pointer-events:none;background:var(--_panel-bg);border-top:var(--border) solid var(--_panel-border-color);box-shadow:var(--shadow-sm);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--_sidebar-transition), transform var(--_sidebar-transition), display var(--_sidebar-transition) allow-discrete;justify-content:space-around;align-items:stretch;display:flex;transform:translateY(100%)}:host([data-bottom-nav]) .bottom-bar{pointer-events:auto;opacity:1;transform:translateY(0)}:host([data-preview-mode][data-bottom-nav]) .bottom-bar{z-index:calc(var(--z-sticky) + 2);height:var(--sidebar-bottom-nav-height,3.75rem);position:absolute;bottom:0;left:0;right:0}:host([data-bottom-nav][data-mobile-open]) .bottom-bar{z-index:calc(var(--z-sticky) + 1);pointer-events:none;opacity:0;transform:translateY(100%)}.bottom-tab{all:unset;box-sizing:border-box;gap:var(--size-0-5);min-width:0;padding:var(--size-1) var(--size-1-5);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.bottom-tab:hover,.bottom-tab:focus-visible{color:var(--sidebar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.bottom-tab:disabled{color:var(--sidebar-item-disabled-color,var(--color-contrast-400));cursor:not-allowed;opacity:.7}.bottom-tab-active,.bottom-tab[data-active=true]{color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in oklch, var(--color-primary) 12%, transparent)))}.bottom-tab-active:before,.bottom-tab[data-active=true]:before{display:none}.bottom-tab-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.bottom-tab-label{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.sidebar-header{gap:var(--size-2);min-height:var(--size-6);padding:var(--size-4);border-bottom:var(--border) solid var(--color-contrast-200);justify-content:space-between;align-items:center;display:flex}.sidebar-header .sidebar-header-content{flex:1;min-width:0;display:block;overflow:hidden}:host([data-collapsed]) .sidebar-header{gap:var(--size-2);min-height:unset;padding-block:var(--size-2);padding-inline:var(--size-2);flex-direction:column;justify-content:flex-start;align-items:center}:host([data-collapsed]) .sidebar-header .sidebar-header-content{display:none}.sidebar-logo{min-width:var(--size-8);min-height:var(--size-8);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo: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-right:var(--size-2)}.sidebar-logo: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-2)}.sidebar-logo:empty{display:none}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo: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-right:0}:host([data-collapsed]) .sidebar-logo: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:0}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggle-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.toggle-btn:focus-visible{outline:var(--focus-ring)}.toggle-icon{transition:var(--_motion-transition,transform var(--_sidebar-transition));justify-content:center;align-items:center;display:flex}:host([data-collapsed]) .toggle-icon{transform:rotate(180deg)}:host([data-bottom-nav]) .toggle-btn{display:none}:host(:not([dir=rtl])[data-collapsed]) .toggle-icon,:host(:dir(ltr)[data-collapsed]) .toggle-icon,:host(:dir(rtl)) .toggle-icon{transform:rotate(180deg)}:host(:dir(rtl)[data-collapsed]) .toggle-icon{transform:rotate(0)}}@layer refine.variants{:host([variant=floating]){--_panel-radius:var(--rounded-lg);height:calc(100% - var(--size-6));margin:var(--size-3)}:host([variant=floating])>nav{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius)}:host([variant=floating][data-bottom-nav]){bottom:var(--size-2);inset-inline:var(--size-2);width:auto;max-width:none}:host([variant=floating][data-preview-mode][data-bottom-nav]){inset:calc(var(--size-1) * -1)}:host([variant=floating][data-bottom-nav]) .bottom-bar{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow)}:host([variant=floating][data-bottom-nav])>nav{top:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav: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))){left:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([variant=floating][data-preview-mode][data-bottom-nav]) .bottom-bar{bottom:var(--size-2);inset-inline:var(--size-2);width:auto}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav{top:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav: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))){left:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-1)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}";
|
|
2
|
+
var e = ".sidebar-logo[hidden]{min-width:0;min-height:0;margin:0;display:none}@layer refine.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--color-canvas));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--color-divider));--_panel-radius:var(--sidebar-radius,var(--rounded-lg));--_panel-shadow:var(--sidebar-shadow,var(--shadow-md));z-index:var(--sidebar-z-index,1);box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:max-width var(--_sidebar-transition), min-width var(--_sidebar-transition);will-change:max-width;display:block;position:relative;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);width:100%;height:100%;min-height:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right:var(--border) solid var(--_panel-border-color)}:host>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_panel-border-color)}:host(:not([data-bottom-nav]))>nav{overflow:visible}.mobile-backdrop{z-index:calc(var(--z-sticky) + 1);background:color-mix(in oklch, var(--color-contrast-950) 36%, transparent);border:0;width:100%;height:100%;display:none;position:absolute;inset:0}:host([data-bottom-nav][data-mobile-open]) .mobile-backdrop{z-index:calc(var(--z-sticky) + 1);width:100vw;height:100dvh;display:block;position:fixed;inset:0}:host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop{width:100%;height:100%;position:absolute;inset:0}:host([data-no-transition]),:host([data-no-transition])>nav{transition:none}:host([data-collapsed]){min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}:host([data-bottom-nav]){z-index:calc(var(--z-sticky) + 2);width:100%;min-width:0;max-width:100%;height:var(--sidebar-bottom-nav-height,3.75rem);pointer-events:auto;position:fixed;bottom:0;left:0;right:0}:host([data-preview-mode][data-bottom-nav]){pointer-events:none;width:auto;height:auto;position:absolute;inset:0}:host([data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);width:min(var(--_sidebar-width), 85vw);max-width:85vw;max-height:100dvh;transition:transform var(--transition-normal);position:fixed;top:0;bottom:0;transform:translate(-104%)}:host([data-bottom-nav])>nav: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))){left:0}:host([data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([data-preview-mode][data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);pointer-events:auto;max-height:100%;position:absolute;top:0;bottom:0}:host([data-preview-mode][data-bottom-nav])>nav: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))){left:0}:host([data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host(:dir(rtl)[data-bottom-nav])>nav{transform:translate(104%)}:host([data-bottom-nav][data-mobile-open])>nav{transform:translate(0)}.bottom-bar{box-sizing:border-box;gap:var(--size-1);width:100%;height:100%;padding:var(--size-1);pointer-events:none;background:var(--_panel-bg);border-top:var(--border) solid var(--_panel-border-color);box-shadow:var(--shadow-sm);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--_sidebar-transition), transform var(--_sidebar-transition), display var(--_sidebar-transition) allow-discrete;justify-content:space-around;align-items:stretch;display:flex;transform:translateY(100%)}.bottom-bar[hidden]{display:none}:host([data-bottom-nav]) .bottom-bar{pointer-events:auto;opacity:1;transform:translateY(0)}:host([data-preview-mode][data-bottom-nav]) .bottom-bar{z-index:calc(var(--z-sticky) + 2);height:var(--sidebar-bottom-nav-height,3.75rem);position:absolute;bottom:0;left:0;right:0}:host([data-bottom-nav][data-mobile-open]) .bottom-bar{z-index:calc(var(--z-sticky) + 1);pointer-events:none;opacity:0;transform:translateY(100%)}.bottom-tab{all:unset;box-sizing:border-box;gap:var(--size-0-5);min-width:0;padding:var(--size-1) var(--size-1-5);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.bottom-tab:hover,.bottom-tab:focus-visible{color:var(--sidebar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.bottom-tab:disabled{color:var(--sidebar-item-disabled-color,var(--color-contrast-400));cursor:not-allowed;opacity:.7}.bottom-tab-active,.bottom-tab[data-active=true]{color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in oklch, var(--color-primary) 12%, transparent)))}.bottom-tab-active:before,.bottom-tab[data-active=true]:before{display:none}.bottom-tab-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.bottom-tab-label{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.sidebar-header{box-sizing:border-box;gap:var(--size-2);height:var(--sidebar-header-height,var(--size-16));min-height:var(--sidebar-header-height,var(--size-16));padding:var(--sidebar-header-padding,var(--size-3));border-bottom:var(--border) solid var(--color-contrast-200);justify-content:space-between;align-items:center;display:flex}.sidebar-header .sidebar-header-content{flex:1;min-width:0;display:block;overflow:hidden}:host([data-collapsed]) .sidebar-header{gap:var(--size-2);flex-direction:column;justify-content:flex-start;align-items:center}:host([data-collapsed]) .sidebar-header .sidebar-header-content{display:none}.sidebar-logo{min-width:var(--size-8);min-height:var(--size-8);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo: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-right:var(--size-2)}.sidebar-logo: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-2)}.sidebar-logo:empty{display:none}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo: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-right:0}:host([data-collapsed]) .sidebar-logo: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:0}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;z-index:1;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--sidebar-toggle-color,var(--color-contrast-600));cursor:pointer;background:var(--sidebar-toggle-bg,var(--_panel-bg));border:var(--border) solid var(--sidebar-toggle-border-color,var(--_panel-border-color));border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);top:var(--sidebar-toggle-offset,var(--size-4));justify-content:center;align-items:center;display:inline-flex;position:absolute;transform:translate(50%)}.toggle-btn: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))){right:0}.toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}:host(:dir(rtl)) .toggle-btn{transform:translate(-50%)}:host(:not([data-has-logo])) .toggle-btn{position:static;transform:none}:host(:not([data-has-logo])) .toggle-btn: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(:not([data-has-logo])) .toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host([data-collapsed]:not([data-has-logo])) .toggle-btn: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:0}:host([data-collapsed]:not([data-has-logo])) .toggle-btn: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:0}.toggle-btn:hover{color:var(--sidebar-toggle-hover-color,var(--color-contrast-900));background:var(--sidebar-toggle-hover-bg,var(--color-contrast-100));box-shadow:var(--shadow-md)}.toggle-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--size-0-5)}.toggle-icon{justify-content:center;align-items:center;display:flex}:host([data-bottom-nav]) .toggle-btn{display:none}}@layer refine.variants{:host([variant=floating]){--_panel-radius:var(--rounded-lg);height:calc(100% - var(--size-6));margin:var(--size-3)}:host([variant=floating])>nav{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius)}:host([variant=floating][data-bottom-nav]){bottom:var(--size-2);inset-inline:var(--size-2);width:auto;max-width:none}:host([variant=floating][data-preview-mode][data-bottom-nav]){inset:calc(var(--size-1) * -1)}:host([variant=floating][data-bottom-nav]) .bottom-bar{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow)}:host([variant=floating][data-bottom-nav])>nav{top:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav: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))){left:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([variant=floating][data-preview-mode][data-bottom-nav]) .bottom-bar{bottom:var(--size-2);inset-inline:var(--size-2);width:auto}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav{top:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav: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))){left:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-1)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.css.js","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n display: none;\n min-width: 0;\n min-height: 0;\n margin: 0;\n}\n\n/*\n * Simplified and unified sidebar CSS:\n * - Grouped collapsed/expanded state rules\n * - Consistent use of CSS variables for spacing, color, and transitions\n * - Removed redundant or legacy rules\n * - Clarified variant handling\n */\n\n@layer refine.base {\n :host {\n --_sidebar-width: var(--sidebar-width, 16rem);\n --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n --_sidebar-transition: var(--transition-normal);\n --_panel-bg: var(--sidebar-bg, var(--color-canvas));\n --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n --_panel-border-color: var(--sidebar-border-color, var(--color-divider));\n --_panel-radius: var(--sidebar-radius, var(--rounded-lg));\n --_panel-shadow: var(--sidebar-shadow, var(--shadow-md));\n\n box-sizing: border-box;\n display: block;\n width: 100%;\n min-width: var(--size-2xs);\n max-width: var(--_sidebar-width);\n height: 100%;\n min-height: 0;\n overflow: visible;\n transition:\n max-width var(--_sidebar-transition),\n min-width var(--_sidebar-transition);\n will-change: max-width;\n }\n\n :host > nav {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n background: var(--_panel-bg);\n border-inline-end: var(--border) solid var(--_panel-border-color);\n backdrop-filter: blur(var(--_panel-blur));\n }\n\n .mobile-backdrop {\n position: absolute;\n inset: 0;\n z-index: calc(var(--z-sticky) + 1);\n display: none;\n width: 100%;\n height: 100%;\n background: color-mix(in oklch, var(--color-contrast-950) 36%, transparent);\n border: 0;\n }\n\n :host([data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n position: fixed;\n inset: 0;\n z-index: calc(var(--z-sticky) + 1);\n display: block;\n width: 100vw;\n height: 100dvh;\n }\n\n :host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n }\n\n :host([data-no-transition]),\n :host([data-no-transition]) > nav {\n transition: none;\n }\n\n :host([data-collapsed]) {\n min-width: var(--_sidebar-collapsed-width);\n max-width: var(--_sidebar-collapsed-width);\n }\n\n :host([data-bottom-nav]) {\n position: fixed;\n inset-block-end: 0;\n inset-inline: 0;\n z-index: calc(var(--z-sticky) + 2);\n width: 100%;\n min-width: 0;\n max-width: 100%;\n height: var(--sidebar-bottom-nav-height, 3.75rem);\n pointer-events: auto;\n }\n\n /* Preview mode: constrain bottom-nav to container bounds */\n :host([data-preview-mode][data-bottom-nav]) {\n position: absolute;\n inset: 0;\n width: auto;\n height: auto;\n pointer-events: none;\n }\n\n :host([data-bottom-nav]) > nav {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: calc(var(--z-sticky) + 3);\n width: min(var(--_sidebar-width), 85vw);\n max-width: 85vw;\n max-height: 100dvh;\n transform: translateX(-104%);\n transition: transform var(--transition-normal);\n }\n\n /* Preview mode: use absolute positioning so drawer stays within container */\n :host([data-preview-mode][data-bottom-nav]) > nav {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: calc(var(--z-sticky) + 3);\n max-height: 100%;\n pointer-events: auto;\n }\n\n :host(:dir(rtl)[data-bottom-nav]) > nav {\n transform: translateX(104%);\n }\n\n :host([data-bottom-nav][data-mobile-open]) > nav {\n transform: translateX(0);\n }\n\n .bottom-bar {\n display: flex;\n gap: var(--size-1);\n align-items: stretch;\n justify-content: space-around;\n width: 100%;\n height: 100%;\n padding: var(--size-1);\n pointer-events: none;\n background: var(--_panel-bg);\n border-top: var(--border) solid var(--_panel-border-color);\n box-shadow: var(--shadow-sm);\n opacity: 0;\n backdrop-filter: blur(var(--_panel-blur));\n transform: translateY(100%);\n transition:\n opacity var(--_sidebar-transition),\n transform var(--_sidebar-transition),\n display var(--_sidebar-transition) allow-discrete;\n }\n\n :host([data-bottom-nav]) .bottom-bar {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n }\n\n :host([data-preview-mode][data-bottom-nav]) .bottom-bar {\n position: absolute;\n inset-block-end: 0;\n inset-inline: 0;\n z-index: calc(var(--z-sticky) + 2);\n height: var(--sidebar-bottom-nav-height, 3.75rem);\n }\n\n :host([data-bottom-nav][data-mobile-open]) .bottom-bar {\n z-index: calc(var(--z-sticky) + 1);\n pointer-events: none;\n opacity: 0;\n transform: translateY(100%);\n }\n\n .bottom-tab {\n all: unset;\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n gap: var(--size-0-5);\n align-items: center;\n justify-content: center;\n min-width: 0;\n padding: var(--size-1) var(--size-1-5);\n color: var(--sidebar-item-color, var(--color-contrast-700));\n text-decoration: none;\n cursor: pointer;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .bottom-tab:hover,\n .bottom-tab: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 .bottom-tab:disabled {\n color: var(--sidebar-item-disabled-color, var(--color-contrast-400));\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .bottom-tab-active,\n .bottom-tab[data-active='true'] {\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 .bottom-tab-active::before,\n .bottom-tab[data-active='true']::before {\n display: none;\n }\n\n .bottom-tab-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-5);\n height: var(--size-5);\n }\n\n .bottom-tab-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--text-xs);\n white-space: nowrap;\n }\n\n .sidebar-header {\n display: flex;\n gap: var(--size-2);\n align-items: center;\n justify-content: space-between;\n min-height: var(--size-6);\n padding: var(--size-4);\n border-bottom: var(--border) solid var(--color-contrast-200);\n }\n\n .sidebar-header .sidebar-header-content {\n display: block;\n flex: 1 1 0%;\n min-width: 0;\n overflow: hidden;\n }\n\n :host([data-collapsed]) .sidebar-header {\n flex-direction: column;\n gap: var(--size-2);\n align-items: center;\n justify-content: flex-start;\n min-height: unset;\n padding-block: var(--size-2);\n padding-inline: var(--size-2);\n }\n\n :host([data-collapsed]) .sidebar-header .sidebar-header-content {\n display: none;\n }\n\n .sidebar-logo {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n min-width: var(--size-8);\n min-height: var(--size-8);\n margin-inline-end: var(--size-2);\n }\n\n .sidebar-logo:empty {\n display: none;\n }\n\n :host([data-collapsed]) .sidebar-logo {\n margin-block: var(--size-1);\n margin-inline-end: 0;\n }\n\n .sidebar-content {\n display: grid;\n flex: 1;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--size-2);\n align-content: start;\n min-width: 0;\n padding: var(--size-4);\n overflow: clip auto;\n scrollbar-width: thin;\n }\n\n .sidebar-footer {\n flex-shrink: 0;\n padding: var(--size-4);\n border-top: var(--border) solid var(--color-contrast-200);\n }\n\n .toggle-btn {\n all: unset;\n box-sizing: border-box;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-8);\n height: var(--size-8);\n color: var(--color-contrast-500);\n cursor: pointer;\n border-radius: var(--rounded-sm);\n transition:\n color var(--transition-fast),\n background var(--transition-fast);\n }\n\n .toggle-btn:hover {\n color: var(--color-contrast-800);\n background: var(--color-contrast-200);\n }\n\n .toggle-btn:focus-visible {\n outline: var(--focus-ring);\n }\n\n .toggle-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--_motion-transition, transform var(--_sidebar-transition));\n }\n\n :host([data-collapsed]) .toggle-icon {\n transform: rotate(180deg);\n }\n\n :host([data-bottom-nav]) .toggle-btn {\n display: none;\n }\n\n :host(:not([dir='rtl'])[data-collapsed]) .toggle-icon,\n :host(:dir(ltr)[data-collapsed]) .toggle-icon {\n transform: rotate(180deg);\n }\n\n :host(:dir(rtl)) .toggle-icon {\n transform: rotate(180deg);\n }\n\n :host(:dir(rtl)[data-collapsed]) .toggle-icon {\n transform: rotate(0deg);\n }\n}\n\n@layer refine.variants {\n /* ── floating ── */\n :host([variant='floating']) {\n --_panel-radius: var(--rounded-lg);\n height: calc(100% - var(--size-6));\n margin: var(--size-3);\n }\n\n :host([variant='floating']) > nav {\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_panel-radius);\n }\n\n :host([variant='floating'][data-bottom-nav]) {\n inset-block-end: var(--size-2);\n inset-inline: var(--size-2);\n width: auto;\n max-width: none;\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) {\n inset: calc(var(--size-1) * -1);\n }\n\n :host([variant='floating'][data-bottom-nav]) .bottom-bar {\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_panel-radius);\n box-shadow: var(--_panel-shadow);\n }\n\n :host([variant='floating'][data-bottom-nav]) > nav {\n inset-block-start: var(--size-2);\n inset-inline-start: var(--size-2);\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) .bottom-bar {\n inset-block-end: var(--size-2);\n inset-inline: var(--size-2);\n width: auto;\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) > nav {\n inset-block-start: var(--size-1);\n inset-inline-start: var(--size-1);\n }\n\n /* ── inset ── */\n :host([variant='inset']) {\n --_panel-bg: var(--color-contrast-50);\n --_panel-shadow: none;\n --_panel-border-color: transparent;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"sidebar.css.js","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n display: none;\n min-width: 0;\n min-height: 0;\n margin: 0;\n}\n\n/*\n * Simplified and unified sidebar CSS:\n * - Grouped collapsed/expanded state rules\n * - Consistent use of CSS variables for spacing, color, and transitions\n * - Removed redundant or legacy rules\n * - Clarified variant handling\n */\n\n@layer refine.base {\n :host {\n --_sidebar-width: var(--sidebar-width, 16rem);\n --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n --_sidebar-transition: var(--transition-normal);\n --_panel-bg: var(--sidebar-bg, var(--color-canvas));\n --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n --_panel-border-color: var(--sidebar-border-color, var(--color-divider));\n --_panel-radius: var(--sidebar-radius, var(--rounded-lg));\n --_panel-shadow: var(--sidebar-shadow, var(--shadow-md));\n\n position: relative;\n z-index: var(--sidebar-z-index, 1);\n box-sizing: border-box;\n display: block;\n width: 100%;\n min-width: var(--size-2xs);\n max-width: var(--_sidebar-width);\n height: 100%;\n min-height: 0;\n overflow: visible;\n transition:\n max-width var(--_sidebar-transition),\n min-width var(--_sidebar-transition);\n will-change: max-width;\n }\n\n :host > nav {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n background: var(--_panel-bg);\n border-inline-end: var(--border) solid var(--_panel-border-color);\n backdrop-filter: blur(var(--_panel-blur));\n }\n\n :host(:not([data-bottom-nav])) > nav {\n overflow: visible;\n }\n\n .mobile-backdrop {\n position: absolute;\n inset: 0;\n z-index: calc(var(--z-sticky) + 1);\n display: none;\n width: 100%;\n height: 100%;\n background: color-mix(in oklch, var(--color-contrast-950) 36%, transparent);\n border: 0;\n }\n\n :host([data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n position: fixed;\n inset: 0;\n z-index: calc(var(--z-sticky) + 1);\n display: block;\n width: 100vw;\n height: 100dvh;\n }\n\n :host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n }\n\n :host([data-no-transition]),\n :host([data-no-transition]) > nav {\n transition: none;\n }\n\n :host([data-collapsed]) {\n min-width: var(--_sidebar-collapsed-width);\n max-width: var(--_sidebar-collapsed-width);\n }\n\n :host([data-bottom-nav]) {\n position: fixed;\n inset-block-end: 0;\n inset-inline: 0;\n z-index: calc(var(--z-sticky) + 2);\n width: 100%;\n min-width: 0;\n max-width: 100%;\n height: var(--sidebar-bottom-nav-height, 3.75rem);\n pointer-events: auto;\n }\n\n /* Preview mode: constrain bottom-nav to container bounds */\n :host([data-preview-mode][data-bottom-nav]) {\n position: absolute;\n inset: 0;\n width: auto;\n height: auto;\n pointer-events: none;\n }\n\n :host([data-bottom-nav]) > nav {\n position: fixed;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: calc(var(--z-sticky) + 3);\n width: min(var(--_sidebar-width), 85vw);\n max-width: 85vw;\n max-height: 100dvh;\n transform: translateX(-104%);\n transition: transform var(--transition-normal);\n }\n\n /* Preview mode: use absolute positioning so drawer stays within container */\n :host([data-preview-mode][data-bottom-nav]) > nav {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n z-index: calc(var(--z-sticky) + 3);\n max-height: 100%;\n pointer-events: auto;\n }\n\n :host(:dir(rtl)[data-bottom-nav]) > nav {\n transform: translateX(104%);\n }\n\n :host([data-bottom-nav][data-mobile-open]) > nav {\n transform: translateX(0);\n }\n\n .bottom-bar {\n box-sizing: border-box;\n display: flex;\n gap: var(--size-1);\n align-items: stretch;\n justify-content: space-around;\n width: 100%;\n height: 100%;\n padding: var(--size-1);\n pointer-events: none;\n background: var(--_panel-bg);\n border-top: var(--border) solid var(--_panel-border-color);\n box-shadow: var(--shadow-sm);\n opacity: 0;\n backdrop-filter: blur(var(--_panel-blur));\n transform: translateY(100%);\n transition:\n opacity var(--_sidebar-transition),\n transform var(--_sidebar-transition),\n display var(--_sidebar-transition) allow-discrete;\n }\n\n .bottom-bar[hidden] {\n display: none;\n }\n\n :host([data-bottom-nav]) .bottom-bar {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0);\n }\n\n :host([data-preview-mode][data-bottom-nav]) .bottom-bar {\n position: absolute;\n inset-block-end: 0;\n inset-inline: 0;\n z-index: calc(var(--z-sticky) + 2);\n height: var(--sidebar-bottom-nav-height, 3.75rem);\n }\n\n :host([data-bottom-nav][data-mobile-open]) .bottom-bar {\n z-index: calc(var(--z-sticky) + 1);\n pointer-events: none;\n opacity: 0;\n transform: translateY(100%);\n }\n\n .bottom-tab {\n all: unset;\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n gap: var(--size-0-5);\n align-items: center;\n justify-content: center;\n min-width: 0;\n padding: var(--size-1) var(--size-1-5);\n color: var(--sidebar-item-color, var(--color-contrast-700));\n text-decoration: none;\n cursor: pointer;\n border-radius: var(--rounded-md);\n transition:\n background var(--transition-fast),\n color var(--transition-fast);\n }\n\n .bottom-tab:hover,\n .bottom-tab: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 .bottom-tab:disabled {\n color: var(--sidebar-item-disabled-color, var(--color-contrast-400));\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .bottom-tab-active,\n .bottom-tab[data-active='true'] {\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 .bottom-tab-active::before,\n .bottom-tab[data-active='true']::before {\n display: none;\n }\n\n .bottom-tab-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--size-5);\n height: var(--size-5);\n }\n\n .bottom-tab-label {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--text-xs);\n white-space: nowrap;\n }\n\n .sidebar-header {\n box-sizing: border-box;\n display: flex;\n gap: var(--size-2);\n align-items: center;\n justify-content: space-between;\n height: var(--sidebar-header-height, var(--size-16));\n min-height: var(--sidebar-header-height, var(--size-16));\n padding: var(--sidebar-header-padding, var(--size-3));\n border-bottom: var(--border) solid var(--color-contrast-200);\n }\n\n .sidebar-header .sidebar-header-content {\n display: block;\n flex: 1 1 0%;\n min-width: 0;\n overflow: hidden;\n }\n\n :host([data-collapsed]) .sidebar-header {\n flex-direction: column;\n gap: var(--size-2);\n align-items: center;\n justify-content: flex-start;\n }\n\n :host([data-collapsed]) .sidebar-header .sidebar-header-content {\n display: none;\n }\n\n .sidebar-logo {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n min-width: var(--size-8);\n min-height: var(--size-8);\n margin-inline-end: var(--size-2);\n }\n\n .sidebar-logo:empty {\n display: none;\n }\n\n :host([data-collapsed]) .sidebar-logo {\n margin-block: var(--size-1);\n margin-inline-end: 0;\n }\n\n .sidebar-content {\n display: grid;\n flex: 1;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--size-2);\n align-content: start;\n min-width: 0;\n padding: var(--size-4);\n overflow: clip auto;\n scrollbar-width: thin;\n }\n\n .sidebar-footer {\n flex-shrink: 0;\n padding: var(--size-4);\n border-top: var(--border) solid var(--color-contrast-200);\n }\n\n .toggle-btn {\n all: unset;\n position: absolute;\n inset-block-start: var(--sidebar-toggle-offset, var(--size-4));\n inset-inline-end: 0;\n z-index: 1;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-8);\n height: var(--size-8);\n color: var(--sidebar-toggle-color, var(--color-contrast-600));\n cursor: pointer;\n background: var(--sidebar-toggle-bg, var(--_panel-bg));\n border: var(--border) solid var(--sidebar-toggle-border-color, var(--_panel-border-color));\n border-radius: var(--rounded-full);\n box-shadow: var(--shadow-sm);\n transform: translateX(50%);\n transition:\n color var(--transition-fast),\n background var(--transition-fast),\n box-shadow var(--transition-fast);\n }\n\n :host(:dir(rtl)) .toggle-btn {\n transform: translateX(-50%);\n }\n\n :host(:not([data-has-logo])) .toggle-btn {\n position: static;\n margin-inline-start: auto;\n transform: none;\n }\n\n :host([data-collapsed]:not([data-has-logo])) .toggle-btn {\n margin-inline-start: 0;\n }\n\n .toggle-btn:hover {\n color: var(--sidebar-toggle-hover-color, var(--color-contrast-900));\n background: var(--sidebar-toggle-hover-bg, var(--color-contrast-100));\n box-shadow: var(--shadow-md);\n }\n\n .toggle-btn:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--size-0-5);\n }\n\n .toggle-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n :host([data-bottom-nav]) .toggle-btn {\n display: none;\n }\n}\n\n@layer refine.variants {\n /* ── floating ── */\n :host([variant='floating']) {\n --_panel-radius: var(--rounded-lg);\n height: calc(100% - var(--size-6));\n margin: var(--size-3);\n }\n\n :host([variant='floating']) > nav {\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_panel-radius);\n }\n\n :host([variant='floating'][data-bottom-nav]) {\n inset-block-end: var(--size-2);\n inset-inline: var(--size-2);\n width: auto;\n max-width: none;\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) {\n inset: calc(var(--size-1) * -1);\n }\n\n :host([variant='floating'][data-bottom-nav]) .bottom-bar {\n border: var(--border) solid var(--_panel-border-color);\n border-radius: var(--_panel-radius);\n box-shadow: var(--_panel-shadow);\n }\n\n :host([variant='floating'][data-bottom-nav]) > nav {\n inset-block-start: var(--size-2);\n inset-inline-start: var(--size-2);\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) .bottom-bar {\n inset-block-end: var(--size-2);\n inset-inline: var(--size-2);\n width: auto;\n }\n\n :host([variant='floating'][data-preview-mode][data-bottom-nav]) > nav {\n inset-block-start: var(--size-1);\n inset-inline-start: var(--size-1);\n }\n\n /* ── inset ── */\n :host([variant='inset']) {\n --_panel-bg: var(--color-contrast-50);\n --_panel-shadow: none;\n --_panel-border-color: transparent;\n }\n}\n"],"mappings":""}
|
|
@@ -6,6 +6,8 @@ type SidebarMobileSource = 'api' | 'responsive' | 'toggle';
|
|
|
6
6
|
type SidebarMode = 'bottom-nav' | 'collapsed' | 'default';
|
|
7
7
|
/** Context provided by `ore-sidebar` to its `ore-sidebar-group` and `ore-sidebar-item` children. */
|
|
8
8
|
export type SidebarContext = {
|
|
9
|
+
closeMobile: () => void;
|
|
10
|
+
closeOnSelect: Readable<boolean>;
|
|
9
11
|
collapsed: Readable<boolean>;
|
|
10
12
|
mobileOpen: Readable<boolean>;
|
|
11
13
|
mode: Readable<SidebarMode>;
|
|
@@ -45,20 +47,24 @@ export type OreSidebarGroupEvents = {
|
|
|
45
47
|
export type OreSidebarProps = {
|
|
46
48
|
/** CSS media query that switches the sidebar to bottom navigation mode */
|
|
47
49
|
'bottom-nav-at'?: string;
|
|
50
|
+
'close-on-select'?: boolean;
|
|
48
51
|
/** Controlled collapsed state */
|
|
49
52
|
collapsed?: boolean;
|
|
50
53
|
/** Whether the sidebar supports collapsing */
|
|
51
54
|
collapsible?: boolean;
|
|
55
|
+
'collapse-label'?: string;
|
|
52
56
|
/** Evaluate responsive and bottom-nav breakpoints against container width only. */
|
|
53
57
|
'container-breakpoints'?: boolean;
|
|
54
58
|
/** Initial collapsed state in uncontrolled mode */
|
|
55
59
|
'default-collapsed'?: boolean;
|
|
60
|
+
'expand-label'?: string;
|
|
56
61
|
/**
|
|
57
62
|
* Accessible label for the navigation landmark.
|
|
58
63
|
* Use to distinguish multiple navigation regions on a page.
|
|
59
64
|
* @default 'Sidebar navigation'
|
|
60
65
|
*/
|
|
61
66
|
label?: string;
|
|
67
|
+
'mobile-close-label'?: string;
|
|
62
68
|
/**
|
|
63
69
|
* CSS media query that, when it matches, automatically collapses the sidebar.
|
|
64
70
|
* Unset by default — no automatic collapse.
|
|
@@ -162,6 +168,8 @@ export declare const SIDEBAR_GROUP_TAG: "ore-sidebar-group";
|
|
|
162
168
|
export type OreSidebarItemProps = {
|
|
163
169
|
/** Whether this item represents the current page/section */
|
|
164
170
|
active?: boolean;
|
|
171
|
+
'bottom-nav'?: boolean;
|
|
172
|
+
'bottom-nav-label'?: string;
|
|
165
173
|
/** Whether this item is disabled */
|
|
166
174
|
disabled?: boolean;
|
|
167
175
|
/** Navigation href — renders an `<a>` when set, otherwise a `<button>` */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sidebar.ts"],"names":[],"mappings":"AAcA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAG1E,OAAO,yBAAyB,CAAC;AASjC,KAAK,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3C,KAAK,qBAAqB,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;AAC7D,KAAK,mBAAmB,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;AAC3D,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sidebar.ts"],"names":[],"mappings":"AAcA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAG1E,OAAO,yBAAyB,CAAC;AASjC,KAAK,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3C,KAAK,qBAAqB,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;AAC7D,KAAK,mBAAmB,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;AAC3D,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;AAqD1D,oGAAoG;AACpG,MAAM,MAAM,cAAc,GAAG;IAC3B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACjC,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC9B,IAAI,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC5B,OAAO,EAAE,QAAQ,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;CAC/C,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,WAAW,sDAAkD,CAAC;AAI3E,oCAAoC;AACpC,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,eAAe,GAAG;IAChB,2CAA2C;IAC3C,WAAW,IAAI,IAAI,CAAC;IACpB,0CAA0C;IAC1C,UAAU,IAAI,IAAI,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,6CAA6C;IAC7C,MAAM,IAAI,IAAI,CAAC;IACf,4CAA4C;IAC5C,YAAY,IAAI,IAAI,CAAC;CACtB,CAAC;AAEJ,mCAAmC;AAEnC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kBAAkB,EAAE;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,qBAAqB,CAAA;KAAE,CAAC;IAC1E,oBAAoB,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,mBAAmB,CAAA;KAAE,CAAC;CACtE,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mFAAmF;IACnF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,mDAAmD;IACnD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,WAAW,EAAG,aAAsB,CAAC;AAwgBlD,+BAA+B;AAC/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,iBAAiB,EAAG,mBAA4B,CAAC;AA8E9D,8BAA8B;AAC9B,MAAM,MAAM,mBAAmB,GAAG;IAChC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,gBAAgB,EAAG,kBAA2B,CAAC"}
|