@vielzeug/refine 2.2.5 → 2.4.0

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

@@ -1,2 +1,2 @@
-var e=`.sidebar-logo[hidden]{min-width:0;min-height:0;margin:0;display:none}@layer refine.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--color-canvas));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--color-divider));--_panel-radius:var(--sidebar-radius,var(--rounded-lg));--_panel-shadow:var(--sidebar-shadow,var(--shadow-md));box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:max-width var(--_sidebar-transition), min-width var(--_sidebar-transition);will-change:max-width;display:block;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);width:100%;height:100%;min-height:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right:var(--border) solid var(--_panel-border-color)}:host>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_panel-border-color)}.mobile-backdrop{z-index:calc(var(--z-sticky) + 1);background:color-mix(in oklch, var(--color-contrast-950) 36%, transparent);border:0;width:100%;height:100%;display:none;position:absolute;inset:0}:host([data-bottom-nav][data-mobile-open]) .mobile-backdrop{z-index:calc(var(--z-sticky) + 1);width:100vw;height:100dvh;display:block;position:fixed;inset:0}:host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop{width:100%;height:100%;position:absolute;inset:0}:host([data-no-transition]),:host([data-no-transition])>nav{transition:none}:host([data-collapsed]){min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}:host([data-bottom-nav]){z-index:calc(var(--z-sticky) + 2);width:100%;min-width:0;max-width:100%;height:var(--sidebar-bottom-nav-height,3.75rem);pointer-events:auto;position:fixed;bottom:0;left:0;right:0}:host([data-preview-mode][data-bottom-nav]){pointer-events:none;width:auto;height:auto;position:absolute;inset:0}:host([data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);width:min(var(--_sidebar-width), 85vw);max-width:85vw;max-height:100dvh;transition:transform var(--transition-normal);position:fixed;top:0;bottom:0;transform:translate(-104%)}:host([data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([data-preview-mode][data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);pointer-events:auto;max-height:100%;position:absolute;top:0;bottom:0}:host([data-preview-mode][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host(:dir(rtl)[data-bottom-nav])>nav{transform:translate(104%)}:host([data-bottom-nav][data-mobile-open])>nav{transform:translate(0)}.bottom-bar{gap:var(--size-1);width:100%;height:100%;padding:var(--size-1);pointer-events:none;background:var(--_panel-bg);border-top:var(--border) solid var(--_panel-border-color);box-shadow:var(--shadow-sm);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--_sidebar-transition), transform var(--_sidebar-transition), display var(--_sidebar-transition) allow-discrete;justify-content:space-around;align-items:stretch;display:flex;transform:translateY(100%)}:host([data-bottom-nav]) .bottom-bar{pointer-events:auto;opacity:1;transform:translateY(0)}:host([data-preview-mode][data-bottom-nav]) .bottom-bar{z-index:calc(var(--z-sticky) + 2);height:var(--sidebar-bottom-nav-height,3.75rem);position:absolute;bottom:0;left:0;right:0}:host([data-bottom-nav][data-mobile-open]) .bottom-bar{z-index:calc(var(--z-sticky) + 1);pointer-events:none;opacity:0;transform:translateY(100%)}.bottom-tab{all:unset;box-sizing:border-box;gap:var(--size-0-5);min-width:0;padding:var(--size-1) var(--size-1-5);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.bottom-tab:hover,.bottom-tab:focus-visible{color:var(--sidebar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.bottom-tab:disabled{color:var(--sidebar-item-disabled-color,var(--color-contrast-400));cursor:not-allowed;opacity:.7}.bottom-tab-active,.bottom-tab[data-active=true]{color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in oklch, var(--color-primary) 12%, transparent)))}.bottom-tab-active:before,.bottom-tab[data-active=true]:before{display:none}.bottom-tab-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.bottom-tab-label{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.sidebar-header{gap:var(--size-2);min-height:var(--size-6);padding:var(--size-4);border-bottom:var(--border) solid var(--color-contrast-200);justify-content:space-between;align-items:center;display:flex}.sidebar-header .sidebar-header-content{flex:1;min-width:0;display:block;overflow:hidden}:host([data-collapsed]) .sidebar-header{gap:var(--size-2);min-height:unset;padding-block:var(--size-2);padding-inline:var(--size-2);flex-direction:column;justify-content:flex-start;align-items:center}:host([data-collapsed]) .sidebar-header .sidebar-header-content{display:none}.sidebar-logo{min-width:var(--size-8);min-height:var(--size-8);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:var(--size-2)}.sidebar-logo:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--size-2)}.sidebar-logo:empty{display:none}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:0}:host([data-collapsed]) .sidebar-logo:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:0}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggle-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.toggle-btn:focus-visible{outline:var(--focus-ring)}.toggle-icon{transition:var(--_motion-transition,transform var(--_sidebar-transition));justify-content:center;align-items:center;display:flex}:host([data-collapsed]) .toggle-icon{transform:rotate(180deg)}:host([data-bottom-nav]) .toggle-btn{display:none}:host(:not([dir=rtl])[data-collapsed]) .toggle-icon,:host(:dir(ltr)[data-collapsed]) .toggle-icon,:host(:dir(rtl)) .toggle-icon{transform:rotate(180deg)}:host(:dir(rtl)[data-collapsed]) .toggle-icon{transform:rotate(0)}}@layer refine.variants{:host([variant=floating]){--_panel-radius:var(--rounded-lg);height:calc(100% - var(--size-6));margin:var(--size-3)}:host([variant=floating])>nav{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius)}:host([variant=floating][data-bottom-nav]){bottom:var(--size-2);inset-inline:var(--size-2);width:auto;max-width:none}:host([variant=floating][data-preview-mode][data-bottom-nav]){inset:calc(var(--size-1) * -1)}:host([variant=floating][data-bottom-nav]) .bottom-bar{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow)}:host([variant=floating][data-bottom-nav])>nav{top:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([variant=floating][data-preview-mode][data-bottom-nav]) .bottom-bar{bottom:var(--size-2);inset-inline:var(--size-2);width:auto}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav{top:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-1)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}`;exports.default=e;
+var e=`.sidebar-logo[hidden]{min-width:0;min-height:0;margin:0;display:none}@layer refine.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--color-canvas));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--color-divider));--_panel-radius:var(--sidebar-radius,var(--rounded-lg));--_panel-shadow:var(--sidebar-shadow,var(--shadow-md));z-index:var(--sidebar-z-index,1);box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:max-width var(--_sidebar-transition), min-width var(--_sidebar-transition);will-change:max-width;display:block;position:relative;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);width:100%;height:100%;min-height:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right:var(--border) solid var(--_panel-border-color)}:host>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_panel-border-color)}:host(:not([data-bottom-nav]))>nav{overflow:visible}.mobile-backdrop{z-index:calc(var(--z-sticky) + 1);background:color-mix(in oklch, var(--color-contrast-950) 36%, transparent);border:0;width:100%;height:100%;display:none;position:absolute;inset:0}:host([data-bottom-nav][data-mobile-open]) .mobile-backdrop{z-index:calc(var(--z-sticky) + 1);width:100vw;height:100dvh;display:block;position:fixed;inset:0}:host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop{width:100%;height:100%;position:absolute;inset:0}:host([data-no-transition]),:host([data-no-transition])>nav{transition:none}:host([data-collapsed]){min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}:host([data-bottom-nav]){z-index:calc(var(--z-sticky) + 2);width:100%;min-width:0;max-width:100%;height:var(--sidebar-bottom-nav-height,3.75rem);pointer-events:auto;position:fixed;bottom:0;left:0;right:0}:host([data-preview-mode][data-bottom-nav]){pointer-events:none;width:auto;height:auto;position:absolute;inset:0}:host([data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);width:min(var(--_sidebar-width), 85vw);max-width:85vw;max-height:100dvh;transition:transform var(--transition-normal);position:fixed;top:0;bottom:0;transform:translate(-104%)}:host([data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([data-preview-mode][data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);pointer-events:auto;max-height:100%;position:absolute;top:0;bottom:0}:host([data-preview-mode][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host(:dir(rtl)[data-bottom-nav])>nav{transform:translate(104%)}:host([data-bottom-nav][data-mobile-open])>nav{transform:translate(0)}.bottom-bar{box-sizing:border-box;gap:var(--size-1);width:100%;height:100%;padding:var(--size-1);pointer-events:none;background:var(--_panel-bg);border-top:var(--border) solid var(--_panel-border-color);box-shadow:var(--shadow-sm);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--_sidebar-transition), transform var(--_sidebar-transition), display var(--_sidebar-transition) allow-discrete;justify-content:space-around;align-items:stretch;display:flex;transform:translateY(100%)}.bottom-bar[hidden]{display:none}:host([data-bottom-nav]) .bottom-bar{pointer-events:auto;opacity:1;transform:translateY(0)}:host([data-preview-mode][data-bottom-nav]) .bottom-bar{z-index:calc(var(--z-sticky) + 2);height:var(--sidebar-bottom-nav-height,3.75rem);position:absolute;bottom:0;left:0;right:0}:host([data-bottom-nav][data-mobile-open]) .bottom-bar{z-index:calc(var(--z-sticky) + 1);pointer-events:none;opacity:0;transform:translateY(100%)}.bottom-tab{all:unset;box-sizing:border-box;gap:var(--size-0-5);min-width:0;padding:var(--size-1) var(--size-1-5);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.bottom-tab:hover,.bottom-tab:focus-visible{color:var(--sidebar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.bottom-tab:disabled{color:var(--sidebar-item-disabled-color,var(--color-contrast-400));cursor:not-allowed;opacity:.7}.bottom-tab-active,.bottom-tab[data-active=true]{color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in oklch, var(--color-primary) 12%, transparent)))}.bottom-tab-active:before,.bottom-tab[data-active=true]:before{display:none}.bottom-tab-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.bottom-tab-label{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.sidebar-header{box-sizing:border-box;gap:var(--size-2);height:var(--sidebar-header-height,var(--size-16));min-height:var(--sidebar-header-height,var(--size-16));padding:var(--sidebar-header-padding,var(--size-3));border-bottom:var(--border) solid var(--color-contrast-200);justify-content:space-between;align-items:center;display:flex}.sidebar-header .sidebar-header-content{flex:1;min-width:0;display:block;overflow:hidden}:host([data-collapsed]) .sidebar-header{gap:var(--size-2);flex-direction:column;justify-content:flex-start;align-items:center}:host([data-collapsed]) .sidebar-header .sidebar-header-content{display:none}.sidebar-logo{min-width:var(--size-8);min-height:var(--size-8);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:var(--size-2)}.sidebar-logo:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--size-2)}.sidebar-logo:empty{display:none}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:0}:host([data-collapsed]) .sidebar-logo:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:0}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;z-index:1;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--sidebar-toggle-color,var(--color-contrast-600));cursor:pointer;background:var(--sidebar-toggle-bg,var(--_panel-bg));border:var(--border) solid var(--sidebar-toggle-border-color,var(--_panel-border-color));border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);top:var(--sidebar-toggle-offset,var(--size-4));justify-content:center;align-items:center;display:inline-flex;position:absolute;transform:translate(50%)}.toggle-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}:host(:dir(rtl)) .toggle-btn{transform:translate(-50%)}:host(:not([data-has-logo])) .toggle-btn{position:static;transform:none}:host(:not([data-has-logo])) .toggle-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}:host(:not([data-has-logo])) .toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host([data-collapsed]:not([data-has-logo])) .toggle-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:0}:host([data-collapsed]:not([data-has-logo])) .toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:0}.toggle-btn:hover{color:var(--sidebar-toggle-hover-color,var(--color-contrast-900));background:var(--sidebar-toggle-hover-bg,var(--color-contrast-100));box-shadow:var(--shadow-md)}.toggle-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--size-0-5)}.toggle-icon{justify-content:center;align-items:center;display:flex}:host([data-bottom-nav]) .toggle-btn{display:none}}@layer refine.variants{:host([variant=floating]){--_panel-radius:var(--rounded-lg);height:calc(100% - var(--size-6));margin:var(--size-3)}:host([variant=floating])>nav{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius)}:host([variant=floating][data-bottom-nav]){bottom:var(--size-2);inset-inline:var(--size-2);width:auto;max-width:none}:host([variant=floating][data-preview-mode][data-bottom-nav]){inset:calc(var(--size-1) * -1)}:host([variant=floating][data-bottom-nav]) .bottom-bar{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow)}:host([variant=floating][data-bottom-nav])>nav{top:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([variant=floating][data-preview-mode][data-bottom-nav]) .bottom-bar{bottom:var(--size-2);inset-inline:var(--size-2);width:auto}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav{top:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-1)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}`;exports.default=e;
 //# sourceMappingURL=sidebar.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n  display: none;\n  min-width: 0;\n  min-height: 0;\n  margin: 0;\n}\n\n/*\n * Simplified and unified sidebar CSS:\n * - Grouped collapsed/expanded state rules\n * - Consistent use of CSS variables for spacing, color, and transitions\n * - Removed redundant or legacy rules\n * - Clarified variant handling\n */\n\n@layer refine.base {\n  :host {\n    --_sidebar-width: var(--sidebar-width, 16rem);\n    --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n    --_sidebar-transition: var(--transition-normal);\n    --_panel-bg: var(--sidebar-bg, var(--color-canvas));\n    --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n    --_panel-border-color: var(--sidebar-border-color, var(--color-divider));\n    --_panel-radius: var(--sidebar-radius, var(--rounded-lg));\n    --_panel-shadow: var(--sidebar-shadow, var(--shadow-md));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-width: var(--size-2xs);\n    max-width: var(--_sidebar-width);\n    height: 100%;\n    min-height: 0;\n    overflow: visible;\n    transition:\n      max-width var(--_sidebar-transition),\n      min-width var(--_sidebar-transition);\n    will-change: max-width;\n  }\n\n  :host > nav {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border-inline-end: var(--border) solid var(--_panel-border-color);\n    backdrop-filter: blur(var(--_panel-blur));\n  }\n\n  .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: none;\n    width: 100%;\n    height: 100%;\n    background: color-mix(in oklch, var(--color-contrast-950) 36%, transparent);\n    border: 0;\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: block;\n    width: 100vw;\n    height: 100dvh;\n  }\n\n  :host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host([data-no-transition]),\n  :host([data-no-transition]) > nav {\n    transition: none;\n  }\n\n  :host([data-collapsed]) {\n    min-width: var(--_sidebar-collapsed-width);\n    max-width: var(--_sidebar-collapsed-width);\n  }\n\n  :host([data-bottom-nav]) {\n    position: fixed;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n    pointer-events: auto;\n  }\n\n  /* Preview mode: constrain bottom-nav to container bounds */\n  :host([data-preview-mode][data-bottom-nav]) {\n    position: absolute;\n    inset: 0;\n    width: auto;\n    height: auto;\n    pointer-events: none;\n  }\n\n  :host([data-bottom-nav]) > nav {\n    position: fixed;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    width: min(var(--_sidebar-width), 85vw);\n    max-width: 85vw;\n    max-height: 100dvh;\n    transform: translateX(-104%);\n    transition: transform var(--transition-normal);\n  }\n\n  /* Preview mode: use absolute positioning so drawer stays within container */\n  :host([data-preview-mode][data-bottom-nav]) > nav {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    max-height: 100%;\n    pointer-events: auto;\n  }\n\n  :host(:dir(rtl)[data-bottom-nav]) > nav {\n    transform: translateX(104%);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) > nav {\n    transform: translateX(0);\n  }\n\n  .bottom-bar {\n    display: flex;\n    gap: var(--size-1);\n    align-items: stretch;\n    justify-content: space-around;\n    width: 100%;\n    height: 100%;\n    padding: var(--size-1);\n    pointer-events: none;\n    background: var(--_panel-bg);\n    border-top: var(--border) solid var(--_panel-border-color);\n    box-shadow: var(--shadow-sm);\n    opacity: 0;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: translateY(100%);\n    transition:\n      opacity var(--_sidebar-transition),\n      transform var(--_sidebar-transition),\n      display var(--_sidebar-transition) allow-discrete;\n  }\n\n  :host([data-bottom-nav]) .bottom-bar {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  :host([data-preview-mode][data-bottom-nav]) .bottom-bar {\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .bottom-bar {\n    z-index: calc(var(--z-sticky) + 1);\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .bottom-tab {\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    padding: var(--size-1) var(--size-1-5);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .bottom-tab:hover,\n  .bottom-tab:focus-visible {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .bottom-tab:disabled {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-400));\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .bottom-tab-active,\n  .bottom-tab[data-active='true'] {\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  .bottom-tab-active::before,\n  .bottom-tab[data-active='true']::before {\n    display: none;\n  }\n\n  .bottom-tab-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .bottom-tab-label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n  }\n\n  .sidebar-header {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: space-between;\n    min-height: var(--size-6);\n    padding: var(--size-4);\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .sidebar-header .sidebar-header-content {\n    display: block;\n    flex: 1 1 0%;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host([data-collapsed]) .sidebar-header {\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: flex-start;\n    min-height: unset;\n    padding-block: var(--size-2);\n    padding-inline: var(--size-2);\n  }\n\n  :host([data-collapsed]) .sidebar-header .sidebar-header-content {\n    display: none;\n  }\n\n  .sidebar-logo {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--size-8);\n    min-height: var(--size-8);\n    margin-inline-end: var(--size-2);\n  }\n\n  .sidebar-logo:empty {\n    display: none;\n  }\n\n  :host([data-collapsed]) .sidebar-logo {\n    margin-block: var(--size-1);\n    margin-inline-end: 0;\n  }\n\n  .sidebar-content {\n    display: grid;\n    flex: 1;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-2);\n    align-content: start;\n    min-width: 0;\n    padding: var(--size-4);\n    overflow: clip auto;\n    scrollbar-width: thin;\n  }\n\n  .sidebar-footer {\n    flex-shrink: 0;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .toggle-btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .toggle-btn:hover {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-200);\n  }\n\n  .toggle-btn:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .toggle-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: var(--_motion-transition, transform var(--_sidebar-transition));\n  }\n\n  :host([data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host([data-bottom-nav]) .toggle-btn {\n    display: none;\n  }\n\n  :host(:not([dir='rtl'])[data-collapsed]) .toggle-icon,\n  :host(:dir(ltr)[data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)[data-collapsed]) .toggle-icon {\n    transform: rotate(0deg);\n  }\n}\n\n@layer refine.variants {\n  /* ── floating ── */\n  :host([variant='floating']) {\n    --_panel-radius: var(--rounded-lg);\n    height: calc(100% - var(--size-6));\n    margin: var(--size-3);\n  }\n\n  :host([variant='floating']) > nav {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n    max-width: none;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) {\n    inset: calc(var(--size-1) * -1);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) .bottom-bar {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n    box-shadow: var(--_panel-shadow);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--size-2);\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) .bottom-bar {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-1);\n    inset-inline-start: var(--size-1);\n  }\n\n  /* ── inset ── */\n  :host([variant='inset']) {\n    --_panel-bg: var(--color-contrast-50);\n    --_panel-shadow: none;\n    --_panel-border-color: transparent;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"sidebar.css.cjs","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n  display: none;\n  min-width: 0;\n  min-height: 0;\n  margin: 0;\n}\n\n/*\n * Simplified and unified sidebar CSS:\n * - Grouped collapsed/expanded state rules\n * - Consistent use of CSS variables for spacing, color, and transitions\n * - Removed redundant or legacy rules\n * - Clarified variant handling\n */\n\n@layer refine.base {\n  :host {\n    --_sidebar-width: var(--sidebar-width, 16rem);\n    --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n    --_sidebar-transition: var(--transition-normal);\n    --_panel-bg: var(--sidebar-bg, var(--color-canvas));\n    --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n    --_panel-border-color: var(--sidebar-border-color, var(--color-divider));\n    --_panel-radius: var(--sidebar-radius, var(--rounded-lg));\n    --_panel-shadow: var(--sidebar-shadow, var(--shadow-md));\n\n    position: relative;\n    z-index: var(--sidebar-z-index, 1);\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-width: var(--size-2xs);\n    max-width: var(--_sidebar-width);\n    height: 100%;\n    min-height: 0;\n    overflow: visible;\n    transition:\n      max-width var(--_sidebar-transition),\n      min-width var(--_sidebar-transition);\n    will-change: max-width;\n  }\n\n  :host > nav {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border-inline-end: var(--border) solid var(--_panel-border-color);\n    backdrop-filter: blur(var(--_panel-blur));\n  }\n\n  :host(:not([data-bottom-nav])) > nav {\n    overflow: visible;\n  }\n\n  .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: none;\n    width: 100%;\n    height: 100%;\n    background: color-mix(in oklch, var(--color-contrast-950) 36%, transparent);\n    border: 0;\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: block;\n    width: 100vw;\n    height: 100dvh;\n  }\n\n  :host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host([data-no-transition]),\n  :host([data-no-transition]) > nav {\n    transition: none;\n  }\n\n  :host([data-collapsed]) {\n    min-width: var(--_sidebar-collapsed-width);\n    max-width: var(--_sidebar-collapsed-width);\n  }\n\n  :host([data-bottom-nav]) {\n    position: fixed;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n    pointer-events: auto;\n  }\n\n  /* Preview mode: constrain bottom-nav to container bounds */\n  :host([data-preview-mode][data-bottom-nav]) {\n    position: absolute;\n    inset: 0;\n    width: auto;\n    height: auto;\n    pointer-events: none;\n  }\n\n  :host([data-bottom-nav]) > nav {\n    position: fixed;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    width: min(var(--_sidebar-width), 85vw);\n    max-width: 85vw;\n    max-height: 100dvh;\n    transform: translateX(-104%);\n    transition: transform var(--transition-normal);\n  }\n\n  /* Preview mode: use absolute positioning so drawer stays within container */\n  :host([data-preview-mode][data-bottom-nav]) > nav {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    max-height: 100%;\n    pointer-events: auto;\n  }\n\n  :host(:dir(rtl)[data-bottom-nav]) > nav {\n    transform: translateX(104%);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) > nav {\n    transform: translateX(0);\n  }\n\n  .bottom-bar {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-1);\n    align-items: stretch;\n    justify-content: space-around;\n    width: 100%;\n    height: 100%;\n    padding: var(--size-1);\n    pointer-events: none;\n    background: var(--_panel-bg);\n    border-top: var(--border) solid var(--_panel-border-color);\n    box-shadow: var(--shadow-sm);\n    opacity: 0;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: translateY(100%);\n    transition:\n      opacity var(--_sidebar-transition),\n      transform var(--_sidebar-transition),\n      display var(--_sidebar-transition) allow-discrete;\n  }\n\n  .bottom-bar[hidden] {\n    display: none;\n  }\n\n  :host([data-bottom-nav]) .bottom-bar {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  :host([data-preview-mode][data-bottom-nav]) .bottom-bar {\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .bottom-bar {\n    z-index: calc(var(--z-sticky) + 1);\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .bottom-tab {\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    padding: var(--size-1) var(--size-1-5);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .bottom-tab:hover,\n  .bottom-tab:focus-visible {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .bottom-tab:disabled {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-400));\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .bottom-tab-active,\n  .bottom-tab[data-active='true'] {\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  .bottom-tab-active::before,\n  .bottom-tab[data-active='true']::before {\n    display: none;\n  }\n\n  .bottom-tab-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .bottom-tab-label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n  }\n\n  .sidebar-header {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: space-between;\n    height: var(--sidebar-header-height, var(--size-16));\n    min-height: var(--sidebar-header-height, var(--size-16));\n    padding: var(--sidebar-header-padding, var(--size-3));\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .sidebar-header .sidebar-header-content {\n    display: block;\n    flex: 1 1 0%;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host([data-collapsed]) .sidebar-header {\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  :host([data-collapsed]) .sidebar-header .sidebar-header-content {\n    display: none;\n  }\n\n  .sidebar-logo {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--size-8);\n    min-height: var(--size-8);\n    margin-inline-end: var(--size-2);\n  }\n\n  .sidebar-logo:empty {\n    display: none;\n  }\n\n  :host([data-collapsed]) .sidebar-logo {\n    margin-block: var(--size-1);\n    margin-inline-end: 0;\n  }\n\n  .sidebar-content {\n    display: grid;\n    flex: 1;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-2);\n    align-content: start;\n    min-width: 0;\n    padding: var(--size-4);\n    overflow: clip auto;\n    scrollbar-width: thin;\n  }\n\n  .sidebar-footer {\n    flex-shrink: 0;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .toggle-btn {\n    all: unset;\n    position: absolute;\n    inset-block-start: var(--sidebar-toggle-offset, var(--size-4));\n    inset-inline-end: 0;\n    z-index: 1;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    color: var(--sidebar-toggle-color, var(--color-contrast-600));\n    cursor: pointer;\n    background: var(--sidebar-toggle-bg, var(--_panel-bg));\n    border: var(--border) solid var(--sidebar-toggle-border-color, var(--_panel-border-color));\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transform: translateX(50%);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  :host(:dir(rtl)) .toggle-btn {\n    transform: translateX(-50%);\n  }\n\n  :host(:not([data-has-logo])) .toggle-btn {\n    position: static;\n    margin-inline-start: auto;\n    transform: none;\n  }\n\n  :host([data-collapsed]:not([data-has-logo])) .toggle-btn {\n    margin-inline-start: 0;\n  }\n\n  .toggle-btn:hover {\n    color: var(--sidebar-toggle-hover-color, var(--color-contrast-900));\n    background: var(--sidebar-toggle-hover-bg, var(--color-contrast-100));\n    box-shadow: var(--shadow-md);\n  }\n\n  .toggle-btn:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--size-0-5);\n  }\n\n  .toggle-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  :host([data-bottom-nav]) .toggle-btn {\n    display: none;\n  }\n}\n\n@layer refine.variants {\n  /* ── floating ── */\n  :host([variant='floating']) {\n    --_panel-radius: var(--rounded-lg);\n    height: calc(100% - var(--size-6));\n    margin: var(--size-3);\n  }\n\n  :host([variant='floating']) > nav {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n    max-width: none;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) {\n    inset: calc(var(--size-1) * -1);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) .bottom-bar {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n    box-shadow: var(--_panel-shadow);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--size-2);\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) .bottom-bar {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-1);\n    inset-inline-start: var(--size-1);\n  }\n\n  /* ── inset ── */\n  :host([variant='inset']) {\n    --_panel-bg: var(--color-contrast-50);\n    --_panel-shadow: none;\n    --_panel-border-color: transparent;\n  }\n}\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
 //#region src/layout/sidebar/sidebar.css?inline
