@vielzeug/refine 1.1.1 → 1.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.css.cjs","names":[],"sources":["../../../src/layout/grid/grid.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cols: var(--grid-cols, repeat(auto-fit, minmax(250px, 1fr)));\n    --_rows: var(--grid-rows, auto);\n    --_gap: var(--grid-gap, var(--size-4));\n    --_row-gap: var(--grid-row-gap, var(--_gap));\n    --_col-gap: var(--grid-col-gap, var(--_gap));\n\n    display: grid;\n    grid-template-rows: var(--_rows);\n    grid-template-columns: var(--_cols);\n    grid-auto-flow: row;\n    gap: var(--_row-gap) var(--_col-gap);\n  }\n\n  :host([gap='none']) {\n    --_row-gap: 0;\n    --_col-gap: 0;\n  }\n\n  :host([gap='xs']) {\n    --_row-gap: var(--size-1);\n    --_col-gap: var(--size-1);\n  }\n\n  :host([gap='sm']) {\n    --_row-gap: var(--size-2);\n    --_col-gap: var(--size-2);\n  }\n\n  :host([gap='md']) {\n    --_row-gap: var(--size-4);\n    --_col-gap: var(--size-4);\n  }\n\n  :host([gap='lg']) {\n    --_row-gap: var(--size-6);\n    --_col-gap: var(--size-6);\n  }\n\n  :host([gap='xl']) {\n    --_row-gap: var(--size-8);\n    --_col-gap: var(--size-8);\n  }\n\n  :host([gap='2xl']) {\n    --_row-gap: var(--size-12);\n    --_col-gap: var(--size-12);\n  }\n\n  :host([align='start']) {\n    align-items: start;\n  }\n\n  :host([align='center']) {\n    align-items: center;\n  }\n\n  :host([align='end']) {\n    align-items: end;\n  }\n\n  :host([align='stretch']) {\n    align-items: stretch;\n  }\n\n  :host([align='baseline']) {\n    align-items: baseline;\n  }\n\n  :host([justify='start']) {\n    justify-items: start;\n  }\n\n  :host([justify='center']) {\n    justify-items: center;\n  }\n\n  :host([justify='end']) {\n    justify-items: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-items: stretch;\n  }\n\n  :host([flow='row']) {\n    grid-auto-flow: row;\n  }\n\n  :host([flow='column']) {\n    grid-auto-flow: column;\n  }\n\n  :host([flow='row-dense']) {\n    grid-auto-flow: row dense;\n  }\n\n  :host([flow='column-dense']) {\n    grid-auto-flow: column dense;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid/{grid.css?inline.js → grid.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_cols:var(--grid-cols,repeat(auto-fit, minma
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=grid.css?inline.js.map
+//# sourceMappingURL=grid.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.css.js","names":[],"sources":["../../../src/layout/grid/grid.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_cols: var(--grid-cols, repeat(auto-fit, minmax(250px, 1fr)));\n    --_rows: var(--grid-rows, auto);\n    --_gap: var(--grid-gap, var(--size-4));\n    --_row-gap: var(--grid-row-gap, var(--_gap));\n    --_col-gap: var(--grid-col-gap, var(--_gap));\n\n    display: grid;\n    grid-template-rows: var(--_rows);\n    grid-template-columns: var(--_cols);\n    grid-auto-flow: row;\n    gap: var(--_row-gap) var(--_col-gap);\n  }\n\n  :host([gap='none']) {\n    --_row-gap: 0;\n    --_col-gap: 0;\n  }\n\n  :host([gap='xs']) {\n    --_row-gap: var(--size-1);\n    --_col-gap: var(--size-1);\n  }\n\n  :host([gap='sm']) {\n    --_row-gap: var(--size-2);\n    --_col-gap: var(--size-2);\n  }\n\n  :host([gap='md']) {\n    --_row-gap: var(--size-4);\n    --_col-gap: var(--size-4);\n  }\n\n  :host([gap='lg']) {\n    --_row-gap: var(--size-6);\n    --_col-gap: var(--size-6);\n  }\n\n  :host([gap='xl']) {\n    --_row-gap: var(--size-8);\n    --_col-gap: var(--size-8);\n  }\n\n  :host([gap='2xl']) {\n    --_row-gap: var(--size-12);\n    --_col-gap: var(--size-12);\n  }\n\n  :host([align='start']) {\n    align-items: start;\n  }\n\n  :host([align='center']) {\n    align-items: center;\n  }\n\n  :host([align='end']) {\n    align-items: end;\n  }\n\n  :host([align='stretch']) {\n    align-items: stretch;\n  }\n\n  :host([align='baseline']) {\n    align-items: baseline;\n  }\n\n  :host([justify='start']) {\n    justify-items: start;\n  }\n\n  :host([justify='center']) {\n    justify-items: center;\n  }\n\n  :host([justify='end']) {\n    justify-items: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-items: stretch;\n  }\n\n  :host([flow='row']) {\n    grid-auto-flow: row;\n  }\n\n  :host([flow='column']) {\n    grid-auto-flow: column;\n  }\n\n  :host([flow='row-dense']) {\n    grid-auto-flow: row dense;\n  }\n\n  :host([flow='column-dense']) {\n    grid-auto-flow: column dense;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid-item/{grid-item.css?inline.cjs → grid-item.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{display:block}}@layer refine.utilities{:host([align=start]){align-self:start}:host([align=center]){align-self:center}:host([align=end]){align-self:end}:host([align=stretch]){align-self:stretch}:host([justify=start]){justify-self:start}:host([justify=center]){justify-self:center}:host([justify=end]){justify-self:end}:host([justify=stretch]){justify-self:stretch}}`;exports.default=e;
-//# sourceMappingURL=grid-item.css?inline.cjs.map
+//# sourceMappingURL=grid-item.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.css.cjs","names":[],"sources":["../../../src/layout/grid-item/grid-item.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n}\n\n@layer refine.utilities {\n  :host([align='start']) {\n    align-self: start;\n  }\n\n  :host([align='center']) {\n    align-self: center;\n  }\n\n  :host([align='end']) {\n    align-self: end;\n  }\n\n  :host([align='stretch']) {\n    align-self: stretch;\n  }\n\n  :host([justify='start']) {\n    justify-self: start;\n  }\n\n  :host([justify='center']) {\n    justify-self: center;\n  }\n\n  :host([justify='end']) {\n    justify-self: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-self: stretch;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid-item/{grid-item.css?inline.js → grid-item.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{display:block}}@layer refine.utilities{:host([
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=grid-item.css?inline.js.map
+//# sourceMappingURL=grid-item.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.css.js","names":[],"sources":["../../../src/layout/grid-item/grid-item.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n}\n\n@layer refine.utilities {\n  :host([align='start']) {\n    align-self: start;\n  }\n\n  :host([align='center']) {\n    align-self: center;\n  }\n\n  :host([align='end']) {\n    align-self: end;\n  }\n\n  :host([align='stretch']) {\n    align-self: stretch;\n  }\n\n  :host([justify='start']) {\n    justify-self: start;\n  }\n\n  :host([justify='center']) {\n    justify-self: center;\n  }\n\n  :host([justify='end']) {\n    justify-self: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-self: stretch;\n  }\n}\n"],"mappings":""}

package/dist/layout/navbar/{navbar.css?inline.cjs → navbar.css.cjs}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.css.cjs","names":[],"sources":["../../../src/layout/navbar/navbar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_navbar-height: var(--navbar-height, var(--size-14));\n    --_navbar-width: var(--navbar-width, min(100%, 80rem));\n    --_navbar-offset: var(--navbar-offset, var(--size-3));\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-color: var(--navbar-color, var(--color-contrast-900));\n    --_navbar-border-color: var(--navbar-border-color, var(--color-divider));\n    --_navbar-shadow: var(--navbar-shadow, var(--shadow-md));\n    --_navbar-radius: var(--navbar-radius, var(--rounded-lg));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    color: var(--_navbar-color);\n  }\n\n  :host([data-mode='sticky']) {\n    position: sticky;\n    top: 0;\n    z-index: var(--z-sticky, 40);\n  }\n\n  :host([data-mode='floating']) {\n    position: fixed;\n    inset-inline: var(--_navbar-offset);\n    top: var(--_navbar-offset);\n    z-index: var(--z-sticky, 40);\n  }\n\n  /* Preview mode: use absolute positioning so component stays within container bounds */\n  :host([data-preview-mode][data-mode='floating']) {\n    position: absolute;\n    inset-inline: var(--_navbar-offset);\n    top: auto;\n  }\n\n  :host([floating][sticky][data-scrolled]) {\n    inset-inline: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  :host([data-preview-mode][floating][sticky][data-scrolled]) {\n    position: absolute;\n    inset-inline: 0;\n    top: auto;\n    width: auto;\n  }\n\n  :host > nav {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .navbar {\n    box-sizing: border-box;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    min-height: var(--_navbar-height);\n    padding: var(--size-2) var(--size-4);\n    margin-inline: auto;\n    overflow: auto hidden;\n    color: inherit;\n    white-space: nowrap;\n    background: var(--_navbar-bg);\n    border-top: none;\n    border-right: none;\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: none;\n    border-radius: 0;\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal)\n    );\n  }\n\n  :host([data-mode='floating']) .navbar {\n    border-top: var(--border) solid var(--_navbar-border-color);\n    border-right: var(--border) solid var(--_navbar-border-color);\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--_navbar-radius);\n  }\n\n  :host([data-mode='sticky']) .navbar,\n  :host([floating][sticky][data-scrolled]) .navbar {\n    max-width: 100%;\n    border-inline: none;\n    border-radius: 0;\n  }\n\n  :host([data-mode-transitioning][data-mode='sticky']) .navbar {\n    animation: navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out);\n  }\n\n  :host([data-mode-transitioning][data-mode='floating']) .navbar {\n    animation: navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out);\n  }\n\n  .navbar-logo,\n  .navbar-start,\n  .navbar-center,\n  .navbar-end {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  .navbar-logo {\n    flex: 0 0 auto;\n  }\n\n  .navbar-start {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n  }\n\n  .navbar-center {\n    display: flex;\n    flex: 0 1 auto;\n    gap: var(--size-1);\n    justify-content: flex-start;\n    min-width: 0;\n  }\n\n  .navbar-end {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  .mobile-toggle {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-9);\n    height: var(--size-9);\n    padding: 0;\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    background: transparent;\n    border: var(--border) solid transparent;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .mobile-toggle:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-100);\n    border-color: var(--color-contrast-200);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .mobile-menu-panel {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: none;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    padding: var(--size-2);\n    margin-block-start: var(--size-2);\n    margin-inline: auto;\n    background: var(--_navbar-bg);\n    border: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transform-origin: top;\n    animation: navbar-mobile-in var(--transition-fast) var(--ease-out);\n  }\n\n  :host([data-mobile][data-mobile-open]) .mobile-menu-panel {\n    display: grid;\n    gap: var(--size-1);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='floating']) .mobile-menu-panel {\n    margin-block-start: var(--size-1-5);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='sticky']) .mobile-menu-panel,\n  :host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel {\n    position: absolute;\n    inset-inline: 0;\n    top: 100%;\n    z-index: 2;\n    max-width: 100%;\n    margin: 0;\n    border-inline: none;\n    border-top: none;\n    border-radius: 0 0 var(--rounded-md) var(--rounded-md);\n  }\n\n  :host([data-mobile]) .mobile-toggle {\n    display: inline-flex;\n    order: -1;\n  }\n\n  :host([data-mobile]) .navbar-start,\n  :host([data-mobile]) .navbar-center,\n  :host([data-mobile]) .navbar-end {\n    display: none;\n  }\n\n  :host([data-mobile][data-mobile-open]) .navbar {\n    border-bottom-right-radius: var(--rounded-md);\n    border-bottom-left-radius: var(--rounded-md);\n  }\n\n  @starting-style {\n    .mobile-menu-panel {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  @keyframes navbar-mobile-in {\n    from {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes navbar-floating-to-sticky {\n    from {\n      opacity: 0.92;\n      transform: translateY(6px) scale(0.985);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes navbar-sticky-to-floating {\n    from {\n      opacity: 0.95;\n      transform: translateY(-2px) scale(1);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(0.99);\n    }\n  }\n\n  .item {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--navbar-item-color, var(--color-contrast-700));\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--navbar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--navbar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    color: var(--navbar-item-active-color, var(--color-primary));\n    background: var(--navbar-item-active-bg, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--color-contrast-400);\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: transparent;\n  }\n\n  .item-icon,\n  .item-end {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .item-label {\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  :host([navbar-mobile]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([navbar-mobile]) .item {\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='flat']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 88%, transparent);\n    --_navbar-shadow: none;\n  }\n\n  :host([variant='bordered']) {\n    --_navbar-bg: var(--color-canvas);\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 32%, transparent);\n  }\n\n  :host([variant='outline']) {\n    --_navbar-bg: transparent;\n    --_navbar-shadow: none;\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 40%, transparent);\n  }\n\n  :host([variant='glass']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 70%, transparent);\n    --navbar-backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([color]) {\n    --_navbar-border-color: color-mix(in oklch, var(--_theme-border) 30%, transparent);\n  }\n}\n\n@media (width <= 768px) {\n  @layer refine.base {\n    :host([data-mode='floating']) {\n      inset-inline: var(--size-2);\n      top: var(--size-2);\n    }\n\n    :host([floating][sticky][data-scrolled]) {\n      inset-inline: 0;\n      top: 0;\n    }\n  }\n}\n"],"mappings":""}

package/dist/layout/navbar/{navbar.css?inline.js → navbar.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{--_navbar-height:var(--navbar-height,var(--siz
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=navbar.css?inline.js.map
+//# sourceMappingURL=navbar.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.css.js","names":[],"sources":["../../../src/layout/navbar/navbar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_navbar-height: var(--navbar-height, var(--size-14));\n    --_navbar-width: var(--navbar-width, min(100%, 80rem));\n    --_navbar-offset: var(--navbar-offset, var(--size-3));\n    --_navbar-bg: var(--navbar-bg, var(--color-canvas));\n    --_navbar-color: var(--navbar-color, var(--color-contrast-900));\n    --_navbar-border-color: var(--navbar-border-color, var(--color-divider));\n    --_navbar-shadow: var(--navbar-shadow, var(--shadow-md));\n    --_navbar-radius: var(--navbar-radius, var(--rounded-lg));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    color: var(--_navbar-color);\n  }\n\n  :host([data-mode='sticky']) {\n    position: sticky;\n    top: 0;\n    z-index: var(--z-sticky, 40);\n  }\n\n  :host([data-mode='floating']) {\n    position: fixed;\n    inset-inline: var(--_navbar-offset);\n    top: var(--_navbar-offset);\n    z-index: var(--z-sticky, 40);\n  }\n\n  /* Preview mode: use absolute positioning so component stays within container bounds */\n  :host([data-preview-mode][data-mode='floating']) {\n    position: absolute;\n    inset-inline: var(--_navbar-offset);\n    top: auto;\n  }\n\n  :host([floating][sticky][data-scrolled]) {\n    inset-inline: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  :host([data-preview-mode][floating][sticky][data-scrolled]) {\n    position: absolute;\n    inset-inline: 0;\n    top: auto;\n    width: auto;\n  }\n\n  :host > nav {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .navbar {\n    box-sizing: border-box;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--size-2);\n    align-items: center;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    min-height: var(--_navbar-height);\n    padding: var(--size-2) var(--size-4);\n    margin-inline: auto;\n    overflow: auto hidden;\n    color: inherit;\n    white-space: nowrap;\n    background: var(--_navbar-bg);\n    border-top: none;\n    border-right: none;\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: none;\n    border-radius: 0;\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      transform var(--transition-normal)\n    );\n  }\n\n  :host([data-mode='floating']) .navbar {\n    border-top: var(--border) solid var(--_navbar-border-color);\n    border-right: var(--border) solid var(--_navbar-border-color);\n    border-bottom: var(--border) solid var(--_navbar-border-color);\n    border-left: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--_navbar-radius);\n  }\n\n  :host([data-mode='sticky']) .navbar,\n  :host([floating][sticky][data-scrolled]) .navbar {\n    max-width: 100%;\n    border-inline: none;\n    border-radius: 0;\n  }\n\n  :host([data-mode-transitioning][data-mode='sticky']) .navbar {\n    animation: navbar-floating-to-sticky var(--transition-normal) var(--ease-in-out);\n  }\n\n  :host([data-mode-transitioning][data-mode='floating']) .navbar {\n    animation: navbar-sticky-to-floating var(--transition-normal) var(--ease-in-out);\n  }\n\n  .navbar-logo,\n  .navbar-start,\n  .navbar-center,\n  .navbar-end {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  .navbar-logo {\n    flex: 0 0 auto;\n  }\n\n  .navbar-start {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n  }\n\n  .navbar-center {\n    display: flex;\n    flex: 0 1 auto;\n    gap: var(--size-1);\n    justify-content: flex-start;\n    min-width: 0;\n  }\n\n  .navbar-end {\n    flex: 0 0 auto;\n    gap: var(--size-1);\n    margin-inline-start: auto;\n  }\n\n  .mobile-toggle {\n    display: none;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-9);\n    height: var(--size-9);\n    padding: 0;\n    color: var(--color-contrast-700);\n    cursor: pointer;\n    background: transparent;\n    border: var(--border) solid transparent;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .mobile-toggle:hover {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-100);\n    border-color: var(--color-contrast-200);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .mobile-menu-panel {\n    position: relative;\n    z-index: 1;\n    box-sizing: border-box;\n    display: none;\n    width: 100%;\n    max-width: var(--_navbar-width);\n    padding: var(--size-2);\n    margin-block-start: var(--size-2);\n    margin-inline: auto;\n    background: var(--_navbar-bg);\n    border: var(--border) solid var(--_navbar-border-color);\n    border-radius: var(--rounded-lg);\n    box-shadow: var(--_shadow, var(--_navbar-shadow));\n    backdrop-filter: var(--navbar-backdrop-filter, blur(var(--blur-md)));\n    transform-origin: top;\n    animation: navbar-mobile-in var(--transition-fast) var(--ease-out);\n  }\n\n  :host([data-mobile][data-mobile-open]) .mobile-menu-panel {\n    display: grid;\n    gap: var(--size-1);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='floating']) .mobile-menu-panel {\n    margin-block-start: var(--size-1-5);\n  }\n\n  :host([data-mobile][data-mobile-open][data-mode='sticky']) .mobile-menu-panel,\n  :host([data-mobile][data-mobile-open][floating][sticky][data-scrolled]) .mobile-menu-panel {\n    position: absolute;\n    inset-inline: 0;\n    top: 100%;\n    z-index: 2;\n    max-width: 100%;\n    margin: 0;\n    border-inline: none;\n    border-top: none;\n    border-radius: 0 0 var(--rounded-md) var(--rounded-md);\n  }\n\n  :host([data-mobile]) .mobile-toggle {\n    display: inline-flex;\n    order: -1;\n  }\n\n  :host([data-mobile]) .navbar-start,\n  :host([data-mobile]) .navbar-center,\n  :host([data-mobile]) .navbar-end {\n    display: none;\n  }\n\n  :host([data-mobile][data-mobile-open]) .navbar {\n    border-bottom-right-radius: var(--rounded-md);\n    border-bottom-left-radius: var(--rounded-md);\n  }\n\n  @starting-style {\n    .mobile-menu-panel {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  @keyframes navbar-mobile-in {\n    from {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes navbar-floating-to-sticky {\n    from {\n      opacity: 0.92;\n      transform: translateY(6px) scale(0.985);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes navbar-sticky-to-floating {\n    from {\n      opacity: 0.95;\n      transform: translateY(-2px) scale(1);\n    }\n\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(0.99);\n    }\n  }\n\n  .item {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n    min-height: var(--_touch-target);\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--navbar-item-color, var(--color-contrast-700));\n    white-space: nowrap;\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .item:hover,\n  .item:focus-visible {\n    color: var(--navbar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--navbar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  :host([active]) .item {\n    color: var(--navbar-item-active-color, var(--color-primary));\n    background: var(--navbar-item-active-bg, color-mix(in oklch, var(--color-primary) 12%, transparent));\n  }\n\n  :host([disabled]) .item,\n  :host([disabled]) .item:hover,\n  :host([disabled]) .item:focus-visible {\n    color: var(--color-contrast-400);\n    pointer-events: none;\n    cursor: not-allowed;\n    outline: none;\n    background: transparent;\n  }\n\n  .item-icon,\n  .item-end {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .item-label {\n    min-width: 0;\n    white-space: nowrap;\n  }\n\n  :host([navbar-mobile]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([navbar-mobile]) .item {\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n  }\n}\n\n@layer refine.variants {\n  :host([variant='flat']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 88%, transparent);\n    --_navbar-shadow: none;\n  }\n\n  :host([variant='bordered']) {\n    --_navbar-bg: var(--color-canvas);\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 32%, transparent);\n  }\n\n  :host([variant='outline']) {\n    --_navbar-bg: transparent;\n    --_navbar-shadow: none;\n    --_navbar-border-color: color-mix(in oklch, var(--color-contrast-500) 40%, transparent);\n  }\n\n  :host([variant='glass']) {\n    --_navbar-bg: color-mix(in oklch, var(--color-canvas) 70%, transparent);\n    --navbar-backdrop-filter: blur(var(--blur-lg)) saturate(180%);\n  }\n\n  :host([color]) {\n    --_navbar-border-color: color-mix(in oklch, var(--_theme-border) 30%, transparent);\n  }\n}\n\n@media (width <= 768px) {\n  @layer refine.base {\n    :host([data-mode='floating']) {\n      inset-inline: var(--size-2);\n      top: var(--size-2);\n    }\n\n    :host([floating][sticky][data-scrolled]) {\n      inset-inline: 0;\n      top: 0;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layout/navbar/navbar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAE1E,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,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,+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;AAiehD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe,EAAG,iBAA0B,CAAC"}
+{"version":3,"file":"navbar.d.ts","sourceRoot":"","sources":["../../../src/layout/navbar/navbar.ts"],"names":[],"mappings":"AAcA,OAAO,EAAY,KAAK,QAAQ,EAAiB,MAAM,kBAAkB,CAAC;AAE1E,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,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,+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;AAqehD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe,EAAG,iBAA0B,CAAC"}

package/dist/layout/sidebar/{sidebar-group.css?inline.cjs → sidebar-group.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{width:100%;display:block}:host([sidebar-bottom-nav]){display:none}.group{display:block}.group-header{all:unset;box-sizing:border-box;width:100%;min-height:var(--size-6);padding:var(--size-1) var(--size-2);margin-bottom:var(--size-2);color:inherit;-webkit-user-select:none;user-select:none;border-radius:var(--rounded-lg);transition:background var(--transition-fast);outline:none;justify-content:flex-start;align-items:center;display:flex;position:relative}.group-header::-webkit-details-marker{display:none}:host([collapsible]) .group-header{cursor:pointer}:host([collapsible]) .group-header:hover{background:var(--color-contrast-100)}:host([collapsible]) .group-header:focus-visible{outline:var(--focus-ring)}:host(:not([collapsible])) .group-header{cursor:default}:host(:not([collapsible])) .chevron{display:none!important}.group-label{text-overflow:ellipsis;font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-500);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;transition:opacity var(--transition-fast);flex-grow:1;overflow:hidden}.group-icon{color:var(--color-contrast-400);flex-shrink:0;justify-content:center;align-items:center;display:flex}.group-icon:empty{display:none}.chevron{color:var(--color-contrast-400);transition:var(--_motion-transition,transform var(--transition-normal));flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([collapsible]) .group[open] .chevron{transform:rotate(90deg)}.group-items{gap:var(--size-2);grid-template-columns:minmax(0,1fr);min-width:0;display:grid}:host([sidebar-collapsed]) .group-label,:host([sidebar-collapsed]) .chevron{display:none}:host([sidebar-collapsed]) .group-header{height:0;min-height:0;margin:0;padding:0;display:none}:host([sidebar-collapsed]) .group-badge{visibility:visible!important;pointer-events:auto!important;opacity:1!important;width:auto!important;height:auto!important;display:flex!important;position:static!important}:host([collapsible]:not([open])) .group-items{display:none}}`;exports.default=e;
-//# sourceMappingURL=sidebar-group.css?inline.cjs.map
+//# sourceMappingURL=sidebar-group.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-group.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar-group.css?inline"],"sourcesContent":["/*\n * Simplified and unified sidebar-group CSS:\n * - Combined cursor and chevron logic for [collapsible] and :not([collapsible])\n * - Grouped hover/focus/active state rules\n * - Clarified collapsed mode label/chevron hiding\n */\n\n@layer refine.base {\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  :host([sidebar-bottom-nav]) {\n    display: none;\n  }\n\n  .group {\n    display: block;\n  }\n\n  .group-header {\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    min-height: var(--size-6);\n    padding: var(--size-1) var(--size-2);\n    margin-bottom: var(--size-2);\n    color: inherit;\n    user-select: none;\n    outline: none;\n    border-radius: var(--rounded-lg);\n    transition: background var(--transition-fast);\n  }\n\n  .group-header::-webkit-details-marker {\n    display: none;\n  }\n\n  /* Collapsible group: pointer, hover/focus, show chevron */\n  :host([collapsible]) .group-header {\n    cursor: pointer;\n  }\n\n  :host([collapsible]) .group-header:hover {\n    background: var(--color-contrast-100);\n  }\n\n  :host([collapsible]) .group-header:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  /* Non-collapsible group: default cursor, hide chevron */\n  :host(:not([collapsible])) .group-header {\n    cursor: default;\n  }\n\n  :host(:not([collapsible])) .chevron {\n    display: none !important;\n  }\n\n  .group-label {\n    flex-grow: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\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: 0.06em;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .group-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .group-icon:empty {\n    display: none;\n  }\n\n  .chevron {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition: var(--_motion-transition, transform var(--transition-normal));\n  }\n\n  /* Chevron rotation for open group */\n  :host([collapsible]) .group[open] .chevron {\n    transform: rotate(90deg);\n  }\n\n  .group-items {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-2);\n    min-width: 0;\n  }\n\n  /* Collapsed-sidebar: hide label text and chevron, center icon */\n  :host([sidebar-collapsed]) .group-label,\n  :host([sidebar-collapsed]) .chevron {\n    display: none;\n  }\n\n  :host([sidebar-collapsed]) .group-header {\n    display: none;\n    height: 0;\n    min-height: 0;\n    padding: 0;\n    margin: 0;\n  }\n\n  :host([sidebar-collapsed]) .group-badge {\n    position: static !important;\n    display: flex !important;\n    visibility: visible !important;\n    width: auto !important;\n    height: auto !important;\n    pointer-events: auto !important;\n    opacity: 1 !important;\n  }\n\n  /* Collapsible group closed: hide items */\n  :host([collapsible]:not([open])) .group-items {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/layout/sidebar/{sidebar-group.css?inline.js → sidebar-group.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{width:100%;display:block}:host([sidebar-bottom
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=sidebar-group.css?inline.js.map
+//# sourceMappingURL=sidebar-group.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-group.css.js","names":[],"sources":["../../../src/layout/sidebar/sidebar-group.css?inline"],"sourcesContent":["/*\n * Simplified and unified sidebar-group CSS:\n * - Combined cursor and chevron logic for [collapsible] and :not([collapsible])\n * - Grouped hover/focus/active state rules\n * - Clarified collapsed mode label/chevron hiding\n */\n\n@layer refine.base {\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  :host([sidebar-bottom-nav]) {\n    display: none;\n  }\n\n  .group {\n    display: block;\n  }\n\n  .group-header {\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    min-height: var(--size-6);\n    padding: var(--size-1) var(--size-2);\n    margin-bottom: var(--size-2);\n    color: inherit;\n    user-select: none;\n    outline: none;\n    border-radius: var(--rounded-lg);\n    transition: background var(--transition-fast);\n  }\n\n  .group-header::-webkit-details-marker {\n    display: none;\n  }\n\n  /* Collapsible group: pointer, hover/focus, show chevron */\n  :host([collapsible]) .group-header {\n    cursor: pointer;\n  }\n\n  :host([collapsible]) .group-header:hover {\n    background: var(--color-contrast-100);\n  }\n\n  :host([collapsible]) .group-header:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  /* Non-collapsible group: default cursor, hide chevron */\n  :host(:not([collapsible])) .group-header {\n    cursor: default;\n  }\n\n  :host(:not([collapsible])) .chevron {\n    display: none !important;\n  }\n\n  .group-label {\n    flex-grow: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\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: 0.06em;\n    white-space: nowrap;\n    transition: opacity var(--transition-fast);\n  }\n\n  .group-icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n  }\n\n  .group-icon:empty {\n    display: none;\n  }\n\n  .chevron {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-contrast-400);\n    transition: var(--_motion-transition, transform var(--transition-normal));\n  }\n\n  /* Chevron rotation for open group */\n  :host([collapsible]) .group[open] .chevron {\n    transform: rotate(90deg);\n  }\n\n  .group-items {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-2);\n    min-width: 0;\n  }\n\n  /* Collapsed-sidebar: hide label text and chevron, center icon */\n  :host([sidebar-collapsed]) .group-label,\n  :host([sidebar-collapsed]) .chevron {\n    display: none;\n  }\n\n  :host([sidebar-collapsed]) .group-header {\n    display: none;\n    height: 0;\n    min-height: 0;\n    padding: 0;\n    margin: 0;\n  }\n\n  :host([sidebar-collapsed]) .group-badge {\n    position: static !important;\n    display: flex !important;\n    visibility: visible !important;\n    width: auto !important;\n    height: auto !important;\n    pointer-events: auto !important;\n    opacity: 1 !important;\n  }\n\n  /* Collapsible group closed: hide items */\n  :host([collapsible]:not([open])) .group-items {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/layout/sidebar/{sidebar-item.css?inline.cjs → sidebar-item.css.cjs}

@@ -1,2 +1,2 @@
 var e=`@layer refine.base{:host{min-width:0;max-width:100%;display:block}.item{box-sizing:border-box;gap:var(--size-2);min-width:0;min-height:var(--_touch-target);padding:var(--size-1-5) var(--size-2);font-size:var(--sidebar-item-font-size,var(--text-sm));font-weight:var(--font-medium);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--rounded-lg);transition:background var(--transition-fast), color var(--transition-fast);outline:none;align-items:center;text-decoration:none;display:flex;position:relative}a.item{text-decoration:none}.item:hover,.item: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))}:host([active]) .item{font-weight:var(--font-semibold);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)))}:host([active]) .item:before{display:none}:host([disabled]) .item,:host([disabled]) .item:hover,:host([disabled]) .item:focus-visible{color:var(--sidebar-item-disabled-color,var(--color-contrast-300));pointer-events:none;cursor:not-allowed;opacity:1;background:0 0;outline:none}:host([disabled]) .item-icon{color:var(--sidebar-item-disabled-color,var(--color-contrast-300))}.item-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;margin:0 auto;display:flex}.item-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:opacity var(--transition-fast);flex:1;overflow:hidden}.item-end{gap:var(--size-1);transition:opacity var(--transition-fast);flex-shrink:0;align-items:center;display:flex}:host([sidebar-collapsed]) .item,:host([sidebar-collapsed]) .item-icon{position:relative}:host([sidebar-collapsed]) .item-label{pointer-events:none;opacity:0;width:0;overflow:hidden}:host([sidebar-collapsed]) .item{justify-content:center;align-items:center;gap:0;width:100%;height:100%;min-height:100%;padding:0}:host([sidebar-collapsed]) .item:before{inset-block:var(--size-2)}:host([sidebar-collapsed]) .item-icon{width:var(--size-7);height:var(--size-7);padding:var(--size-1-5);font-size:1.5em}:host([sidebar-collapsed][active]) .item,:host([sidebar-collapsed]) .item:hover{background:0 0}:host([sidebar-collapsed][active]) .item-icon{background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in oklch, var(--color-primary) 12%, transparent)));border-radius:var(--rounded-full)}:host([sidebar-collapsed]) .item-icon:hover{background:var(--color-contrast-100);border-radius:var(--rounded-full)}:host([sidebar-collapsed]) .item-end,:host([sidebar-collapsed]) .item-icon .group-badge,:host([sidebar-collapsed]) .item-icon ::slotted([slot=end]){right:0;bottom:calc(var(--size-2) * -1);z-index:2;pointer-events:auto;opacity:1;justify-content:center;align-items:center;min-width:1.25em;min-height:1.25em;display:flex;position:absolute;transform:translate(40%,-40%)}:host([dir=rtl][sidebar-collapsed]) .item-end,:host([dir=rtl][sidebar-collapsed]) .item-icon .group-badge,:host([dir=rtl][sidebar-collapsed]) .item-icon ::slotted([slot=end]),:host(:dir(rtl)[sidebar-collapsed]) .item-end,:host(:dir(rtl)[sidebar-collapsed]) .item-icon .group-badge,:host(:dir(rtl)[sidebar-collapsed]) .item-icon ::slotted([slot=end]){left:0;right:auto;transform:translate(-40%,-40%)}:host([sidebar-collapsed]) .item-end .group-badge,:host([sidebar-collapsed]) .item-end ::slotted([slot=end]){top:50%;right:var(--size-2);z-index:1;position:absolute;transform:translateY(-50%)}:host([dir=rtl][sidebar-collapsed]) .item-end .group-badge,:host([dir=rtl][sidebar-collapsed]) .item-end ::slotted([slot=end]),:host(:dir(rtl)[sidebar-collapsed]) .item-end .group-badge,:host(:dir(rtl)[sidebar-collapsed]) .item-end ::slotted([slot=end]){right:auto;left:var(--size-2)}:host([sidebar-bottom-nav]){display:none}}`;exports.default=e;
-//# sourceMappingURL=sidebar-item.css?inline.cjs.map
+//# sourceMappingURL=sidebar-item.css.cjs.map

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

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

package/dist/layout/sidebar/{sidebar-item.css?inline.js → sidebar-item.css.js}

@@ -3,4 +3,4 @@ var e = "@layer refine.base{:host{min-width:0;max-width:100%;display:block}.item
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=sidebar-item.css?inline.js.map
+//# sourceMappingURL=sidebar-item.css.js.map

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

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

package/dist/layout/sidebar/{sidebar.css?inline.cjs → sidebar.css.cjs}

@@ -1,2 +1,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}}`;exports.default=e;
-//# sourceMappingURL=sidebar.css?inline.cjs.map
+//# sourceMappingURL=sidebar.css.cjs.map

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

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

