@vielzeug/refine 1.3.0 → 1.4.0

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

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

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

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

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

package/dist/message-composer.cjs

@@ -0,0 +1,52 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/live.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/shape.css.cjs"),r=require("./styles/mixins/states.css.cjs"),i=require("./styles/mixins/theme.css.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./shared/size-presets.cjs"),s=require("./headless/ore.cjs"),c=require("./headless/auto-resize.cjs"),l=require("./headless/field-base.cjs"),u=require("./headless/text-field.cjs"),d=require("./headless/composer.cjs"),f=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const p=require("./inputs/shared/field-binding.cjs"),m=require("./inputs/shared/form-context.cjs"),h=require("./inputs/message-composer/message-composer.css.cjs");let g=require("@vielzeug/ore"),_=require("@vielzeug/ripple");var v=`Send message`,y=`arrow-up`,b=`ore-message-composer`;(0,g.define)(b,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.disablableBundle,...a.loadableBundle,"clear-on-send":g.prop.bool(!0),error:g.prop.string(),fullwidth:g.prop.bool(!1),helper:g.prop.string(),label:g.prop.string(),maxlength:g.prop.json(void 0),name:g.prop.string(),placeholder:g.prop.string(),readonly:g.prop.bool(!1),ref:g.prop.json(void 0),required:g.prop.bool(!1),rows:g.prop.json(void 0),"send-icon":g.prop.string(),"send-label":g.prop.string(),"send-shortcut":g.prop.oneOf([`enter`,`mod+enter`],`enter`),value:g.prop.string(),variant:g.prop.string()},setup(t){let n=(0,g.useEmit)(),r=(0,g.useSlots)(),i=(0,g.inject)(m.FORM_CTX),a=m.useFormContext(t,i),o=a.disabled,h=s.lifecycleSignal(g.onCleanup),b=(0,g.ref)(),x=c.createAutoResize(),S=u.createTextField({disabled:o,error:t.error,helper:t.helper,maxLength:t.maxlength,onInput:(e,t)=>n(`input`,{originalEvent:e,value:t}),prefix:`composer`,readonly:t.readonly,required:t.required,signal:h,validateOn:i?.validateOn,value:t.value});S.attachFormField(f.useField({disabled:S.disabled,onReset:()=>{S.reset(),x.recompute()},toFormValue:e=>e,validationMessage:S.validationMessage,validity:S.validity,value:S.value}));function C(e){n(`send`,{originalEvent:e,value:S.value.value.trim()})&&t[`clear-on-send`].value!==!1&&(S.clear(),x.recompute(),b.value?.focus())}let w=d.createComposerControl({disabled:o,loading:(0,_.computed)(()=>!!t.loading.value),onSend:C,sendShortcut:t[`send-shortcut`],value:S.value});return(0,g.onElement)(b,e=>{let n=S.wire(e),r=x.wire(e),i=e=>w.handleKeydown(e);e.addEventListener(`keydown`,i),t.ref.value?.(e);let a=(0,_.watch)(t.ref,t=>{t?.(e)});return()=>{e.removeEventListener(`keydown`,i),n(),r(),a.dispose(),t.ref.value?.(null)}}),(0,g.bind)({attr:{error:p.errorAttr(S.errorText),size:a.size,variant:a.variant}}),g.html`
+      <div class="composer" part="composer">
+        <textarea
+          class="field"
+          part="field"
+          ref="${b}"
+          :rows="${()=>t.rows.value??1}"
+          :name="${()=>t.name.value??``}"
+          :placeholder="${()=>t.placeholder.value??`Message…`}"
+          :maxlength="${()=>t.maxlength.value}"
+          ?disabled="${o}"
+          ?readonly="${()=>!!t.readonly.value}"
+          ?required="${()=>!!t.required.value}"
+          :value="${e.live(S.value)}"
+          :aria-label="${()=>t.label.value||`Message`}"
+          :aria-keyshortcuts="${w.keyShortcutsHint}"
+          :aria-describedby="${S.ariaDescribedBy}"
+          :aria-errormessage="${S.ariaErrorMessage}"
+          :aria-invalid="${S.ariaInvalid}"></textarea>
+        <span class="${()=>l.counterClassName(S.counter?.value)}" aria-live="polite" ?hidden="${()=>!S.counter}">${()=>S.counter?.value.counterText.replace(` / `,`/`)??``}</span>
+        <div id="${S.assistiveId}" class="helper-text" aria-live="polite" part="helper" ?hidden="${()=>!!S.errorText.value||!S.helperText.value}">
+          ${()=>S.helperText.value}
+        </div>
+        <div id="${S.errorId}" class="helper-text" role="alert" part="error" ?hidden="${()=>!S.errorText.value}">
+          ${()=>S.errorText.value}
+        </div>
+        <div class="toolbar" part="toolbar">
+          <div class="toolbar-start" part="toolbar-start">
+            <slot name="prefix"></slot>
+          </div>
+          <div class="toolbar-end" part="toolbar-end">
+            <slot name="suffix"></slot>
+            <slot name="send"></slot>
+            ${()=>r.has(`send`).value?``:g.html`<ore-button
+                    class="send-btn"
+                    part="send-button"
+                    type="button"
+                    icon-only
+                    variant="solid"
+                    :color="${()=>t.color.value||`primary`}"
+                    :size="${a.size}"
+                    :label="${()=>t[`send-label`].value||v}"
+                    ?loading="${()=>!!t.loading.value}"
+                    ?disabled="${()=>!w.canSend.value}"
+                    @click="${e=>w.send(e)}">
+                    <ore-icon name="${()=>t[`send-icon`].value||y}" size="16"></ore-icon>
+                  </ore-button>`}
+          </div>
+        </div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[i.colorThemeMixin,t.coarsePointerMixin,t.reducedMotionMixin,r.disabledLoadingMixin,i.forcedColorsMixin,i.forcedColorsFocusMixin(`.field`),n.sizeVariantMixin(o.MESSAGE_COMPOSER_SIZE_PRESET),h.default]}),exports.MESSAGE_COMPOSER_TAG=b;
+//# sourceMappingURL=message-composer.cjs.map

