@universal-material/web 3.7.2 → 3.9.0

package/scaffold/pane.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pane.styles.js","sourceRoot":"","sources":["../../src/scaffold/pane.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAk3DzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    min-height: 0;\n    --u-pane-transition: 300ms cubic-bezier(0.19, 1, 0.22, 1);\n    --_u-pane-variant-bg: transparent;\n    --_u-pane-variant-radius: 0;\n    --_u-pane-bg-color: var(--_u-pane-variant-bg);\n    --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n    --_u-pane-box-shadow: none;\n    --_u-pane-drawer-width: 100%;\n    --_u-pane-slide-distance: -100%;\n    --_u-pane-shape-corner-end: 0;\n  }\n\n  .container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    box-sizing: border-box;\n    background-color: var(--_u-pane-bg-color);\n    border-radius: var(--_u-pane-shape-corner);\n    box-shadow: var(--_u-pane-box-shadow);\n  }\n\n  .header {\n    flex: 0 0 auto;\n  }\n\n  .content {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n  }\n\n  :host([variant=filled]) {\n    --_u-pane-variant-bg: var(--u-pane-filled-bg-color,\n      var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    --_u-pane-variant-radius: var(--u-pane-filled-shape-corner,\n      var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([variant=transparent]) {\n    --_u-pane-variant-bg: transparent;\n    --_u-pane-variant-radius: 0;\n  }\n\n  @media (max-width: 839.98px) {\n    :host([variant=filled]) {\n      --_u-pane-variant-radius: 0;\n    }\n  }\n  .scrim {\n    position: fixed;\n    inset: 0;\n    background-color: var(--u-pane-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--u-pane-transition);\n    display: none;\n  }\n\n  :host([mode=fixed]) {\n    display: block;\n    position: relative;\n    flex: 0 1 auto;\n    height: auto;\n    inset: auto;\n    z-index: auto;\n    pointer-events: auto;\n    opacity: 1;\n    transition: none;\n    --_u-pane-bg-color: var(--_u-pane-variant-bg);\n    --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n    --_u-pane-box-shadow: none;\n  }\n\n  :host([mode=fixed]) .container {\n    position: relative;\n    inset: auto;\n    width: auto;\n    transition: none;\n    opacity: 1;\n  }\n\n  :host([mode=fixed]) .scrim {\n    display: none;\n  }\n\n  :host([mode=collapsible]) {\n    display: block;\n    position: relative;\n    flex: 0 1 auto;\n    height: auto;\n    inset: auto;\n    z-index: auto;\n    pointer-events: auto;\n    opacity: 1;\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n    transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;\n    --_u-pane-bg-color: var(--_u-pane-variant-bg);\n    --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n    --_u-pane-box-shadow: none;\n    --_u-pane-collapsed-offset: calc(\n      -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))\n    );\n  }\n\n  :host([mode=collapsible]:where(:not([open]))) {\n    margin-inline-start: var(--_u-pane-collapsed-offset);\n    display: none;\n  }\n\n  :host([mode=collapsible]:where([data-align=end]:not([open]))) {\n    margin-inline-start: 0;\n    margin-inline-end: var(--_u-pane-collapsed-offset);\n  }\n\n  @starting-style {\n    :host([mode=collapsible]:where([open])) {\n      margin-inline-start: var(--_u-pane-collapsed-offset);\n    }\n    :host([mode=collapsible]:where([data-align=end][open])) {\n      margin-inline-start: 0;\n      margin-inline-end: var(--_u-pane-collapsed-offset);\n    }\n  }\n  :host([mode=collapsible]) .container {\n    position: relative;\n    inset: auto;\n    width: auto;\n    transition: none;\n    opacity: 1;\n  }\n\n  :host([mode=collapsible]) .scrim {\n    display: none;\n  }\n\n  :host([mode=sidebar]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    z-index: var(--u-pane-z-index, 1030);\n    pointer-events: none;\n    flex: none;\n    width: auto;\n    height: auto;\n    opacity: 1;\n    transition: none;\n    --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n      var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));\n    --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);\n    --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);\n    --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);\n  }\n\n  :host([mode=sidebar]) .container {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: var(--_u-pane-slide-distance);\n    inset-inline-end: auto;\n    width: var(--_u-pane-drawer-width);\n    transition: inset var(--u-pane-transition);\n    pointer-events: auto;\n    border-radius: var(--_u-pane-shape-corner);\n  }\n\n  :host([mode=sidebar]:where([open])) .container {\n    inset-inline-start: 0;\n  }\n\n  :host([mode=sidebar]:where([data-align=end])) .container {\n    inset-inline-start: auto;\n    inset-inline-end: var(--_u-pane-slide-distance);\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n    border-start-start-radius: var(--_u-pane-shape-corner-end);\n    border-end-start-radius: var(--_u-pane-shape-corner-end);\n  }\n\n  :host([mode=sidebar]:where([data-align=end][open])) .container {\n    inset-inline-end: 0;\n  }\n\n  :host([mode=sidebar]) .scrim {\n    display: block;\n  }\n\n  :host([mode=sidebar]:where([open])) .scrim {\n    opacity: var(--u-pane-scrim-opacity, 0.4);\n    pointer-events: auto;\n  }\n\n  :host([mode=fullscreen]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    z-index: var(--u-pane-fullscreen-z-index, 1040);\n    pointer-events: none;\n    flex: none;\n    width: auto;\n    height: auto;\n    opacity: 1;\n    transition: none;\n    --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n      var(--u-color-surface-container-lowest, rgb(255, 255, 255)));\n    --_u-pane-shape-corner: 0;\n    --_u-pane-shape-corner-end: 0;\n    --_u-pane-box-shadow: none;\n    --_u-pane-drawer-width: 100%;\n    --_u-pane-slide-distance: -100%;\n  }\n\n  :host([mode=fullscreen]) .container {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: var(--_u-pane-slide-distance);\n    inset-inline-end: auto;\n    width: 100%;\n    transition: inset var(--u-pane-transition);\n    pointer-events: auto;\n  }\n\n  :host([mode=fullscreen]:where([open])) .container {\n    inset-inline-start: 0;\n  }\n\n  :host([mode=fullscreen]:where([data-align=end])) .container {\n    inset-inline-start: auto;\n    inset-inline-end: var(--_u-pane-slide-distance);\n  }\n\n  :host([mode=fullscreen]:where([data-align=end][open])) .container {\n    inset-inline-end: 0;\n  }\n\n  :host([mode=fullscreen]) .scrim {\n    display: none;\n  }\n\n  @media (min-width: 600px) {\n    :host(:where(:not([query-context=container]))[mode-sm=fixed]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=fixed]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=fixed]) .scrim {\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=collapsible]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n      --_u-pane-collapsed-offset: calc(\n        -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))\n      );\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=collapsible]:where(:not([open]))) {\n      margin-inline-start: var(--_u-pane-collapsed-offset);\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=collapsible]:where([data-align=end]:not([open]))) {\n      margin-inline-start: 0;\n      margin-inline-end: var(--_u-pane-collapsed-offset);\n    }\n    @starting-style {\n      :host(:where(:not([query-context=container]))[mode-sm=collapsible]:where([open])) {\n        margin-inline-start: var(--_u-pane-collapsed-offset);\n      }\n      :host(:where(:not([query-context=container]))[mode-sm=collapsible]:where([data-align=end][open])) {\n        margin-inline-start: 0;\n        margin-inline-end: var(--_u-pane-collapsed-offset);\n      }\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=collapsible]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=collapsible]) .scrim {\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=sidebar]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-z-index, 1030);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-low, rgb(247, 242, 250)));\n      --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));\n      --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);\n      --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);\n      --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=sidebar]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: var(--_u-pane-drawer-width);\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n      border-radius: var(--_u-pane-shape-corner);\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=sidebar]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=sidebar]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=sidebar]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=sidebar]) .scrim {\n      display: block;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=sidebar]:where([open])) .scrim {\n      opacity: var(--u-pane-scrim-opacity, 0.4);\n      pointer-events: auto;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=fullscreen]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-fullscreen-z-index, 1040);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-lowest, rgb(255, 255, 255)));\n      --_u-pane-shape-corner: 0;\n      --_u-pane-shape-corner-end: 0;\n      --_u-pane-box-shadow: none;\n      --_u-pane-drawer-width: 100%;\n      --_u-pane-slide-distance: -100%;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=fullscreen]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: 100%;\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=fullscreen]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=fullscreen]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=fullscreen]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-sm=fullscreen]) .scrim {\n      display: none;\n    }\n  }\n  @container (min-width: 600px) {\n    :host(:where([query-context=container])[mode-sm=fixed]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n    }\n    :host(:where([query-context=container])[mode-sm=fixed]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[mode-sm=fixed]) .scrim {\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-sm=collapsible]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n      --_u-pane-collapsed-offset: calc(\n        -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))\n      );\n    }\n    :host(:where([query-context=container])[mode-sm=collapsible]:where(:not([open]))) {\n      margin-inline-start: var(--_u-pane-collapsed-offset);\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-sm=collapsible]:where([data-align=end]:not([open]))) {\n      margin-inline-start: 0;\n      margin-inline-end: var(--_u-pane-collapsed-offset);\n    }\n    @starting-style {\n      :host(:where([query-context=container])[mode-sm=collapsible]:where([open])) {\n        margin-inline-start: var(--_u-pane-collapsed-offset);\n      }\n      :host(:where([query-context=container])[mode-sm=collapsible]:where([data-align=end][open])) {\n        margin-inline-start: 0;\n        margin-inline-end: var(--_u-pane-collapsed-offset);\n      }\n    }\n    :host(:where([query-context=container])[mode-sm=collapsible]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[mode-sm=collapsible]) .scrim {\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-sm=sidebar]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-z-index, 1030);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-low, rgb(247, 242, 250)));\n      --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));\n      --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);\n      --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);\n      --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);\n    }\n    :host(:where([query-context=container])[mode-sm=sidebar]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: var(--_u-pane-drawer-width);\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n      border-radius: var(--_u-pane-shape-corner);\n    }\n    :host(:where([query-context=container])[mode-sm=sidebar]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[mode-sm=sidebar]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[mode-sm=sidebar]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where([query-context=container])[mode-sm=sidebar]) .scrim {\n      display: block;\n    }\n    :host(:where([query-context=container])[mode-sm=sidebar]:where([open])) .scrim {\n      opacity: var(--u-pane-scrim-opacity, 0.4);\n      pointer-events: auto;\n    }\n    :host(:where([query-context=container])[mode-sm=fullscreen]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-fullscreen-z-index, 1040);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-lowest, rgb(255, 255, 255)));\n      --_u-pane-shape-corner: 0;\n      --_u-pane-shape-corner-end: 0;\n      --_u-pane-box-shadow: none;\n      --_u-pane-drawer-width: 100%;\n      --_u-pane-slide-distance: -100%;\n    }\n    :host(:where([query-context=container])[mode-sm=fullscreen]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: 100%;\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n    }\n    :host(:where([query-context=container])[mode-sm=fullscreen]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[mode-sm=fullscreen]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n    }\n    :host(:where([query-context=container])[mode-sm=fullscreen]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where([query-context=container])[mode-sm=fullscreen]) .scrim {\n      display: none;\n    }\n  }\n  @media (min-width: 840px) {\n    :host(:where(:not([query-context=container]))[mode-md=fixed]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=fixed]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=fixed]) .scrim {\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=collapsible]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n      --_u-pane-collapsed-offset: calc(\n        -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))\n      );\n    }\n    :host(:where(:not([query-context=container]))[mode-md=collapsible]:where(:not([open]))) {\n      margin-inline-start: var(--_u-pane-collapsed-offset);\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=collapsible]:where([data-align=end]:not([open]))) {\n      margin-inline-start: 0;\n      margin-inline-end: var(--_u-pane-collapsed-offset);\n    }\n    @starting-style {\n      :host(:where(:not([query-context=container]))[mode-md=collapsible]:where([open])) {\n        margin-inline-start: var(--_u-pane-collapsed-offset);\n      }\n      :host(:where(:not([query-context=container]))[mode-md=collapsible]:where([data-align=end][open])) {\n        margin-inline-start: 0;\n        margin-inline-end: var(--_u-pane-collapsed-offset);\n      }\n    }\n    :host(:where(:not([query-context=container]))[mode-md=collapsible]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=collapsible]) .scrim {\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=sidebar]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-z-index, 1030);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-low, rgb(247, 242, 250)));\n      --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));\n      --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);\n      --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);\n      --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);\n    }\n    :host(:where(:not([query-context=container]))[mode-md=sidebar]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: var(--_u-pane-drawer-width);\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n      border-radius: var(--_u-pane-shape-corner);\n    }\n    :host(:where(:not([query-context=container]))[mode-md=sidebar]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=sidebar]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[mode-md=sidebar]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=sidebar]) .scrim {\n      display: block;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=sidebar]:where([open])) .scrim {\n      opacity: var(--u-pane-scrim-opacity, 0.4);\n      pointer-events: auto;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=fullscreen]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-fullscreen-z-index, 1040);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-lowest, rgb(255, 255, 255)));\n      --_u-pane-shape-corner: 0;\n      --_u-pane-shape-corner-end: 0;\n      --_u-pane-box-shadow: none;\n      --_u-pane-drawer-width: 100%;\n      --_u-pane-slide-distance: -100%;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=fullscreen]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: 100%;\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=fullscreen]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=fullscreen]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n    }\n    :host(:where(:not([query-context=container]))[mode-md=fullscreen]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-md=fullscreen]) .scrim {\n      display: none;\n    }\n  }\n  @container (min-width: 840px) {\n    :host(:where([query-context=container])[mode-md=fixed]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n    }\n    :host(:where([query-context=container])[mode-md=fixed]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[mode-md=fixed]) .scrim {\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-md=collapsible]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n      --_u-pane-collapsed-offset: calc(\n        -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))\n      );\n    }\n    :host(:where([query-context=container])[mode-md=collapsible]:where(:not([open]))) {\n      margin-inline-start: var(--_u-pane-collapsed-offset);\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-md=collapsible]:where([data-align=end]:not([open]))) {\n      margin-inline-start: 0;\n      margin-inline-end: var(--_u-pane-collapsed-offset);\n    }\n    @starting-style {\n      :host(:where([query-context=container])[mode-md=collapsible]:where([open])) {\n        margin-inline-start: var(--_u-pane-collapsed-offset);\n      }\n      :host(:where([query-context=container])[mode-md=collapsible]:where([data-align=end][open])) {\n        margin-inline-start: 0;\n        margin-inline-end: var(--_u-pane-collapsed-offset);\n      }\n    }\n    :host(:where([query-context=container])[mode-md=collapsible]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[mode-md=collapsible]) .scrim {\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-md=sidebar]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-z-index, 1030);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-low, rgb(247, 242, 250)));\n      --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));\n      --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);\n      --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);\n      --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);\n    }\n    :host(:where([query-context=container])[mode-md=sidebar]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: var(--_u-pane-drawer-width);\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n      border-radius: var(--_u-pane-shape-corner);\n    }\n    :host(:where([query-context=container])[mode-md=sidebar]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[mode-md=sidebar]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[mode-md=sidebar]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where([query-context=container])[mode-md=sidebar]) .scrim {\n      display: block;\n    }\n    :host(:where([query-context=container])[mode-md=sidebar]:where([open])) .scrim {\n      opacity: var(--u-pane-scrim-opacity, 0.4);\n      pointer-events: auto;\n    }\n    :host(:where([query-context=container])[mode-md=fullscreen]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-fullscreen-z-index, 1040);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-lowest, rgb(255, 255, 255)));\n      --_u-pane-shape-corner: 0;\n      --_u-pane-shape-corner-end: 0;\n      --_u-pane-box-shadow: none;\n      --_u-pane-drawer-width: 100%;\n      --_u-pane-slide-distance: -100%;\n    }\n    :host(:where([query-context=container])[mode-md=fullscreen]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: 100%;\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n    }\n    :host(:where([query-context=container])[mode-md=fullscreen]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[mode-md=fullscreen]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n    }\n    :host(:where([query-context=container])[mode-md=fullscreen]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where([query-context=container])[mode-md=fullscreen]) .scrim {\n      display: none;\n    }\n  }\n  @media (min-width: 1200px) {\n    :host(:where(:not([query-context=container]))[mode-lg=fixed]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=fixed]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=fixed]) .scrim {\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=collapsible]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n      --_u-pane-collapsed-offset: calc(\n        -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))\n      );\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=collapsible]:where(:not([open]))) {\n      margin-inline-start: var(--_u-pane-collapsed-offset);\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=collapsible]:where([data-align=end]:not([open]))) {\n      margin-inline-start: 0;\n      margin-inline-end: var(--_u-pane-collapsed-offset);\n    }\n    @starting-style {\n      :host(:where(:not([query-context=container]))[mode-lg=collapsible]:where([open])) {\n        margin-inline-start: var(--_u-pane-collapsed-offset);\n      }\n      :host(:where(:not([query-context=container]))[mode-lg=collapsible]:where([data-align=end][open])) {\n        margin-inline-start: 0;\n        margin-inline-end: var(--_u-pane-collapsed-offset);\n      }\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=collapsible]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=collapsible]) .scrim {\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=sidebar]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-z-index, 1030);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-low, rgb(247, 242, 250)));\n      --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));\n      --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);\n      --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);\n      --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=sidebar]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: var(--_u-pane-drawer-width);\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n      border-radius: var(--_u-pane-shape-corner);\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=sidebar]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=sidebar]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=sidebar]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=sidebar]) .scrim {\n      display: block;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=sidebar]:where([open])) .scrim {\n      opacity: var(--u-pane-scrim-opacity, 0.4);\n      pointer-events: auto;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=fullscreen]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-fullscreen-z-index, 1040);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-lowest, rgb(255, 255, 255)));\n      --_u-pane-shape-corner: 0;\n      --_u-pane-shape-corner-end: 0;\n      --_u-pane-box-shadow: none;\n      --_u-pane-drawer-width: 100%;\n      --_u-pane-slide-distance: -100%;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=fullscreen]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: 100%;\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=fullscreen]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=fullscreen]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=fullscreen]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-lg=fullscreen]) .scrim {\n      display: none;\n    }\n  }\n  @container (min-width: 1200px) {\n    :host(:where([query-context=container])[mode-lg=fixed]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n    }\n    :host(:where([query-context=container])[mode-lg=fixed]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[mode-lg=fixed]) .scrim {\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-lg=collapsible]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n      --_u-pane-collapsed-offset: calc(\n        -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))\n      );\n    }\n    :host(:where([query-context=container])[mode-lg=collapsible]:where(:not([open]))) {\n      margin-inline-start: var(--_u-pane-collapsed-offset);\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-lg=collapsible]:where([data-align=end]:not([open]))) {\n      margin-inline-start: 0;\n      margin-inline-end: var(--_u-pane-collapsed-offset);\n    }\n    @starting-style {\n      :host(:where([query-context=container])[mode-lg=collapsible]:where([open])) {\n        margin-inline-start: var(--_u-pane-collapsed-offset);\n      }\n      :host(:where([query-context=container])[mode-lg=collapsible]:where([data-align=end][open])) {\n        margin-inline-start: 0;\n        margin-inline-end: var(--_u-pane-collapsed-offset);\n      }\n    }\n    :host(:where([query-context=container])[mode-lg=collapsible]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[mode-lg=collapsible]) .scrim {\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-lg=sidebar]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-z-index, 1030);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-low, rgb(247, 242, 250)));\n      --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));\n      --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);\n      --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);\n      --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);\n    }\n    :host(:where([query-context=container])[mode-lg=sidebar]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: var(--_u-pane-drawer-width);\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n      border-radius: var(--_u-pane-shape-corner);\n    }\n    :host(:where([query-context=container])[mode-lg=sidebar]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[mode-lg=sidebar]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[mode-lg=sidebar]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where([query-context=container])[mode-lg=sidebar]) .scrim {\n      display: block;\n    }\n    :host(:where([query-context=container])[mode-lg=sidebar]:where([open])) .scrim {\n      opacity: var(--u-pane-scrim-opacity, 0.4);\n      pointer-events: auto;\n    }\n    :host(:where([query-context=container])[mode-lg=fullscreen]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-fullscreen-z-index, 1040);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-lowest, rgb(255, 255, 255)));\n      --_u-pane-shape-corner: 0;\n      --_u-pane-shape-corner-end: 0;\n      --_u-pane-box-shadow: none;\n      --_u-pane-drawer-width: 100%;\n      --_u-pane-slide-distance: -100%;\n    }\n    :host(:where([query-context=container])[mode-lg=fullscreen]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: 100%;\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n    }\n    :host(:where([query-context=container])[mode-lg=fullscreen]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[mode-lg=fullscreen]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n    }\n    :host(:where([query-context=container])[mode-lg=fullscreen]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where([query-context=container])[mode-lg=fullscreen]) .scrim {\n      display: none;\n    }\n  }\n  @media (min-width: 1600px) {\n    :host(:where(:not([query-context=container]))[mode-xl=fixed]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=fixed]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=fixed]) .scrim {\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=collapsible]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n      --_u-pane-collapsed-offset: calc(\n        -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))\n      );\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=collapsible]:where(:not([open]))) {\n      margin-inline-start: var(--_u-pane-collapsed-offset);\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=collapsible]:where([data-align=end]:not([open]))) {\n      margin-inline-start: 0;\n      margin-inline-end: var(--_u-pane-collapsed-offset);\n    }\n    @starting-style {\n      :host(:where(:not([query-context=container]))[mode-xl=collapsible]:where([open])) {\n        margin-inline-start: var(--_u-pane-collapsed-offset);\n      }\n      :host(:where(:not([query-context=container]))[mode-xl=collapsible]:where([data-align=end][open])) {\n        margin-inline-start: 0;\n        margin-inline-end: var(--_u-pane-collapsed-offset);\n      }\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=collapsible]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=collapsible]) .scrim {\n      display: none;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=sidebar]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-z-index, 1030);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-low, rgb(247, 242, 250)));\n      --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));\n      --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);\n      --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);\n      --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=sidebar]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: var(--_u-pane-drawer-width);\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n      border-radius: var(--_u-pane-shape-corner);\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=sidebar]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=sidebar]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=sidebar]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=sidebar]) .scrim {\n      display: block;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=sidebar]:where([open])) .scrim {\n      opacity: var(--u-pane-scrim-opacity, 0.4);\n      pointer-events: auto;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=fullscreen]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-fullscreen-z-index, 1040);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-lowest, rgb(255, 255, 255)));\n      --_u-pane-shape-corner: 0;\n      --_u-pane-shape-corner-end: 0;\n      --_u-pane-box-shadow: none;\n      --_u-pane-drawer-width: 100%;\n      --_u-pane-slide-distance: -100%;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=fullscreen]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: 100%;\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=fullscreen]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=fullscreen]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=fullscreen]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where(:not([query-context=container]))[mode-xl=fullscreen]) .scrim {\n      display: none;\n    }\n  }\n  @container (min-width: 1600px) {\n    :host(:where([query-context=container])[mode-xl=fixed]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n    }\n    :host(:where([query-context=container])[mode-xl=fixed]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[mode-xl=fixed]) .scrim {\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-xl=collapsible]) {\n      display: block;\n      position: relative;\n      flex: 0 1 auto;\n      height: auto;\n      inset: auto;\n      z-index: auto;\n      pointer-events: auto;\n      opacity: 1;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n      transition: margin-inline-start var(--u-pane-transition), margin-inline-end var(--u-pane-transition), display var(--u-pane-transition) allow-discrete;\n      --_u-pane-bg-color: var(--_u-pane-variant-bg);\n      --_u-pane-shape-corner: var(--_u-pane-variant-radius);\n      --_u-pane-box-shadow: none;\n      --_u-pane-collapsed-offset: calc(\n        -1 * (var(--u-pane-width, 100%) + var(--u-pane-gap, 16px))\n      );\n    }\n    :host(:where([query-context=container])[mode-xl=collapsible]:where(:not([open]))) {\n      margin-inline-start: var(--_u-pane-collapsed-offset);\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-xl=collapsible]:where([data-align=end]:not([open]))) {\n      margin-inline-start: 0;\n      margin-inline-end: var(--_u-pane-collapsed-offset);\n    }\n    @starting-style {\n      :host(:where([query-context=container])[mode-xl=collapsible]:where([open])) {\n        margin-inline-start: var(--_u-pane-collapsed-offset);\n      }\n      :host(:where([query-context=container])[mode-xl=collapsible]:where([data-align=end][open])) {\n        margin-inline-start: 0;\n        margin-inline-end: var(--_u-pane-collapsed-offset);\n      }\n    }\n    :host(:where([query-context=container])[mode-xl=collapsible]) .container {\n      position: relative;\n      inset: auto;\n      width: auto;\n      transition: none;\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[mode-xl=collapsible]) .scrim {\n      display: none;\n    }\n    :host(:where([query-context=container])[mode-xl=sidebar]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-z-index, 1030);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-low, rgb(247, 242, 250)));\n      --_u-pane-shape-corner: var(--u-pane-overlay-corner-shape, var(--u-shape-corner-large, 16px));\n      --_u-pane-box-shadow: 0 8px 24px rgba(0, 0, 0, .18);\n      --_u-pane-drawer-width: min(var(--u-pane-mobile-width, 360px), 85%);\n      --_u-pane-slide-distance: calc(var(--_u-pane-drawer-width) * -1);\n    }\n    :host(:where([query-context=container])[mode-xl=sidebar]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: var(--_u-pane-drawer-width);\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n      border-radius: var(--_u-pane-shape-corner);\n    }\n    :host(:where([query-context=container])[mode-xl=sidebar]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[mode-xl=sidebar]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[mode-xl=sidebar]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where([query-context=container])[mode-xl=sidebar]) .scrim {\n      display: block;\n    }\n    :host(:where([query-context=container])[mode-xl=sidebar]:where([open])) .scrim {\n      opacity: var(--u-pane-scrim-opacity, 0.4);\n      pointer-events: auto;\n    }\n    :host(:where([query-context=container])[mode-xl=fullscreen]) {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: var(--u-pane-fullscreen-z-index, 1040);\n      pointer-events: none;\n      flex: none;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: none;\n      --_u-pane-bg-color: var(--u-pane-overlay-bg-color,\n        var(--u-color-surface-container-lowest, rgb(255, 255, 255)));\n      --_u-pane-shape-corner: 0;\n      --_u-pane-shape-corner-end: 0;\n      --_u-pane-box-shadow: none;\n      --_u-pane-drawer-width: 100%;\n      --_u-pane-slide-distance: -100%;\n    }\n    :host(:where([query-context=container])[mode-xl=fullscreen]) .container {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      width: 100%;\n      transition: inset var(--u-pane-transition);\n      pointer-events: auto;\n    }\n    :host(:where([query-context=container])[mode-xl=fullscreen]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[mode-xl=fullscreen]:where([data-align=end])) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n    }\n    :host(:where([query-context=container])[mode-xl=fullscreen]:where([data-align=end][open])) .container {\n      inset-inline-end: 0;\n    }\n    :host(:where([query-context=container])[mode-xl=fullscreen]) .scrim {\n      display: none;\n    }\n  }\n  :host([animation=none]),\n  :host([animation=none]) .container,\n  :host([animation=none]) .scrim {\n    transition: none;\n  }\n\n  :host([animation=fade]) .container {\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    transition: opacity var(--u-pane-transition);\n    opacity: 1;\n  }\n\n  :host([animation=fade]:where(:not([open]))) .container {\n    opacity: 0;\n  }\n\n  :host([animation=exit-start]) .container {\n    inset-inline-start: var(--_u-pane-slide-distance);\n    inset-inline-end: auto;\n    transition: inset var(--u-pane-transition);\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n    border-start-end-radius: var(--_u-pane-shape-corner-end);\n    border-end-end-radius: var(--_u-pane-shape-corner-end);\n  }\n\n  :host([animation=exit-start]:where([open])) .container {\n    inset-inline-start: 0;\n  }\n\n  :host([animation=exit-end]) .container {\n    inset-inline-start: auto;\n    inset-inline-end: var(--_u-pane-slide-distance);\n    transition: inset var(--u-pane-transition);\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n    border-start-start-radius: var(--_u-pane-shape-corner-end);\n    border-end-start-radius: var(--_u-pane-shape-corner-end);\n  }\n\n  :host([animation=exit-end]:where([open])) .container {\n    inset-inline-end: 0;\n  }\n\n  @media (min-width: 600px) {\n    :host(:where(:not([query-context=container]))[animation-sm=none]),\n    :host(:where(:not([query-context=container]))[animation-sm=none]) .container,\n    :host(:where(:not([query-context=container]))[animation-sm=none]) .scrim {\n      transition: none;\n    }\n    :host(:where(:not([query-context=container]))[animation-sm=fade]) .container {\n      inset-inline-start: 0;\n      inset-inline-end: auto;\n      transition: opacity var(--u-pane-transition);\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[animation-sm=fade]:where(:not([open]))) .container {\n      opacity: 0;\n    }\n    :host(:where(:not([query-context=container]))[animation-sm=exit-start]) .container {\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      transition: inset var(--u-pane-transition);\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-start-end-radius: var(--_u-pane-shape-corner-end);\n      border-end-end-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[animation-sm=exit-start]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[animation-sm=exit-end]) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      transition: inset var(--u-pane-transition);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[animation-sm=exit-end]:where([open])) .container {\n      inset-inline-end: 0;\n    }\n  }\n  @container (min-width: 600px) {\n    :host(:where([query-context=container])[animation-sm=none]),\n    :host(:where([query-context=container])[animation-sm=none]) .container,\n    :host(:where([query-context=container])[animation-sm=none]) .scrim {\n      transition: none;\n    }\n    :host(:where([query-context=container])[animation-sm=fade]) .container {\n      inset-inline-start: 0;\n      inset-inline-end: auto;\n      transition: opacity var(--u-pane-transition);\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[animation-sm=fade]:where(:not([open]))) .container {\n      opacity: 0;\n    }\n    :host(:where([query-context=container])[animation-sm=exit-start]) .container {\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      transition: inset var(--u-pane-transition);\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-start-end-radius: var(--_u-pane-shape-corner-end);\n      border-end-end-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[animation-sm=exit-start]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[animation-sm=exit-end]) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      transition: inset var(--u-pane-transition);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[animation-sm=exit-end]:where([open])) .container {\n      inset-inline-end: 0;\n    }\n  }\n  @media (min-width: 840px) {\n    :host(:where(:not([query-context=container]))[animation-md=none]),\n    :host(:where(:not([query-context=container]))[animation-md=none]) .container,\n    :host(:where(:not([query-context=container]))[animation-md=none]) .scrim {\n      transition: none;\n    }\n    :host(:where(:not([query-context=container]))[animation-md=fade]) .container {\n      inset-inline-start: 0;\n      inset-inline-end: auto;\n      transition: opacity var(--u-pane-transition);\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[animation-md=fade]:where(:not([open]))) .container {\n      opacity: 0;\n    }\n    :host(:where(:not([query-context=container]))[animation-md=exit-start]) .container {\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      transition: inset var(--u-pane-transition);\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-start-end-radius: var(--_u-pane-shape-corner-end);\n      border-end-end-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[animation-md=exit-start]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[animation-md=exit-end]) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      transition: inset var(--u-pane-transition);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[animation-md=exit-end]:where([open])) .container {\n      inset-inline-end: 0;\n    }\n  }\n  @container (min-width: 840px) {\n    :host(:where([query-context=container])[animation-md=none]),\n    :host(:where([query-context=container])[animation-md=none]) .container,\n    :host(:where([query-context=container])[animation-md=none]) .scrim {\n      transition: none;\n    }\n    :host(:where([query-context=container])[animation-md=fade]) .container {\n      inset-inline-start: 0;\n      inset-inline-end: auto;\n      transition: opacity var(--u-pane-transition);\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[animation-md=fade]:where(:not([open]))) .container {\n      opacity: 0;\n    }\n    :host(:where([query-context=container])[animation-md=exit-start]) .container {\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      transition: inset var(--u-pane-transition);\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-start-end-radius: var(--_u-pane-shape-corner-end);\n      border-end-end-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[animation-md=exit-start]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[animation-md=exit-end]) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      transition: inset var(--u-pane-transition);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[animation-md=exit-end]:where([open])) .container {\n      inset-inline-end: 0;\n    }\n  }\n  @media (min-width: 1200px) {\n    :host(:where(:not([query-context=container]))[animation-lg=none]),\n    :host(:where(:not([query-context=container]))[animation-lg=none]) .container,\n    :host(:where(:not([query-context=container]))[animation-lg=none]) .scrim {\n      transition: none;\n    }\n    :host(:where(:not([query-context=container]))[animation-lg=fade]) .container {\n      inset-inline-start: 0;\n      inset-inline-end: auto;\n      transition: opacity var(--u-pane-transition);\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[animation-lg=fade]:where(:not([open]))) .container {\n      opacity: 0;\n    }\n    :host(:where(:not([query-context=container]))[animation-lg=exit-start]) .container {\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      transition: inset var(--u-pane-transition);\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-start-end-radius: var(--_u-pane-shape-corner-end);\n      border-end-end-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[animation-lg=exit-start]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[animation-lg=exit-end]) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      transition: inset var(--u-pane-transition);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[animation-lg=exit-end]:where([open])) .container {\n      inset-inline-end: 0;\n    }\n  }\n  @container (min-width: 1200px) {\n    :host(:where([query-context=container])[animation-lg=none]),\n    :host(:where([query-context=container])[animation-lg=none]) .container,\n    :host(:where([query-context=container])[animation-lg=none]) .scrim {\n      transition: none;\n    }\n    :host(:where([query-context=container])[animation-lg=fade]) .container {\n      inset-inline-start: 0;\n      inset-inline-end: auto;\n      transition: opacity var(--u-pane-transition);\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[animation-lg=fade]:where(:not([open]))) .container {\n      opacity: 0;\n    }\n    :host(:where([query-context=container])[animation-lg=exit-start]) .container {\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      transition: inset var(--u-pane-transition);\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-start-end-radius: var(--_u-pane-shape-corner-end);\n      border-end-end-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[animation-lg=exit-start]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[animation-lg=exit-end]) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      transition: inset var(--u-pane-transition);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[animation-lg=exit-end]:where([open])) .container {\n      inset-inline-end: 0;\n    }\n  }\n  @media (min-width: 1600px) {\n    :host(:where(:not([query-context=container]))[animation-xl=none]),\n    :host(:where(:not([query-context=container]))[animation-xl=none]) .container,\n    :host(:where(:not([query-context=container]))[animation-xl=none]) .scrim {\n      transition: none;\n    }\n    :host(:where(:not([query-context=container]))[animation-xl=fade]) .container {\n      inset-inline-start: 0;\n      inset-inline-end: auto;\n      transition: opacity var(--u-pane-transition);\n      opacity: 1;\n    }\n    :host(:where(:not([query-context=container]))[animation-xl=fade]:where(:not([open]))) .container {\n      opacity: 0;\n    }\n    :host(:where(:not([query-context=container]))[animation-xl=exit-start]) .container {\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      transition: inset var(--u-pane-transition);\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-start-end-radius: var(--_u-pane-shape-corner-end);\n      border-end-end-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[animation-xl=exit-start]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where(:not([query-context=container]))[animation-xl=exit-end]) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      transition: inset var(--u-pane-transition);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where(:not([query-context=container]))[animation-xl=exit-end]:where([open])) .container {\n      inset-inline-end: 0;\n    }\n  }\n  @container (min-width: 1600px) {\n    :host(:where([query-context=container])[animation-xl=none]),\n    :host(:where([query-context=container])[animation-xl=none]) .container,\n    :host(:where([query-context=container])[animation-xl=none]) .scrim {\n      transition: none;\n    }\n    :host(:where([query-context=container])[animation-xl=fade]) .container {\n      inset-inline-start: 0;\n      inset-inline-end: auto;\n      transition: opacity var(--u-pane-transition);\n      opacity: 1;\n    }\n    :host(:where([query-context=container])[animation-xl=fade]:where(:not([open]))) .container {\n      opacity: 0;\n    }\n    :host(:where([query-context=container])[animation-xl=exit-start]) .container {\n      inset-inline-start: var(--_u-pane-slide-distance);\n      inset-inline-end: auto;\n      transition: inset var(--u-pane-transition);\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-start-end-radius: var(--_u-pane-shape-corner-end);\n      border-end-end-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[animation-xl=exit-start]:where([open])) .container {\n      inset-inline-start: 0;\n    }\n    :host(:where([query-context=container])[animation-xl=exit-end]) .container {\n      inset-inline-start: auto;\n      inset-inline-end: var(--_u-pane-slide-distance);\n      transition: inset var(--u-pane-transition);\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-start-start-radius: var(--_u-pane-shape-corner-end);\n      border-end-start-radius: var(--_u-pane-shape-corner-end);\n    }\n    :host(:where([query-context=container])[animation-xl=exit-end]:where([open])) .container {\n      inset-inline-end: 0;\n    }\n  }\n`;\n"]}

package/scaffold/scaffold.d.ts

@@ -0,0 +1,45 @@
+import { HTMLTemplateResult, LitElement, PropertyValues } from 'lit';
+/**
+ * Layout container that hosts the top app bar, navigation bar, a
+ * flex-row body that accepts plain content and any number of
+ * `u-pane` children, and a floating FAB. Panes auto-arrange via
+ * `display: flex` + `gap` on the body row; their behaviour (fixed,
+ * collapsible, sidebar, fullscreen) is owned by `u-pane` itself.
+ *
+ * The scaffold has one piece of pane-aware bookkeeping: it watches the
+ * children and writes `data-align="start|end"` on each `u-pane`
+ * depending on whether the pane appears before (`start`) or after
+ * (`end`) the first non-pane child in the light DOM. The pane reads
+ * that attribute to pick the slide direction in `sidebar` / `fullscreen`
+ * modes. When there is no non-pane content, every pane defaults to
+ * `start`.
+ *
+ * The scaffold establishes a `container-type: inline-size` named
+ * container (`u-scaffold`) so panes with `query-context="container"`
+ * can react to the scaffold's own size rather than the viewport.
+ *
+ * @slot top-bar - the top app bar.
+ * @slot - panes (`u-pane`) and the page content as siblings. Non-pane
+ *   children act as the body and flex to fill the remaining space.
+ * @slot bottom-bar - the navigation bar (or any bottom-anchored bar).
+ * @slot fab - floating action button area, anchored above the bottom bar.
+ *
+ * @csspart top-bar
+ * @csspart bottom-bar
+ * @csspart fab
+ * @csspart body-row
+ */
+export declare class Scaffold extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    private readonly _bottomBar;
+    protected render(): HTMLTemplateResult;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-scaffold': Scaffold;
+    }
+}
+//# sourceMappingURL=scaffold.d.ts.map

package/scaffold/scaffold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../../src/scaffold/scaffold.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IAG9C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;cAKvB,MAAM,IAAI,kBAAkB;cAqB5B,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAiB/D,oBAAoB,IAAI,IAAI;CAsGtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,QAAQ,CAAC;KACxB;CACF"}

package/scaffold/scaffold.js

@@ -0,0 +1,170 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './scaffold.styles.js';
+/**
+ * Layout container that hosts the top app bar, navigation bar, a
+ * flex-row body that accepts plain content and any number of
+ * `u-pane` children, and a floating FAB. Panes auto-arrange via
+ * `display: flex` + `gap` on the body row; their behaviour (fixed,
+ * collapsible, sidebar, fullscreen) is owned by `u-pane` itself.
+ *
+ * The scaffold has one piece of pane-aware bookkeeping: it watches the
+ * children and writes `data-align="start|end"` on each `u-pane`
+ * depending on whether the pane appears before (`start`) or after
+ * (`end`) the first non-pane child in the light DOM. The pane reads
+ * that attribute to pick the slide direction in `sidebar` / `fullscreen`
+ * modes. When there is no non-pane content, every pane defaults to
+ * `start`.
+ *
+ * The scaffold establishes a `container-type: inline-size` named
+ * container (`u-scaffold`) so panes with `query-context="container"`
+ * can react to the scaffold's own size rather than the viewport.
+ *
+ * @slot top-bar - the top app bar.
+ * @slot - panes (`u-pane`) and the page content as siblings. Non-pane
+ *   children act as the body and flex to fill the remaining space.
+ * @slot bottom-bar - the navigation bar (or any bottom-anchored bar).
+ * @slot fab - floating action button area, anchored above the bottom bar.
+ *
+ * @csspart top-bar
+ * @csspart bottom-bar
+ * @csspart fab
+ * @csspart body-row
+ */
+let Scaffold = class Scaffold extends LitElement {
+    static { this.styles = [baseStyles, styles]; }
+    #bottomBarObserver = null;
+    #paneChildObserver = null;
+    render() {
+        return html `
+      <div class="layout">
+        <div class="top-bar-row" part="top-bar">
+          <slot name="top-bar" @slotchange=${this.#autoSetAbsolutePosition}></slot>
+        </div>
+        <div class="body-row" part="body-row">
+          <slot @slotchange=${this.#syncPaneAlignment}></slot>
+        </div>
+        <div class="bottom-bar-row" part="bottom-bar">
+          <slot
+            name="bottom-bar"
+            @slotchange=${this.#handleBottomBarSlotChange}></slot>
+        </div>
+      </div>
+      <div class="fab" part="fab">
+        <slot name="fab"></slot>
+      </div>
+    `;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.#measureBottomBar();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.#bottomBarObserver = new ResizeObserver(() => this.#measureBottomBar());
+            this.#bottomBarObserver.observe(this._bottomBar);
+        }
+        this.#syncPaneAlignment();
+        this.#paneChildObserver = new MutationObserver(() => this.#syncPaneAlignment());
+        this.#paneChildObserver.observe(this, {
+            childList: true,
+            subtree: false,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#bottomBarObserver?.disconnect();
+        this.#bottomBarObserver = null;
+        this.#paneChildObserver?.disconnect();
+        this.#paneChildObserver = null;
+    }
+    /**
+     * Walk the light-DOM children once and stamp `data-align="start|end"`
+     * on each `u-pane` based on its position in the body row.
+     *
+     * - If non-pane body content is present: panes appearing before it are
+     *   `start`, panes appearing after are `end`.
+     * - If there is no body content: the last pane is `end` (so a trailing
+     *   detail pane animates from the correct side in modal modes), and
+     *   every other pane is `start`. A single pane stays `start`.
+     *
+     * The pane's CSS uses `data-align` as the default slide direction for
+     * `animation="exit"` (the default). Consumers can override per-pane
+     * with `animation="exit-start"` / `animation="exit-end"`.
+     */
+    #syncPaneAlignment = () => {
+        const children = Array.from(this.children);
+        let bodyIndex = -1;
+        const paneIndices = [];
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            const slot = child.getAttribute('slot');
+            // Bars and FABs live in named slots — ignore them when locating
+            // the body row contents.
+            if (slot === 'top-bar' || slot === 'bottom-bar' || slot === 'fab') {
+                continue;
+            }
+            if (child.tagName === 'U-PANE') {
+                paneIndices.push(i);
+            }
+            else if (bodyIndex === -1) {
+                bodyIndex = i;
+            }
+        }
+        const hasBody = bodyIndex !== -1;
+        const lastPaneIndex = paneIndices.length > 1
+            ? paneIndices[paneIndices.length - 1]
+            : -1;
+        for (const i of paneIndices) {
+            let align;
+            if (hasBody) {
+                align = i > bodyIndex ? 'end' : 'start';
+            }
+            else {
+                align = i === lastPaneIndex ? 'end' : 'start';
+            }
+            const child = children[i];
+            if (child.getAttribute('data-align') !== align) {
+                child.setAttribute('data-align', align);
+            }
+        }
+    };
+    #handleBottomBarSlotChange = (event) => {
+        this.#autoSetAbsolutePosition(event);
+        this.#measureBottomBar();
+    };
+    #measureBottomBar = () => {
+        if (!this._bottomBar) {
+            return;
+        }
+        const height = this._bottomBar.offsetHeight;
+        this.style.setProperty('--_u-scaffold-bottom-bar-height', `${height}px`);
+    };
+    /**
+     * Ensures a slotted top/bottom bar uses `position="absolute"` so it
+     * anchors against the scaffold host. Only overrides the default
+     * `'fixed'` positioning — any explicit `'static'` or `'absolute'` set by
+     * the consumer (or at runtime) is respected.
+     */
+    #autoSetAbsolutePosition = (event) => {
+        const slot = event.target;
+        for (const el of slot.assignedElements({ flatten: true })) {
+            const tag = el.tagName;
+            if (tag !== 'U-TOP-APP-BAR' && tag !== 'U-NAVIGATION-BAR') {
+                continue;
+            }
+            const bar = el;
+            if (bar.position === 'fixed') {
+                bar.position = 'absolute';
+            }
+        }
+    };
+};
+__decorate([
+    query('.bottom-bar-row', true)
+], Scaffold.prototype, "_bottomBar", void 0);
+Scaffold = __decorate([
+    customElement('u-scaffold')
+], Scaffold);
+export { Scaffold };
+//# sourceMappingURL=scaffold.js.map

package/scaffold/scaffold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold.js","sourceRoot":"","sources":["../../src/scaffold/scaffold.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;aACtB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IAK9C,kBAAkB,GAA0B,IAAI,CAAC;IACjD,kBAAkB,GAA4B,IAAI,CAAC;IAEhC,MAAM;QACvB,OAAO,IAAI,CAAA;;;6CAG8B,IAAI,CAAC,wBAAwB;;;8BAG5C,IAAI,CAAC,kBAAkB;;;;;0BAK3B,IAAI,CAAC,0BAA0B;;;;;;KAMpD,CAAC;IACJ,CAAC;IAEkB,YAAY,CAAC,iBAAiC;QAC/D,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzB,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE,CAAC;YAC1C,IAAI,CAAC,kBAAkB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;YAC7E,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;QAChF,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,EAAE;YACpC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;IACL,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,kBAAkB,EAAE,UAAU,EAAE,CAAC;QACtC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAC/B,IAAI,CAAC,kBAAkB,EAAE,UAAU,EAAE,CAAC;QACtC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED;;;;;;;;;;;;;OAaG;IACM,kBAAkB,GAAG,GAAS,EAAE;QACvC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,IAAI,SAAS,GAAG,CAAC,CAAC,CAAC;QACnB,MAAM,WAAW,GAAa,EAAE,CAAC;QAEjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC1B,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAExC,gEAAgE;YAChE,yBAAyB;YACzB,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,YAAY,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;gBAClE,SAAS;YACX,CAAC;YAED,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;gBAC/B,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACtB,CAAC;iBAAM,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE,CAAC;gBAC5B,SAAS,GAAG,CAAC,CAAC;YAChB,CAAC;QACH,CAAC;QAED,MAAM,OAAO,GAAG,SAAS,KAAK,CAAC,CAAC,CAAC;QACjC,MAAM,aAAa,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC;YAC1C,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;YACrC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEP,KAAK,MAAM,CAAC,IAAI,WAAW,EAAE,CAAC;YAC5B,IAAI,KAAsB,CAAC;YAE3B,IAAI,OAAO,EAAE,CAAC;gBACZ,KAAK,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACN,KAAK,GAAG,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;YAChD,CAAC;YAED,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC1B,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,EAAE,CAAC;gBAC/C,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;YAC1C,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEO,0BAA0B,GAAG,CAAC,KAAY,EAAQ,EAAE;QAC3D,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEO,iBAAiB,GAAG,GAAS,EAAE;QACtC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;QAC5C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF;;;;;OAKG;IACM,wBAAwB,GAAG,CAAC,KAAY,EAAQ,EAAE;QACzD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAE7C,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;YAC1D,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC;YAEvB,IAAI,GAAG,KAAK,eAAe,IAAI,GAAG,KAAK,kBAAkB,EAAE,CAAC;gBAC1D,SAAS;YACX,CAAC;YAED,MAAM,GAAG,GAAG,EAA6D,CAAC;YAE1E,IAAI,GAAG,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;gBAC7B,GAAG,CAAC,QAAQ,GAAG,UAAU,CAAC;YAC5B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;;AAhJe;IADhB,KAAK,CAAC,iBAAiB,EAAE,IAAI,CAAC;4CACW;AAJ/B,QAAQ;IADpB,aAAa,CAAC,YAAY,CAAC;GACf,QAAQ,CAqJpB","sourcesContent":["import { html, HTMLTemplateResult, LitElement, PropertyValues } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './scaffold.styles.js';\n\n/**\n * Layout container that hosts the top app bar, navigation bar, a\n * flex-row body that accepts plain content and any number of\n * `u-pane` children, and a floating FAB. Panes auto-arrange via\n * `display: flex` + `gap` on the body row; their behaviour (fixed,\n * collapsible, sidebar, fullscreen) is owned by `u-pane` itself.\n *\n * The scaffold has one piece of pane-aware bookkeeping: it watches the\n * children and writes `data-align=\"start|end\"` on each `u-pane`\n * depending on whether the pane appears before (`start`) or after\n * (`end`) the first non-pane child in the light DOM. The pane reads\n * that attribute to pick the slide direction in `sidebar` / `fullscreen`\n * modes. When there is no non-pane content, every pane defaults to\n * `start`.\n *\n * The scaffold establishes a `container-type: inline-size` named\n * container (`u-scaffold`) so panes with `query-context=\"container\"`\n * can react to the scaffold's own size rather than the viewport.\n *\n * @slot top-bar - the top app bar.\n * @slot - panes (`u-pane`) and the page content as siblings. Non-pane\n *   children act as the body and flex to fill the remaining space.\n * @slot bottom-bar - the navigation bar (or any bottom-anchored bar).\n * @slot fab - floating action button area, anchored above the bottom bar.\n *\n * @csspart top-bar\n * @csspart bottom-bar\n * @csspart fab\n * @csspart body-row\n */\n@customElement('u-scaffold')\nexport class Scaffold extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  @query('.bottom-bar-row', true)\n  private readonly _bottomBar!: HTMLElement;\n\n  #bottomBarObserver: ResizeObserver | null = null;\n  #paneChildObserver: MutationObserver | null = null;\n\n  protected override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"layout\">\n        <div class=\"top-bar-row\" part=\"top-bar\">\n          <slot name=\"top-bar\" @slotchange=${this.#autoSetAbsolutePosition}></slot>\n        </div>\n        <div class=\"body-row\" part=\"body-row\">\n          <slot @slotchange=${this.#syncPaneAlignment}></slot>\n        </div>\n        <div class=\"bottom-bar-row\" part=\"bottom-bar\">\n          <slot\n            name=\"bottom-bar\"\n            @slotchange=${this.#handleBottomBarSlotChange}></slot>\n        </div>\n      </div>\n      <div class=\"fab\" part=\"fab\">\n        <slot name=\"fab\"></slot>\n      </div>\n    `;\n  }\n\n  protected override firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties);\n    this.#measureBottomBar();\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.#bottomBarObserver = new ResizeObserver(() => this.#measureBottomBar());\n      this.#bottomBarObserver.observe(this._bottomBar);\n    }\n\n    this.#syncPaneAlignment();\n    this.#paneChildObserver = new MutationObserver(() => this.#syncPaneAlignment());\n    this.#paneChildObserver.observe(this, {\n      childList: true,\n      subtree: false,\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#bottomBarObserver?.disconnect();\n    this.#bottomBarObserver = null;\n    this.#paneChildObserver?.disconnect();\n    this.#paneChildObserver = null;\n  }\n\n  /**\n   * Walk the light-DOM children once and stamp `data-align=\"start|end\"`\n   * on each `u-pane` based on its position in the body row.\n   *\n   * - If non-pane body content is present: panes appearing before it are\n   *   `start`, panes appearing after are `end`.\n   * - If there is no body content: the last pane is `end` (so a trailing\n   *   detail pane animates from the correct side in modal modes), and\n   *   every other pane is `start`. A single pane stays `start`.\n   *\n   * The pane's CSS uses `data-align` as the default slide direction for\n   * `animation=\"exit\"` (the default). Consumers can override per-pane\n   * with `animation=\"exit-start\"` / `animation=\"exit-end\"`.\n   */\n  readonly #syncPaneAlignment = (): void => {\n    const children = Array.from(this.children);\n    let bodyIndex = -1;\n    const paneIndices: number[] = [];\n\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i];\n      const slot = child.getAttribute('slot');\n\n      // Bars and FABs live in named slots — ignore them when locating\n      // the body row contents.\n      if (slot === 'top-bar' || slot === 'bottom-bar' || slot === 'fab') {\n        continue;\n      }\n\n      if (child.tagName === 'U-PANE') {\n        paneIndices.push(i);\n      } else if (bodyIndex === -1) {\n        bodyIndex = i;\n      }\n    }\n\n    const hasBody = bodyIndex !== -1;\n    const lastPaneIndex = paneIndices.length > 1\n      ? paneIndices[paneIndices.length - 1]\n      : -1;\n\n    for (const i of paneIndices) {\n      let align: 'start' | 'end';\n\n      if (hasBody) {\n        align = i > bodyIndex ? 'end' : 'start';\n      } else {\n        align = i === lastPaneIndex ? 'end' : 'start';\n      }\n\n      const child = children[i];\n      if (child.getAttribute('data-align') !== align) {\n        child.setAttribute('data-align', align);\n      }\n    }\n  };\n\n  readonly #handleBottomBarSlotChange = (event: Event): void => {\n    this.#autoSetAbsolutePosition(event);\n    this.#measureBottomBar();\n  };\n\n  readonly #measureBottomBar = (): void => {\n    if (!this._bottomBar) {\n      return;\n    }\n\n    const height = this._bottomBar.offsetHeight;\n    this.style.setProperty('--_u-scaffold-bottom-bar-height', `${height}px`);\n  };\n\n  /**\n   * Ensures a slotted top/bottom bar uses `position=\"absolute\"` so it\n   * anchors against the scaffold host. Only overrides the default\n   * `'fixed'` positioning — any explicit `'static'` or `'absolute'` set by\n   * the consumer (or at runtime) is respected.\n   */\n  readonly #autoSetAbsolutePosition = (event: Event): void => {\n    const slot = event.target as HTMLSlotElement;\n\n    for (const el of slot.assignedElements({ flatten: true })) {\n      const tag = el.tagName;\n\n      if (tag !== 'U-TOP-APP-BAR' && tag !== 'U-NAVIGATION-BAR') {\n        continue;\n      }\n\n      const bar = el as Element & { position: 'fixed' | 'absolute' | 'static' };\n\n      if (bar.position === 'fixed') {\n        bar.position = 'absolute';\n      }\n    }\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-scaffold': Scaffold;\n  }\n}\n"]}

package/scaffold/scaffold.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=scaffold.styles.d.ts.map

package/scaffold/scaffold.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold.styles.d.ts","sourceRoot":"","sources":["../../src/scaffold/scaffold.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkElB,CAAC"}

package/scaffold/scaffold.styles.js

@@ -0,0 +1,69 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    contain: layout paint style;
+    isolation: isolate;
+    background-color: var(--u-scaffold-container-color, var(--u-color-body, transparent));
+    container-type: inline-size;
+    container-name: u-scaffold;
+  }
+
+  @media (min-width: 840px) {
+    :host {
+      --u-pane-padding: 16px;
+    }
+  }
+  .layout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .top-bar-row,
+  .bottom-bar-row {
+    position: relative;
+    flex: 0 0 auto;
+  }
+
+  .body-row {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    gap: var(--u-pane-gap, 16px);
+    flex: 1 1 auto;
+    min-height: 0;
+    width: 100%;
+    padding: 0 var(--u-pane-padding, 0);
+    padding-block-end: var(--u-pane-padding, 0);
+  }
+
+  ::slotted(:not(u-pane)) {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .fab {
+    position: absolute;
+    inset-inline-end: var(--u-scaffold-fab-inline-offset, 16px);
+    inset-block-end: calc(var(--u-scaffold-fab-block-offset, 16px) + var(--_u-scaffold-bottom-bar-height, 0px));
+    z-index: 5;
+    pointer-events: none;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    --u-fab-menu-toggle-margin: 0;
+  }
+
+  .fab ::slotted(u-fab) {
+    pointer-events: auto;
+  }
+`;
+//# sourceMappingURL=scaffold.styles.js.map

package/scaffold/scaffold.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaffold.styles.js","sourceRoot":"","sources":["../../src/scaffold/scaffold.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    contain: layout paint style;\n    isolation: isolate;\n    background-color: var(--u-scaffold-container-color, var(--u-color-body, transparent));\n    container-type: inline-size;\n    container-name: u-scaffold;\n  }\n\n  @media (min-width: 840px) {\n    :host {\n      --u-pane-padding: 16px;\n    }\n  }\n  .layout {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n  }\n\n  .top-bar-row,\n  .bottom-bar-row {\n    position: relative;\n    flex: 0 0 auto;\n  }\n\n  .body-row {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    gap: var(--u-pane-gap, 16px);\n    flex: 1 1 auto;\n    min-height: 0;\n    width: 100%;\n    padding: 0 var(--u-pane-padding, 0);\n    padding-block-end: var(--u-pane-padding, 0);\n  }\n\n  ::slotted(:not(u-pane)) {\n    flex: 1 1 0;\n    min-width: 0;\n    min-height: 0;\n  }\n\n  .fab {\n    position: absolute;\n    inset-inline-end: var(--u-scaffold-fab-inline-offset, 16px);\n    inset-block-end: calc(var(--u-scaffold-fab-block-offset, 16px) + var(--_u-scaffold-bottom-bar-height, 0px));\n    z-index: 5;\n    pointer-events: none;\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-end;\n    --u-fab-menu-toggle-margin: 0;\n  }\n\n  .fab ::slotted(u-fab) {\n    pointer-events: auto;\n  }\n`;\n"]}

package/scaffold/scroll-container-context.d.ts

@@ -0,0 +1,4 @@
+export declare const scrollContainerContext: {
+    __context__: HTMLElement | undefined;
+};
+//# sourceMappingURL=scroll-container-context.d.ts.map

package/scaffold/scroll-container-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-container-context.d.ts","sourceRoot":"","sources":["../../src/scaffold/scroll-container-context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;CACuC,CAAC"}

package/scaffold/scroll-container-context.js

@@ -0,0 +1,3 @@
+import { createContext } from '@lit/context';
+export const scrollContainerContext = createContext(Symbol('scrollContainerContext'));
+//# sourceMappingURL=scroll-container-context.js.map

package/scaffold/scroll-container-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-container-context.js","sourceRoot":"","sources":["../../src/scaffold/scroll-container-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,MAAM,sBAAsB,GACjC,aAAa,CAA0B,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit/context';\n\nexport const scrollContainerContext =\n  createContext<HTMLElement | undefined>(Symbol('scrollContainerContext'));\n"]}

package/scss/utilities/_divider.scss

@@ -6,6 +6,10 @@
   height: var(--u-divider-thickness, 1px);
   background-color: var(--u-divider-color, currentColor);
   opacity: var(--u-divider-opacity, .4);
+  // Dividers are 1px and should never shrink. Without this, dropping a
+  // divider into a flex-column container (e.g. the expanded nav-rail's
+  // overflowing item list) collapses it to 0.
+  flex-shrink: 0;
 }
 
 .u-divider {

package/search/search.d.ts

@@ -1,9 +1,12 @@
 import { PropertyValues } from '@lit/reactive-element';
 import { HTMLTemplateResult } from 'lit';
-import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
-export declare class UmSearch extends UmNativeTextFieldWrapper {
+import { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+export declare class Search extends NativeTextFieldWrapper {
     #private;
     static styles: import("lit").CSSResult[];
+    /**
+     * The positioning strategy of the search bar
+     */
     position: 'fixed' | 'absolute' | 'static';
     input: HTMLInputElement;
     protected renderControl(): HTMLTemplateResult;
@@ -12,7 +15,7 @@ export declare class UmSearch extends UmNativeTextFieldWrapper {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-search': UmSearch;
+        'u-search': Search;
     }
 }
 //# sourceMappingURL=search.d.ts.map

package/search/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/search/search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AAGxG,qBACa,QAAS,SAAQ,wBAAwB;;IAEpD,OAAgB,MAAM,4BAAwB;IAG9C,QAAQ,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEpC,KAAK,EAAG,gBAAgB,CAAC;cAItB,aAAa,IAAI,kBAAkB;IAI7C,MAAM,IAAI,kBAAkB;IA0C5B,YAAY,CAAC,iBAAiB,EAAE,cAAc;CAUxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/search/search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AAGtG,qBACa,MAAO,SAAQ,sBAAsB;;IAEhD,OAAgB,MAAM,4BAAwB;IAE9C;;OAEG;IAEH,QAAQ,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAW;IAEpC,KAAK,EAAG,gBAAgB,CAAC;cAItB,aAAa,IAAI,kBAAkB;IAI7C,MAAM,IAAI,kBAAkB;IA0C5B,YAAY,CAAC,iBAAiB,EAAE,cAAc;CAUxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}

package/search/search.js

@@ -4,11 +4,14 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
-import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
 import { styles } from './search.styles.js';
-let UmSearch = class UmSearch extends UmNativeTextFieldWrapper {
+let Search = class Search extends NativeTextFieldWrapper {
     constructor() {
         super(...arguments);
+        /**
+         * The positioning strategy of the search bar
+         */
         this.position = 'fixed';
         this.#containerSizeObserver = null;
     }
@@ -67,12 +70,12 @@ let UmSearch = class UmSearch extends UmNativeTextFieldWrapper {
 };
 __decorate([
     property({ reflect: true })
-], UmSearch.prototype, "position", void 0);
+], Search.prototype, "position", void 0);
 __decorate([
     query('input')
-], UmSearch.prototype, "input", void 0);
-UmSearch = __decorate([
+], Search.prototype, "input", void 0);
+Search = __decorate([
     customElement('u-search')
-], UmSearch);
-export { UmSearch };
+], Search);
+export { Search };
 //# sourceMappingURL=search.js.map