-var e = ".sidebar-logo[hidden]{min-width:0;min-height:0;margin:0;display:none}@layer refine.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--color-canvas));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--color-divider));--_panel-radius:var(--sidebar-radius,var(--rounded-lg));--_panel-shadow:var(--sidebar-shadow,var(--shadow-md));box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:max-width var(--_sidebar-transition), min-width var(--_sidebar-transition);will-change:max-width;display:block;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);width:100%;height:100%;min-height:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right:var(--border) solid var(--_panel-border-color)}:host>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_panel-border-color)}.mobile-backdrop{z-index:calc(var(--z-sticky) + 1);background:color-mix(in oklch, var(--color-contrast-950) 36%, transparent);border:0;width:100%;height:100%;display:none;position:absolute;inset:0}:host([data-bottom-nav][data-mobile-open]) .mobile-backdrop{z-index:calc(var(--z-sticky) + 1);width:100vw;height:100dvh;display:block;position:fixed;inset:0}:host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop{width:100%;height:100%;position:absolute;inset:0}:host([data-no-transition]),:host([data-no-transition])>nav{transition:none}:host([data-collapsed]){min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}:host([data-bottom-nav]){z-index:calc(var(--z-sticky) + 2);width:100%;min-width:0;max-width:100%;height:var(--sidebar-bottom-nav-height,3.75rem);pointer-events:auto;position:fixed;bottom:0;left:0;right:0}:host([data-preview-mode][data-bottom-nav]){pointer-events:none;width:auto;height:auto;position:absolute;inset:0}:host([data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);width:min(var(--_sidebar-width), 85vw);max-width:85vw;max-height:100dvh;transition:transform var(--transition-normal);position:fixed;top:0;bottom:0;transform:translate(-104%)}:host([data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([data-preview-mode][data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);pointer-events:auto;max-height:100%;position:absolute;top:0;bottom:0}:host([data-preview-mode][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host(:dir(rtl)[data-bottom-nav])>nav{transform:translate(104%)}:host([data-bottom-nav][data-mobile-open])>nav{transform:translate(0)}.bottom-bar{gap:var(--size-1);width:100%;height:100%;padding:var(--size-1);pointer-events:none;background:var(--_panel-bg);border-top:var(--border) solid var(--_panel-border-color);box-shadow:var(--shadow-sm);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--_sidebar-transition), transform var(--_sidebar-transition), display var(--_sidebar-transition) allow-discrete;justify-content:space-around;align-items:stretch;display:flex;transform:translateY(100%)}:host([data-bottom-nav]) .bottom-bar{pointer-events:auto;opacity:1;transform:translateY(0)}:host([data-preview-mode][data-bottom-nav]) .bottom-bar{z-index:calc(var(--z-sticky) + 2);height:var(--sidebar-bottom-nav-height,3.75rem);position:absolute;bottom:0;left:0;right:0}:host([data-bottom-nav][data-mobile-open]) .bottom-bar{z-index:calc(var(--z-sticky) + 1);pointer-events:none;opacity:0;transform:translateY(100%)}.bottom-tab{all:unset;box-sizing:border-box;gap:var(--size-0-5);min-width:0;padding:var(--size-1) var(--size-1-5);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.bottom-tab:hover,.bottom-tab:focus-visible{color:var(--sidebar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.bottom-tab:disabled{color:var(--sidebar-item-disabled-color,var(--color-contrast-400));cursor:not-allowed;opacity:.7}.bottom-tab-active,.bottom-tab[data-active=true]{color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in oklch, var(--color-primary) 12%, transparent)))}.bottom-tab-active:before,.bottom-tab[data-active=true]:before{display:none}.bottom-tab-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.bottom-tab-label{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.sidebar-header{gap:var(--size-2);min-height:var(--size-6);padding:var(--size-4);border-bottom:var(--border) solid var(--color-contrast-200);justify-content:space-between;align-items:center;display:flex}.sidebar-header .sidebar-header-content{flex:1;min-width:0;display:block;overflow:hidden}:host([data-collapsed]) .sidebar-header{gap:var(--size-2);min-height:unset;padding-block:var(--size-2);padding-inline:var(--size-2);flex-direction:column;justify-content:flex-start;align-items:center}:host([data-collapsed]) .sidebar-header .sidebar-header-content{display:none}.sidebar-logo{min-width:var(--size-8);min-height:var(--size-8);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:var(--size-2)}.sidebar-logo:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--size-2)}.sidebar-logo:empty{display:none}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:0}:host([data-collapsed]) .sidebar-logo:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:0}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--color-contrast-500);cursor:pointer;border-radius:var(--rounded-sm);transition:color var(--transition-fast), background var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggle-btn:hover{color:var(--color-contrast-800);background:var(--color-contrast-200)}.toggle-btn:focus-visible{outline:var(--focus-ring)}.toggle-icon{transition:var(--_motion-transition,transform var(--_sidebar-transition));justify-content:center;align-items:center;display:flex}:host([data-collapsed]) .toggle-icon{transform:rotate(180deg)}:host([data-bottom-nav]) .toggle-btn{display:none}:host(:not([dir=rtl])[data-collapsed]) .toggle-icon,:host(:dir(ltr)[data-collapsed]) .toggle-icon,:host(:dir(rtl)) .toggle-icon{transform:rotate(180deg)}:host(:dir(rtl)[data-collapsed]) .toggle-icon{transform:rotate(0)}}@layer refine.variants{:host([variant=floating]){--_panel-radius:var(--rounded-lg);height:calc(100% - var(--size-6));margin:var(--size-3)}:host([variant=floating])>nav{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius)}:host([variant=floating][data-bottom-nav]){bottom:var(--size-2);inset-inline:var(--size-2);width:auto;max-width:none}:host([variant=floating][data-preview-mode][data-bottom-nav]){inset:calc(var(--size-1) * -1)}:host([variant=floating][data-bottom-nav]) .bottom-bar{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow)}:host([variant=floating][data-bottom-nav])>nav{top:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([variant=floating][data-preview-mode][data-bottom-nav]) .bottom-bar{bottom:var(--size-2);inset-inline:var(--size-2);width:auto}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav{top:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-1)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}";
+var e = ".sidebar-logo[hidden]{min-width:0;min-height:0;margin:0;display:none}@layer refine.base{:host{--_sidebar-width:var(--sidebar-width,16rem);--_sidebar-collapsed-width:var(--sidebar-collapsed-width,3.5rem);--_sidebar-transition:var(--transition-normal);--_panel-bg:var(--sidebar-bg,var(--color-canvas));--_panel-blur:var(--sidebar-panel-blur,var(--blur-md));--_panel-border-color:var(--sidebar-border-color,var(--color-divider));--_panel-radius:var(--sidebar-radius,var(--rounded-lg));--_panel-shadow:var(--sidebar-shadow,var(--shadow-md));z-index:var(--sidebar-z-index,1);box-sizing:border-box;width:100%;min-width:var(--size-2xs);max-width:var(--_sidebar-width);height:100%;min-height:0;transition:max-width var(--_sidebar-transition), min-width var(--_sidebar-transition);will-change:max-width;display:block;position:relative;overflow:visible}:host>nav{box-sizing:border-box;background:var(--_panel-bg);width:100%;height:100%;min-height:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));flex-direction:column;display:flex;position:relative;overflow:hidden}:host>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){border-right:var(--border) solid var(--_panel-border-color)}:host>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left:var(--border) solid var(--_panel-border-color)}:host(:not([data-bottom-nav]))>nav{overflow:visible}.mobile-backdrop{z-index:calc(var(--z-sticky) + 1);background:color-mix(in oklch, var(--color-contrast-950) 36%, transparent);border:0;width:100%;height:100%;display:none;position:absolute;inset:0}:host([data-bottom-nav][data-mobile-open]) .mobile-backdrop{z-index:calc(var(--z-sticky) + 1);width:100vw;height:100dvh;display:block;position:fixed;inset:0}:host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop{width:100%;height:100%;position:absolute;inset:0}:host([data-no-transition]),:host([data-no-transition])>nav{transition:none}:host([data-collapsed]){min-width:var(--_sidebar-collapsed-width);max-width:var(--_sidebar-collapsed-width)}:host([data-bottom-nav]){z-index:calc(var(--z-sticky) + 2);width:100%;min-width:0;max-width:100%;height:var(--sidebar-bottom-nav-height,3.75rem);pointer-events:auto;position:fixed;bottom:0;left:0;right:0}:host([data-preview-mode][data-bottom-nav]){pointer-events:none;width:auto;height:auto;position:absolute;inset:0}:host([data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);width:min(var(--_sidebar-width), 85vw);max-width:85vw;max-height:100dvh;transition:transform var(--transition-normal);position:fixed;top:0;bottom:0;transform:translate(-104%)}:host([data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host([data-preview-mode][data-bottom-nav])>nav{z-index:calc(var(--z-sticky) + 3);pointer-events:auto;max-height:100%;position:absolute;top:0;bottom:0}:host([data-preview-mode][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}:host([data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}:host(:dir(rtl)[data-bottom-nav])>nav{transform:translate(104%)}:host([data-bottom-nav][data-mobile-open])>nav{transform:translate(0)}.bottom-bar{box-sizing:border-box;gap:var(--size-1);width:100%;height:100%;padding:var(--size-1);pointer-events:none;background:var(--_panel-bg);border-top:var(--border) solid var(--_panel-border-color);box-shadow:var(--shadow-sm);opacity:0;-webkit-backdrop-filter:blur(var(--_panel-blur));backdrop-filter:blur(var(--_panel-blur));transition:opacity var(--_sidebar-transition), transform var(--_sidebar-transition), display var(--_sidebar-transition) allow-discrete;justify-content:space-around;align-items:stretch;display:flex;transform:translateY(100%)}.bottom-bar[hidden]{display:none}:host([data-bottom-nav]) .bottom-bar{pointer-events:auto;opacity:1;transform:translateY(0)}:host([data-preview-mode][data-bottom-nav]) .bottom-bar{z-index:calc(var(--z-sticky) + 2);height:var(--sidebar-bottom-nav-height,3.75rem);position:absolute;bottom:0;left:0;right:0}:host([data-bottom-nav][data-mobile-open]) .bottom-bar{z-index:calc(var(--z-sticky) + 1);pointer-events:none;opacity:0;transform:translateY(100%)}.bottom-tab{all:unset;box-sizing:border-box;gap:var(--size-0-5);min-width:0;padding:var(--size-1) var(--size-1-5);color:var(--sidebar-item-color,var(--color-contrast-700));cursor:pointer;border-radius:var(--rounded-md);transition:background var(--transition-fast), color var(--transition-fast);flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.bottom-tab:hover,.bottom-tab:focus-visible{color:var(--sidebar-item-hover-color,var(--color-contrast-900));outline:var(--focus-ring);outline-offset:1px;background:var(--sidebar-item-hover-bg,var(--color-contrast-100))}.bottom-tab:disabled{color:var(--sidebar-item-disabled-color,var(--color-contrast-400));cursor:not-allowed;opacity:.7}.bottom-tab-active,.bottom-tab[data-active=true]{color:var(--sidebar-item-active-color,var(--color-primary));background:var(--sidebar-item-active-bg,var(--color-primary-100,color-mix(in oklch, var(--color-primary) 12%, transparent)))}.bottom-tab-active:before,.bottom-tab[data-active=true]:before{display:none}.bottom-tab-icon{width:var(--size-5);height:var(--size-5);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.bottom-tab-label{text-overflow:ellipsis;min-width:0;font-size:var(--text-xs);white-space:nowrap;overflow:hidden}.sidebar-header{box-sizing:border-box;gap:var(--size-2);height:var(--sidebar-header-height,var(--size-16));min-height:var(--sidebar-header-height,var(--size-16));padding:var(--sidebar-header-padding,var(--size-3));border-bottom:var(--border) solid var(--color-contrast-200);justify-content:space-between;align-items:center;display:flex}.sidebar-header .sidebar-header-content{flex:1;min-width:0;display:block;overflow:hidden}:host([data-collapsed]) .sidebar-header{gap:var(--size-2);flex-direction:column;justify-content:flex-start;align-items:center}:host([data-collapsed]) .sidebar-header .sidebar-header-content{display:none}.sidebar-logo{min-width:var(--size-8);min-height:var(--size-8);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:var(--size-2)}.sidebar-logo:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--size-2)}.sidebar-logo:empty{display:none}:host([data-collapsed]) .sidebar-logo{margin-block:var(--size-1)}:host([data-collapsed]) .sidebar-logo:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-right:0}:host([data-collapsed]) .sidebar-logo:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:0}.sidebar-content{gap:var(--size-2);min-width:0;padding:var(--size-4);scrollbar-width:thin;flex:1;grid-template-columns:minmax(0,1fr);align-content:start;display:grid;overflow:clip auto}.sidebar-footer{padding:var(--size-4);border-top:var(--border) solid var(--color-contrast-200);flex-shrink:0}.toggle-btn{all:unset;z-index:1;box-sizing:border-box;width:var(--size-8);height:var(--size-8);color:var(--sidebar-toggle-color,var(--color-contrast-600));cursor:pointer;background:var(--sidebar-toggle-bg,var(--_panel-bg));border:var(--border) solid var(--sidebar-toggle-border-color,var(--_panel-border-color));border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);top:var(--sidebar-toggle-offset,var(--size-4));justify-content:center;align-items:center;display:inline-flex;position:absolute;transform:translate(50%)}.toggle-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}:host(:dir(rtl)) .toggle-btn{transform:translate(-50%)}:host(:not([data-has-logo])) .toggle-btn{position:static;transform:none}:host(:not([data-has-logo])) .toggle-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:auto}:host(:not([data-has-logo])) .toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}:host([data-collapsed]:not([data-has-logo])) .toggle-btn:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:0}:host([data-collapsed]:not([data-has-logo])) .toggle-btn:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:0}.toggle-btn:hover{color:var(--sidebar-toggle-hover-color,var(--color-contrast-900));background:var(--sidebar-toggle-hover-bg,var(--color-contrast-100));box-shadow:var(--shadow-md)}.toggle-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--size-0-5)}.toggle-icon{justify-content:center;align-items:center;display:flex}:host([data-bottom-nav]) .toggle-btn{display:none}}@layer refine.variants{:host([variant=floating]){--_panel-radius:var(--rounded-lg);height:calc(100% - var(--size-6));margin:var(--size-3)}:host([variant=floating])>nav{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius)}:host([variant=floating][data-bottom-nav]){bottom:var(--size-2);inset-inline:var(--size-2);width:auto;max-width:none}:host([variant=floating][data-preview-mode][data-bottom-nav]){inset:calc(var(--size-1) * -1)}:host([variant=floating][data-bottom-nav]) .bottom-bar{border:var(--border) solid var(--_panel-border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow)}:host([variant=floating][data-bottom-nav])>nav{top:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([variant=floating][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([variant=floating][data-preview-mode][data-bottom-nav]) .bottom-bar{bottom:var(--size-2);inset-inline:var(--size-2);width:auto}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav{top:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-1)}:host([variant=floating][data-preview-mode][data-bottom-nav])>nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-1)}:host([variant=inset]){--_panel-bg:var(--color-contrast-50);--_panel-shadow:none;--_panel-border-color:transparent}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.css.js","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n  display: none;\n  min-width: 0;\n  min-height: 0;\n  margin: 0;\n}\n\n/*\n * Simplified and unified sidebar CSS:\n * - Grouped collapsed/expanded state rules\n * - Consistent use of CSS variables for spacing, color, and transitions\n * - Removed redundant or legacy rules\n * - Clarified variant handling\n */\n\n@layer refine.base {\n  :host {\n    --_sidebar-width: var(--sidebar-width, 16rem);\n    --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n    --_sidebar-transition: var(--transition-normal);\n    --_panel-bg: var(--sidebar-bg, var(--color-canvas));\n    --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n    --_panel-border-color: var(--sidebar-border-color, var(--color-divider));\n    --_panel-radius: var(--sidebar-radius, var(--rounded-lg));\n    --_panel-shadow: var(--sidebar-shadow, var(--shadow-md));\n\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-width: var(--size-2xs);\n    max-width: var(--_sidebar-width);\n    height: 100%;\n    min-height: 0;\n    overflow: visible;\n    transition:\n      max-width var(--_sidebar-transition),\n      min-width var(--_sidebar-transition);\n    will-change: max-width;\n  }\n\n  :host > nav {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border-inline-end: var(--border) solid var(--_panel-border-color);\n    backdrop-filter: blur(var(--_panel-blur));\n  }\n\n  .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: none;\n    width: 100%;\n    height: 100%;\n    background: color-mix(in oklch, var(--color-contrast-950) 36%, transparent);\n    border: 0;\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: block;\n    width: 100vw;\n    height: 100dvh;\n  }\n\n  :host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host([data-no-transition]),\n  :host([data-no-transition]) > nav {\n    transition: none;\n  }\n\n  :host([data-collapsed]) {\n    min-width: var(--_sidebar-collapsed-width);\n    max-width: var(--_sidebar-collapsed-width);\n  }\n\n  :host([data-bottom-nav]) {\n    position: fixed;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n    pointer-events: auto;\n  }\n\n  /* Preview mode: constrain bottom-nav to container bounds */\n  :host([data-preview-mode][data-bottom-nav]) {\n    position: absolute;\n    inset: 0;\n    width: auto;\n    height: auto;\n    pointer-events: none;\n  }\n\n  :host([data-bottom-nav]) > nav {\n    position: fixed;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    width: min(var(--_sidebar-width), 85vw);\n    max-width: 85vw;\n    max-height: 100dvh;\n    transform: translateX(-104%);\n    transition: transform var(--transition-normal);\n  }\n\n  /* Preview mode: use absolute positioning so drawer stays within container */\n  :host([data-preview-mode][data-bottom-nav]) > nav {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    max-height: 100%;\n    pointer-events: auto;\n  }\n\n  :host(:dir(rtl)[data-bottom-nav]) > nav {\n    transform: translateX(104%);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) > nav {\n    transform: translateX(0);\n  }\n\n  .bottom-bar {\n    display: flex;\n    gap: var(--size-1);\n    align-items: stretch;\n    justify-content: space-around;\n    width: 100%;\n    height: 100%;\n    padding: var(--size-1);\n    pointer-events: none;\n    background: var(--_panel-bg);\n    border-top: var(--border) solid var(--_panel-border-color);\n    box-shadow: var(--shadow-sm);\n    opacity: 0;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: translateY(100%);\n    transition:\n      opacity var(--_sidebar-transition),\n      transform var(--_sidebar-transition),\n      display var(--_sidebar-transition) allow-discrete;\n  }\n\n  :host([data-bottom-nav]) .bottom-bar {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  :host([data-preview-mode][data-bottom-nav]) .bottom-bar {\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .bottom-bar {\n    z-index: calc(var(--z-sticky) + 1);\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .bottom-tab {\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    padding: var(--size-1) var(--size-1-5);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .bottom-tab:hover,\n  .bottom-tab:focus-visible {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .bottom-tab:disabled {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-400));\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .bottom-tab-active,\n  .bottom-tab[data-active='true'] {\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  .bottom-tab-active::before,\n  .bottom-tab[data-active='true']::before {\n    display: none;\n  }\n\n  .bottom-tab-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .bottom-tab-label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n  }\n\n  .sidebar-header {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: space-between;\n    min-height: var(--size-6);\n    padding: var(--size-4);\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .sidebar-header .sidebar-header-content {\n    display: block;\n    flex: 1 1 0%;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host([data-collapsed]) .sidebar-header {\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: flex-start;\n    min-height: unset;\n    padding-block: var(--size-2);\n    padding-inline: var(--size-2);\n  }\n\n  :host([data-collapsed]) .sidebar-header .sidebar-header-content {\n    display: none;\n  }\n\n  .sidebar-logo {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--size-8);\n    min-height: var(--size-8);\n    margin-inline-end: var(--size-2);\n  }\n\n  .sidebar-logo:empty {\n    display: none;\n  }\n\n  :host([data-collapsed]) .sidebar-logo {\n    margin-block: var(--size-1);\n    margin-inline-end: 0;\n  }\n\n  .sidebar-content {\n    display: grid;\n    flex: 1;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-2);\n    align-content: start;\n    min-width: 0;\n    padding: var(--size-4);\n    overflow: clip auto;\n    scrollbar-width: thin;\n  }\n\n  .sidebar-footer {\n    flex-shrink: 0;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .toggle-btn {\n    all: unset;\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast);\n  }\n\n  .toggle-btn:hover {\n    color: var(--color-contrast-800);\n    background: var(--color-contrast-200);\n  }\n\n  .toggle-btn:focus-visible {\n    outline: var(--focus-ring);\n  }\n\n  .toggle-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: var(--_motion-transition, transform var(--_sidebar-transition));\n  }\n\n  :host([data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host([data-bottom-nav]) .toggle-btn {\n    display: none;\n  }\n\n  :host(:not([dir='rtl'])[data-collapsed]) .toggle-icon,\n  :host(:dir(ltr)[data-collapsed]) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)) .toggle-icon {\n    transform: rotate(180deg);\n  }\n\n  :host(:dir(rtl)[data-collapsed]) .toggle-icon {\n    transform: rotate(0deg);\n  }\n}\n\n@layer refine.variants {\n  /* ── floating ── */\n  :host([variant='floating']) {\n    --_panel-radius: var(--rounded-lg);\n    height: calc(100% - var(--size-6));\n    margin: var(--size-3);\n  }\n\n  :host([variant='floating']) > nav {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n    max-width: none;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) {\n    inset: calc(var(--size-1) * -1);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) .bottom-bar {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n    box-shadow: var(--_panel-shadow);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--size-2);\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) .bottom-bar {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-1);\n    inset-inline-start: var(--size-1);\n  }\n\n  /* ── inset ── */\n  :host([variant='inset']) {\n    --_panel-bg: var(--color-contrast-50);\n    --_panel-shadow: none;\n    --_panel-border-color: transparent;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"sidebar.css.js","names":[],"sources":["../../../src/layout/sidebar/sidebar.css?inline"],"sourcesContent":[".sidebar-logo[hidden] {\n  display: none;\n  min-width: 0;\n  min-height: 0;\n  margin: 0;\n}\n\n/*\n * Simplified and unified sidebar CSS:\n * - Grouped collapsed/expanded state rules\n * - Consistent use of CSS variables for spacing, color, and transitions\n * - Removed redundant or legacy rules\n * - Clarified variant handling\n */\n\n@layer refine.base {\n  :host {\n    --_sidebar-width: var(--sidebar-width, 16rem);\n    --_sidebar-collapsed-width: var(--sidebar-collapsed-width, 3.5rem);\n    --_sidebar-transition: var(--transition-normal);\n    --_panel-bg: var(--sidebar-bg, var(--color-canvas));\n    --_panel-blur: var(--sidebar-panel-blur, var(--blur-md));\n    --_panel-border-color: var(--sidebar-border-color, var(--color-divider));\n    --_panel-radius: var(--sidebar-radius, var(--rounded-lg));\n    --_panel-shadow: var(--sidebar-shadow, var(--shadow-md));\n\n    position: relative;\n    z-index: var(--sidebar-z-index, 1);\n    box-sizing: border-box;\n    display: block;\n    width: 100%;\n    min-width: var(--size-2xs);\n    max-width: var(--_sidebar-width);\n    height: 100%;\n    min-height: 0;\n    overflow: visible;\n    transition:\n      max-width var(--_sidebar-transition),\n      min-width var(--_sidebar-transition);\n    will-change: max-width;\n  }\n\n  :host > nav {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--_panel-bg);\n    border-inline-end: var(--border) solid var(--_panel-border-color);\n    backdrop-filter: blur(var(--_panel-blur));\n  }\n\n  :host(:not([data-bottom-nav])) > nav {\n    overflow: visible;\n  }\n\n  .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: none;\n    width: 100%;\n    height: 100%;\n    background: color-mix(in oklch, var(--color-contrast-950) 36%, transparent);\n    border: 0;\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: calc(var(--z-sticky) + 1);\n    display: block;\n    width: 100vw;\n    height: 100dvh;\n  }\n\n  :host([data-preview-mode][data-bottom-nav][data-mobile-open]) .mobile-backdrop {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host([data-no-transition]),\n  :host([data-no-transition]) > nav {\n    transition: none;\n  }\n\n  :host([data-collapsed]) {\n    min-width: var(--_sidebar-collapsed-width);\n    max-width: var(--_sidebar-collapsed-width);\n  }\n\n  :host([data-bottom-nav]) {\n    position: fixed;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n    pointer-events: auto;\n  }\n\n  /* Preview mode: constrain bottom-nav to container bounds */\n  :host([data-preview-mode][data-bottom-nav]) {\n    position: absolute;\n    inset: 0;\n    width: auto;\n    height: auto;\n    pointer-events: none;\n  }\n\n  :host([data-bottom-nav]) > nav {\n    position: fixed;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    width: min(var(--_sidebar-width), 85vw);\n    max-width: 85vw;\n    max-height: 100dvh;\n    transform: translateX(-104%);\n    transition: transform var(--transition-normal);\n  }\n\n  /* Preview mode: use absolute positioning so drawer stays within container */\n  :host([data-preview-mode][data-bottom-nav]) > nav {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    z-index: calc(var(--z-sticky) + 3);\n    max-height: 100%;\n    pointer-events: auto;\n  }\n\n  :host(:dir(rtl)[data-bottom-nav]) > nav {\n    transform: translateX(104%);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) > nav {\n    transform: translateX(0);\n  }\n\n  .bottom-bar {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-1);\n    align-items: stretch;\n    justify-content: space-around;\n    width: 100%;\n    height: 100%;\n    padding: var(--size-1);\n    pointer-events: none;\n    background: var(--_panel-bg);\n    border-top: var(--border) solid var(--_panel-border-color);\n    box-shadow: var(--shadow-sm);\n    opacity: 0;\n    backdrop-filter: blur(var(--_panel-blur));\n    transform: translateY(100%);\n    transition:\n      opacity var(--_sidebar-transition),\n      transform var(--_sidebar-transition),\n      display var(--_sidebar-transition) allow-discrete;\n  }\n\n  .bottom-bar[hidden] {\n    display: none;\n  }\n\n  :host([data-bottom-nav]) .bottom-bar {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  :host([data-preview-mode][data-bottom-nav]) .bottom-bar {\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline: 0;\n    z-index: calc(var(--z-sticky) + 2);\n    height: var(--sidebar-bottom-nav-height, 3.75rem);\n  }\n\n  :host([data-bottom-nav][data-mobile-open]) .bottom-bar {\n    z-index: calc(var(--z-sticky) + 1);\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .bottom-tab {\n    all: unset;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    gap: var(--size-0-5);\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    padding: var(--size-1) var(--size-1-5);\n    color: var(--sidebar-item-color, var(--color-contrast-700));\n    text-decoration: none;\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .bottom-tab:hover,\n  .bottom-tab:focus-visible {\n    color: var(--sidebar-item-hover-color, var(--color-contrast-900));\n    outline: var(--focus-ring);\n    outline-offset: 1px;\n    background: var(--sidebar-item-hover-bg, var(--color-contrast-100));\n  }\n\n  .bottom-tab:disabled {\n    color: var(--sidebar-item-disabled-color, var(--color-contrast-400));\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  .bottom-tab-active,\n  .bottom-tab[data-active='true'] {\n    color: var(--sidebar-item-active-color, var(--color-primary));\n    background: var(\n      --sidebar-item-active-bg,\n      var(--color-primary-100, color-mix(in oklch, var(--color-primary) 12%, transparent))\n    );\n  }\n\n  .bottom-tab-active::before,\n  .bottom-tab[data-active='true']::before {\n    display: none;\n  }\n\n  .bottom-tab-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .bottom-tab-label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--text-xs);\n    white-space: nowrap;\n  }\n\n  .sidebar-header {\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: space-between;\n    height: var(--sidebar-header-height, var(--size-16));\n    min-height: var(--sidebar-header-height, var(--size-16));\n    padding: var(--sidebar-header-padding, var(--size-3));\n    border-bottom: var(--border) solid var(--color-contrast-200);\n  }\n\n  .sidebar-header .sidebar-header-content {\n    display: block;\n    flex: 1 1 0%;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host([data-collapsed]) .sidebar-header {\n    flex-direction: column;\n    gap: var(--size-2);\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  :host([data-collapsed]) .sidebar-header .sidebar-header-content {\n    display: none;\n  }\n\n  .sidebar-logo {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    min-width: var(--size-8);\n    min-height: var(--size-8);\n    margin-inline-end: var(--size-2);\n  }\n\n  .sidebar-logo:empty {\n    display: none;\n  }\n\n  :host([data-collapsed]) .sidebar-logo {\n    margin-block: var(--size-1);\n    margin-inline-end: 0;\n  }\n\n  .sidebar-content {\n    display: grid;\n    flex: 1;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--size-2);\n    align-content: start;\n    min-width: 0;\n    padding: var(--size-4);\n    overflow: clip auto;\n    scrollbar-width: thin;\n  }\n\n  .sidebar-footer {\n    flex-shrink: 0;\n    padding: var(--size-4);\n    border-top: var(--border) solid var(--color-contrast-200);\n  }\n\n  .toggle-btn {\n    all: unset;\n    position: absolute;\n    inset-block-start: var(--sidebar-toggle-offset, var(--size-4));\n    inset-inline-end: 0;\n    z-index: 1;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    color: var(--sidebar-toggle-color, var(--color-contrast-600));\n    cursor: pointer;\n    background: var(--sidebar-toggle-bg, var(--_panel-bg));\n    border: var(--border) solid var(--sidebar-toggle-border-color, var(--_panel-border-color));\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transform: translateX(50%);\n    transition:\n      color var(--transition-fast),\n      background var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  :host(:dir(rtl)) .toggle-btn {\n    transform: translateX(-50%);\n  }\n\n  :host(:not([data-has-logo])) .toggle-btn {\n    position: static;\n    margin-inline-start: auto;\n    transform: none;\n  }\n\n  :host([data-collapsed]:not([data-has-logo])) .toggle-btn {\n    margin-inline-start: 0;\n  }\n\n  .toggle-btn:hover {\n    color: var(--sidebar-toggle-hover-color, var(--color-contrast-900));\n    background: var(--sidebar-toggle-hover-bg, var(--color-contrast-100));\n    box-shadow: var(--shadow-md);\n  }\n\n  .toggle-btn:focus-visible {\n    outline: var(--focus-ring);\n    outline-offset: var(--size-0-5);\n  }\n\n  .toggle-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  :host([data-bottom-nav]) .toggle-btn {\n    display: none;\n  }\n}\n\n@layer refine.variants {\n  /* ── floating ── */\n  :host([variant='floating']) {\n    --_panel-radius: var(--rounded-lg);\n    height: calc(100% - var(--size-6));\n    margin: var(--size-3);\n  }\n\n  :host([variant='floating']) > nav {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n    max-width: none;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) {\n    inset: calc(var(--size-1) * -1);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) .bottom-bar {\n    border: var(--border) solid var(--_panel-border-color);\n    border-radius: var(--_panel-radius);\n    box-shadow: var(--_panel-shadow);\n  }\n\n  :host([variant='floating'][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-2);\n    inset-inline-start: var(--size-2);\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) .bottom-bar {\n    inset-block-end: var(--size-2);\n    inset-inline: var(--size-2);\n    width: auto;\n  }\n\n  :host([variant='floating'][data-preview-mode][data-bottom-nav]) > nav {\n    inset-block-start: var(--size-1);\n    inset-inline-start: var(--size-1);\n  }\n\n  /* ── inset ── */\n  :host([variant='inset']) {\n    --_panel-bg: var(--color-contrast-50);\n    --_panel-shadow: none;\n    --_panel-border-color: transparent;\n  }\n}\n"],"mappings":""}

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

@@ -6,6 +6,8 @@ type SidebarMobileSource = 'api' | 'responsive' | 'toggle';
 type SidebarMode = 'bottom-nav' | 'collapsed' | 'default';
 /** Context provided by `ore-sidebar` to its `ore-sidebar-group` and `ore-sidebar-item` children. */
 export type SidebarContext = {
+    closeMobile: () => void;
+    closeOnSelect: Readable<boolean>;
     collapsed: Readable<boolean>;
     mobileOpen: Readable<boolean>;
     mode: Readable<SidebarMode>;
@@ -45,20 +47,24 @@ export type OreSidebarGroupEvents = {
 export type OreSidebarProps = {
     /** CSS media query that switches the sidebar to bottom navigation mode */
     'bottom-nav-at'?: string;
+    'close-on-select'?: boolean;
     /** Controlled collapsed state */
     collapsed?: boolean;
     /** Whether the sidebar supports collapsing */
     collapsible?: boolean;
+    'collapse-label'?: string;
     /** Evaluate responsive and bottom-nav breakpoints against container width only. */
     'container-breakpoints'?: boolean;
     /** Initial collapsed state in uncontrolled mode */
     'default-collapsed'?: boolean;
+    'expand-label'?: string;
     /**
      * Accessible label for the navigation landmark.
      * Use to distinguish multiple navigation regions on a page.
      * @default 'Sidebar navigation'
      */
     label?: string;
+    'mobile-close-label'?: string;
     /**
      * CSS media query that, when it matches, automatically collapses the sidebar.
      * Unset by default — no automatic collapse.
@@ -162,6 +168,8 @@ export declare const SIDEBAR_GROUP_TAG: "ore-sidebar-group";
 export type OreSidebarItemProps = {
     /** Whether this item represents the current page/section */
     active?: boolean;
+    'bottom-nav'?: boolean;
+    'bottom-nav-label'?: string;
     /** Whether this item is disabled */
     disabled?: boolean;
     /** Navigation href — renders an `<a>` when set, otherwise a `<button>` */

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/list-item.cjs

@@ -1,16 +1,17 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./list.cjs"),r=require("./content/list/_list-item-reveal.cjs"),i=require("./content/list/list-item.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=e=>e===`left`?`actions-left`:`actions-right`,c=`ore-list-item`;(0,a.define)(c,{props:{...t.disablableBundle,revealed:a.prop.oneOf([`left`,`right`],void 0),value:a.prop.string()},setup(e){let t=(0,a.getHost)(),i=(0,a.useEmit)(),c=(0,a.useSlots)(),l=(0,a.inject)(n.LIST_CTX),u=(0,o.computed)(()=>!!l?.selectable.value),d=(0,o.computed)(()=>e.value.value!=null&&l!=null&&l.value.value===e.value.value),f=e=>c.has(s(e)).value;(0,a.onMounted)(()=>{let n=t.shadowRoot?.querySelector(`.row`);if(!n)return;let l=r.createRevealState(t,n,{disabled:(0,o.computed)(()=>e.disabled.value||!!e.revealed.value),hasActions:f,onConfirm:e=>{let n=c.elements(s(e)).value[0];i(`confirm`,{item:t,side:e}),n?.click()}});(0,a.onCleanup)(()=>l.dispose())}),(0,a.watchEffect)(()=>{t.toggleAttribute(`selected`,d.value)});let p=d.value;(0,a.watchEffect)(()=>{let n=d.value;n!==p&&(p=n,i(n?`select`:`deselect`,{item:t,value:e.value.value??null}))});let m=e.revealed.value??null;(0,a.watchEffect)(()=>{let n=e.revealed.value??null;n!==m&&(m=n,n?(l?.requestReveal(t),i(`reveal`,{item:t,side:n})):i(`conceal`,{item:t}))});let h=n=>{if(e.disabled.value)return;if(e.revealed.value){n.preventDefault(),n.stopPropagation(),t.removeAttribute(`revealed`);return}if(!u.value)return;let r=e.value.value;r!=null&&l?.select(d.value?void 0:r)};return(0,a.bind)({attr:{"aria-disabled":()=>e.disabled.value?`true`:null,"aria-selected":()=>u.value?String(d.value):null,role:()=>u.value?`option`:`listitem`}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./list.cjs"),r=require("./content/list/_list-item-reveal.cjs"),i=require("./content/list/list-item.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=e=>e===`left`?`actions-left`:`actions-right`,c=`ore-list-item`;(0,a.define)(c,{props:{...t.disablableBundle,actionable:a.prop.bool(!1),revealed:a.prop.oneOf([`left`,`right`],void 0),value:a.prop.string()},setup(e){let t=(0,a.getHost)(),i=(0,a.useEmit)(),c=(0,a.useSlots)(),l=c.has(`description`),u=c.has(`leading`),d=c.has(`trailing`),f=(0,a.inject)(n.LIST_CTX),p=(0,o.computed)(()=>!!f?.selectable.value),m=(0,o.computed)(()=>e.value.value!=null&&f!=null&&f.value.value===e.value.value),h=e=>c.has(s(e)).value;(0,a.onMounted)(()=>{let n=t.shadowRoot?.querySelector(`.row`);if(!n)return;let l=r.createRevealState(t,n,{disabled:(0,o.computed)(()=>e.disabled.value||!!e.revealed.value),hasActions:h,onConfirm:e=>{let n=c.elements(s(e)).value[0];i(`confirm`,{item:t,side:e}),n?.click()}});(0,a.onCleanup)(()=>l.dispose())}),(0,a.watchEffect)(()=>{t.toggleAttribute(`selected`,m.value)});let g=m.value;(0,a.watchEffect)(()=>{let n=m.value;n!==g&&(g=n,i(n?`select`:`deselect`,{item:t,value:e.value.value??null}))});let _=e.revealed.value??null;(0,a.watchEffect)(()=>{let n=e.revealed.value??null;n!==_&&(_=n,n?(f?.requestReveal(t),i(`reveal`,{item:t,side:n})):i(`conceal`,{item:t}))});let v=n=>{if(e.disabled.value)return;if(e.revealed.value){n.preventDefault(),n.stopPropagation(),t.removeAttribute(`revealed`);return}if(e.actionable.value&&i(`activate`,{item:t,value:e.value.value??null}),!p.value)return;let r=e.value.value;r!=null&&f?.select(m.value?void 0:r)};return(0,a.bind)({attr:{"aria-disabled":()=>e.disabled.value?`true`:null,"aria-selected":()=>p.value?String(m.value):null,"data-two-line":()=>l.value?!0:void 0,role:()=>p.value?`option`:`listitem`}}),a.html`
       <div
         class="row"
         part="row"
+        role="${()=>e.actionable.value?`button`:null}"
         tabindex="${()=>e.disabled.value?`-1`:`0`}"
-        @click="${h}"
-        @keydown="${t=>{(t.key===`Enter`||t.key===` `)&&(e.disabled.value||!e.revealed.value&&!u.value||(t.preventDefault(),h(t)))}}">
-        <span class="leading" part="leading"><slot name="leading"></slot></span>
+        @click="${v}"
+        @keydown="${t=>{(t.key===`Enter`||t.key===` `)&&!e.disabled.value&&(e.revealed.value||p.value||e.actionable.value)&&(t.preventDefault(),v(t))}}">
+        <span class="leading" part="leading" ?hidden="${()=>!u.value}"><slot name="leading"></slot></span>
         <span class="content" part="content">
           <span class="title" part="title"><slot></slot></span>
           <span class="description" part="description"><slot name="description"></slot></span>
         </span>
-        <span class="trailing" part="trailing"><slot name="trailing"></slot></span>
+        <span class="trailing" part="trailing" ?hidden="${()=>!d.value}"><slot name="trailing"></slot></span>
       </div>
       <span class="actions actions-left" part="actions-start"><slot name="actions-left"></slot></span>
       <span class="actions actions-right" part="actions-end"><slot name="actions-right"></slot></span>

package/dist/list-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.cjs","names":[],"sources":["../src/content/list/list-item.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  inject,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { createRevealState } from './_list-item-reveal';\nimport { LIST_CTX } from './list';\nimport componentStyles from './list-item.css?inline';\n\n/** Which side's action panel is currently revealed on a list item. */\nexport type ListItemRevealSide = 'left' | 'right';\n\n/** Events emitted by the list-item component */\nexport type OreListItemEvents = {\n  /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */\n  conceal: { item: HTMLElement };\n  /**\n   * Emitted when a swipe crosses the full-swipe-through distance — the \"swiped all the way\"\n   * confirm gesture. Fired just before the slotted action's own click (if any).\n   */\n  confirm: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes deselected. */\n  deselect: { item: HTMLElement; value: null | string };\n  /** Emitted when a swipe/focus reveals an action panel. */\n  reveal: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes selected (only meaningful inside a `selectable` `ore-list`). */\n  select: { item: HTMLElement; value: null | string };\n};\n\n/** List-item component properties */\nexport type OreListItemProps = {\n  /** Disable this item — blocks pointer interaction, swipe actions, and selection */\n  disabled?: boolean;\n  /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */\n  revealed?: ListItemRevealSide;\n  /**\n   * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive\n   * `selected` — required for selection to work. There's no separate `selected` prop: the parent\n   * list's `value` is the single source of truth, so this item's selected state can't drift from\n   * it. Also reported in `select`/`deselect`/the parent's `change` event.\n   */\n  value?: string;\n};\n\n/** Maps a reveal side to its slot name — the one place this pairing is spelled out. */\nconst actionSlot = (side: ListItemRevealSide): 'actions-left' | 'actions-right' =>\n  side === 'left' ? 'actions-left' : 'actions-right';\n\n/**\n * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`\n * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal\n * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An\n * action panel only opens if it actually has slotted content; swiping the other direction is a\n * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button\n * reveals its panel via `:focus-within`, independent of any gesture).\n *\n * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —\n * past the full-swipe-through distance — auto-confirms that side's action immediately (fires\n * `confirm` and clicks the slot's first element), the same \"swipe all the way\" shortcut as iOS\n * Mail's delete gesture.\n *\n * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside\n * the item, or open a different item's panel. Reverse-swiping an already-open item is not\n * supported — see `ore-list`'s docs for the reasoning.\n *\n * @element ore-list-item\n *\n * @attr {boolean} disabled - Disable this item\n * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.\n * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events\n * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'\n *\n * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }\n * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }\n * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }\n * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }\n * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }\n *\n * @slot leading - Content before the title (e.g. icon, avatar)\n * @slot - Item title\n * @slot description - Secondary line below the title\n * @slot trailing - Content after the title (e.g. meta text, chevron)\n * @slot actions-left - Buttons revealed by swiping right (or focusing into this slot)\n * @slot actions-right - Buttons revealed by swiping left (or focusing into this slot)\n *\n * @cssprop --list-item-actions-width - Width of each action panel (default 6rem)\n * @cssprop --list-item-bg - Row background color\n * @cssprop --list-item-hover-bg - Row background on hover\n * @cssprop --list-item-selected-bg - Row background when selected\n * @part row - The row wrapper (focusable, swipeable)\n * @part leading - The leading slot container\n * @part content - The title + description container\n * @part title - The title slot container\n * @part description - The description slot container\n * @part trailing - The trailing slot container\n * @part actions-start - The left action panel container\n * @part actions-end - The right action panel container\n * @example\n * ```html\n * <ore-list-item>\n *   <ore-icon slot=\"leading\" name=\"mail\"></ore-icon>\n *   Inbox\n *   <span slot=\"trailing\">12</span>\n * </ore-list-item>\n * <ore-list-item>\n *   Newsletter\n *   <span slot=\"description\">From Acme Inc.</span>\n *   <ore-button slot=\"actions-right\" color=\"error\">Delete</ore-button>\n * </ore-list-item>\n * ```\n */\nexport const LIST_ITEM_TAG = 'ore-list-item' as const;\ndefine<OreListItemProps>(LIST_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    revealed: prop.oneOf<ListItemRevealSide | undefined>(['left', 'right'], undefined),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListItemEvents>();\n    const slots = useSlots<'actions-left' | 'actions-right' | 'description' | 'leading' | 'trailing'>();\n\n    const listCtx = inject(LIST_CTX);\n    const isSelectable = computed(() => Boolean(listCtx?.selectable.value));\n    // Derived, not owned: `ore-list`'s `value` is the single source of truth, so this can never\n    // drift out of sync with a sibling the way an independently-settable `selected` prop could.\n    const isSelected = computed(\n      () => props.value.value != null && listCtx != null && listCtx.value.value === props.value.value,\n    );\n\n    const hasActions = (side: ListItemRevealSide): boolean => slots.has(actionSlot(side)).value;\n\n    onMounted(() => {\n      const row = el.shadowRoot?.querySelector<HTMLElement>('.row');\n\n      if (!row) return;\n\n      const pan = createRevealState(el, row, {\n        disabled: computed(() => props.disabled.value || Boolean(props.revealed.value)),\n        hasActions,\n        // Clicks the slot's own first element (the common case: a single action button) so its own\n        // click handler runs the real action — `confirm` covers slots without a clickable element.\n        onConfirm: (side) => {\n          const target = slots.elements(actionSlot(side)).value[0] as HTMLElement | undefined;\n\n          emit('confirm', { item: el, side });\n          target?.click();\n        },\n      });\n\n      onCleanup(() => pan.dispose());\n    });\n\n    // Reflects the derived `selected` state as a plain boolean attribute — the styling/\n    // `[selected]`-selector hook — the same way `prop.bool()`'s own reflection would, since it\n    // isn't a real settable prop anymore.\n    watchEffect(() => {\n      el.toggleAttribute('selected', isSelected.value);\n    });\n\n    // Emits select/deselect/reveal/conceal for both gesture-driven AND externally-set (attribute,\n    // or the parent list's `value`) state changes — the plain-reflected-prop equivalent of\n    // ore-accordion-item's native <details> `toggle`-event listener (there's no backing native\n    // element here to piggyback on).\n    let lastSelected = isSelected.value;\n\n    watchEffect(() => {\n      const current = isSelected.value;\n\n      if (current === lastSelected) return;\n\n      lastSelected = current;\n      emit(current ? 'select' : 'deselect', { item: el, value: props.value.value ?? null });\n    });\n\n    let lastRevealed = props.revealed.value ?? null;\n\n    watchEffect(() => {\n      const current = props.revealed.value ?? null;\n\n      if (current === lastRevealed) return;\n\n      lastRevealed = current;\n\n      if (current) {\n        // Only one item may have its swipe actions revealed at a time — tell the list directly\n        // instead of dispatching an event for it to listen for.\n        listCtx?.requestReveal(el);\n        emit('reveal', { item: el, side: current });\n      } else {\n        emit('conceal', { item: el });\n      }\n    });\n\n    const handleActivate = (event: Event): void => {\n      if (props.disabled.value) return;\n\n      if (props.revealed.value) {\n        event.preventDefault();\n        event.stopPropagation();\n        el.removeAttribute('revealed');\n\n        return;\n      }\n\n      if (!isSelectable.value) return;\n\n      const value = props.value.value;\n\n      // Re-clicking an already-selected item deselects it; a value is required to select at all\n      // (undefined would otherwise match every valueless item at once).\n      if (value != null) listCtx?.select(isSelected.value ? undefined : value);\n    };\n\n    const handleRowKeydown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      if (props.disabled.value || (!props.revealed.value && !isSelectable.value)) return;\n\n      event.preventDefault();\n      handleActivate(event);\n    };\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        'aria-selected': () => (isSelectable.value ? String(isSelected.value) : null),\n        role: () => (isSelectable.value ? 'option' : 'listitem'),\n      },\n    });\n\n    return html`\n      <div\n        class=\"row\"\n        part=\"row\"\n        tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n        @click=\"${handleActivate}\"\n        @keydown=\"${handleRowKeydown}\">\n        <span class=\"leading\" part=\"leading\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"title\" part=\"title\"><slot></slot></span>\n          <span class=\"description\" part=\"description\"><slot name=\"description\"></slot></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\"><slot name=\"trailing\"></slot></span>\n      </div>\n      <span class=\"actions actions-left\" part=\"actions-start\"><slot name=\"actions-left\"></slot></span>\n      <span class=\"actions actions-right\" part=\"actions-end\"><slot name=\"actions-right\"></slot></span>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"wVAyDA,IAAM,EAAc,GAClB,IAAS,OAAS,eAAiB,gBAiExB,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAAyB,EAAe,CACtC,MAAO,CACL,GAAG,EAAA,iBACH,SAAU,EAAA,KAAK,MAAsC,CAAC,OAAQ,OAAO,EAAG,IAAA,EAAS,EACjF,MAAO,EAAA,KAAK,OAAO,CACrB,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAO,EAAA,QAAA,CAA2B,EAClC,GAAA,EAAQ,EAAA,SAAA,CAAoF,EAE5F,GAAA,EAAU,EAAA,OAAA,CAAO,EAAA,QAAQ,EACzB,GAAA,EAAe,EAAA,SAAA,KAAe,EAAQ,GAAS,WAAW,KAAM,EAGhE,GAAA,EAAa,EAAA,SAAA,KACX,EAAM,MAAM,OAAS,MAAQ,GAAW,MAAQ,EAAQ,MAAM,QAAU,EAAM,MAAM,KAC5F,EAEM,EAAc,GAAsC,EAAM,IAAI,EAAW,CAAI,CAAC,CAAC,CAAC,OAEtF,EAAA,EAAA,UAAA,KAAgB,CACd,IAAM,EAAM,EAAG,YAAY,cAA2B,MAAM,EAE5D,GAAI,CAAC,EAAK,OAEV,IAAM,EAAM,EAAA,kBAAkB,EAAI,EAAK,CACrC,UAAA,EAAU,EAAA,SAAA,KAAe,EAAM,SAAS,OAAS,EAAQ,EAAM,SAAS,KAAM,EAC9E,aAGA,UAAY,GAAS,CACnB,IAAM,EAAS,EAAM,SAAS,EAAW,CAAI,CAAC,CAAC,CAAC,MAAM,GAEtD,EAAK,UAAW,CAAE,KAAM,EAAI,MAAK,CAAC,EAClC,GAAQ,MAAM,CAChB,CACF,CAAC,GAED,EAAA,EAAA,UAAA,KAAgB,EAAI,QAAQ,CAAC,CAC/B,CAAC,GAKD,EAAA,EAAA,YAAA,KAAkB,CAChB,EAAG,gBAAgB,WAAY,EAAW,KAAK,CACjD,CAAC,EAMD,IAAI,EAAe,EAAW,OAE9B,EAAA,EAAA,YAAA,KAAkB,CAChB,IAAM,EAAU,EAAW,MAEvB,IAAY,IAEhB,EAAe,EACf,EAAK,EAAU,SAAW,WAAY,CAAE,KAAM,EAAI,MAAO,EAAM,MAAM,OAAS,IAAK,CAAC,EACtF,CAAC,EAED,IAAI,EAAe,EAAM,SAAS,OAAS,MAE3C,EAAA,EAAA,YAAA,KAAkB,CAChB,IAAM,EAAU,EAAM,SAAS,OAAS,KAEpC,IAAY,IAEhB,EAAe,EAEX,GAGF,GAAS,cAAc,CAAE,EACzB,EAAK,SAAU,CAAE,KAAM,EAAI,KAAM,CAAQ,CAAC,GAE1C,EAAK,UAAW,CAAE,KAAM,CAAG,CAAC,EAEhC,CAAC,EAED,IAAM,EAAkB,GAAuB,CAC7C,GAAI,EAAM,SAAS,MAAO,OAE1B,GAAI,EAAM,SAAS,MAAO,CACxB,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAG,gBAAgB,UAAU,EAE7B,MACF,CAEA,GAAI,CAAC,EAAa,MAAO,OAEzB,IAAM,EAAQ,EAAM,MAAM,MAItB,GAAS,MAAM,GAAS,OAAO,EAAW,MAAQ,IAAA,GAAY,CAAK,CACzE,EAmBA,OARA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,oBAAwB,EAAM,SAAS,MAAQ,OAAS,KACxD,oBAAwB,EAAa,MAAQ,OAAO,EAAW,KAAK,EAAI,KACxE,SAAa,EAAa,MAAQ,SAAW,UAC/C,CACF,CAAC,EAEM,EAAA,IAAI;;;;wBAIY,EAAM,SAAS,MAAQ,KAAO,IAAK;kBAC5C,EAAe;oBAtBH,GAA+B,EACnD,EAAM,MAAQ,SAAW,EAAM,MAAQ,OAEvC,EAAM,SAAS,OAAU,CAAC,EAAM,SAAS,OAAS,CAAC,EAAa,QAEpE,EAAM,eAAe,EACrB,EAAe,CAAK,GACtB,EAgBiC;;;;;;;;;;KAWnC,EAEA,OAAQ,CAAE,eAAgB,EAAK,EAC/B,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}
+{"version":3,"file":"list-item.cjs","names":[],"sources":["../src/content/list/list-item.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  inject,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { createRevealState } from './_list-item-reveal';\nimport { LIST_CTX } from './list';\nimport componentStyles from './list-item.css?inline';\n\n/** Which side's action panel is currently revealed on a list item. */\nexport type ListItemRevealSide = 'left' | 'right';\n\n/** Events emitted by the list-item component */\nexport type OreListItemEvents = {\n  /** Emitted when an actionable item is activated by pointer or keyboard. */\n  activate: { item: HTMLElement; value: null | string };\n  /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */\n  conceal: { item: HTMLElement };\n  /**\n   * Emitted when a swipe crosses the full-swipe-through distance — the \"swiped all the way\"\n   * confirm gesture. Fired just before the slotted action's own click (if any).\n   */\n  confirm: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes deselected. */\n  deselect: { item: HTMLElement; value: null | string };\n  /** Emitted when a swipe/focus reveals an action panel. */\n  reveal: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes selected (only meaningful inside a `selectable` `ore-list`). */\n  select: { item: HTMLElement; value: null | string };\n};\n\n/** List-item component properties */\nexport type OreListItemProps = {\n  /** Enable pointer and Enter/Space activation with button semantics. */\n  actionable?: boolean;\n  /** Disable this item — blocks pointer interaction, swipe actions, and selection */\n  disabled?: boolean;\n  /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */\n  revealed?: ListItemRevealSide;\n  /**\n   * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive\n   * `selected` — required for selection to work. There's no separate `selected` prop: the parent\n   * list's `value` is the single source of truth, so this item's selected state can't drift from\n   * it. Also reported in `select`/`deselect`/the parent's `change` event.\n   */\n  value?: string;\n};\n\n/** Maps a reveal side to its slot name — the one place this pairing is spelled out. */\nconst actionSlot = (side: ListItemRevealSide): 'actions-left' | 'actions-right' =>\n  side === 'left' ? 'actions-left' : 'actions-right';\n\n/**\n * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`\n * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal\n * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An\n * action panel only opens if it actually has slotted content; swiping the other direction is a\n * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button\n * reveals its panel via `:focus-within`, independent of any gesture).\n *\n * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —\n * past the full-swipe-through distance — auto-confirms that side's action immediately (fires\n * `confirm` and clicks the slot's first element), the same \"swipe all the way\" shortcut as iOS\n * Mail's delete gesture.\n *\n * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside\n * the item, or open a different item's panel. Reverse-swiping an already-open item is not\n * supported — see `ore-list`'s docs for the reasoning.\n *\n * @element ore-list-item\n *\n * @attr {boolean} actionable - Enable pointer and Enter/Space activation with button semantics\n * @attr {boolean} disabled - Disable this item\n * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.\n * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events\n * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'\n *\n * @fires activate - Actionable item is activated. detail: { item: HTMLElement, value: string | null }\n * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }\n * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }\n * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }\n * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }\n * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }\n *\n * @slot leading - Content before the title (e.g. icon, avatar)\n * @slot - Item title\n * @slot description - Secondary line below the title\n * @slot trailing - Content after the title (e.g. meta text, chevron)\n * @slot actions-left - Buttons revealed by swiping right (or focusing into this slot)\n * @slot actions-right - Buttons revealed by swiping left (or focusing into this slot)\n *\n * @cssprop --list-item-actions-width - Width of each action panel (default 6rem)\n * @cssprop --list-item-bg - Row background color\n * @cssprop --list-item-hover-bg - Row background on hover\n * @cssprop --list-item-selected-bg - Row background when selected\n * @part row - The row wrapper (focusable, swipeable)\n * @part leading - The leading slot container\n * @part content - The title + description container\n * @part title - The title slot container\n * @part description - The description slot container\n * @part trailing - The trailing slot container\n * @part actions-start - The left action panel container\n * @part actions-end - The right action panel container\n * @example\n * ```html\n * <ore-list-item>\n *   <ore-icon slot=\"leading\" name=\"mail\"></ore-icon>\n *   Inbox\n *   <span slot=\"trailing\">12</span>\n * </ore-list-item>\n * <ore-list-item>\n *   Newsletter\n *   <span slot=\"description\">From Acme Inc.</span>\n *   <ore-button slot=\"actions-right\" color=\"error\">Delete</ore-button>\n * </ore-list-item>\n * ```\n */\nexport const LIST_ITEM_TAG = 'ore-list-item' as const;\ndefine<OreListItemProps>(LIST_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    actionable: prop.bool(false),\n    revealed: prop.oneOf<ListItemRevealSide | undefined>(['left', 'right'], undefined),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListItemEvents>();\n    const slots = useSlots<'actions-left' | 'actions-right' | 'description' | 'leading' | 'trailing'>();\n    const hasDescription = slots.has('description');\n    const hasLeading = slots.has('leading');\n    const hasTrailing = slots.has('trailing');\n\n    const listCtx = inject(LIST_CTX);\n    const isSelectable = computed(() => Boolean(listCtx?.selectable.value));\n    // Derived, not owned: `ore-list`'s `value` is the single source of truth, so this can never\n    // drift out of sync with a sibling the way an independently-settable `selected` prop could.\n    const isSelected = computed(\n      () => props.value.value != null && listCtx != null && listCtx.value.value === props.value.value,\n    );\n\n    const hasActions = (side: ListItemRevealSide): boolean => slots.has(actionSlot(side)).value;\n\n    onMounted(() => {\n      const row = el.shadowRoot?.querySelector<HTMLElement>('.row');\n\n      if (!row) return;\n\n      const pan = createRevealState(el, row, {\n        disabled: computed(() => props.disabled.value || Boolean(props.revealed.value)),\n        hasActions,\n        // Clicks the slot's own first element (the common case: a single action button) so its own\n        // click handler runs the real action — `confirm` covers slots without a clickable element.\n        onConfirm: (side) => {\n          const target = slots.elements(actionSlot(side)).value[0] as HTMLElement | undefined;\n\n          emit('confirm', { item: el, side });\n          target?.click();\n        },\n      });\n\n      onCleanup(() => pan.dispose());\n    });\n\n    // Reflects the derived `selected` state as a plain boolean attribute — the styling/\n    // `[selected]`-selector hook — the same way `prop.bool()`'s own reflection would, since it\n    // isn't a real settable prop anymore.\n    watchEffect(() => {\n      el.toggleAttribute('selected', isSelected.value);\n    });\n\n    // Emits select/deselect/reveal/conceal for both gesture-driven AND externally-set (attribute,\n    // or the parent list's `value`) state changes — the plain-reflected-prop equivalent of\n    // ore-accordion-item's native <details> `toggle`-event listener (there's no backing native\n    // element here to piggyback on).\n    let lastSelected = isSelected.value;\n\n    watchEffect(() => {\n      const current = isSelected.value;\n\n      if (current === lastSelected) return;\n\n      lastSelected = current;\n      emit(current ? 'select' : 'deselect', { item: el, value: props.value.value ?? null });\n    });\n\n    let lastRevealed = props.revealed.value ?? null;\n\n    watchEffect(() => {\n      const current = props.revealed.value ?? null;\n\n      if (current === lastRevealed) return;\n\n      lastRevealed = current;\n\n      if (current) {\n        // Only one item may have its swipe actions revealed at a time — tell the list directly\n        // instead of dispatching an event for it to listen for.\n        listCtx?.requestReveal(el);\n        emit('reveal', { item: el, side: current });\n      } else {\n        emit('conceal', { item: el });\n      }\n    });\n\n    const handleActivate = (event: Event): void => {\n      if (props.disabled.value) return;\n\n      if (props.revealed.value) {\n        event.preventDefault();\n        event.stopPropagation();\n        el.removeAttribute('revealed');\n\n        return;\n      }\n\n      if (props.actionable.value) emit('activate', { item: el, value: props.value.value ?? null });\n      if (!isSelectable.value) return;\n\n      const value = props.value.value;\n\n      // Re-clicking an already-selected item deselects it; a value is required to select at all\n      // (undefined would otherwise match every valueless item at once).\n      if (value != null) listCtx?.select(isSelected.value ? undefined : value);\n    };\n\n    const handleRowKeydown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      if (props.disabled.value || (!props.revealed.value && !isSelectable.value && !props.actionable.value)) return;\n\n      event.preventDefault();\n      handleActivate(event);\n    };\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        'aria-selected': () => (isSelectable.value ? String(isSelected.value) : null),\n        'data-two-line': () => (hasDescription.value ? true : undefined),\n        role: () => (isSelectable.value ? 'option' : 'listitem'),\n      },\n    });\n\n    return html`\n      <div\n        class=\"row\"\n        part=\"row\"\n        role=\"${() => (props.actionable.value ? 'button' : null)}\"\n        tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n        @click=\"${handleActivate}\"\n        @keydown=\"${handleRowKeydown}\">\n        <span class=\"leading\" part=\"leading\" ?hidden=\"${() => !hasLeading.value}\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"title\" part=\"title\"><slot></slot></span>\n          <span class=\"description\" part=\"description\"><slot name=\"description\"></slot></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\" ?hidden=\"${() => !hasTrailing.value}\"><slot name=\"trailing\"></slot></span>\n      </div>\n      <span class=\"actions actions-left\" part=\"actions-start\"><slot name=\"actions-left\"></slot></span>\n      <span class=\"actions actions-right\" part=\"actions-end\"><slot name=\"actions-right\"></slot></span>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/list-item.js

@@ -10,17 +10,18 @@ var _ = (e) => e === "left" ? "actions-left" : "actions-right", v = "ore-list-it
 o(v, {
 	props: {
 		...t,
+		actionable: f.bool(!1),
 		revealed: f.oneOf(["left", "right"], void 0),
 		value: f.string()
 	},
 	setup(e) {
-		let t = s(), i = p(), o = m(), f = l(n), v = g(() => !!f?.selectable.value), y = g(() => e.value.value != null && f != null && f.value.value === e.value.value), b = (e) => o.has(_(e)).value;
+		let t = s(), i = p(), o = m(), f = o.has("description"), v = o.has("leading"), y = o.has("trailing"), b = l(n), x = g(() => !!b?.selectable.value), S = g(() => e.value.value != null && b != null && b.value.value === e.value.value), C = (e) => o.has(_(e)).value;
 		d(() => {
 			let n = t.shadowRoot?.querySelector(".row");
 			if (!n) return;
 			let a = r(t, n, {
 				disabled: g(() => e.disabled.value || !!e.revealed.value),
-				hasActions: b,
+				hasActions: C,
 				onConfirm: (e) => {
 					let n = o.elements(_(e)).value[0];
 					i("confirm", {
@@ -31,53 +32,58 @@ o(v, {
 			});
 			u(() => a.dispose());
 		}), h(() => {
-			t.toggleAttribute("selected", y.value);
+			t.toggleAttribute("selected", S.value);
 		});
-		let x = y.value;
+		let w = S.value;
 		h(() => {
-			let n = y.value;
-			n !== x && (x = n, i(n ? "select" : "deselect", {
+			let n = S.value;
+			n !== w && (w = n, i(n ? "select" : "deselect", {
 				item: t,
 				value: e.value.value ?? null
 			}));
 		});
-		let S = e.revealed.value ?? null;
+		let T = e.revealed.value ?? null;
 		h(() => {
 			let n = e.revealed.value ?? null;
-			n !== S && (S = n, n ? (f?.requestReveal(t), i("reveal", {
+			n !== T && (T = n, n ? (b?.requestReveal(t), i("reveal", {
 				item: t,
 				side: n
 			})) : i("conceal", { item: t }));
 		});
-		let C = (n) => {
+		let E = (n) => {
 			if (e.disabled.value) return;
 			if (e.revealed.value) {
 				n.preventDefault(), n.stopPropagation(), t.removeAttribute("revealed");
 				return;
 			}
-			if (!v.value) return;
+			if (e.actionable.value && i("activate", {
+				item: t,
+				value: e.value.value ?? null
+			}), !x.value) return;
 			let r = e.value.value;
-			r != null && f?.select(y.value ? void 0 : r);
+			r != null && b?.select(S.value ? void 0 : r);
 		};
 		return a({ attr: {
 			"aria-disabled": () => e.disabled.value ? "true" : null,
-			"aria-selected": () => v.value ? String(y.value) : null,
-			role: () => v.value ? "option" : "listitem"
+			"aria-selected": () => x.value ? String(S.value) : null,
+			"data-two-line": () => f.value ? !0 : void 0,
+			role: () => x.value ? "option" : "listitem"
 		} }), c`
       <div
         class="row"
         part="row"
+        role="${() => e.actionable.value ? "button" : null}"
         tabindex="${() => e.disabled.value ? "-1" : "0"}"
-        @click="${C}"
+        @click="${E}"
         @keydown="${(t) => {
-			(t.key === "Enter" || t.key === " ") && (e.disabled.value || !e.revealed.value && !v.value || (t.preventDefault(), C(t)));
+			(t.key === "Enter" || t.key === " ") && !e.disabled.value && (e.revealed.value || x.value || e.actionable.value) && (t.preventDefault(), E(t));
 		}}">
-        <span class="leading" part="leading"><slot name="leading"></slot></span>
+        <span class="leading" part="leading" ?hidden="${() => !v.value}"><slot name="leading"></slot></span>
         <span class="content" part="content">
           <span class="title" part="title"><slot></slot></span>
           <span class="description" part="description"><slot name="description"></slot></span>
         </span>
-        <span class="trailing" part="trailing"><slot name="trailing"></slot></span>
+        <span class="trailing" part="trailing" ?hidden="${() => !y.value}"><slot name="trailing"></slot></span>
       </div>
       <span class="actions actions-left" part="actions-start"><slot name="actions-left"></slot></span>
       <span class="actions actions-right" part="actions-end"><slot name="actions-right"></slot></span>

package/dist/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","names":[],"sources":["../src/content/list/list-item.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  inject,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { createRevealState } from './_list-item-reveal';\nimport { LIST_CTX } from './list';\nimport componentStyles from './list-item.css?inline';\n\n/** Which side's action panel is currently revealed on a list item. */\nexport type ListItemRevealSide = 'left' | 'right';\n\n/** Events emitted by the list-item component */\nexport type OreListItemEvents = {\n  /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */\n  conceal: { item: HTMLElement };\n  /**\n   * Emitted when a swipe crosses the full-swipe-through distance — the \"swiped all the way\"\n   * confirm gesture. Fired just before the slotted action's own click (if any).\n   */\n  confirm: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes deselected. */\n  deselect: { item: HTMLElement; value: null | string };\n  /** Emitted when a swipe/focus reveals an action panel. */\n  reveal: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes selected (only meaningful inside a `selectable` `ore-list`). */\n  select: { item: HTMLElement; value: null | string };\n};\n\n/** List-item component properties */\nexport type OreListItemProps = {\n  /** Disable this item — blocks pointer interaction, swipe actions, and selection */\n  disabled?: boolean;\n  /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */\n  revealed?: ListItemRevealSide;\n  /**\n   * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive\n   * `selected` — required for selection to work. There's no separate `selected` prop: the parent\n   * list's `value` is the single source of truth, so this item's selected state can't drift from\n   * it. Also reported in `select`/`deselect`/the parent's `change` event.\n   */\n  value?: string;\n};\n\n/** Maps a reveal side to its slot name — the one place this pairing is spelled out. */\nconst actionSlot = (side: ListItemRevealSide): 'actions-left' | 'actions-right' =>\n  side === 'left' ? 'actions-left' : 'actions-right';\n\n/**\n * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`\n * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal\n * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An\n * action panel only opens if it actually has slotted content; swiping the other direction is a\n * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button\n * reveals its panel via `:focus-within`, independent of any gesture).\n *\n * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —\n * past the full-swipe-through distance — auto-confirms that side's action immediately (fires\n * `confirm` and clicks the slot's first element), the same \"swipe all the way\" shortcut as iOS\n * Mail's delete gesture.\n *\n * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside\n * the item, or open a different item's panel. Reverse-swiping an already-open item is not\n * supported — see `ore-list`'s docs for the reasoning.\n *\n * @element ore-list-item\n *\n * @attr {boolean} disabled - Disable this item\n * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.\n * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events\n * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'\n *\n * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }\n * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }\n * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }\n * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }\n * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }\n *\n * @slot leading - Content before the title (e.g. icon, avatar)\n * @slot - Item title\n * @slot description - Secondary line below the title\n * @slot trailing - Content after the title (e.g. meta text, chevron)\n * @slot actions-left - Buttons revealed by swiping right (or focusing into this slot)\n * @slot actions-right - Buttons revealed by swiping left (or focusing into this slot)\n *\n * @cssprop --list-item-actions-width - Width of each action panel (default 6rem)\n * @cssprop --list-item-bg - Row background color\n * @cssprop --list-item-hover-bg - Row background on hover\n * @cssprop --list-item-selected-bg - Row background when selected\n * @part row - The row wrapper (focusable, swipeable)\n * @part leading - The leading slot container\n * @part content - The title + description container\n * @part title - The title slot container\n * @part description - The description slot container\n * @part trailing - The trailing slot container\n * @part actions-start - The left action panel container\n * @part actions-end - The right action panel container\n * @example\n * ```html\n * <ore-list-item>\n *   <ore-icon slot=\"leading\" name=\"mail\"></ore-icon>\n *   Inbox\n *   <span slot=\"trailing\">12</span>\n * </ore-list-item>\n * <ore-list-item>\n *   Newsletter\n *   <span slot=\"description\">From Acme Inc.</span>\n *   <ore-button slot=\"actions-right\" color=\"error\">Delete</ore-button>\n * </ore-list-item>\n * ```\n */\nexport const LIST_ITEM_TAG = 'ore-list-item' as const;\ndefine<OreListItemProps>(LIST_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    revealed: prop.oneOf<ListItemRevealSide | undefined>(['left', 'right'], undefined),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListItemEvents>();\n    const slots = useSlots<'actions-left' | 'actions-right' | 'description' | 'leading' | 'trailing'>();\n\n    const listCtx = inject(LIST_CTX);\n    const isSelectable = computed(() => Boolean(listCtx?.selectable.value));\n    // Derived, not owned: `ore-list`'s `value` is the single source of truth, so this can never\n    // drift out of sync with a sibling the way an independently-settable `selected` prop could.\n    const isSelected = computed(\n      () => props.value.value != null && listCtx != null && listCtx.value.value === props.value.value,\n    );\n\n    const hasActions = (side: ListItemRevealSide): boolean => slots.has(actionSlot(side)).value;\n\n    onMounted(() => {\n      const row = el.shadowRoot?.querySelector<HTMLElement>('.row');\n\n      if (!row) return;\n\n      const pan = createRevealState(el, row, {\n        disabled: computed(() => props.disabled.value || Boolean(props.revealed.value)),\n        hasActions,\n        // Clicks the slot's own first element (the common case: a single action button) so its own\n        // click handler runs the real action — `confirm` covers slots without a clickable element.\n        onConfirm: (side) => {\n          const target = slots.elements(actionSlot(side)).value[0] as HTMLElement | undefined;\n\n          emit('confirm', { item: el, side });\n          target?.click();\n        },\n      });\n\n      onCleanup(() => pan.dispose());\n    });\n\n    // Reflects the derived `selected` state as a plain boolean attribute — the styling/\n    // `[selected]`-selector hook — the same way `prop.bool()`'s own reflection would, since it\n    // isn't a real settable prop anymore.\n    watchEffect(() => {\n      el.toggleAttribute('selected', isSelected.value);\n    });\n\n    // Emits select/deselect/reveal/conceal for both gesture-driven AND externally-set (attribute,\n    // or the parent list's `value`) state changes — the plain-reflected-prop equivalent of\n    // ore-accordion-item's native <details> `toggle`-event listener (there's no backing native\n    // element here to piggyback on).\n    let lastSelected = isSelected.value;\n\n    watchEffect(() => {\n      const current = isSelected.value;\n\n      if (current === lastSelected) return;\n\n      lastSelected = current;\n      emit(current ? 'select' : 'deselect', { item: el, value: props.value.value ?? null });\n    });\n\n    let lastRevealed = props.revealed.value ?? null;\n\n    watchEffect(() => {\n      const current = props.revealed.value ?? null;\n\n      if (current === lastRevealed) return;\n\n      lastRevealed = current;\n\n      if (current) {\n        // Only one item may have its swipe actions revealed at a time — tell the list directly\n        // instead of dispatching an event for it to listen for.\n        listCtx?.requestReveal(el);\n        emit('reveal', { item: el, side: current });\n      } else {\n        emit('conceal', { item: el });\n      }\n    });\n\n    const handleActivate = (event: Event): void => {\n      if (props.disabled.value) return;\n\n      if (props.revealed.value) {\n        event.preventDefault();\n        event.stopPropagation();\n        el.removeAttribute('revealed');\n\n        return;\n      }\n\n      if (!isSelectable.value) return;\n\n      const value = props.value.value;\n\n      // Re-clicking an already-selected item deselects it; a value is required to select at all\n      // (undefined would otherwise match every valueless item at once).\n      if (value != null) listCtx?.select(isSelected.value ? undefined : value);\n    };\n\n    const handleRowKeydown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      if (props.disabled.value || (!props.revealed.value && !isSelectable.value)) return;\n\n      event.preventDefault();\n      handleActivate(event);\n    };\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        'aria-selected': () => (isSelectable.value ? String(isSelected.value) : null),\n        role: () => (isSelectable.value ? 'option' : 'listitem'),\n      },\n    });\n\n    return html`\n      <div\n        class=\"row\"\n        part=\"row\"\n        tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n        @click=\"${handleActivate}\"\n        @keydown=\"${handleRowKeydown}\">\n        <span class=\"leading\" part=\"leading\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"title\" part=\"title\"><slot></slot></span>\n          <span class=\"description\" part=\"description\"><slot name=\"description\"></slot></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\"><slot name=\"trailing\"></slot></span>\n      </div>\n      <span class=\"actions actions-left\" part=\"actions-start\"><slot name=\"actions-left\"></slot></span>\n      <span class=\"actions actions-right\" part=\"actions-end\"><slot name=\"actions-right\"></slot></span>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;AAyDA,IAAM,KAAc,MAClB,MAAS,SAAS,iBAAiB,iBAiExB,IAAgB;AAC7B,EAAyB,GAAe;CACtC,OAAO;EACL,GAAG;EACH,UAAU,EAAK,MAAsC,CAAC,QAAQ,OAAO,GAAG,KAAA,CAAS;EACjF,OAAO,EAAK,OAAO;CACrB;CAEA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAA2B,GAClC,IAAQ,EAAoF,GAE5F,IAAU,EAAO,CAAQ,GACzB,IAAe,QAAe,EAAQ,GAAS,WAAW,KAAM,GAGhE,IAAa,QACX,EAAM,MAAM,SAAS,QAAQ,KAAW,QAAQ,EAAQ,MAAM,UAAU,EAAM,MAAM,KAC5F,GAEM,KAAc,MAAsC,EAAM,IAAI,EAAW,CAAI,CAAC,CAAC,CAAC;EA0BtF,AAxBA,QAAgB;GACd,IAAM,IAAM,EAAG,YAAY,cAA2B,MAAM;GAE5D,IAAI,CAAC,GAAK;GAEV,IAAM,IAAM,EAAkB,GAAI,GAAK;IACrC,UAAU,QAAe,EAAM,SAAS,SAAS,EAAQ,EAAM,SAAS,KAAM;IAC9E;IAGA,YAAY,MAAS;KACnB,IAAM,IAAS,EAAM,SAAS,EAAW,CAAI,CAAC,CAAC,CAAC,MAAM;KAGtD,AADA,EAAK,WAAW;MAAE,MAAM;MAAI;KAAK,CAAC,GAClC,GAAQ,MAAM;IAChB;GACF,CAAC;GAED,QAAgB,EAAI,QAAQ,CAAC;EAC/B,CAAC,GAKD,QAAkB;GAChB,EAAG,gBAAgB,YAAY,EAAW,KAAK;EACjD,CAAC;EAMD,IAAI,IAAe,EAAW;EAE9B,QAAkB;GAChB,IAAM,IAAU,EAAW;GAEvB,MAAY,MAEhB,IAAe,GACf,EAAK,IAAU,WAAW,YAAY;IAAE,MAAM;IAAI,OAAO,EAAM,MAAM,SAAS;GAAK,CAAC;EACtF,CAAC;EAED,IAAI,IAAe,EAAM,SAAS,SAAS;EAE3C,QAAkB;GAChB,IAAM,IAAU,EAAM,SAAS,SAAS;GAEpC,MAAY,MAEhB,IAAe,GAEX,KAGF,GAAS,cAAc,CAAE,GACzB,EAAK,UAAU;IAAE,MAAM;IAAI,MAAM;GAAQ,CAAC,KAE1C,EAAK,WAAW,EAAE,MAAM,EAAG,CAAC;EAEhC,CAAC;EAED,IAAM,KAAkB,MAAuB;GAC7C,IAAI,EAAM,SAAS,OAAO;GAE1B,IAAI,EAAM,SAAS,OAAO;IAGxB,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAG,gBAAgB,UAAU;IAE7B;GACF;GAEA,IAAI,CAAC,EAAa,OAAO;GAEzB,IAAM,IAAQ,EAAM,MAAM;GAI1B,AAAI,KAAS,QAAM,GAAS,OAAO,EAAW,QAAQ,KAAA,IAAY,CAAK;EACzE;EAmBA,OARA,EAAK,EACH,MAAM;GACJ,uBAAwB,EAAM,SAAS,QAAQ,SAAS;GACxD,uBAAwB,EAAa,QAAQ,OAAO,EAAW,KAAK,IAAI;GACxE,YAAa,EAAa,QAAQ,WAAW;EAC/C,EACF,CAAC,GAEM,CAAI;;;;0BAIY,EAAM,SAAS,QAAQ,OAAO,IAAK;kBAC5C,EAAe;qBAtBH,MAA+B;GACnD,GAAM,QAAQ,WAAW,EAAM,QAAQ,SAEvC,EAAM,SAAS,SAAU,CAAC,EAAM,SAAS,SAAS,CAAC,EAAa,UAEpE,EAAM,eAAe,GACrB,EAAe,CAAK;EACtB,EAgBiC;;;;;;;;;;;CAWnC;CAEA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}
+{"version":3,"file":"list-item.js","names":[],"sources":["../src/content/list/list-item.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  inject,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { disablableBundle } from '../../shared';\nimport { reducedMotionMixin } from '../../styles';\nimport { createRevealState } from './_list-item-reveal';\nimport { LIST_CTX } from './list';\nimport componentStyles from './list-item.css?inline';\n\n/** Which side's action panel is currently revealed on a list item. */\nexport type ListItemRevealSide = 'left' | 'right';\n\n/** Events emitted by the list-item component */\nexport type OreListItemEvents = {\n  /** Emitted when an actionable item is activated by pointer or keyboard. */\n  activate: { item: HTMLElement; value: null | string };\n  /** Emitted when the revealed action panel closes (gesture, tap, or programmatic). */\n  conceal: { item: HTMLElement };\n  /**\n   * Emitted when a swipe crosses the full-swipe-through distance — the \"swiped all the way\"\n   * confirm gesture. Fired just before the slotted action's own click (if any).\n   */\n  confirm: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes deselected. */\n  deselect: { item: HTMLElement; value: null | string };\n  /** Emitted when a swipe/focus reveals an action panel. */\n  reveal: { item: HTMLElement; side: ListItemRevealSide };\n  /** Emitted when the item becomes selected (only meaningful inside a `selectable` `ore-list`). */\n  select: { item: HTMLElement; value: null | string };\n};\n\n/** List-item component properties */\nexport type OreListItemProps = {\n  /** Enable pointer and Enter/Space activation with button semantics. */\n  actionable?: boolean;\n  /** Disable this item — blocks pointer interaction, swipe actions, and selection */\n  disabled?: boolean;\n  /** Which action panel is revealed: 'left' | 'right' (absent = closed). Settable programmatically. */\n  revealed?: ListItemRevealSide;\n  /**\n   * Opaque value compared against the parent `selectable` `ore-list`'s own `value` to derive\n   * `selected` — required for selection to work. There's no separate `selected` prop: the parent\n   * list's `value` is the single source of truth, so this item's selected state can't drift from\n   * it. Also reported in `select`/`deselect`/the parent's `change` event.\n   */\n  value?: string;\n};\n\n/** Maps a reveal side to its slot name — the one place this pairing is spelled out. */\nconst actionSlot = (side: ListItemRevealSide): 'actions-left' | 'actions-right' =>\n  side === 'left' ? 'actions-left' : 'actions-right';\n\n/**\n * A single row inside `ore-list`. Renders `leading`/default (title)/`description`/`trailing`\n * content plus two off-canvas action panels (`actions-left`, `actions-right`) that a horizontal\n * pointer/touch swipe reveals — useful for mobile-style row actions (archive, delete, …). An\n * action panel only opens if it actually has slotted content; swiping the other direction is a\n * no-op. Revealed actions stay reachable from the keyboard (Tab focus on a slotted action button\n * reveals its panel via `:focus-within`, independent of any gesture).\n *\n * Swiping past the reveal distance snaps the panel fully open on release; swiping further still —\n * past the full-swipe-through distance — auto-confirms that side's action immediately (fires\n * `confirm` and clicks the slot's first element), the same \"swipe all the way\" shortcut as iOS\n * Mail's delete gesture.\n *\n * Closing a revealed panel is deliberately one-directional: tap/click the row itself, tap outside\n * the item, or open a different item's panel. Reverse-swiping an already-open item is not\n * supported — see `ore-list`'s docs for the reasoning.\n *\n * @element ore-list-item\n *\n * @attr {boolean} actionable - Enable pointer and Enter/Space activation with button semantics\n * @attr {boolean} disabled - Disable this item\n * @attr {boolean} selected - Read-only reflected attribute: `true` when this item's `value` matches the parent `ore-list`'s `value`. Not independently settable.\n * @attr {string}  value    - Opaque value compared against the parent list's `value` to derive `selected`; also reported in select/change events\n * @attr {string}  revealed - Which action panel is revealed: 'left' | 'right'\n *\n * @fires activate - Actionable item is activated. detail: { item: HTMLElement, value: string | null }\n * @fires select   - Item becomes selected. detail: { item: HTMLElement, value: string | null }\n * @fires deselect - Item becomes deselected. detail: { item: HTMLElement, value: string | null }\n * @fires reveal   - An action panel opens. detail: { item: HTMLElement, side: 'left' | 'right' }\n * @fires conceal  - The revealed action panel closes. detail: { item: HTMLElement }\n * @fires confirm  - Swiped all the way through — fires before the slotted action's own click. detail: { item: HTMLElement, side: 'left' | 'right' }\n *\n * @slot leading - Content before the title (e.g. icon, avatar)\n * @slot - Item title\n * @slot description - Secondary line below the title\n * @slot trailing - Content after the title (e.g. meta text, chevron)\n * @slot actions-left - Buttons revealed by swiping right (or focusing into this slot)\n * @slot actions-right - Buttons revealed by swiping left (or focusing into this slot)\n *\n * @cssprop --list-item-actions-width - Width of each action panel (default 6rem)\n * @cssprop --list-item-bg - Row background color\n * @cssprop --list-item-hover-bg - Row background on hover\n * @cssprop --list-item-selected-bg - Row background when selected\n * @part row - The row wrapper (focusable, swipeable)\n * @part leading - The leading slot container\n * @part content - The title + description container\n * @part title - The title slot container\n * @part description - The description slot container\n * @part trailing - The trailing slot container\n * @part actions-start - The left action panel container\n * @part actions-end - The right action panel container\n * @example\n * ```html\n * <ore-list-item>\n *   <ore-icon slot=\"leading\" name=\"mail\"></ore-icon>\n *   Inbox\n *   <span slot=\"trailing\">12</span>\n * </ore-list-item>\n * <ore-list-item>\n *   Newsletter\n *   <span slot=\"description\">From Acme Inc.</span>\n *   <ore-button slot=\"actions-right\" color=\"error\">Delete</ore-button>\n * </ore-list-item>\n * ```\n */\nexport const LIST_ITEM_TAG = 'ore-list-item' as const;\ndefine<OreListItemProps>(LIST_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    actionable: prop.bool(false),\n    revealed: prop.oneOf<ListItemRevealSide | undefined>(['left', 'right'], undefined),\n    value: prop.string(),\n  },\n\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreListItemEvents>();\n    const slots = useSlots<'actions-left' | 'actions-right' | 'description' | 'leading' | 'trailing'>();\n    const hasDescription = slots.has('description');\n    const hasLeading = slots.has('leading');\n    const hasTrailing = slots.has('trailing');\n\n    const listCtx = inject(LIST_CTX);\n    const isSelectable = computed(() => Boolean(listCtx?.selectable.value));\n    // Derived, not owned: `ore-list`'s `value` is the single source of truth, so this can never\n    // drift out of sync with a sibling the way an independently-settable `selected` prop could.\n    const isSelected = computed(\n      () => props.value.value != null && listCtx != null && listCtx.value.value === props.value.value,\n    );\n\n    const hasActions = (side: ListItemRevealSide): boolean => slots.has(actionSlot(side)).value;\n\n    onMounted(() => {\n      const row = el.shadowRoot?.querySelector<HTMLElement>('.row');\n\n      if (!row) return;\n\n      const pan = createRevealState(el, row, {\n        disabled: computed(() => props.disabled.value || Boolean(props.revealed.value)),\n        hasActions,\n        // Clicks the slot's own first element (the common case: a single action button) so its own\n        // click handler runs the real action — `confirm` covers slots without a clickable element.\n        onConfirm: (side) => {\n          const target = slots.elements(actionSlot(side)).value[0] as HTMLElement | undefined;\n\n          emit('confirm', { item: el, side });\n          target?.click();\n        },\n      });\n\n      onCleanup(() => pan.dispose());\n    });\n\n    // Reflects the derived `selected` state as a plain boolean attribute — the styling/\n    // `[selected]`-selector hook — the same way `prop.bool()`'s own reflection would, since it\n    // isn't a real settable prop anymore.\n    watchEffect(() => {\n      el.toggleAttribute('selected', isSelected.value);\n    });\n\n    // Emits select/deselect/reveal/conceal for both gesture-driven AND externally-set (attribute,\n    // or the parent list's `value`) state changes — the plain-reflected-prop equivalent of\n    // ore-accordion-item's native <details> `toggle`-event listener (there's no backing native\n    // element here to piggyback on).\n    let lastSelected = isSelected.value;\n\n    watchEffect(() => {\n      const current = isSelected.value;\n\n      if (current === lastSelected) return;\n\n      lastSelected = current;\n      emit(current ? 'select' : 'deselect', { item: el, value: props.value.value ?? null });\n    });\n\n    let lastRevealed = props.revealed.value ?? null;\n\n    watchEffect(() => {\n      const current = props.revealed.value ?? null;\n\n      if (current === lastRevealed) return;\n\n      lastRevealed = current;\n\n      if (current) {\n        // Only one item may have its swipe actions revealed at a time — tell the list directly\n        // instead of dispatching an event for it to listen for.\n        listCtx?.requestReveal(el);\n        emit('reveal', { item: el, side: current });\n      } else {\n        emit('conceal', { item: el });\n      }\n    });\n\n    const handleActivate = (event: Event): void => {\n      if (props.disabled.value) return;\n\n      if (props.revealed.value) {\n        event.preventDefault();\n        event.stopPropagation();\n        el.removeAttribute('revealed');\n\n        return;\n      }\n\n      if (props.actionable.value) emit('activate', { item: el, value: props.value.value ?? null });\n      if (!isSelectable.value) return;\n\n      const value = props.value.value;\n\n      // Re-clicking an already-selected item deselects it; a value is required to select at all\n      // (undefined would otherwise match every valueless item at once).\n      if (value != null) listCtx?.select(isSelected.value ? undefined : value);\n    };\n\n    const handleRowKeydown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      if (props.disabled.value || (!props.revealed.value && !isSelectable.value && !props.actionable.value)) return;\n\n      event.preventDefault();\n      handleActivate(event);\n    };\n\n    bind({\n      attr: {\n        'aria-disabled': () => (props.disabled.value ? 'true' : null),\n        'aria-selected': () => (isSelectable.value ? String(isSelected.value) : null),\n        'data-two-line': () => (hasDescription.value ? true : undefined),\n        role: () => (isSelectable.value ? 'option' : 'listitem'),\n      },\n    });\n\n    return html`\n      <div\n        class=\"row\"\n        part=\"row\"\n        role=\"${() => (props.actionable.value ? 'button' : null)}\"\n        tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n        @click=\"${handleActivate}\"\n        @keydown=\"${handleRowKeydown}\">\n        <span class=\"leading\" part=\"leading\" ?hidden=\"${() => !hasLeading.value}\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"title\" part=\"title\"><slot></slot></span>\n          <span class=\"description\" part=\"description\"><slot name=\"description\"></slot></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\" ?hidden=\"${() => !hasTrailing.value}\"><slot name=\"trailing\"></slot></span>\n      </div>\n      <span class=\"actions actions-left\" part=\"actions-start\"><slot name=\"actions-left\"></slot></span>\n      <span class=\"actions actions-right\" part=\"actions-end\"><slot name=\"actions-right\"></slot></span>\n    `;\n  },\n\n  shadow: { delegatesFocus: true },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/list.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./core/ore.cjs"),n=require("./core/nav.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./content/list/list.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(0,o.createContext)(`ListContext`),l=`ore-list`;(0,o.define)(l,{props:{...r.disablableBundle,...r.sizableBundle,selectable:o.prop.bool(!1),value:o.prop.string(),variant:o.prop.string()},setup(e){let r=(0,o.getHost)(),i=(0,o.useEmit)(),a=()=>[...r.querySelectorAll(`:scope > ore-list-item:not([disabled])`)],l=()=>[...r.querySelectorAll(`:scope > ore-list-item`)],u=e=>e.shadowRoot?.querySelector(`[part="row"]`)??null,d=()=>a().map(u).filter(e=>e!=null),f=n.createListControl({getItems:a,loop:!0,onNavigate:({item:e})=>{u(e)?.focus()},signal:t.lifecycleSignal(o.onCleanup)}),p=(0,s.signal)(e.value.value);(0,s.watch)(e.value,e=>{p.value=e});let m=e=>{p.value!==e&&(p.value=e,i(`change`,{value:e??null}))},h=e=>{for(let t of l())t!==e&&t.removeAttribute(`revealed`)},g=e=>{let t=l().find(e=>e.hasAttribute(`revealed`));!t||e.composedPath().includes(t)||t.removeAttribute(`revealed`)};return document.addEventListener(`pointerdown`,g,{capture:!0}),(0,o.onCleanup)(()=>document.removeEventListener(`pointerdown`,g,{capture:!0})),(0,o.provide)(c,{requestReveal:h,select:m,selectable:(0,s.computed)(()=>!!e.selectable.value),value:p}),(0,o.bind)({attr:{"aria-disabled":()=>e.disabled.value?`true`:null,role:()=>e.selectable.value?`listbox`:`list`,value:()=>p.value??null},on:{keydown:t=>{if(!e.selectable.value||e.disabled.value)return;let n=t.composedPath().find(e=>e instanceof HTMLElement&&e.getAttribute(`part`)===`row`);if(!n)return;let r=d().indexOf(n);r!==-1&&(f.set(r),f.handleKeydown(t))}}}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./core/ore.cjs"),n=require("./core/nav.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./content/list/list.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(0,o.createContext)(`ListContext`),l=`ore-list`;(0,o.define)(l,{props:{...r.disablableBundle,...r.sizableBundle,selectable:o.prop.bool(!1),value:o.prop.string(),variant:o.prop.string()},setup(e){let r=(0,o.getHost)(),i=(0,o.useEmit)(),a=()=>[...r.querySelectorAll(`:scope > ore-list-item:not([disabled])`)],l=()=>[...r.querySelectorAll(`:scope > ore-list-item`)],u=e=>e.shadowRoot?.querySelector(`[part="row"]`)??null,d=()=>a().map(u).filter(e=>e!=null),f=n.createListControl({getItems:a,loop:!0,onNavigate:({item:e})=>{u(e)?.focus()},signal:t.lifecycleSignal(o.onCleanup)}),p=(0,s.signal)(e.value.value);(0,s.watch)(e.value,e=>{p.value=e});let m=e=>{p.value!==e&&(p.value=e,i(`change`,{value:e??null}))},h=e=>{for(let t of l())t!==e&&t.removeAttribute(`revealed`)},g=e=>{let t=l().find(e=>e.hasAttribute(`revealed`));t&&!e.composedPath().includes(t)&&t.removeAttribute(`revealed`)};return document.addEventListener(`pointerdown`,g,{capture:!0}),(0,o.onCleanup)(()=>document.removeEventListener(`pointerdown`,g,{capture:!0})),(0,o.provide)(c,{requestReveal:h,select:m,selectable:(0,s.computed)(()=>!!e.selectable.value),value:p}),(0,o.bind)({attr:{"aria-disabled":()=>e.disabled.value?`true`:null,role:()=>e.selectable.value?`listbox`:`list`,value:()=>p.value??null},on:{keydown:t=>{if(!e.selectable.value||e.disabled.value)return;let n=t.composedPath().find(e=>e instanceof HTMLElement&&e.getAttribute(`part`)===`row`);if(!n)return;let r=d().indexOf(n);r!==-1&&(f.set(r),f.handleKeydown(t))}}}),o.html`
       <slot></slot>
     `},styles:[e.sizeVariantMixin(i.LIST_SIZE_PRESET),a.default]}),exports.LIST_CTX=c,exports.LIST_TAG=l;
 //# sourceMappingURL=list.cjs.map