package/dist/message-composer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-composer.cjs","names":[],"sources":["../src/inputs/message-composer/message-composer.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, onCleanup, onElement, useEmit, useSlots } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport {\n  counterClassName,\n  createAutoResize,\n  createComposerControl,\n  createTextField,\n  lifecycleSignal,\n  type SendShortcut,\n} from '../../headless';\nimport {\n  disablableBundle,\n  loadableBundle,\n  MESSAGE_COMPOSER_SIZE_PRESET,\n  sizableBundle,\n  themableBundle,\n} from '../../shared';\nimport {\n  colorThemeMixin,\n  coarsePointerMixin,\n  disabledLoadingMixin,\n  forcedColorsFocusMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport '../../content/icon/icon';\nimport '../button/button';\nimport componentStyles from './message-composer.css?inline';\n\nexport type { SendShortcut } from '../../headless';\n\nconst DEFAULT_SEND_LABEL = 'Send message';\nconst SEND_ICON = 'arrow-up';\n\n/** Events emitted by the message composer */\nexport type OreMessageComposerEvents = {\n  /** Fired on every keystroke with the current value. */\n  input: { originalEvent: Event; value: string };\n  /**\n   * Fired for a send attempt (the resolved `send-shortcut` or the send button) while the\n   * composer isn't blank/disabled/loading. Cancelable — call `preventDefault()` to keep the\n   * current text in the field instead of the default clear + refocus.\n   */\n  send: { originalEvent: KeyboardEvent | MouseEvent; value: string };\n};\n\n/** Message composer properties */\nexport type OreMessageComposerProps = {\n  /** Clear the value and refocus after a non-cancelled `send` (default `true`) */\n  'clear-on-send'?: boolean;\n  /** Theme color (card focus ring + default send button color) */\n  color?: ThemeColor;\n  /** Disable the whole composer (field, slots, and send action) */\n  disabled?: boolean;\n  /** Error message shown below the field */\n  error?: string;\n  /** Stretch the composer to the full width of its container */\n  fullwidth?: boolean;\n  /** Helper text shown below the field */\n  helper?: string;\n  /** Accessible name for the field — never rendered visually, only as `aria-label` */\n  label?: string;\n  /** Blocks further sends (e.g. a send is already in flight) without disabling editing */\n  loading?: boolean;\n  /** Maximum character count; shows a counter */\n  maxlength?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the field read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts, and with\n   * `null` when it unmounts. Set as a JS property: `composer.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Require a non-blank value for `<ore-form>` validation */\n  required?: boolean;\n  /** Number of visible rows before auto-resize grows the field */\n  rows?: number;\n  /** Lucide icon name for the default send button (default `'arrow-up'`) */\n  'send-icon'?: string;\n  /** Accessible label for the send button (default `'Send message'`) */\n  'send-label'?: string;\n  /** Keyboard shortcut that sends: 'enter' (Shift+Enter for a newline) or 'mod+enter' (Enter always inserts a newline; Ctrl/Cmd+Enter sends) */\n  'send-shortcut'?: SendShortcut;\n  /** Component size */\n  size?: ComponentSize;\n  /** Current text value */\n  value?: string;\n  /** Visual variant of the card — same variant set as `ore-textarea`, applied to the card. */\n  variant?: Exclude<VisualVariant, 'frost' | 'text'>;\n};\n\n/**\n * A message/comment composer — a card with an auto-resizing field on top and a toolbar row\n * below it, built directly on the same headless primitives as `ore-textarea` (`createTextField`,\n * `createAutoResize`) rather than composing `ore-textarea` itself. Nesting a fully-styled sibling\n * component and suppressing most of its chrome (as an earlier version of this component did) is\n * a leaky composition — this owns its single `<textarea>` outright, so there's exactly one\n * implementation of the field's appearance to reason about, not two fighting each other.\n *\n * Handles the send gesture (Enter to send, Shift+Enter for a newline, or a Ctrl/Cmd+Enter\n * alternative), IME-safe composition, and clear-and-refocus after sending.\n *\n * @element ore-message-composer\n *\n * @attr {string} value - Current text value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} label - Accessible name for the field (not rendered visually)\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text shown below the field\n * @attr {string} error - Error message shown below the field\n * @attr {boolean} disabled - Disable the whole composer\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Require a non-blank value for `<ore-form>` validation\n * @attr {boolean} loading - Blocks further sends without disabling editing\n * @attr {number} maxlength - Max character count; shows a counter\n * @attr {number} rows - Visible rows before auto-resize grows the field (default 1)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant of the card: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {boolean} fullwidth - Stretch to the full width of the container\n * @attr {string} send-icon - Lucide icon name for the default send button (default 'arrow-up')\n * @attr {string} send-label - Accessible label for the send button (default 'Send message')\n * @attr {string} send-shortcut - 'enter' (default) | 'mod+enter'\n * @attr {boolean} clear-on-send - Clear the value and refocus after a non-cancelled send (default true)\n *\n * @fires input - Fired on every keystroke. detail: { value, originalEvent }\n * @fires send - Fired on a send attempt. Cancelable. detail: { value, originalEvent }\n *\n * @slot prefix - Content at the start of the toolbar row (e.g. an attach menu)\n * @slot suffix - Content at the end of the toolbar row, before the send button (e.g. a model picker)\n * @slot send - Replaces the default send button entirely — the only supported way to customize it\n *\n * @cssprop --message-composer-bg - Card background color\n * @cssprop --message-composer-border-color - Card border color\n * @cssprop --message-composer-radius - Card border radius\n * @cssprop --message-composer-padding - Card inner padding\n * @cssprop --message-composer-gap - Gap between the field/toolbar rows and between toolbar items\n * @cssprop --message-composer-placeholder-color - Field placeholder text color\n * @cssprop --message-composer-min-height - Minimum field height (default one line)\n * @cssprop --message-composer-hover-bg - Card background on hover (flat/ghost variants)\n * @cssprop --message-composer-hover-border-color - Card border on hover (flat/bordered variants)\n * @cssprop --message-composer-focus-bg - Card background when focused (flat variant)\n * @cssprop --message-composer-focus-border-color - Card border when focused (flat variant)\n *\n * @part composer - Root card container\n * @part field - The native `<textarea>` element\n * @part helper - Helper text element\n * @part error - Error text element (`role=\"alert\"`)\n * @part toolbar - Toolbar row below the field\n * @part toolbar-start - Toolbar group holding the `prefix` slot\n * @part toolbar-end - Toolbar group holding the `suffix` slot and the send button\n * @part send-button - The default send button (absent when the `send` slot is used)\n *\n * @example\n * ```html\n * <ore-message-composer placeholder=\"Message…\" send-shortcut=\"mod+enter\"></ore-message-composer>\n * ```\n */\nexport const MESSAGE_COMPOSER_TAG = 'ore-message-composer' as const;\ndefine<OreMessageComposerProps>(MESSAGE_COMPOSER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    'clear-on-send': prop.bool(true),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.json(undefined as ((el: HTMLTextAreaElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    rows: prop.json(undefined as number | undefined),\n    'send-icon': prop.string(),\n    'send-label': prop.string(),\n    'send-shortcut': prop.oneOf(['enter', 'mod+enter'] as const, 'enter'),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'frost' | 'text'>>(),\n  },\n  setup(props) {\n    const emit = useEmit<OreMessageComposerEvents>();\n    const slots = useSlots<'prefix' | 'send' | 'suffix'>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDisabled = fCtxProps.disabled;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const textareaRef = ref<HTMLTextAreaElement>();\n    const autoResize = createAutoResize();\n\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      helper: props.helper,\n      maxLength: props.maxlength,\n      onInput: (event, value) => emit('input', { originalEvent: event, value }),\n      prefix: 'composer',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    // Directly form-associated now that the field is owned here rather than borrowed from a\n    // nested `ore-textarea` (which previously registered with the ancestor `<form>` on this\n    // component's behalf).\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: () => {\n          tf.reset();\n          autoResize.recompute();\n        },\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    function attemptSend(event: KeyboardEvent | MouseEvent): void {\n      const notPrevented = emit('send', { originalEvent: event, value: tf.value.value.trim() });\n\n      // `preventDefault()` on `send` means \"keep the current text — skip the default clear\n      // + refocus\" (see the event's own doc comment): both halves of that default are gated on\n      // the same condition, not just the clear.\n      if (notPrevented && props['clear-on-send'].value !== false) {\n        tf.clear();\n        autoResize.recompute();\n        textareaRef.value?.focus();\n      }\n    }\n\n    const composer = createComposerControl({\n      disabled: isDisabled,\n      loading: computed(() => Boolean(props.loading.value)),\n      onSend: attemptSend,\n      sendShortcut: props['send-shortcut'],\n      value: tf.value,\n    });\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireField = tf.wire(textareaEl);\n      const unwireAutoResize = autoResize.wire(textareaEl);\n      const handleKeydown = (e: KeyboardEvent) => composer.handleKeydown(e);\n\n      textareaEl.addEventListener('keydown', handleKeydown);\n\n      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(textareaEl);\n\n      // Reactive watcher so that if props.ref is set *after* the inner <textarea> mounts\n      // (e.g. a parent sets it via a ref callback after render), the new callback still\n      // receives the live element.\n      const refSub = watch(props.ref, (cb) => {\n        cb?.(textareaEl);\n      });\n\n      return () => {\n        textareaEl.removeEventListener('keydown', handleKeydown);\n        unwireField();\n        unwireAutoResize();\n        refSub.dispose();\n        props.ref.value?.(null);\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(tf.errorText),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const counterClass = () => counterClassName(tf.counter?.value);\n    const counterHidden = () => !tf.counter;\n    const counterText = () => tf.counter?.value.counterText.replace(' / ', '/') ?? '';\n    const helperHidden = () => !!tf.errorText.value || !tf.helperText.value;\n    const errorHidden = () => !tf.errorText.value;\n\n    return html`\n      <div class=\"composer\" part=\"composer\">\n        <textarea\n          class=\"field\"\n          part=\"field\"\n          ref=\"${textareaRef}\"\n          :rows=\"${() => props.rows.value ?? 1}\"\n          :name=\"${() => props.name.value ?? ''}\"\n          :placeholder=\"${() => props.placeholder.value ?? 'Message…'}\"\n          :maxlength=\"${() => props.maxlength.value}\"\n          ?disabled=\"${isDisabled}\"\n          ?readonly=\"${() => Boolean(props.readonly.value)}\"\n          ?required=\"${() => Boolean(props.required.value)}\"\n          :value=\"${live(tf.value)}\"\n          :aria-label=\"${() => props.label.value || 'Message'}\"\n          :aria-keyshortcuts=\"${composer.keyShortcutsHint}\"\n          :aria-describedby=\"${tf.ariaDescribedBy}\"\n          :aria-errormessage=\"${tf.ariaErrorMessage}\"\n          :aria-invalid=\"${tf.ariaInvalid}\"></textarea>\n        <span class=\"${counterClass}\" aria-live=\"polite\" ?hidden=\"${counterHidden}\">${counterText}</span>\n        <div id=\"${tf.assistiveId}\" class=\"helper-text\" aria-live=\"polite\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          ${() => tf.helperText.value}\n        </div>\n        <div id=\"${tf.errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          ${() => tf.errorText.value}\n        </div>\n        <div class=\"toolbar\" part=\"toolbar\">\n          <div class=\"toolbar-start\" part=\"toolbar-start\">\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div class=\"toolbar-end\" part=\"toolbar-end\">\n            <slot name=\"suffix\"></slot>\n            <slot name=\"send\"></slot>\n            ${() =>\n              slots.has('send').value\n                ? ''\n                : html`<ore-button\n                    class=\"send-btn\"\n                    part=\"send-button\"\n                    type=\"button\"\n                    icon-only\n                    variant=\"solid\"\n                    :color=\"${() => props.color.value || 'primary'}\"\n                    :size=\"${fCtxProps.size}\"\n                    :label=\"${() => props['send-label'].value || DEFAULT_SEND_LABEL}\"\n                    ?loading=\"${() => Boolean(props.loading.value)}\"\n                    ?disabled=\"${() => !composer.canSend.value}\"\n                    @click=\"${(e: MouseEvent) => composer.send(e)}\">\n                    <ore-icon name=\"${() => props['send-icon'].value || SEND_ICON}\" size=\"16\"></ore-icon>\n                  </ore-button>`}\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    disabledLoadingMixin,\n    forcedColorsMixin,\n    forcedColorsFocusMixin('.field'),\n    sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"s4BAuCA,IAAM,EAAqB,eACrB,EAAY,WAkIL,EAAuB,oCACJ,EAAsB,CACpD,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,gBAAiB,EAAA,KAAK,KAAK,EAAI,EAC/B,MAAO,EAAA,KAAK,OAAO,EACnB,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,OAAQ,EAAA,KAAK,OAAO,EACpB,MAAO,EAAA,KAAK,OAAO,EACnB,UAAW,EAAA,KAAK,KAAK,IAAA,EAA+B,EACpD,KAAM,EAAA,KAAK,OAAO,EAClB,YAAa,EAAA,KAAK,OAAO,EACzB,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,IAAK,EAAA,KAAK,KAAK,IAAA,EAA0E,EACzF,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,KAAM,EAAA,KAAK,KAAK,IAAA,EAA+B,EAC/C,YAAa,EAAA,KAAK,OAAO,EACzB,aAAc,EAAA,KAAK,OAAO,EAC1B,gBAAiB,EAAA,KAAK,MAAM,CAAC,QAAS,WAAW,EAAY,OAAO,EACpE,MAAO,EAAA,KAAK,OAAO,EACnB,QAAS,EAAA,KAAK,OAAiD,CACjE,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAyC,EACzC,GAAA,EAAA,EAAA,SAAA,CAA+C,EAE/C,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EACzC,EAAa,EAAU,SAEvB,EAAc,EAAA,gBAAgB,EAAA,SAAS,EACvC,GAAA,EAAA,EAAA,IAAA,CAAuC,EACvC,EAAa,EAAA,iBAAiB,EAE9B,EAAK,EAAA,gBAAgB,CACzB,SAAU,EACV,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,UAAW,EAAM,UACjB,SAAU,EAAO,IAAU,EAAK,QAAS,CAAE,cAAe,EAAO,OAAM,CAAC,EACxE,OAAQ,WACR,SAAU,EAAM,SAChB,SAAU,EAAM,SAChB,OAAQ,EACR,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAKD,EAAG,gBACD,EAAA,SAAiB,CACf,SAAU,EAAG,SACb,YAAe,CACb,EAAG,MAAM,EACT,EAAW,UAAU,CACvB,EACA,YAAc,GAAM,EACpB,kBAAmB,EAAG,kBACtB,SAAU,EAAG,SACb,MAAO,EAAG,KACZ,CAAC,CACH,EAEA,SAAS,EAAY,EAAyC,CACvC,EAAK,OAAQ,CAAE,cAAe,EAAO,MAAO,EAAG,MAAM,MAAM,KAAK,CAAE,CAKnF,GAAgB,EAAM,gBAAgB,CAAC,QAAU,KACnD,EAAG,MAAM,EACT,EAAW,UAAU,EACrB,EAAY,OAAO,MAAM,EAE7B,CAEA,IAAM,EAAW,EAAA,sBAAsB,CACrC,SAAU,EACV,SAAA,EAAA,EAAA,SAAA,KAAwB,EAAQ,EAAM,QAAQ,KAAM,EACpD,OAAQ,EACR,aAAc,EAAM,iBACpB,MAAO,EAAG,KACZ,CAAC,EA0CD,OAxCA,EAAA,EAAA,UAAA,CAAU,EAAc,GAAe,CACrC,IAAM,EAAc,EAAG,KAAK,CAAU,EAChC,EAAmB,EAAW,KAAK,CAAU,EAC7C,EAAiB,GAAqB,EAAS,cAAc,CAAC,EAEpE,EAAW,iBAAiB,UAAW,CAAa,EAGpD,EAAM,IAAI,QAAQ,CAAU,EAK5B,IAAM,GAAA,EAAA,EAAA,MAAA,CAAe,EAAM,IAAM,GAAO,CACtC,IAAK,CAAU,CACjB,CAAC,EAED,UAAa,CACX,EAAW,oBAAoB,UAAW,CAAa,EACvD,EAAY,EACZ,EAAiB,EACjB,EAAO,QAAQ,EACf,EAAM,IAAI,QAAQ,IAAI,CACxB,CACF,CAAC,GAED,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,MAAO,EAAA,UAAU,EAAG,SAAS,EAC7B,KAAM,EAAU,KAChB,QAAS,EAAU,OACrB,CACF,CAAC,EAQM,EAAA,IAAI;;;;;iBAKE,EAAY;uBACJ,EAAM,KAAK,OAAS,EAAE;uBACtB,EAAM,KAAK,OAAS,GAAG;8BAChB,EAAM,YAAY,OAAS,WAAW;4BACxC,EAAM,UAAU,MAAM;uBAC7B,EAAW;2BACL,EAAQ,EAAM,SAAS,MAAO;2BAC9B,EAAQ,EAAM,SAAS,MAAO;oBACvC,EAAA,KAAK,EAAG,KAAK,EAAE;6BACJ,EAAM,MAAM,OAAS,UAAU;gCAC9B,EAAS,iBAAiB;+BAC3B,EAAG,gBAAgB;gCAClB,EAAG,iBAAiB;2BACzB,EAAG,YAAY;2BAxBX,EAAA,iBAAiB,EAAG,SAAS,KAAK,EAyB7B,oCAxBJ,CAAC,EAAG,QAwB8C,QAvBpD,EAAG,SAAS,MAAM,YAAY,QAAQ,MAAO,GAAG,GAAK,GAuBe;mBAC/E,EAAG,YAAY,sEAvBH,CAAC,CAAC,EAAG,UAAU,OAAS,CAAC,EAAG,WAAW,MAuB2C;gBAC/F,EAAG,WAAW,MAAM;;mBAEnB,EAAG,QAAQ,+DAzBA,CAAC,EAAG,UAAU,MAyByD;gBACnF,EAAG,UAAU,MAAM;;;;;;;;;kBAUvB,EAAM,IAAI,MAAM,CAAC,CAAC,MACd,GACA,EAAA,IAAI;;;;;;kCAMc,EAAM,MAAM,OAAS,UAAU;6BACtC,EAAU,KAAK;kCACR,EAAM,aAAa,CAAC,OAAS,EAAmB;oCAC9C,EAAQ,EAAM,QAAQ,MAAO;qCAC5B,CAAC,EAAS,QAAQ,MAAM;8BAChC,GAAkB,EAAS,KAAK,CAAC,EAAE;0CACtB,EAAM,YAAY,CAAC,OAAS,EAAU;iCACjD;;;;KAK/B,EACA,OAAQ,CAAE,eAAgB,EAAK,EAC/B,OAAQ,CACN,EAAA,gBACA,EAAA,mBACA,EAAA,mBACA,EAAA,qBACA,EAAA,kBACA,EAAA,uBAAuB,QAAQ,EAC/B,EAAA,iBAAiB,EAAA,4BAA4B,EAC7C,EAAA,OACF,CACF,CAAC"}

package/dist/message-composer.js

@@ -0,0 +1,168 @@
+import { live as e } from "./ore/dist/directives/live.js";
+import "./ore/dist/directives.js";
+import { coarsePointerMixin as t, reducedMotionMixin as n } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as i } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as a, forcedColorsFocusMixin as o, forcedColorsMixin as s } from "./styles/mixins/theme.css.js";
+import { disablableBundle as c, loadableBundle as l, sizableBundle as u, themableBundle as d } from "./shared/prop-bundles.js";
+import { MESSAGE_COMPOSER_SIZE_PRESET as f } from "./shared/size-presets.js";
+import { lifecycleSignal as p } from "./headless/ore.js";
+import { createAutoResize as m } from "./headless/auto-resize.js";
+import { counterClassName as h } from "./headless/field-base.js";
+import { createTextField as g } from "./headless/text-field.js";
+import { createComposerControl as _ } from "./headless/composer.js";
+import { useField as v } from "./ore/dist/forms/field.js";
+import "./ore/dist/forms.js";
+import { errorAttr as y } from "./inputs/shared/field-binding.js";
+import { FORM_CTX as b, useFormContext as x } from "./inputs/shared/form-context.js";
+import S from "./inputs/message-composer/message-composer.css.js";
+import { bind as C, define as w, html as T, inject as E, onCleanup as D, onElement as O, prop as k, ref as A, useEmit as j, useSlots as M } from "@vielzeug/ore";
+import { computed as N, watch as P } from "@vielzeug/ripple";
+//#region src/inputs/message-composer/message-composer.ts
+var F = "Send message", I = "arrow-up", L = "ore-message-composer";
+w(L, {
+	formAssociated: !0,
+	props: {
+		...d,
+		...u,
+		...c,
+		...l,
+		"clear-on-send": k.bool(!0),
+		error: k.string(),
+		fullwidth: k.bool(!1),
+		helper: k.string(),
+		label: k.string(),
+		maxlength: k.json(void 0),
+		name: k.string(),
+		placeholder: k.string(),
+		readonly: k.bool(!1),
+		ref: k.json(void 0),
+		required: k.bool(!1),
+		rows: k.json(void 0),
+		"send-icon": k.string(),
+		"send-label": k.string(),
+		"send-shortcut": k.oneOf(["enter", "mod+enter"], "enter"),
+		value: k.string(),
+		variant: k.string()
+	},
+	setup(t) {
+		let n = j(), r = M(), i = E(b), a = x(t, i), o = a.disabled, s = p(D), c = A(), l = m(), u = g({
+			disabled: o,
+			error: t.error,
+			helper: t.helper,
+			maxLength: t.maxlength,
+			onInput: (e, t) => n("input", {
+				originalEvent: e,
+				value: t
+			}),
+			prefix: "composer",
+			readonly: t.readonly,
+			required: t.required,
+			signal: s,
+			validateOn: i?.validateOn,
+			value: t.value
+		});
+		u.attachFormField(v({
+			disabled: u.disabled,
+			onReset: () => {
+				u.reset(), l.recompute();
+			},
+			toFormValue: (e) => e,
+			validationMessage: u.validationMessage,
+			validity: u.validity,
+			value: u.value
+		}));
+		function d(e) {
+			n("send", {
+				originalEvent: e,
+				value: u.value.value.trim()
+			}) && t["clear-on-send"].value !== !1 && (u.clear(), l.recompute(), c.value?.focus());
+		}
+		let f = _({
+			disabled: o,
+			loading: N(() => !!t.loading.value),
+			onSend: d,
+			sendShortcut: t["send-shortcut"],
+			value: u.value
+		});
+		return O(c, (e) => {
+			let n = u.wire(e), r = l.wire(e), i = (e) => f.handleKeydown(e);
+			e.addEventListener("keydown", i), t.ref.value?.(e);
+			let a = P(t.ref, (t) => {
+				t?.(e);
+			});
+			return () => {
+				e.removeEventListener("keydown", i), n(), r(), a.dispose(), t.ref.value?.(null);
+			};
+		}), C({ attr: {
+			error: y(u.errorText),
+			size: a.size,
+			variant: a.variant
+		} }), T`
+      <div class="composer" part="composer">
+        <textarea
+          class="field"
+          part="field"
+          ref="${c}"
+          :rows="${() => t.rows.value ?? 1}"
+          :name="${() => t.name.value ?? ""}"
+          :placeholder="${() => t.placeholder.value ?? "Message…"}"
+          :maxlength="${() => t.maxlength.value}"
+          ?disabled="${o}"
+          ?readonly="${() => !!t.readonly.value}"
+          ?required="${() => !!t.required.value}"
+          :value="${e(u.value)}"
+          :aria-label="${() => t.label.value || "Message"}"
+          :aria-keyshortcuts="${f.keyShortcutsHint}"
+          :aria-describedby="${u.ariaDescribedBy}"
+          :aria-errormessage="${u.ariaErrorMessage}"
+          :aria-invalid="${u.ariaInvalid}"></textarea>
+        <span class="${() => h(u.counter?.value)}" aria-live="polite" ?hidden="${() => !u.counter}">${() => u.counter?.value.counterText.replace(" / ", "/") ?? ""}</span>
+        <div id="${u.assistiveId}" class="helper-text" aria-live="polite" part="helper" ?hidden="${() => !!u.errorText.value || !u.helperText.value}">
+          ${() => u.helperText.value}
+        </div>
+        <div id="${u.errorId}" class="helper-text" role="alert" part="error" ?hidden="${() => !u.errorText.value}">
+          ${() => u.errorText.value}
+        </div>
+        <div class="toolbar" part="toolbar">
+          <div class="toolbar-start" part="toolbar-start">
+            <slot name="prefix"></slot>
+          </div>
+          <div class="toolbar-end" part="toolbar-end">
+            <slot name="suffix"></slot>
+            <slot name="send"></slot>
+            ${() => r.has("send").value ? "" : T`<ore-button
+                    class="send-btn"
+                    part="send-button"
+                    type="button"
+                    icon-only
+                    variant="solid"
+                    :color="${() => t.color.value || "primary"}"
+                    :size="${a.size}"
+                    :label="${() => t["send-label"].value || F}"
+                    ?loading="${() => !!t.loading.value}"
+                    ?disabled="${() => !f.canSend.value}"
+                    @click="${(e) => f.send(e)}">
+                    <ore-icon name="${() => t["send-icon"].value || I}" size="16"></ore-icon>
+                  </ore-button>`}
+          </div>
+        </div>
+      </div>
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		a,
+		t,
+		n,
+		i,
+		s,
+		o(".field"),
+		r(f),
+		S
+	]
+});
+//#endregion
+export { L as MESSAGE_COMPOSER_TAG };
+
+//# sourceMappingURL=message-composer.js.map

package/dist/message-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-composer.js","names":[],"sources":["../src/inputs/message-composer/message-composer.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, onCleanup, onElement, useEmit, useSlots } from '@vielzeug/ore';\nimport { live } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport {\n  counterClassName,\n  createAutoResize,\n  createComposerControl,\n  createTextField,\n  lifecycleSignal,\n  type SendShortcut,\n} from '../../headless';\nimport {\n  disablableBundle,\n  loadableBundle,\n  MESSAGE_COMPOSER_SIZE_PRESET,\n  sizableBundle,\n  themableBundle,\n} from '../../shared';\nimport {\n  colorThemeMixin,\n  coarsePointerMixin,\n  disabledLoadingMixin,\n  forcedColorsFocusMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { errorAttr } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport '../../content/icon/icon';\nimport '../button/button';\nimport componentStyles from './message-composer.css?inline';\n\nexport type { SendShortcut } from '../../headless';\n\nconst DEFAULT_SEND_LABEL = 'Send message';\nconst SEND_ICON = 'arrow-up';\n\n/** Events emitted by the message composer */\nexport type OreMessageComposerEvents = {\n  /** Fired on every keystroke with the current value. */\n  input: { originalEvent: Event; value: string };\n  /**\n   * Fired for a send attempt (the resolved `send-shortcut` or the send button) while the\n   * composer isn't blank/disabled/loading. Cancelable — call `preventDefault()` to keep the\n   * current text in the field instead of the default clear + refocus.\n   */\n  send: { originalEvent: KeyboardEvent | MouseEvent; value: string };\n};\n\n/** Message composer properties */\nexport type OreMessageComposerProps = {\n  /** Clear the value and refocus after a non-cancelled `send` (default `true`) */\n  'clear-on-send'?: boolean;\n  /** Theme color (card focus ring + default send button color) */\n  color?: ThemeColor;\n  /** Disable the whole composer (field, slots, and send action) */\n  disabled?: boolean;\n  /** Error message shown below the field */\n  error?: string;\n  /** Stretch the composer to the full width of its container */\n  fullwidth?: boolean;\n  /** Helper text shown below the field */\n  helper?: string;\n  /** Accessible name for the field — never rendered visually, only as `aria-label` */\n  label?: string;\n  /** Blocks further sends (e.g. a send is already in flight) without disabling editing */\n  loading?: boolean;\n  /** Maximum character count; shows a counter */\n  maxlength?: number;\n  /** Form field name */\n  name?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Make the field read-only */\n  readonly?: boolean;\n  /**\n   * JS-only callback fired with the inner `<textarea>` element when it mounts, and with\n   * `null` when it unmounts. Set as a JS property: `composer.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLTextAreaElement | null) => void) | null;\n  /** Require a non-blank value for `<ore-form>` validation */\n  required?: boolean;\n  /** Number of visible rows before auto-resize grows the field */\n  rows?: number;\n  /** Lucide icon name for the default send button (default `'arrow-up'`) */\n  'send-icon'?: string;\n  /** Accessible label for the send button (default `'Send message'`) */\n  'send-label'?: string;\n  /** Keyboard shortcut that sends: 'enter' (Shift+Enter for a newline) or 'mod+enter' (Enter always inserts a newline; Ctrl/Cmd+Enter sends) */\n  'send-shortcut'?: SendShortcut;\n  /** Component size */\n  size?: ComponentSize;\n  /** Current text value */\n  value?: string;\n  /** Visual variant of the card — same variant set as `ore-textarea`, applied to the card. */\n  variant?: Exclude<VisualVariant, 'frost' | 'text'>;\n};\n\n/**\n * A message/comment composer — a card with an auto-resizing field on top and a toolbar row\n * below it, built directly on the same headless primitives as `ore-textarea` (`createTextField`,\n * `createAutoResize`) rather than composing `ore-textarea` itself. Nesting a fully-styled sibling\n * component and suppressing most of its chrome (as an earlier version of this component did) is\n * a leaky composition — this owns its single `<textarea>` outright, so there's exactly one\n * implementation of the field's appearance to reason about, not two fighting each other.\n *\n * Handles the send gesture (Enter to send, Shift+Enter for a newline, or a Ctrl/Cmd+Enter\n * alternative), IME-safe composition, and clear-and-refocus after sending.\n *\n * @element ore-message-composer\n *\n * @attr {string} value - Current text value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} label - Accessible name for the field (not rendered visually)\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text shown below the field\n * @attr {string} error - Error message shown below the field\n * @attr {boolean} disabled - Disable the whole composer\n * @attr {boolean} readonly - Read-only mode\n * @attr {boolean} required - Require a non-blank value for `<ore-form>` validation\n * @attr {boolean} loading - Blocks further sends without disabling editing\n * @attr {number} maxlength - Max character count; shows a counter\n * @attr {number} rows - Visible rows before auto-resize grows the field (default 1)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant of the card: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {boolean} fullwidth - Stretch to the full width of the container\n * @attr {string} send-icon - Lucide icon name for the default send button (default 'arrow-up')\n * @attr {string} send-label - Accessible label for the send button (default 'Send message')\n * @attr {string} send-shortcut - 'enter' (default) | 'mod+enter'\n * @attr {boolean} clear-on-send - Clear the value and refocus after a non-cancelled send (default true)\n *\n * @fires input - Fired on every keystroke. detail: { value, originalEvent }\n * @fires send - Fired on a send attempt. Cancelable. detail: { value, originalEvent }\n *\n * @slot prefix - Content at the start of the toolbar row (e.g. an attach menu)\n * @slot suffix - Content at the end of the toolbar row, before the send button (e.g. a model picker)\n * @slot send - Replaces the default send button entirely — the only supported way to customize it\n *\n * @cssprop --message-composer-bg - Card background color\n * @cssprop --message-composer-border-color - Card border color\n * @cssprop --message-composer-radius - Card border radius\n * @cssprop --message-composer-padding - Card inner padding\n * @cssprop --message-composer-gap - Gap between the field/toolbar rows and between toolbar items\n * @cssprop --message-composer-placeholder-color - Field placeholder text color\n * @cssprop --message-composer-min-height - Minimum field height (default one line)\n * @cssprop --message-composer-hover-bg - Card background on hover (flat/ghost variants)\n * @cssprop --message-composer-hover-border-color - Card border on hover (flat/bordered variants)\n * @cssprop --message-composer-focus-bg - Card background when focused (flat variant)\n * @cssprop --message-composer-focus-border-color - Card border when focused (flat variant)\n *\n * @part composer - Root card container\n * @part field - The native `<textarea>` element\n * @part helper - Helper text element\n * @part error - Error text element (`role=\"alert\"`)\n * @part toolbar - Toolbar row below the field\n * @part toolbar-start - Toolbar group holding the `prefix` slot\n * @part toolbar-end - Toolbar group holding the `suffix` slot and the send button\n * @part send-button - The default send button (absent when the `send` slot is used)\n *\n * @example\n * ```html\n * <ore-message-composer placeholder=\"Message…\" send-shortcut=\"mod+enter\"></ore-message-composer>\n * ```\n */\nexport const MESSAGE_COMPOSER_TAG = 'ore-message-composer' as const;\ndefine<OreMessageComposerProps>(MESSAGE_COMPOSER_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    'clear-on-send': prop.bool(true),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    maxlength: prop.json(undefined as number | undefined),\n    name: prop.string(),\n    placeholder: prop.string(),\n    readonly: prop.bool(false),\n    ref: prop.json(undefined as ((el: HTMLTextAreaElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    rows: prop.json(undefined as number | undefined),\n    'send-icon': prop.string(),\n    'send-label': prop.string(),\n    'send-shortcut': prop.oneOf(['enter', 'mod+enter'] as const, 'enter'),\n    value: prop.string(),\n    variant: prop.string<Exclude<VisualVariant, 'frost' | 'text'>>(),\n  },\n  setup(props) {\n    const emit = useEmit<OreMessageComposerEvents>();\n    const slots = useSlots<'prefix' | 'send' | 'suffix'>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDisabled = fCtxProps.disabled;\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const textareaRef = ref<HTMLTextAreaElement>();\n    const autoResize = createAutoResize();\n\n    const tf = createTextField({\n      disabled: isDisabled,\n      error: props.error,\n      helper: props.helper,\n      maxLength: props.maxlength,\n      onInput: (event, value) => emit('input', { originalEvent: event, value }),\n      prefix: 'composer',\n      readonly: props.readonly,\n      required: props.required,\n      signal: abortSignal,\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    // Directly form-associated now that the field is owned here rather than borrowed from a\n    // nested `ore-textarea` (which previously registered with the ancestor `<form>` on this\n    // component's behalf).\n    tf.attachFormField(\n      useField<string>({\n        disabled: tf.disabled,\n        onReset: () => {\n          tf.reset();\n          autoResize.recompute();\n        },\n        toFormValue: (v) => v,\n        validationMessage: tf.validationMessage,\n        validity: tf.validity,\n        value: tf.value,\n      }),\n    );\n\n    function attemptSend(event: KeyboardEvent | MouseEvent): void {\n      const notPrevented = emit('send', { originalEvent: event, value: tf.value.value.trim() });\n\n      // `preventDefault()` on `send` means \"keep the current text — skip the default clear\n      // + refocus\" (see the event's own doc comment): both halves of that default are gated on\n      // the same condition, not just the clear.\n      if (notPrevented && props['clear-on-send'].value !== false) {\n        tf.clear();\n        autoResize.recompute();\n        textareaRef.value?.focus();\n      }\n    }\n\n    const composer = createComposerControl({\n      disabled: isDisabled,\n      loading: computed(() => Boolean(props.loading.value)),\n      onSend: attemptSend,\n      sendShortcut: props['send-shortcut'],\n      value: tf.value,\n    });\n\n    onElement(textareaRef, (textareaEl) => {\n      const unwireField = tf.wire(textareaEl);\n      const unwireAutoResize = autoResize.wire(textareaEl);\n      const handleKeydown = (e: KeyboardEvent) => composer.handleKeydown(e);\n\n      textareaEl.addEventListener('keydown', handleKeydown);\n\n      // Immediate fire for when the prop is already set on mount.\n      props.ref.value?.(textareaEl);\n\n      // Reactive watcher so that if props.ref is set *after* the inner <textarea> mounts\n      // (e.g. a parent sets it via a ref callback after render), the new callback still\n      // receives the live element.\n      const refSub = watch(props.ref, (cb) => {\n        cb?.(textareaEl);\n      });\n\n      return () => {\n        textareaEl.removeEventListener('keydown', handleKeydown);\n        unwireField();\n        unwireAutoResize();\n        refSub.dispose();\n        props.ref.value?.(null);\n      };\n    });\n\n    bind({\n      attr: {\n        error: errorAttr(tf.errorText),\n        size: fCtxProps.size,\n        variant: fCtxProps.variant,\n      },\n    });\n\n    const counterClass = () => counterClassName(tf.counter?.value);\n    const counterHidden = () => !tf.counter;\n    const counterText = () => tf.counter?.value.counterText.replace(' / ', '/') ?? '';\n    const helperHidden = () => !!tf.errorText.value || !tf.helperText.value;\n    const errorHidden = () => !tf.errorText.value;\n\n    return html`\n      <div class=\"composer\" part=\"composer\">\n        <textarea\n          class=\"field\"\n          part=\"field\"\n          ref=\"${textareaRef}\"\n          :rows=\"${() => props.rows.value ?? 1}\"\n          :name=\"${() => props.name.value ?? ''}\"\n          :placeholder=\"${() => props.placeholder.value ?? 'Message…'}\"\n          :maxlength=\"${() => props.maxlength.value}\"\n          ?disabled=\"${isDisabled}\"\n          ?readonly=\"${() => Boolean(props.readonly.value)}\"\n          ?required=\"${() => Boolean(props.required.value)}\"\n          :value=\"${live(tf.value)}\"\n          :aria-label=\"${() => props.label.value || 'Message'}\"\n          :aria-keyshortcuts=\"${composer.keyShortcutsHint}\"\n          :aria-describedby=\"${tf.ariaDescribedBy}\"\n          :aria-errormessage=\"${tf.ariaErrorMessage}\"\n          :aria-invalid=\"${tf.ariaInvalid}\"></textarea>\n        <span class=\"${counterClass}\" aria-live=\"polite\" ?hidden=\"${counterHidden}\">${counterText}</span>\n        <div id=\"${tf.assistiveId}\" class=\"helper-text\" aria-live=\"polite\" part=\"helper\" ?hidden=\"${helperHidden}\">\n          ${() => tf.helperText.value}\n        </div>\n        <div id=\"${tf.errorId}\" class=\"helper-text\" role=\"alert\" part=\"error\" ?hidden=\"${errorHidden}\">\n          ${() => tf.errorText.value}\n        </div>\n        <div class=\"toolbar\" part=\"toolbar\">\n          <div class=\"toolbar-start\" part=\"toolbar-start\">\n            <slot name=\"prefix\"></slot>\n          </div>\n          <div class=\"toolbar-end\" part=\"toolbar-end\">\n            <slot name=\"suffix\"></slot>\n            <slot name=\"send\"></slot>\n            ${() =>\n              slots.has('send').value\n                ? ''\n                : html`<ore-button\n                    class=\"send-btn\"\n                    part=\"send-button\"\n                    type=\"button\"\n                    icon-only\n                    variant=\"solid\"\n                    :color=\"${() => props.color.value || 'primary'}\"\n                    :size=\"${fCtxProps.size}\"\n                    :label=\"${() => props['send-label'].value || DEFAULT_SEND_LABEL}\"\n                    ?loading=\"${() => Boolean(props.loading.value)}\"\n                    ?disabled=\"${() => !composer.canSend.value}\"\n                    @click=\"${(e: MouseEvent) => composer.send(e)}\">\n                    <ore-icon name=\"${() => props['send-icon'].value || SEND_ICON}\" size=\"16\"></ore-icon>\n                  </ore-button>`}\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    disabledLoadingMixin,\n    forcedColorsMixin,\n    forcedColorsFocusMixin('.field'),\n    sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuCA,IAAM,IAAqB,gBACrB,IAAY,YAkIL,IAAuB;AACpC,EAAgC,GAAsB;CACpD,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,iBAAiB,EAAK,KAAK,EAAI;EAC/B,OAAO,EAAK,OAAO;EACnB,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,OAAO;EACpB,OAAO,EAAK,OAAO;EACnB,WAAW,EAAK,KAAK,KAAA,CAA+B;EACpD,MAAM,EAAK,OAAO;EAClB,aAAa,EAAK,OAAO;EACzB,UAAU,EAAK,KAAK,EAAK;EACzB,KAAK,EAAK,KAAK,KAAA,CAA0E;EACzF,UAAU,EAAK,KAAK,EAAK;EACzB,MAAM,EAAK,KAAK,KAAA,CAA+B;EAC/C,aAAa,EAAK,OAAO;EACzB,cAAc,EAAK,OAAO;EAC1B,iBAAiB,EAAK,MAAM,CAAC,SAAS,WAAW,GAAY,OAAO;EACpE,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAAiD;CACjE;CACA,MAAM,GAAO;EACX,IAAM,IAAO,EAAkC,GACzC,IAAQ,EAAuC,GAE/C,IAAU,EAAO,CAAQ,GACzB,IAAY,EAAe,GAAO,CAAO,GACzC,IAAa,EAAU,UAEvB,IAAc,EAAgB,CAAS,GACvC,IAAc,EAAyB,GACvC,IAAa,EAAiB,GAE9B,IAAK,EAAgB;GACzB,UAAU;GACV,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,WAAW,EAAM;GACjB,UAAU,GAAO,MAAU,EAAK,SAAS;IAAE,eAAe;IAAO;GAAM,CAAC;GACxE,QAAQ;GACR,UAAU,EAAM;GAChB,UAAU,EAAM;GAChB,QAAQ;GACR,YAAY,GAAS;GACrB,OAAO,EAAM;EACf,CAAC;EAKD,EAAG,gBACD,EAAiB;GACf,UAAU,EAAG;GACb,eAAe;IAEb,AADA,EAAG,MAAM,GACT,EAAW,UAAU;GACvB;GACA,cAAc,MAAM;GACpB,mBAAmB,EAAG;GACtB,UAAU,EAAG;GACb,OAAO,EAAG;EACZ,CAAC,CACH;EAEA,SAAS,EAAY,GAAyC;GAM5D,AALqB,EAAK,QAAQ;IAAE,eAAe;IAAO,OAAO,EAAG,MAAM,MAAM,KAAK;GAAE,CAKnF,KAAgB,EAAM,gBAAgB,CAAC,UAAU,OACnD,EAAG,MAAM,GACT,EAAW,UAAU,GACrB,EAAY,OAAO,MAAM;EAE7B;EAEA,IAAM,IAAW,EAAsB;GACrC,UAAU;GACV,SAAS,QAAe,EAAQ,EAAM,QAAQ,KAAM;GACpD,QAAQ;GACR,cAAc,EAAM;GACpB,OAAO,EAAG;EACZ,CAAC;EA0CD,OAxCA,EAAU,IAAc,MAAe;GACrC,IAAM,IAAc,EAAG,KAAK,CAAU,GAChC,IAAmB,EAAW,KAAK,CAAU,GAC7C,KAAiB,MAAqB,EAAS,cAAc,CAAC;GAKpE,AAHA,EAAW,iBAAiB,WAAW,CAAa,GAGpD,EAAM,IAAI,QAAQ,CAAU;GAK5B,IAAM,IAAS,EAAM,EAAM,MAAM,MAAO;IACtC,IAAK,CAAU;GACjB,CAAC;GAED,aAAa;IAKX,AAJA,EAAW,oBAAoB,WAAW,CAAa,GACvD,EAAY,GACZ,EAAiB,GACjB,EAAO,QAAQ,GACf,EAAM,IAAI,QAAQ,IAAI;GACxB;EACF,CAAC,GAED,EAAK,EACH,MAAM;GACJ,OAAO,EAAU,EAAG,SAAS;GAC7B,MAAM,EAAU;GAChB,SAAS,EAAU;EACrB,EACF,CAAC,GAQM,CAAI;;;;;iBAKE,EAAY;yBACJ,EAAM,KAAK,SAAS,EAAE;yBACtB,EAAM,KAAK,SAAS,GAAG;gCAChB,EAAM,YAAY,SAAS,WAAW;8BACxC,EAAM,UAAU,MAAM;uBAC7B,EAAW;6BACL,EAAQ,EAAM,SAAS,MAAO;6BAC9B,EAAQ,EAAM,SAAS,MAAO;oBACvC,EAAK,EAAG,KAAK,EAAE;+BACJ,EAAM,MAAM,SAAS,UAAU;gCAC9B,EAAS,iBAAiB;+BAC3B,EAAG,gBAAgB;gCAClB,EAAG,iBAAiB;2BACzB,EAAG,YAAY;6BAxBX,EAAiB,EAAG,SAAS,KAAK,EAyB7B,sCAxBJ,CAAC,EAAG,QAwB8C,UAvBpD,EAAG,SAAS,MAAM,YAAY,QAAQ,OAAO,GAAG,KAAK,GAuBe;mBAC/E,EAAG,YAAY,wEAvBH,CAAC,CAAC,EAAG,UAAU,SAAS,CAAC,EAAG,WAAW,MAuB2C;kBAC/F,EAAG,WAAW,MAAM;;mBAEnB,EAAG,QAAQ,iEAzBA,CAAC,EAAG,UAAU,MAyByD;kBACnF,EAAG,UAAU,MAAM;;;;;;;;;oBAUvB,EAAM,IAAI,MAAM,CAAC,CAAC,QACd,KACA,CAAI;;;;;;oCAMc,EAAM,MAAM,SAAS,UAAU;6BACtC,EAAU,KAAK;oCACR,EAAM,aAAa,CAAC,SAAS,EAAmB;sCAC9C,EAAQ,EAAM,QAAQ,MAAO;uCAC5B,CAAC,EAAS,QAAQ,MAAM;+BAChC,MAAkB,EAAS,KAAK,CAAC,EAAE;4CACtB,EAAM,YAAY,CAAC,SAAS,EAAU;iCACjD;;;;;CAK/B;CACA,QAAQ,EAAE,gBAAgB,GAAK;CAC/B,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA,EAAuB,QAAQ;EAC/B,EAAiB,CAA4B;EAC7C;CACF;AACF,CAAC"}