package/dist/layout/sidebar/{sidebar.css?inline.js → sidebar.css.js}

@@ -3,4 +3,4 @@ var e = ".sidebar-logo[hidden]{min-width:0!important;min-height:0!important;marg
 //#endregion
 export { e as default };
 
-//# sourceMappingURL=sidebar.css?inline.js.map
+//# sourceMappingURL=sidebar.css.js.map

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

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

package/dist/layout/sidebar/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sidebar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar/sidebar.ts"],"names":[],"mappings":"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"}

package/dist/menu.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./headless/ore.cjs"),i=require("./headless/keyboard.cjs"),a=require("./headless/option-list.cjs"),o=require("./overlay/menu/menu-item.css?inline.cjs"),s=require("./overlay/menu/menu-separator.css?inline.cjs"),c=require("./overlay/menu/menu.css?inline.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-menu-item`;(0,l.define)(d,{props:{checked:l.prop.bool(!1),disabled:l.prop.bool(!1),type:l.prop.string(),value:l.prop.string()},setup(e){let t=()=>e.type.value===`checkbox`||e.type.value===`radio`,n=()=>t()&&e.checked.value;return t()?l.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./headless/ore.cjs"),i=require("./headless/keyboard.cjs"),a=require("./headless/option-list.cjs"),o=require("./overlay/menu/menu-item.css.cjs"),s=require("./overlay/menu/menu-separator.css.cjs"),c=require("./overlay/menu/menu.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-menu-item`;(0,l.define)(d,{props:{checked:l.prop.bool(!1),disabled:l.prop.bool(!1),type:l.prop.string(),value:l.prop.string()},setup(e){let t=()=>e.type.value===`checkbox`||e.type.value===`radio`,n=()=>t()&&e.checked.value;return t()?l.html`
           <div
             class="${()=>{let t=e.type.value;return[`item`,t===`checkbox`?`is-checkbox`:``,t===`radio`?`is-radio`:``,n()?`is-checked`:``].filter(Boolean).join(` `)}}"
             tabindex="-1"
@@ -14,16 +14,16 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             <span class="icon-slot"><slot name="icon"></slot></span>
             <span class="item-label"><slot></slot></span>
           </div>
-        `},styles:[o.default]});var f=`ore-menu-separator`;(0,l.define)(f,{setup(){return l.html``},styles:[s.default]});var p=e=>e===`checkbox`||e===`radio`,m=`ore-menu`;(0,l.define)(m,{props:{...n.sizableBundle,...n.disablableBundle,placement:l.prop.oneOf([`bottom`,`bottom-start`,`bottom-end`,`top`,`top-start`,`top-end`],`bottom-start`)},setup(e,{aria:t,bind:n,el:o,emit:s,onCleanup:c,onMounted:d,slots:f,watch:m}){let h=(0,l.createStableId)(`menu`),g=(0,u.computed)(()=>!!e.disabled.value),_=r.lifecycleSignal(c),v=null,y=null,b=null;function x(){return Array.from(o.querySelectorAll(`ore-menu-item:not([disabled])`))}function S(e){return e?e.shadowRoot?.querySelector(`[role^="menuitem"]`)??e:null}function C(){return x().findIndex(e=>{let t=S(e);return e===document.activeElement||t===document.activeElement})}let w=a.createOptionList({getBoundary:()=>o,getItems:x,getPanel:()=>y,getReference:()=>v,getTrigger:()=>v,isDisabled:()=>g.value,isItemDisabled:e=>e.hasAttribute(`disabled`),onClose:e=>s(`close`,{reason:e}),onNavigate:(e,t)=>{let n=x()[t];S(n)?.focus()},onOpen:e=>s(`open`,{reason:e}),positioning:{getPlacement:()=>e.placement.value??`bottom-start`,matchWidth:!1,offsetPx:4,padding:6},signal:_}),{isOpen:T}=w,E=e=>{let t=e.getAttribute(`type`),n=p(t);if(t===`checkbox`)e.toggleAttribute(`checked`,!e.hasAttribute(`checked`));else if(t===`radio`)for(let t of o.querySelectorAll(`ore-menu-item[type="radio"]`))t.toggleAttribute(`checked`,t===e);let r=e.getAttribute(`value`)??``;s(`select`,{checked:n?e.hasAttribute(`checked`):void 0,value:r}),n||w.close(`programmatic`)},D=i.createInteraction({keys:[`Enter`,` `,`ArrowDown`],onPress:()=>{w.open(`keyboard`),requestAnimationFrame(()=>w.set(0))}}),O=i.createInteraction({onPress:()=>{let e=w.getActiveItem();e&&E(e)}});function k(e){if(g.value)return;if(!T.value){D.handleKeydown(e);return}let t=C();if(t>=0&&w.set(t),!w.handleKeydown(e)){if(e.key===` `||e.key===`Enter`){O.handleKeydown(e);return}e.key===`Tab`&&w.close(`programmatic`)}}n({on:{click:e=>{let t=e.composedPath();if(!T.value)return;let n=t.find(e=>e instanceof HTMLElement&&e.tagName===`ORE-MENU-ITEM`)??e.target?.closest(`ore-menu-item`)??null;!n||n.hasAttribute(`disabled`)||E(n)}}}),m(()=>{let e=T.value;y&&y.toggleAttribute(`data-open`,e)});function A(){if(b?.(),b=null,v=f.elements(`trigger`).value?.[0]??null,!v)return;let e=[],n=t(v,{controls:()=>h,disabled:()=>g.value,expanded:()=>String(T.value),haspopup:`menu`}),r=e=>{e.stopPropagation(),!g.value&&w.toggle()},i=e=>{k(e)};v.addEventListener(`click`,r),v.addEventListener(`keydown`,i),e.push(()=>v?.removeEventListener(`click`,r)),e.push(()=>v?.removeEventListener(`keydown`,i)),b=()=>{n();for(let t of e)t()}}return(0,u.watch)(f.elements(`trigger`),A,{immediate:!0}),d(()=>()=>{b?.(),b=null}),l.html`
+        `},styles:[o.default]});var f=`ore-menu-separator`;(0,l.define)(f,{setup(){return l.html``},styles:[s.default]});var p=e=>e===`checkbox`||e===`radio`,m=`ore-menu`;(0,l.define)(m,{props:{...n.sizableBundle,...n.disablableBundle,placement:l.prop.oneOf([`bottom`,`bottom-start`,`bottom-end`,`top`,`top-start`,`top-end`],`bottom-start`)},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),o=(0,l.useSlots)(),s=l.watchEffect,c=(0,l.createStableId)(`menu`),d=(0,u.computed)(()=>!!e.disabled.value),f=r.lifecycleSignal(l.onCleanup),m=null,h=null,g=null;function _(){return Array.from(t.querySelectorAll(`ore-menu-item:not([disabled])`))}function v(e){return e?e.shadowRoot?.querySelector(`[role^="menuitem"]`)??e:null}function y(){return _().findIndex(e=>{let t=v(e);return e===document.activeElement||t===document.activeElement})}let b=a.createOptionList({getBoundary:()=>t,getItems:_,getPanel:()=>h,getReference:()=>m,getTrigger:()=>m,isDisabled:()=>d.value,isItemDisabled:e=>e.hasAttribute(`disabled`),onClose:e=>n(`close`,{reason:e}),onNavigate:(e,t)=>{let n=_()[t];v(n)?.focus()},onOpen:e=>n(`open`,{reason:e}),positioning:{getPlacement:()=>e.placement.value??`bottom-start`,matchWidth:!1,offsetPx:4,padding:6},signal:f}),{isOpen:x}=b,S=e=>{let r=e.getAttribute(`type`),i=p(r);if(r===`checkbox`)e.toggleAttribute(`checked`,!e.hasAttribute(`checked`));else if(r===`radio`)for(let n of t.querySelectorAll(`ore-menu-item[type="radio"]`))n.toggleAttribute(`checked`,n===e);let a=e.getAttribute(`value`)??``,o=i?e.hasAttribute(`checked`):void 0;n(`select`,{checked:o,value:a}),i||b.close(`programmatic`)},C=i.createInteraction({keys:[`Enter`,` `,`ArrowDown`],onPress:()=>{b.open(`keyboard`),requestAnimationFrame(()=>b.set(0))}}),w=i.createInteraction({onPress:()=>{let e=b.getActiveItem();e&&S(e)}});function T(e){if(d.value)return;if(!x.value){C.handleKeydown(e);return}let t=y();if(t>=0&&b.set(t),!b.handleKeydown(e)){if(e.key===` `||e.key===`Enter`){w.handleKeydown(e);return}e.key===`Tab`&&b.close(`programmatic`)}}(0,l.bind)({on:{click:e=>{let t=e.composedPath();if(!x.value)return;let n=t.find(e=>e instanceof HTMLElement&&e.tagName===`ORE-MENU-ITEM`)??e.target?.closest(`ore-menu-item`)??null;!n||n.hasAttribute(`disabled`)||S(n)}}}),s(()=>{let e=x.value;h&&h.toggleAttribute(`data-open`,e)});function E(){if(g?.(),g=null,m=o.elements(`trigger`).value?.[0]??null,!m)return;let e=[],t=(0,l.aria)(m,{controls:()=>c,disabled:()=>d.value,expanded:()=>String(x.value),haspopup:`menu`}),n=e=>{e.stopPropagation(),!d.value&&b.toggle()},r=e=>{T(e)};m.addEventListener(`click`,n),m.addEventListener(`keydown`,r),e.push(()=>m?.removeEventListener(`click`,n)),e.push(()=>m?.removeEventListener(`keydown`,r)),g=()=>{t();for(let t of e)t()}}return(0,u.watch)(o.elements(`trigger`),E,{immediate:!0}),(0,l.onMounted)(()=>()=>{g?.(),g=null}),l.html`
       <slot name="trigger"></slot>
       <div
         class="menu-panel"
         part="panel"
-        id="${h}"
+        id="${c}"
         role="menu"
         aria-orientation="vertical"
-        @keydown="${k}"
-        ref="${e=>{y=e}}">
+        @keydown="${T}"
+        ref="${e=>{h=e}}">
         <slot></slot>
       </div>
     `},styles:[c.default,e.sizeVariantMixin(),t.forcedColorsMixin]}),exports.MENU_ITEM_TAG=d,exports.MENU_TAG=m,exports.SEPARATOR_TAG=f;