package/search/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/search/search.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AACxG,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,wBAAwB;IAA/C;;QAKL,aAAQ,GAAoC,OAAO,CAAC;QAIpD,2BAAsB,GAA0B,IAAI,CAAC;IA0DvD,CAAC;aAjEiB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IAO9C,sBAAsB,CAA+B;IAElC,aAAa;QAC9B,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC;YACvB,iBAAiB,EAAE,IAAI;SACxB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,OAAO;;;qDAG0B,IAAI,CAAC,4BAA4B;;;;;iBAKrE,IAAI,CAAC,EAAE,IAAI,OAAO;yBACV,IAAI,CAAC,UAAU;2BACb,IAAI,CAAC,YAAY,IAAI,OAAO;6BAC1B,IAAI,CAAC,cAAc,IAAI,OAAO;yBAClC,IAAI,CAAC,SAAS;mBACpB,IAAI,CAAC,IAAI,IAAI,OAAO;wBACf,IAAI,CAAC,SAAS,IAAI,OAAO;2BACtB,IAAI,CAAC,WAAW,IAAI,OAAO;qBACjC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;qBACjB,IAAI,CAAC,YAAY;uBACf,IAAI,CAAC,cAAc;;;sDAGY,IAAI,CAAC,6BAA6B;;;;WAI7E,CAAC;IACV,CAAC;IAED,4BAA4B;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7D,CAAC;IAED,6BAA6B;QAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/D,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,sBAAsB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACrD,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAED,yBAAyB;QACvB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,IAAI,CAAC,CAAC;IACnF,CAAC;;AA7DD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACwB;AAEpC;IAAf,KAAK,CAAC,OAAO,CAAC;uCAA0B;AAP9B,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CAmEpB","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { styles } from './search.styles.js';\n\n@customElement('u-search')\nexport class UmSearch extends UmNativeTextFieldWrapper {\n\n  static override styles = [baseStyles, styles];\n\n  @property({ reflect: true })\n  position: 'fixed' | 'absolute' | 'static' = 'fixed';\n\n  @query('input') input!: HTMLInputElement;\n\n  #containerSizeObserver: ResizeObserver | null = null;\n\n  protected override renderControl(): HTMLTemplateResult {\n    return html``;\n  }\n\n  override render(): HTMLTemplateResult {\n    const classes = classMap({\n      'inner-container': true,\n    });\n\n    return html`<div class=\"container\">\n      <div class=\"${classes}\">\n        <div class=\"content\">\n          <div class=\"icon leading-icon\" part=\"icon leading\">\n            <slot name=\"leading-icon\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n          </div>\n          <input\n            class=\"input\"\n            part=\"input\"\n            id=${this.id || nothing}\n            spellcheck=${this.spellcheck}\n            autocomplete=${this.autocomplete ?? nothing}\n            autocapitalize=${this.autocapitalize || nothing}\n            ?autofocus=${this.autofocus}\n            role=${this.role ?? nothing}\n            maxlength=${this.maxlength ?? nothing}\n            .placeholder=${this.placeholder ?? nothing}\n            .value=${live(this._value)}\n            @input=${this._handleInput}\n            @keydown=${this._handleKeyDown} />\n    \n          <div class=\"icon trailing-icon\" part=\"icon trailing\">\n            <slot name=\"trailing-icon\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>\n          </div>\n        </div>\n      </div>\n    </div>`;\n  }\n\n  #handleLeadingIconSlotChange() {\n    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n  }\n\n  #handleTrailingIconSlotChange() {\n    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.#containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());\n    this.#containerSizeObserver.observe(this._container);\n    this.#setContentHeightProperty();\n  }\n\n  #setContentHeightProperty() {\n    this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-search': UmSearch;\n  }\n}\n"]}
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/search/search.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AACtG,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,sBAAsB;IAA3C;;QAIL;;WAEG;QAEH,aAAQ,GAAoC,OAAO,CAAC;QAIpD,2BAAsB,GAA0B,IAAI,CAAC;IA0DvD,CAAC;aApEiB,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IAU9C,sBAAsB,CAA+B;IAElC,aAAa;QAC9B,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC;YACvB,iBAAiB,EAAE,IAAI;SACxB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,OAAO;;;qDAG0B,IAAI,CAAC,4BAA4B;;;;;iBAKrE,IAAI,CAAC,EAAE,IAAI,OAAO;yBACV,IAAI,CAAC,UAAU;2BACb,IAAI,CAAC,YAAY,IAAI,OAAO;6BAC1B,IAAI,CAAC,cAAc,IAAI,OAAO;yBAClC,IAAI,CAAC,SAAS;mBACpB,IAAI,CAAC,IAAI,IAAI,OAAO;wBACf,IAAI,CAAC,SAAS,IAAI,OAAO;2BACtB,IAAI,CAAC,WAAW,IAAI,OAAO;qBACjC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;qBACjB,IAAI,CAAC,YAAY;uBACf,IAAI,CAAC,cAAc;;;sDAGY,IAAI,CAAC,6BAA6B;;;;WAI7E,CAAC;IACV,CAAC;IAED,4BAA4B;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7D,CAAC;IAED,6BAA6B;QAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/D,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,sBAAsB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACrD,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACnC,CAAC;IAED,yBAAyB;QACvB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,IAAI,CAAC,CAAC;IACnF,CAAC;;AA7DD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACwB;AAEpC;IAAf,KAAK,CAAC,OAAO,CAAC;qCAA0B;AAV9B,MAAM;IADlB,aAAa,CAAC,UAAU,CAAC;GACb,MAAM,CAsElB","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { styles } from './search.styles.js';\n\n@customElement('u-search')\nexport class Search extends NativeTextFieldWrapper {\n\n  static override styles = [baseStyles, styles];\n\n  /**\n   * The positioning strategy of the search bar\n   */\n  @property({ reflect: true })\n  position: 'fixed' | 'absolute' | 'static' = 'fixed';\n\n  @query('input') input!: HTMLInputElement;\n\n  #containerSizeObserver: ResizeObserver | null = null;\n\n  protected override renderControl(): HTMLTemplateResult {\n    return html``;\n  }\n\n  override render(): HTMLTemplateResult {\n    const classes = classMap({\n      'inner-container': true,\n    });\n\n    return html`<div class=\"container\">\n      <div class=\"${classes}\">\n        <div class=\"content\">\n          <div class=\"icon leading-icon\" part=\"icon leading\">\n            <slot name=\"leading-icon\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n          </div>\n          <input\n            class=\"input\"\n            part=\"input\"\n            id=${this.id || nothing}\n            spellcheck=${this.spellcheck}\n            autocomplete=${this.autocomplete ?? nothing}\n            autocapitalize=${this.autocapitalize || nothing}\n            ?autofocus=${this.autofocus}\n            role=${this.role ?? nothing}\n            maxlength=${this.maxlength ?? nothing}\n            .placeholder=${this.placeholder ?? nothing}\n            .value=${live(this._value)}\n            @input=${this._handleInput}\n            @keydown=${this._handleKeyDown} />\n    \n          <div class=\"icon trailing-icon\" part=\"icon trailing\">\n            <slot name=\"trailing-icon\" @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>\n          </div>\n        </div>\n      </div>\n    </div>`;\n  }\n\n  #handleLeadingIconSlotChange() {\n    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n  }\n\n  #handleTrailingIconSlotChange() {\n    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.#containerSizeObserver = new ResizeObserver(() => this.#setContentHeightProperty());\n    this.#containerSizeObserver.observe(this._container);\n    this.#setContentHeightProperty();\n  }\n\n  #setContentHeightProperty() {\n    this.style.setProperty('--_content-height', `${this._container.clientHeight}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-search': Search;\n  }\n}\n"]}