@vielzeug/refine 1.3.0 → 1.3.1
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/button.cjs +1 -1
- package/dist/button.cjs.map +1 -1
- package/dist/button.js +3 -3
- package/dist/button.js.map +1 -1
- package/dist/content/card/card.css.cjs +1 -1
- package/dist/content/card/card.css.cjs.map +1 -1
- package/dist/content/card/card.css.js +1 -1
- package/dist/content/card/card.css.js.map +1 -1
- package/dist/content/icon/icon.css.cjs +1 -1
- package/dist/content/icon/icon.css.cjs.map +1 -1
- package/dist/content/icon/icon.css.js +1 -1
- package/dist/content/icon/icon.css.js.map +1 -1
- package/dist/custom-elements.json +2079 -2079
- package/dist/feedback/toast/toast.css.cjs +1 -1
- package/dist/feedback/toast/toast.css.cjs.map +1 -1
- package/dist/feedback/toast/toast.css.js +1 -1
- package/dist/feedback/toast/toast.css.js.map +1 -1
- package/dist/inputs/button/button.css.cjs +1 -1
- package/dist/inputs/button/button.css.cjs.map +1 -1
- package/dist/inputs/button/button.css.js +1 -1
- package/dist/inputs/button/button.css.js.map +1 -1
- package/dist/inputs/checkbox/checkbox.css.cjs +1 -1
- package/dist/inputs/checkbox/checkbox.css.cjs.map +1 -1
- package/dist/inputs/checkbox/checkbox.css.js +1 -1
- package/dist/inputs/checkbox/checkbox.css.js.map +1 -1
- package/dist/inputs/checkbox-group/checkbox-group.css.cjs +1 -1
- package/dist/inputs/checkbox-group/checkbox-group.css.cjs.map +1 -1
- package/dist/inputs/checkbox-group/checkbox-group.css.js +1 -1
- package/dist/inputs/checkbox-group/checkbox-group.css.js.map +1 -1
- package/dist/inputs/file-input/file-input.css.cjs +1 -1
- package/dist/inputs/file-input/file-input.css.cjs.map +1 -1
- package/dist/inputs/file-input/file-input.css.js +1 -1
- package/dist/inputs/file-input/file-input.css.js.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/otp-input/otp-input.css.cjs +1 -1
- package/dist/inputs/otp-input/otp-input.css.cjs.map +1 -1
- package/dist/inputs/otp-input/otp-input.css.js +1 -1
- package/dist/inputs/otp-input/otp-input.css.js.map +1 -1
- package/dist/inputs/radio/radio.css.cjs +1 -1
- package/dist/inputs/radio/radio.css.cjs.map +1 -1
- package/dist/inputs/radio/radio.css.js +1 -1
- package/dist/inputs/radio/radio.css.js.map +1 -1
- package/dist/inputs/radio-group/radio-group.css.cjs +1 -1
- package/dist/inputs/radio-group/radio-group.css.cjs.map +1 -1
- package/dist/inputs/radio-group/radio-group.css.js +1 -1
- package/dist/inputs/radio-group/radio-group.css.js.map +1 -1
- package/dist/inputs/rating/rating.css.cjs +1 -1
- package/dist/inputs/rating/rating.css.cjs.map +1 -1
- package/dist/inputs/rating/rating.css.js +1 -1
- package/dist/inputs/rating/rating.css.js.map +1 -1
- package/dist/inputs/slider/slider.css.cjs +1 -1
- package/dist/inputs/slider/slider.css.cjs.map +1 -1
- package/dist/inputs/slider/slider.css.js +1 -1
- package/dist/inputs/slider/slider.css.js.map +1 -1
- package/dist/inputs/switch/switch.css.cjs +1 -1
- package/dist/inputs/switch/switch.css.cjs.map +1 -1
- package/dist/inputs/switch/switch.css.js +1 -1
- package/dist/inputs/switch/switch.css.js.map +1 -1
- package/dist/inputs/textarea/textarea.css.cjs +1 -1
- package/dist/inputs/textarea/textarea.css.cjs.map +1 -1
- package/dist/inputs/textarea/textarea.css.js +1 -1
- package/dist/inputs/textarea/textarea.css.js.map +1 -1
- package/dist/layout/navbar/navbar.css.cjs +1 -1
- package/dist/layout/navbar/navbar.css.cjs.map +1 -1
- package/dist/layout/navbar/navbar.css.js +1 -1
- package/dist/layout/navbar/navbar.css.js.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/overlay/menu/menu.css.cjs +1 -1
- package/dist/overlay/menu/menu.css.cjs.map +1 -1
- package/dist/overlay/menu/menu.css.js +1 -1
- package/dist/overlay/menu/menu.css.js.map +1 -1
- package/dist/refine.cjs +19 -22
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +19 -22
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +19 -22
- package/dist/refine.js.map +1 -1
- package/dist/styles/mixins/animation.css.cjs +0 -3
- package/dist/styles/mixins/animation.css.cjs.map +1 -1
- package/dist/styles/mixins/animation.css.d.ts +12 -4
- package/dist/styles/mixins/animation.css.d.ts.map +1 -1
- package/dist/styles/mixins/animation.css.js +0 -3
- package/dist/styles/mixins/animation.css.js.map +1 -1
- package/dist/styles/mixins/variants.css.cjs.map +1 -1
- package/dist/styles/mixins/variants.css.d.ts +7 -2
- package/dist/styles/mixins/variants.css.d.ts.map +1 -1
- package/dist/styles/mixins/variants.css.js.map +1 -1
- package/dist/styles/theme.css +341 -132
- package/package.json +11 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n display: none !important;\n min-width: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\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, 40) + 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, 40) + 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 !important;\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, 40) + 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, 40) + 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, 40) + 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, 40) + 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, 40) + 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 !important;\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 !important;\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 height: calc(100% - var(--size-6));\n margin: var(--size-3);\n\n --_panel-radius: var(--rounded-lg);\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: var(--size-2);\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 !important;\n min-width: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\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 !important;\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 !important;\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 !important;\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 height: calc(100% - var(--size-6));\n margin: var(--size-3);\n\n --_panel-radius: var(--rounded-lg);\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: var(--size-2);\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!important;min-height:0!important;margin:0!important;display:none!important}@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(: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,40) + 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,40) + 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!important}: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,40) + 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,40) + 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(: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,40) + 3);pointer-events:auto;max-height:100%;position:absolute;top:0;bottom:0}:host([data-preview-mode][data-bottom-nav])>nav:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}: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,40) + 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,40) + 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!important}.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(: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!important}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right: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]){height:calc(100% - var(--size-6));margin:var(--size-3);--_panel-radius:var(--rounded-lg)}: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:var(--size-2)}: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(: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(: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!important;min-height:0!important;margin:0!important;display:none!important}@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(: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!important}: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(: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(: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!important}.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(: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!important}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right: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]){height:calc(100% - var(--size-6));margin:var(--size-3);--_panel-radius:var(--rounded-lg)}: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:var(--size-2)}: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(: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(: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 !important;\n min-width: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\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, 40) + 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, 40) + 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 !important;\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, 40) + 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, 40) + 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, 40) + 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, 40) + 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, 40) + 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 !important;\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 !important;\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 height: calc(100% - var(--size-6));\n margin: var(--size-3);\n\n --_panel-radius: var(--rounded-lg);\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: var(--size-2);\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 !important;\n min-width: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\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 !important;\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 !important;\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 !important;\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 height: calc(100% - var(--size-6));\n margin: var(--size-3);\n\n --_panel-radius: var(--rounded-lg);\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: var(--size-2);\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,2 +1,2 @@
|
|
|
1
|
-
var e=`@layer refine.base{:host{--_menu-panel-bg:var(--menu-panel-bg,var(--color-canvas));--_menu-panel-border-color:var(--menu-panel-border-color,var(--color-divider));--_menu-panel-blur:var(--menu-panel-blur,var(--blur-md));--_menu-panel-shadow:var(--menu-panel-shadow,var(--shadow-xl));display:inline-block;position:relative}.menu-panel{z-index:calc(var(--z-popover
|
|
1
|
+
var e=`@layer refine.base{:host{--_menu-panel-bg:var(--menu-panel-bg,var(--color-canvas));--_menu-panel-border-color:var(--menu-panel-border-color,var(--color-divider));--_menu-panel-blur:var(--menu-panel-blur,var(--blur-md));--_menu-panel-shadow:var(--menu-panel-shadow,var(--shadow-xl));display:inline-block;position:relative}.menu-panel{z-index:calc(var(--z-popover) + 1);box-sizing:border-box;min-width:var(--menu-panel-min-width,10rem);max-height:var(--menu-panel-max-height,min(70vh, 32rem));padding:var(--size-1);pointer-events:none;background:var(--_menu-panel-bg);border:var(--border) solid var(--_menu-panel-border-color);border-radius:var(--menu-panel-radius,var(--rounded-lg));box-shadow:var(--_menu-panel-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--_menu-panel-blur));backdrop-filter:blur(var(--_menu-panel-blur));transform:translateY(var(--overlay-enter-translate-y)) scale(var(--overlay-enter-scale));transform-origin:0 0;transition:opacity .1s var(--ease-spring), transform .1s var(--ease-spring), display .1s allow-discrete, overlay .1s allow-discrete;margin:0;position:fixed;top:0;overflow-y:auto}.menu-panel:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.menu-panel: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}.menu-panel[data-placement=top-start],.menu-panel[data-placement=top],.menu-panel[data-placement=top-end]{transform-origin:0 100%}.menu-panel[data-placement=bottom-end],.menu-panel[data-placement=right-start],.menu-panel[data-placement=right]{transform-origin:100% 0}.menu-panel[data-open]{pointer-events:auto;opacity:1;transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring), display .15s allow-discrete, overlay .15s allow-discrete;transform:translateY(0)scale(1)}@starting-style{.menu-panel[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y)) scale(var(--overlay-enter-scale))}}::slotted(ore-menu-item),::slotted(ore-menu-separator){display:block}}`;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=menu.css.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.css.cjs","names":[],"sources":["../../../src/overlay/menu/menu.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_menu-panel-bg: var(--menu-panel-bg, var(--color-canvas));\n --_menu-panel-border-color: var(--menu-panel-border-color, var(--color-divider));\n --_menu-panel-blur: var(--menu-panel-blur, var(--blur-md));\n --_menu-panel-shadow: var(--menu-panel-shadow, var(--shadow-xl));\n\n position: relative;\n display: inline-block;\n }\n\n /* ========================================\n Menu Panel\n ======================================== */\n\n .menu-panel {\n position: fixed;\n inset-inline-start: 0;\n top: 0;\n z-index: calc(var(--z-popover
|
|
1
|
+
{"version":3,"file":"menu.css.cjs","names":[],"sources":["../../../src/overlay/menu/menu.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_menu-panel-bg: var(--menu-panel-bg, var(--color-canvas));\n --_menu-panel-border-color: var(--menu-panel-border-color, var(--color-divider));\n --_menu-panel-blur: var(--menu-panel-blur, var(--blur-md));\n --_menu-panel-shadow: var(--menu-panel-shadow, var(--shadow-xl));\n\n position: relative;\n display: inline-block;\n }\n\n /* ========================================\n Menu Panel\n ======================================== */\n\n .menu-panel {\n position: fixed;\n inset-inline-start: 0;\n top: 0;\n z-index: calc(var(--z-popover) + 1);\n box-sizing: border-box;\n min-width: var(--menu-panel-min-width, 10rem);\n max-height: var(--menu-panel-max-height, min(70vh, 32rem));\n padding: var(--size-1);\n margin: 0;\n overflow-y: auto;\n pointer-events: none;\n background: var(--_menu-panel-bg);\n border: var(--border) solid var(--_menu-panel-border-color);\n border-radius: var(--menu-panel-radius, var(--rounded-lg));\n box-shadow: var(--_menu-panel-shadow);\n opacity: 0;\n backdrop-filter: blur(var(--_menu-panel-blur));\n transform: translateY(var(--overlay-enter-translate-y)) scale(var(--overlay-enter-scale));\n transform-origin: top left;\n transition:\n opacity 100ms var(--ease-spring),\n transform 100ms var(--ease-spring),\n display 100ms allow-discrete,\n overlay 100ms allow-discrete;\n }\n\n .menu-panel[data-placement='top-start'],\n .menu-panel[data-placement='top'],\n .menu-panel[data-placement='top-end'] {\n transform-origin: bottom left;\n }\n\n .menu-panel[data-placement='bottom-end'],\n .menu-panel[data-placement='right-start'],\n .menu-panel[data-placement='right'] {\n transform-origin: top right;\n }\n\n .menu-panel[data-open] {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0) scale(1);\n transition:\n opacity 150ms var(--ease-spring),\n transform 150ms var(--ease-spring),\n display 150ms allow-discrete,\n overlay 150ms allow-discrete;\n\n @starting-style {\n opacity: 0;\n transform: translateY(var(--overlay-enter-translate-y)) scale(var(--overlay-enter-scale));\n }\n }\n\n /* ========================================\n Menu Items (slotted ore-menu-item)\n ======================================== */\n\n ::slotted(ore-menu-item) {\n display: block;\n }\n\n ::slotted(ore-menu-separator) {\n display: block;\n }\n}\n"],"mappings":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//#region src/overlay/menu/menu.css?inline
|
|
2
|
-
var e = "@layer refine.base{:host{--_menu-panel-bg:var(--menu-panel-bg,var(--color-canvas));--_menu-panel-border-color:var(--menu-panel-border-color,var(--color-divider));--_menu-panel-blur:var(--menu-panel-blur,var(--blur-md));--_menu-panel-shadow:var(--menu-panel-shadow,var(--shadow-xl));display:inline-block;position:relative}.menu-panel{z-index:calc(var(--z-popover
|
|
2
|
+
var e = "@layer refine.base{:host{--_menu-panel-bg:var(--menu-panel-bg,var(--color-canvas));--_menu-panel-border-color:var(--menu-panel-border-color,var(--color-divider));--_menu-panel-blur:var(--menu-panel-blur,var(--blur-md));--_menu-panel-shadow:var(--menu-panel-shadow,var(--shadow-xl));display:inline-block;position:relative}.menu-panel{z-index:calc(var(--z-popover) + 1);box-sizing:border-box;min-width:var(--menu-panel-min-width,10rem);max-height:var(--menu-panel-max-height,min(70vh, 32rem));padding:var(--size-1);pointer-events:none;background:var(--_menu-panel-bg);border:var(--border) solid var(--_menu-panel-border-color);border-radius:var(--menu-panel-radius,var(--rounded-lg));box-shadow:var(--_menu-panel-shadow);opacity:0;-webkit-backdrop-filter:blur(var(--_menu-panel-blur));backdrop-filter:blur(var(--_menu-panel-blur));transform:translateY(var(--overlay-enter-translate-y)) scale(var(--overlay-enter-scale));transform-origin:0 0;transition:opacity .1s var(--ease-spring), transform .1s var(--ease-spring), display .1s allow-discrete, overlay .1s allow-discrete;margin:0;position:fixed;top:0;overflow-y:auto}.menu-panel:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.menu-panel: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}.menu-panel[data-placement=top-start],.menu-panel[data-placement=top],.menu-panel[data-placement=top-end]{transform-origin:0 100%}.menu-panel[data-placement=bottom-end],.menu-panel[data-placement=right-start],.menu-panel[data-placement=right]{transform-origin:100% 0}.menu-panel[data-open]{pointer-events:auto;opacity:1;transition:opacity .15s var(--ease-spring), transform .15s var(--ease-spring), display .15s allow-discrete, overlay .15s allow-discrete;transform:translateY(0)scale(1)}@starting-style{.menu-panel[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y)) scale(var(--overlay-enter-scale))}}::slotted(ore-menu-item),::slotted(ore-menu-separator){display:block}}";
|
|
3
3
|
//#endregion
|
|
4
4
|
export { e as default };
|
|
5
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.css.js","names":[],"sources":["../../../src/overlay/menu/menu.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_menu-panel-bg: var(--menu-panel-bg, var(--color-canvas));\n --_menu-panel-border-color: var(--menu-panel-border-color, var(--color-divider));\n --_menu-panel-blur: var(--menu-panel-blur, var(--blur-md));\n --_menu-panel-shadow: var(--menu-panel-shadow, var(--shadow-xl));\n\n position: relative;\n display: inline-block;\n }\n\n /* ========================================\n Menu Panel\n ======================================== */\n\n .menu-panel {\n position: fixed;\n inset-inline-start: 0;\n top: 0;\n z-index: calc(var(--z-popover
|
|
1
|
+
{"version":3,"file":"menu.css.js","names":[],"sources":["../../../src/overlay/menu/menu.css?inline"],"sourcesContent":["@layer refine.base {\n :host {\n --_menu-panel-bg: var(--menu-panel-bg, var(--color-canvas));\n --_menu-panel-border-color: var(--menu-panel-border-color, var(--color-divider));\n --_menu-panel-blur: var(--menu-panel-blur, var(--blur-md));\n --_menu-panel-shadow: var(--menu-panel-shadow, var(--shadow-xl));\n\n position: relative;\n display: inline-block;\n }\n\n /* ========================================\n Menu Panel\n ======================================== */\n\n .menu-panel {\n position: fixed;\n inset-inline-start: 0;\n top: 0;\n z-index: calc(var(--z-popover) + 1);\n box-sizing: border-box;\n min-width: var(--menu-panel-min-width, 10rem);\n max-height: var(--menu-panel-max-height, min(70vh, 32rem));\n padding: var(--size-1);\n margin: 0;\n overflow-y: auto;\n pointer-events: none;\n background: var(--_menu-panel-bg);\n border: var(--border) solid var(--_menu-panel-border-color);\n border-radius: var(--menu-panel-radius, var(--rounded-lg));\n box-shadow: var(--_menu-panel-shadow);\n opacity: 0;\n backdrop-filter: blur(var(--_menu-panel-blur));\n transform: translateY(var(--overlay-enter-translate-y)) scale(var(--overlay-enter-scale));\n transform-origin: top left;\n transition:\n opacity 100ms var(--ease-spring),\n transform 100ms var(--ease-spring),\n display 100ms allow-discrete,\n overlay 100ms allow-discrete;\n }\n\n .menu-panel[data-placement='top-start'],\n .menu-panel[data-placement='top'],\n .menu-panel[data-placement='top-end'] {\n transform-origin: bottom left;\n }\n\n .menu-panel[data-placement='bottom-end'],\n .menu-panel[data-placement='right-start'],\n .menu-panel[data-placement='right'] {\n transform-origin: top right;\n }\n\n .menu-panel[data-open] {\n pointer-events: auto;\n opacity: 1;\n transform: translateY(0) scale(1);\n transition:\n opacity 150ms var(--ease-spring),\n transform 150ms var(--ease-spring),\n display 150ms allow-discrete,\n overlay 150ms allow-discrete;\n\n @starting-style {\n opacity: 0;\n transform: translateY(var(--overlay-enter-translate-y)) scale(var(--overlay-enter-scale));\n }\n }\n\n /* ========================================\n Menu Items (slotted ore-menu-item)\n ======================================== */\n\n ::slotted(ore-menu-item) {\n display: block;\n }\n\n ::slotted(ore-menu-separator) {\n display: block;\n }\n}\n"],"mappings":""}
|