package/dist/menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.cjs","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport { createStableId, define, html, prop } from '@vielzeug/ore';\nimport { computed, watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createInteraction,\n  createOptionList,\n  type DropdownCloseReason,\n  type OverlayOpenDetail,\n} from '../../headless';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\nimport componentStyles from './menu.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  disabled?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open - Fired when the menu opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the menu closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps, OreMenuEvents>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props, { aria, bind, el, emit, onCleanup, onMounted, slots, watch }) {\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-menu-item:not([disabled])'));\n    }\n\n    function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n      if (!item) return null;\n\n      return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n    }\n\n    function getFocusedItemIndex(): number {\n      const items = getItems();\n\n      return items.findIndex((item) => {\n        const focusable = getItemFocusable(item);\n\n        return item === document.activeElement || focusable === document.activeElement;\n      });\n    }\n\n    const optionList = createOptionList<HTMLElement>({\n      getBoundary: () => el,\n      getItems: getItems,\n      getPanel: () => panelEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => isDisabled.value,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onClose: (reason) => emit('close', { reason }),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      positioning: {\n        getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n        matchWidth: false,\n        offsetPx: 4,\n        padding: 6,\n      },\n      signal: abortSignal,\n    });\n    const { isOpen: isOpenSignal } = optionList;\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n      const isCheckable = isCheckableItemType(type);\n\n      if (type === 'checkbox') {\n        item.toggleAttribute('checked', !item.hasAttribute('checked'));\n      } else if (type === 'radio') {\n        for (const radio of el.querySelectorAll<HTMLElement>('ore-menu-item[type=\"radio\"]')) {\n          radio.toggleAttribute('checked', radio === item);\n        }\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (!isCheckable) {\n        optionList.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        optionList.open('keyboard');\n        requestAnimationFrame(() => optionList.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = optionList.getActiveItem();\n\n        if (focused) activateItem(focused);\n      },\n    });\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const open = isOpenSignal.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        openFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      const currentFocusedIndex = getFocusedItemIndex();\n\n      if (currentFocusedIndex >= 0) optionList.set(currentFocusedIndex);\n\n      if (optionList.handleKeydown(e)) return;\n\n      // When open: navigate and activate\n      if (e.key === ' ' || e.key === 'Enter') {\n        activateFocusedFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        optionList.close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = aria(triggerEl, {\n        controls: () => menuId,\n        disabled: () => isDisabled.value,\n        expanded: () => String(isOpenSignal.value),\n        haspopup: 'menu',\n      });\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        optionList.toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(), forcedColorsMixin],\n});\n"],"mappings":"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"}
+{"version":3,"file":"menu.cjs","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n  createStableId,\n  define,\n  html,\n  prop,\n  aria,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createInteraction,\n  createOptionList,\n  type DropdownCloseReason,\n  type OverlayOpenDetail,\n} from '../../headless';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\nimport componentStyles from './menu.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  disabled?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open - Fired when the menu opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the menu closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMenuEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-menu-item:not([disabled])'));\n    }\n\n    function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n      if (!item) return null;\n\n      return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n    }\n\n    function getFocusedItemIndex(): number {\n      const items = getItems();\n\n      return items.findIndex((item) => {\n        const focusable = getItemFocusable(item);\n\n        return item === document.activeElement || focusable === document.activeElement;\n      });\n    }\n\n    const optionList = createOptionList<HTMLElement>({\n      getBoundary: () => el,\n      getItems: getItems,\n      getPanel: () => panelEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => isDisabled.value,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onClose: (reason) => emit('close', { reason }),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      positioning: {\n        getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n        matchWidth: false,\n        offsetPx: 4,\n        padding: 6,\n      },\n      signal: abortSignal,\n    });\n    const { isOpen: isOpenSignal } = optionList;\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n      const isCheckable = isCheckableItemType(type);\n\n      if (type === 'checkbox') {\n        item.toggleAttribute('checked', !item.hasAttribute('checked'));\n      } else if (type === 'radio') {\n        for (const radio of el.querySelectorAll<HTMLElement>('ore-menu-item[type=\"radio\"]')) {\n          radio.toggleAttribute('checked', radio === item);\n        }\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (!isCheckable) {\n        optionList.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        optionList.open('keyboard');\n        requestAnimationFrame(() => optionList.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = optionList.getActiveItem();\n\n        if (focused) activateItem(focused);\n      },\n    });\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const open = isOpenSignal.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        openFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      const currentFocusedIndex = getFocusedItemIndex();\n\n      if (currentFocusedIndex >= 0) optionList.set(currentFocusedIndex);\n\n      if (optionList.handleKeydown(e)) return;\n\n      // When open: navigate and activate\n      if (e.key === ' ' || e.key === 'Enter') {\n        activateFocusedFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        optionList.close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = aria(triggerEl, {\n        controls: () => menuId,\n        disabled: () => isDisabled.value,\n        expanded: () => String(isOpenSignal.value),\n        haspopup: 'menu',\n      });\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        optionList.toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(), forcedColorsMixin],\n});\n"],"mappings":"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"}