@editora/ui-core 0.1.9 → 0.1.10

package/dist/sidebar.cjs.js

@@ -0,0 +1,769 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("./ElementBase-1b301e7f.js"),_={sm:{expanded:220,collapsed:64,min:168,max:300},md:{expanded:236,collapsed:72,min:180,max:320},lg:{expanded:268,collapsed:80,min:192,max:360}},z=new Set(["variant","size","density","tone","radius","item-radius","item-gap","item-padding-x","item-padding-y","item-height","item-font-size","item-line-height","section-label-transform","elevation","position","rail","headless"]),A=new Set(["width","min-width","max-width","collapsed-width","storage-key","auto-save"]),M=o=>`
+  <style>
+    :host {
+      --ui-sidebar-bg: var(--base-sidebar-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+      --ui-sidebar-color: var(--ui-color-text, var(--ui-text, #202020));
+      --ui-sidebar-muted: color-mix(in srgb, var(--ui-sidebar-color) 56%, transparent);
+      --ui-sidebar-border: var(--base-sidebar-border, 1px solid color-mix(in srgb, var(--gray-a5, rgba(15, 23, 42, 0.16)) 82%, transparent));
+      --ui-sidebar-radius: var(--base-sidebar-radius, var(--ui-radius, 4px));
+      --ui-sidebar-shadow: var(--base-sidebar-shadow, var(--shadow-5, none));
+      --ui-sidebar-padding: var(--base-sidebar-padding, 12px);
+      --ui-sidebar-gap: var(--base-sidebar-gap, 14px);
+      --ui-sidebar-header-padding: var(--base-sidebar-header-padding, 4px 4px 10px);
+      --ui-sidebar-item-radius: var(--base-sidebar-item-radius, 4px);
+      --ui-sidebar-item-height: var(--base-sidebar-item-height, 45px);
+      --ui-sidebar-item-padding-x: var(--base-sidebar-item-padding-x, 6px);
+      --ui-sidebar-item-padding-y: var(--base-sidebar-item-padding-y, 3px);
+      --ui-sidebar-item-gap: var(--base-sidebar-item-gap, 8px);
+      --ui-sidebar-item-font-size: var(--base-sidebar-item-font-size, 12px);
+      --ui-sidebar-item-line-height: var(--base-sidebar-item-line-height, 22px);
+      --ui-sidebar-section-gap: var(--base-sidebar-section-gap, 12px);
+      --ui-sidebar-section-label-size: var(--base-sidebar-section-label-size, 12px);
+      --ui-sidebar-section-label-spacing: var(--base-sidebar-section-label-spacing, 0.06em);
+      --ui-sidebar-section-label-transform: var(--base-sidebar-section-label-transform, none);
+      --ui-sidebar-section-label-color: var(--base-sidebar-section-label-color, var(--ui-sidebar-muted));
+      --ui-sidebar-submenu-indent: var(--base-sidebar-submenu-indent, 20px);
+      --ui-sidebar-promo-radius: var(--base-sidebar-promo-radius, 4px);
+      --ui-sidebar-promo-padding: var(--base-sidebar-promo-padding, 20px);
+      --ui-sidebar-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+      --ui-sidebar-accent-contrast: var(--ui-color-foreground-on-primary, var(--ui-foreground, #ffffff));
+      --ui-sidebar-item-hover: color-mix(in srgb, var(--ui-sidebar-accent) 10%, transparent);
+      --ui-sidebar-item-active-bg: color-mix(in srgb, var(--ui-sidebar-accent) 14%, var(--ui-sidebar-bg));
+      --ui-sidebar-item-active-color: var(--ui-sidebar-color);
+      --ui-sidebar-item-border: color-mix(in srgb, var(--ui-sidebar-accent) 18%, transparent);
+      --ui-sidebar-control-bg: color-mix(in srgb, var(--ui-sidebar-bg) 88%, transparent);
+      --ui-sidebar-control-hover: color-mix(in srgb, var(--ui-sidebar-accent) 10%, var(--ui-sidebar-bg));
+      --ui-sidebar-promo-bg: linear-gradient(140deg, color-mix(in srgb, var(--ui-sidebar-accent) 92%, #0f172a 8%), color-mix(in srgb, var(--ui-sidebar-accent) 36%, #ffffff 64%));
+      --ui-sidebar-promo-color: var(--ui-sidebar-accent-contrast);
+      --ui-sidebar-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+      --ui-sidebar-width: 236px;
+      --ui-sidebar-current-width: 236px;
+      --ui-sidebar-min-width: 180px;
+      --ui-sidebar-max-width: 320px;
+      --ui-sidebar-collapsed-width: 72px;
+      display: block;
+      min-inline-size: 0;
+      inline-size: var(--ui-sidebar-current-width);
+      box-sizing: border-box;
+      color-scheme: light dark;
+      transition: inline-size 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
+    :host([size="sm"]),
+    :host([size="1"]) {
+      --ui-sidebar-padding: 8px;
+      --ui-sidebar-gap: 10px;
+      --ui-sidebar-item-radius: 4px;
+      --ui-sidebar-item-height: 40px;
+      --ui-sidebar-item-padding-x: 12px;
+      --ui-sidebar-item-padding-y: 8px;
+      --ui-sidebar-item-gap: 10px;
+      --ui-sidebar-item-font-size: 14px;
+      --ui-sidebar-item-line-height: 20px;
+      --ui-sidebar-section-gap: 8px;
+      --ui-sidebar-promo-padding: 16px;
+    }
+
+    :host([size="lg"]),
+    :host([size="3"]) {
+      --ui-sidebar-padding: 12px;
+      --ui-sidebar-gap: 12px;
+      --ui-sidebar-item-radius: 4px;
+      --ui-sidebar-item-height: 50px;
+      --ui-sidebar-item-padding-x: 12px;
+      --ui-sidebar-item-padding-y: 8px;
+      --ui-sidebar-item-gap: 16px;
+      --ui-sidebar-item-font-size: 16px;
+      --ui-sidebar-item-line-height: 24px;
+      --ui-sidebar-promo-padding: 20px;
+    }
+
+    :host([density="compact"]) {
+      --ui-sidebar-gap: 10px;
+      --ui-sidebar-section-gap: 8px;
+      --ui-sidebar-item-height: calc(var(--ui-sidebar-item-height) - 4px);
+      --ui-sidebar-item-padding-y: max(6px, calc(var(--ui-sidebar-item-padding-y) - 2px));
+      --ui-sidebar-item-gap: max(8px, calc(var(--ui-sidebar-item-gap) - 2px));
+    }
+
+    :host([density="comfortable"]) {
+      --ui-sidebar-gap: 14px;
+      --ui-sidebar-section-gap: 12px;
+      --ui-sidebar-item-height: calc(var(--ui-sidebar-item-height) + 4px);
+      --ui-sidebar-item-padding-y: calc(var(--ui-sidebar-item-padding-y) + 2px);
+      --ui-sidebar-item-gap: calc(var(--ui-sidebar-item-gap) + 2px);
+    }
+
+    :host([variant="surface"]) {
+      --ui-sidebar-item-hover: color-mix(in srgb, var(--ui-sidebar-accent) 10%, transparent);
+      --ui-sidebar-item-active-bg: color-mix(in srgb, var(--ui-sidebar-accent) 14%, var(--base-sidebar-bg, var(--color-panel-solid, #ffffff)));
+      --ui-sidebar-item-active-color: var(--ui-sidebar-color);
+      --ui-sidebar-item-border: color-mix(in srgb, var(--ui-sidebar-accent) 18%, transparent);
+    }
+
+    :host([variant="soft"]) {
+      --ui-sidebar-bg: color-mix(in srgb, var(--ui-sidebar-accent) 8%, var(--base-sidebar-bg, var(--color-panel-solid, #ffffff)));
+      --ui-sidebar-item-hover: color-mix(in srgb, var(--ui-sidebar-accent) 12%, transparent);
+      --ui-sidebar-item-active-bg: color-mix(in srgb, var(--ui-sidebar-accent) 18%, var(--base-sidebar-bg, var(--color-panel-solid, #ffffff)));
+      --ui-sidebar-item-active-color: var(--ui-sidebar-color);
+      --ui-sidebar-item-border: color-mix(in srgb, var(--ui-sidebar-accent) 18%, transparent);
+      --ui-sidebar-shadow: none;
+    }
+
+    :host([variant="floating"]) {
+      --ui-sidebar-bg: color-mix(in srgb, var(--base-sidebar-bg, var(--color-panel-solid, #ffffff)) 82%, transparent);
+      --ui-sidebar-item-hover: color-mix(in srgb, var(--ui-sidebar-accent) 10%, transparent);
+      --ui-sidebar-item-active-bg: color-mix(in srgb, var(--ui-sidebar-accent) 16%, var(--base-sidebar-bg, var(--color-panel-solid, #ffffff)));
+      --ui-sidebar-item-active-color: var(--ui-sidebar-color);
+      --ui-sidebar-item-border: color-mix(in srgb, var(--ui-sidebar-accent) 20%, transparent);
+      --ui-sidebar-shadow: 0 24px 44px rgba(15, 23, 42, 0.16);
+      --ui-sidebar-border: 1px solid color-mix(in srgb, var(--gray-a5, rgba(15, 23, 42, 0.16)) 72%, transparent);
+    }
+
+    :host([variant="contrast"]) {
+      --ui-sidebar-bg: linear-gradient(180deg, color-mix(in srgb, #07162d 92%, var(--ui-sidebar-accent) 8%), color-mix(in srgb, #0f2d57 82%, var(--ui-sidebar-accent) 18%));
+      --ui-sidebar-color: #f8fbff;
+      --ui-sidebar-muted: color-mix(in srgb, #f8fbff 72%, transparent);
+      --ui-sidebar-border: 1px solid color-mix(in srgb, #9ec5ff 14%, transparent);
+      --ui-sidebar-item-hover: color-mix(in srgb, #ffffff 8%, transparent);
+      --ui-sidebar-item-active-bg: color-mix(in srgb, var(--ui-sidebar-accent) 82%, #0b4cb4 18%);
+      --ui-sidebar-item-active-color: #ffffff;
+      --ui-sidebar-control-bg: color-mix(in srgb, #ffffff 7%, transparent);
+      --ui-sidebar-control-hover: color-mix(in srgb, #ffffff 12%, transparent);
+      --ui-sidebar-shadow: 0 30px 60px rgba(2, 6, 23, 0.34);
+      --ui-sidebar-promo-bg: linear-gradient(140deg, color-mix(in srgb, var(--ui-sidebar-accent) 92%, #1d4ed8 8%), color-mix(in srgb, var(--ui-sidebar-accent) 24%, #ffffff 76%));
+      --ui-sidebar-promo-color: #ffffff;
+    }
+
+    :host([variant="minimal"]) {
+      --ui-sidebar-bg: transparent;
+      --ui-sidebar-border: none;
+      --ui-sidebar-shadow: none;
+      --ui-sidebar-item-hover: color-mix(in srgb, var(--ui-sidebar-accent) 8%, transparent);
+      --ui-sidebar-item-active-bg: color-mix(in srgb, var(--ui-sidebar-accent) 14%, transparent);
+      --ui-sidebar-item-active-color: var(--ui-sidebar-color);
+      --ui-sidebar-item-border: color-mix(in srgb, var(--ui-sidebar-accent) 18%, transparent);
+    }
+
+    :host([variant="split"]) {
+      --ui-sidebar-radius: 0px;
+      --ui-sidebar-border: none;
+      --ui-sidebar-shadow: none;
+      --ui-sidebar-item-hover: color-mix(in srgb, var(--ui-sidebar-accent) 8%, transparent);
+      --ui-sidebar-item-active-bg: color-mix(in srgb, var(--ui-sidebar-accent) 12%, transparent);
+      --ui-sidebar-item-active-color: var(--ui-sidebar-color);
+      --ui-sidebar-item-border: color-mix(in srgb, var(--ui-sidebar-accent) 16%, transparent);
+      border-inline-end: 1px solid color-mix(in srgb, var(--gray-a5, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    }
+
+    :host([tone="success"]) {
+      --ui-sidebar-accent: var(--ui-color-success, #16a34a);
+    }
+
+    :host([tone="warning"]) {
+      --ui-sidebar-accent: var(--ui-color-warning, #d97706);
+    }
+
+    :host([tone="danger"]) {
+      --ui-sidebar-accent: var(--ui-color-danger, #dc2626);
+    }
+
+    :host([radius="none"]) {
+      --ui-sidebar-radius: 0px;
+      --ui-sidebar-item-radius: 0px;
+      --ui-sidebar-promo-radius: 0px;
+    }
+
+    :host([radius="sm"]) {
+      --ui-sidebar-radius: 8px;
+      --ui-sidebar-item-radius: 8px;
+      --ui-sidebar-promo-radius: 12px;
+    }
+
+    :host([radius="md"]) {
+      --ui-sidebar-radius: 12px;
+      --ui-sidebar-item-radius: 12px;
+      --ui-sidebar-promo-radius: 16px;
+    }
+
+    :host([radius="lg"]) {
+      --ui-sidebar-radius: 18px;
+      --ui-sidebar-item-radius: 16px;
+      --ui-sidebar-promo-radius: 20px;
+    }
+
+    :host([radius="full"]) {
+      --ui-sidebar-radius: 28px;
+      --ui-sidebar-item-radius: 999px;
+      --ui-sidebar-promo-radius: 24px;
+    }
+
+    :host([elevation="none"]) {
+      --ui-sidebar-shadow: none;
+    }
+
+    :host([elevation="low"]) {
+      --ui-sidebar-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
+    }
+
+    :host([elevation="high"]) {
+      --ui-sidebar-shadow: 0 32px 64px rgba(15, 23, 42, 0.2);
+    }
+
+    :host([position="right"]) .shell {
+      border-inline-start: var(--ui-sidebar-border);
+      border-inline-end: none;
+    }
+
+    :host([collapsed]) {
+      inline-size: var(--ui-sidebar-current-width);
+    }
+
+    :host([headless]) .shell {
+      background: transparent;
+      border: none;
+      box-shadow: none;
+    }
+
+    .shell {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      min-inline-size: 0;
+      min-block-size: 100%;
+      inline-size: var(--ui-sidebar-current-width);
+      padding: var(--ui-sidebar-padding);
+      gap: var(--ui-sidebar-gap);
+      box-sizing: border-box;
+      border: var(--ui-sidebar-border);
+      border-radius: var(--ui-sidebar-radius);
+      background: var(--ui-sidebar-bg);
+      color: var(--ui-sidebar-color);
+      box-shadow: var(--ui-sidebar-shadow);
+      overflow: hidden;
+      backdrop-filter: blur(14px) saturate(1.08);
+    }
+
+    .shell::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
+    }
+
+    .header-wrap,
+    .search-wrap,
+    .footer-wrap,
+    .promo-wrap {
+      min-inline-size: 0;
+    }
+
+    .header-wrap[hidden],
+    .search-wrap[hidden],
+    .footer-wrap[hidden],
+    .promo-wrap[hidden] {
+      display: none;
+    }
+
+    .header-wrap {
+      padding: var(--ui-sidebar-header-padding);
+    }
+
+    .header-wrap ::slotted(*) {
+      min-inline-size: 0;
+      color: inherit;
+    }
+
+    .search-wrap ::slotted(*) {
+      display: block;
+      min-inline-size: 0;
+    }
+
+    .nav {
+      min-inline-size: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-sidebar-gap);
+      flex: 1 1 auto;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding-inline-end: 2px;
+    }
+
+    .nav::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .nav::-webkit-scrollbar-thumb {
+      border-radius: 999px;
+      background: color-mix(in srgb, currentColor 12%, transparent);
+    }
+
+    .section {
+      display: grid;
+      gap: var(--ui-sidebar-section-gap);
+    }
+
+    .section-label {
+      padding-inline: 10px;
+      font-size: var(--ui-sidebar-section-label-size);
+      letter-spacing: var(--ui-sidebar-section-label-spacing);
+      line-height: 1.4;
+      font-weight: 700;
+      text-transform: var(--ui-sidebar-section-label-transform);
+      color: var(--ui-sidebar-section-label-color);
+    }
+
+    .section-items {
+      display: grid;
+      gap: 8px;
+    }
+
+    .item {
+      display: grid;
+      gap: 8px;
+    }
+
+    .item-button {
+      min-inline-size: 0;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: var(--ui-sidebar-item-gap);
+      inline-size: 100%;
+      min-block-size: var(--ui-sidebar-item-height);
+      padding: var(--ui-sidebar-item-padding-y) var(--ui-sidebar-item-padding-x);
+      border: 1px solid transparent;
+      border-radius: var(--ui-sidebar-item-radius);
+      box-sizing: border-box;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      text-align: left;
+      text-decoration: none;
+      font-family: var(--ui-font-family, Inter, system-ui, sans-serif);
+      font-size: var(--ui-sidebar-item-font-size);
+      line-height: var(--ui-sidebar-item-line-height);
+      font-weight: 700;
+      letter-spacing: var(--ui-default-letter-spacing, 0em);
+      transition:
+        background-color 140ms ease,
+        border-color 140ms ease,
+        color 140ms ease,
+        transform 140ms ease,
+        box-shadow 140ms ease;
+    }
+
+    .item-button:hover {
+      background: var(--ui-sidebar-item-hover);
+    }
+
+    .item-button:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sidebar-focus-ring) 22%, transparent);
+    }
+
+    .item-button[aria-current="page"],
+    .item-button[data-active="true"] {
+      background: var(--ui-sidebar-item-active-bg);
+      color: var(--ui-sidebar-item-active-color);
+      border-color: var(--ui-sidebar-item-border);
+    }
+
+    .item-button[aria-disabled="true"] {
+      opacity: 0.48;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .item-button[data-tone="danger"] .item-label,
+    .item-button[data-tone="danger"] .meta {
+      color: var(--ui-color-danger, #dc2626);
+    }
+
+    .icon-wrap,
+    .arrow-wrap {
+      display: inline-grid;
+      place-items: center;
+      inline-size: 20px;
+      block-size: 20px;
+      flex: 0 0 20px;
+      color: color-mix(in srgb, currentColor 82%, transparent);
+    }
+
+    .arrow-wrap {
+      inline-size: 16px;
+      block-size: 16px;
+      transition: transform 140ms ease;
+    }
+
+    .arrow-wrap svg {
+      inline-size: 14px;
+      block-size: 14px;
+      display: block;
+    }
+
+    .item[data-expanded="true"] > .item-button .arrow-wrap {
+      transform: rotate(90deg);
+    }
+
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 100%;
+      block-size: 100%;
+      font-size: 0;
+      line-height: 1;
+    }
+
+    .icon :is(svg) {
+      inline-size: 18px;
+      block-size: 18px;
+      display: block;
+    }
+
+    .copy {
+      min-inline-size: 0;
+      display: grid;
+      gap: 4px;
+      align-content: center;
+      font-size: var(--ui-sidebar-item-font-size);
+      line-height: var(--ui-sidebar-item-line-height);
+    }
+
+    .copy.custom-copy > * {
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .copy.custom-copy > :first-child {
+      font-family: var(--ui-font-family, Inter, system-ui, sans-serif);
+      font-size: var(--ui-sidebar-item-font-size);
+      line-height: var(--ui-sidebar-item-line-height);
+      font-weight: 700;
+      letter-spacing: var(--ui-default-letter-spacing, 0em);
+      color: inherit;
+    }
+
+    .copy.custom-copy > :not(:first-child) {
+      font-size: calc(var(--ui-sidebar-item-font-size) - 2px);
+      line-height: calc(var(--ui-sidebar-item-line-height) - 2px);
+      font-weight: 500;
+      color: color-mix(in srgb, currentColor 54%, transparent);
+    }
+
+    .item-label,
+    .item-description {
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .item-label {
+      font-family: var(--ui-font-family, Inter, system-ui, sans-serif);
+      font-size: var(--ui-sidebar-item-font-size);
+      line-height: var(--ui-sidebar-item-line-height);
+      font-weight: 700;
+      letter-spacing: var(--ui-default-letter-spacing, 0em);
+      color: inherit;
+    }
+
+    .item-description {
+      font-size: calc(var(--ui-sidebar-item-font-size) - 2px);
+      line-height: calc(var(--ui-sidebar-item-line-height) - 2px);
+      font-weight: 500;
+      color: color-mix(in srgb, currentColor 54%, transparent);
+    }
+
+    .meta {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      justify-content: flex-end;
+      min-inline-size: max-content;
+      color: color-mix(in srgb, currentColor 66%, transparent);
+      font-size: calc(var(--ui-sidebar-item-font-size) - 1px);
+      font-weight: 700;
+      line-height: var(--ui-sidebar-item-line-height);
+    }
+
+    .end-wrap {
+      min-inline-size: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 10px;
+      margin-inline-start: auto;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-inline-size: 22px;
+      min-block-size: 22px;
+      padding-inline: 7px;
+      border-radius: 999px;
+      background: color-mix(in srgb, currentColor 12%, transparent);
+      color: inherit;
+      font-size: calc(var(--ui-sidebar-item-font-size) - 4px);
+      line-height: 1;
+      letter-spacing: 0.02em;
+    }
+
+    .submenu {
+      display: grid;
+      grid-template-rows: 0fr;
+      margin-inline-start: calc(var(--ui-sidebar-submenu-indent) + 6px);
+      padding-inline-start: 12px;
+      border-inline-start: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+      opacity: 0;
+      transform: translateY(-4px);
+      pointer-events: none;
+      transition:
+        grid-template-rows 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        opacity 140ms ease,
+        transform 140ms ease;
+    }
+
+    .submenu-inner {
+      min-height: 0;
+      overflow: hidden;
+      display: grid;
+      gap: 6px;
+      padding-block: 0;
+      transition: padding-block 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
+    .item[data-expanded="true"] > .submenu {
+      grid-template-rows: 1fr;
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    .item[data-expanded="true"] > .submenu > .submenu-inner {
+      padding-block: 2px 0;
+    }
+
+    .promo-wrap ::slotted(*) {
+      display: block;
+      min-inline-size: 0;
+    }
+
+    .footer-wrap {
+      margin-top: auto;
+      color: color-mix(in srgb, currentColor 66%, transparent);
+      font-size: 13px;
+      line-height: 18px;
+    }
+
+    .resize-handle {
+      position: absolute;
+      inset-block: 16px;
+      inset-inline-end: 0;
+      inline-size: 10px;
+      cursor: ew-resize;
+      background: transparent;
+      border: none;
+      padding: 0;
+      opacity: 0;
+      transition: opacity 120ms ease;
+    }
+
+    .resize-handle::before {
+      content: '';
+      position: absolute;
+      inset-block: 6px;
+      inset-inline-end: 3px;
+      inline-size: 3px;
+      border-radius: 999px;
+      background: color-mix(in srgb, currentColor 20%, transparent);
+    }
+
+    .shell:hover .resize-handle,
+    .resize-handle:focus-visible {
+      opacity: 1;
+    }
+
+    :host([position="right"]) .resize-handle {
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+      cursor: ew-resize;
+    }
+
+    :host([position="right"]) .resize-handle::before {
+      inset-inline-end: auto;
+      inset-inline-start: 3px;
+    }
+
+    :host(:not([resizable])) .resize-handle {
+      display: none;
+    }
+
+    :host([collapsed]) .resize-handle {
+      display: none;
+    }
+
+    :host([collapsed]) .section-label,
+    :host([collapsed]) .item-description,
+    :host([collapsed]) .meta,
+    :host([collapsed]) .end-wrap,
+    :host([collapsed]) .copy,
+    :host([collapsed]) .search-wrap,
+    :host([collapsed]) .promo-wrap,
+    :host([collapsed]) .footer-wrap {
+      display: none;
+    }
+
+    :host([collapsed]) .header-wrap {
+      padding-inline: 0;
+      display: flex;
+      justify-content: center;
+    }
+
+    :host([collapsed]) .item-button {
+      grid-template-columns: 1fr;
+      justify-items: center;
+      padding: 0;
+      gap: 0;
+      inline-size: calc(100% - 4px);
+      min-inline-size: var(--ui-sidebar-item-height);
+    }
+
+    :host([collapsed]) .arrow-wrap,
+    :host([collapsed]) .submenu {
+      display: none;
+    }
+
+    :host([rail]) .shell {
+      padding-inline: max(10px, calc(var(--ui-sidebar-padding) - 4px));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host,
+      .item-button,
+      .arrow-wrap {
+        transition: none !important;
+      }
+    }
+
+    @media (forced-colors: active) {
+      :host {
+        --ui-sidebar-bg: Canvas;
+        --ui-sidebar-color: CanvasText;
+        --ui-sidebar-muted: CanvasText;
+        --ui-sidebar-border: 1px solid CanvasText;
+        --ui-sidebar-item-hover: Highlight;
+        --ui-sidebar-item-active-bg: Highlight;
+        --ui-sidebar-item-active-color: HighlightText;
+        --ui-sidebar-item-border: Highlight;
+        --ui-sidebar-control-bg: Canvas;
+        --ui-sidebar-control-hover: Highlight;
+        --ui-sidebar-promo-bg: Canvas;
+        --ui-sidebar-promo-color: CanvasText;
+        --ui-sidebar-focus-ring: Highlight;
+        --ui-sidebar-shadow: none;
+      }
+
+      .shell,
+      .item-button,
+      .badge,
+      .submenu,
+      .resize-handle::before {
+        forced-color-adjust: none;
+      }
+
+      .shell,
+      .badge {
+        background: Canvas;
+        color: CanvasText;
+        border-color: CanvasText;
+        box-shadow: none;
+      }
+
+      .item-button {
+        background: Canvas;
+        color: CanvasText;
+        border-color: transparent;
+      }
+
+      .item-button:hover,
+      .item-button[aria-current="page"],
+      .item-button[data-active="true"] {
+        background: Highlight;
+        color: HighlightText;
+        border-color: Highlight;
+      }
+
+      .submenu {
+        border-inline-start-color: CanvasText;
+      }
+
+      .resize-handle::before {
+        background: CanvasText;
+      }
+    }
+  </style>
+  ${o}
+`;function d(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function y(o){if(!o)return null;const e=o.trim();return e?["none","sm","md","lg","full"].includes(e)?e:/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function g(o){if(!o)return null;const e=o.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function C(o){return o==="sm"||o==="1"?"sm":o==="lg"||o==="3"?"lg":"md"}function l(o,e){if(!o)return e;const i=Number.parseFloat(String(o));return Number.isFinite(i)?i:e}function x(o){return o.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/(^-|-$)/g,"")||"item"}class E extends D.ElementBase{constructor(){super(...arguments),this._observer=null,this._resizeCleanup=null,this._responsiveCleanup=null,this._responsiveAutoCollapsed=!1,this._userCollapsePreference=!1,this._expanded=new Set,this._dragging=!1,this._lastExpandedWidth=0,this._handleSearchInput=e=>{const i=e.target;if(!i)return;const t=i.closest('[slot="search"]');if(!t||!this.contains(t))return;const r=typeof i.value=="string"?i.value:"";r?this.setAttribute("search-query",r):this.removeAttribute("search-query"),this.dispatchEvent(new CustomEvent("search-change",{detail:{query:r},bubbles:!0}))}}static get observedAttributes(){return["collapsed","collapsible","rail","resizable","position","value","items","variant","size","density","tone","show-icons","show-badges","item-radius","item-gap","item-padding-x","item-padding-y","item-height","item-font-size","item-line-height","section-label-transform","search-query","headless","width","min-width","max-width","collapsed-width","storage-key","auto-save","radius","elevation"]}connectedCallback(){super.connectedCallback(),this._observeLightDom(),this._bindResponsiveCollapse(),this.addEventListener("input",this._handleSearchInput,!0),this.addEventListener("change",this._handleSearchInput,!0)}disconnectedCallback(){var e,i,t;(e=this._observer)==null||e.disconnect(),this._observer=null,(i=this._resizeCleanup)==null||i.call(this),this._resizeCleanup=null,(t=this._responsiveCleanup)==null||t.call(this),this._responsiveCleanup=null,this.removeEventListener("input",this._handleSearchInput,!0),this.removeEventListener("change",this._handleSearchInput,!0),super.disconnectedCallback()}shouldRenderOnAttributeChange(e){return!(A.has(e)||z.has(e)||e==="collapsed"||e==="value"||e==="radius")}attributeChangedCallback(e,i,t){if(i!==t){if(e==="radius"&&this.isConnected){const r=y(t);if(r&&r!==t){this.setAttribute("radius",r);return}}if(this.isConnected){if(A.has(e)){this._applySizing();return}if(e==="radius"){this._applyRadius();return}if(e==="item-radius"||e==="item-gap"||e==="item-padding-x"||e==="item-padding-y"||e==="item-height"||e==="item-font-size"||e==="item-line-height"){this._applyItemMetrics();return}if(!z.has(e)){if(e==="collapsed"){this.hasAttribute("collapsed")&&this._expanded.clear(),this._applySizing(),this._syncExpandedDom();return}if(e==="value"){this._syncActiveDom();return}super.attributeChangedCallback(e,i,t)}}}}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}collapse(){this.hasAttribute("collapsible")&&(this.hasAttribute("collapsed")||(this._userCollapsePreference=!0,this._lastExpandedWidth=this._currentExpandedWidth(),this.setAttribute("collapsed",""),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!0},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!0},bubbles:!0}))))}expand(){this.hasAttribute("collapsible")&&this.hasAttribute("collapsed")&&(this._userCollapsePreference=!0,this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!1},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!1},bubbles:!0})))}toggle(e){(typeof e=="boolean"?e:!this.hasAttribute("collapsed"))?this.collapse():this.expand()}render(){const e=this._buildSections(),i=!this.querySelector('[slot="header"]'),t=!this.querySelector('[slot="search"]'),r=!this.querySelector('[slot="footer"]'),s=!this.querySelector('[slot="promo"]'),a=`
+      <aside class="shell" part="shell">
+        <div class="header-wrap" part="header" ${i?"hidden":""}><slot name="header"></slot></div>
+        <div class="search-wrap" part="search" ${t?"hidden":""}><slot name="search"></slot></div>
+        <nav class="nav" part="nav" aria-label="${d(this.getAttribute("aria-label")||"Sidebar")}">
+          ${e}
+        </nav>
+        <div class="promo-wrap" part="promo" ${s?"hidden":""}><slot name="promo"></slot></div>
+        <div class="footer-wrap" part="footer" ${r?"hidden":""}><slot name="footer"></slot></div>
+        <button class="resize-handle" part="resize-handle" type="button" aria-label="Resize sidebar"></button>
+      </aside>
+    `;this.setContent(M(a)),this._applyItemMetrics(),this._applyRadius(),this._applySizing(),this._bindInteractions(),this._syncActiveDom(),this._syncExpandedDom()}_observeLightDom(){this._observer||(this._observer=new MutationObserver(e=>{e.some(i=>i.type==="childList"||i.type==="attributes"&&i.target.slot)&&this.requestRender()}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot","data-value","data-href","data-target","data-rel","data-section","data-active","data-badge","data-description","data-content-html","data-icon","data-tone","data-disabled"]}))}_buildSections(){const e=this._groupItems(this._filterItems(this._collectItems(),this.getAttribute("search-query")||""));return e.length?e.map(({label:i,items:t})=>`
+          <section class="section" part="section">
+            ${i?`<div class="section-label" part="section-label">${d(i)}</div>`:""}
+            <div class="section-items">${t.map((s,a)=>this._renderItem(s,`${x(i||"general")}-${a}`)).join("")}</div>
+          </section>
+        `).join(""):`
+        <section class="section" part="section">
+          <div class="section-items">
+            <div class="item">
+              <div class="item-button" aria-disabled="true">
+                <span class="copy">
+                  <span class="item-label">No matches found</span>
+                  <span class="item-description">Try a different search term.</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </section>
+      `}_renderItem(e,i){const t=e.id||i,r=this.value?this.value===e.value:!!e.active,s=this._expanded.has(t),a=this.getAttribute("show-icons")!=="false",n=this.getAttribute("show-badges")!=="false",u=e.description?`<div class="item-description">${d(e.description)}</div>`:"",c=e.contentHtml?`<span class="copy custom-copy">${e.contentHtml}</span>`:`<span class="copy">
+            <span class="item-label">${d(e.label)}</span>
+            ${u}
+          </span>`,h=a?this._renderIcon(e):"",b=n&&e.badge?`<span class="badge" part="badge">${d(e.badge)}</span>`:"",p=e.children.length?'<span class="arrow-wrap" part="arrow" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><path d="M6 3.75L10.25 8L6 12.25" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>':"",v=h?`<span class="icon-wrap" part="icon"><span class="icon">${h}</span></span>`:"",f=b||p?`<span class="end-wrap">${b?`<span class="meta">${b}</span>`:""}${p}</span>`:"",m=!!e.href&&!e.children.length,$=r?' aria-current="page" data-active="true"':"",k=e.disabled?' aria-disabled="true"':' aria-disabled="false"',I=e.tone&&e.tone!=="default"?` data-tone="${d(e.tone)}"`:"",S=m?` href="${d(e.href||"")}"`:"",P=m&&e.target?` target="${d(e.target)}"`:"",L=m&&e.rel?` rel="${d(e.rel)}"`:"",H=e.children.length?`<div class="submenu" part="submenu"><div class="submenu-inner">${e.children.map((W,T)=>this._renderItem(W,`${t}-${T}`)).join("")}</div></div>`:"",w=m?"a":"button",R=m?"":' type="button"';return`
+      <div class="item" data-item-id="${d(t)}" data-value="${d(e.value)}" ${s?'data-expanded="true"':""}>
+        <${w}
+          class="item-button"
+          part="item"
+          ${R}
+          data-action="${e.children.length?"toggle":m?"navigate":"select"}"
+          data-item-id="${d(t)}"
+          data-value="${d(e.value)}"
+          ${S}
+          ${P}
+          ${L}
+          ${$}
+          ${k}
+          ${I}
+        >
+          ${v}
+          ${c}
+          ${f}
+        </${w}>
+        ${H}
+      </div>
+    `}_collectItems(){const e=this.getAttribute("items"),i=e?this._parseItems(e):this._parseSlottedItems();return this._normalizeItems(i)}_parseItems(e){try{const i=JSON.parse(e);return Array.isArray(i)?i:[]}catch{return[]}}_parseSlottedItems(){return Array.from(this.querySelectorAll('[slot="item"]')).map(e=>this._parseSlottedItem(e))}_parseSlottedItem(e){var r,s;let i=[];const t=e.dataset.children;if(t)try{const a=JSON.parse(t);Array.isArray(a)&&(i=a)}catch{i=[]}return{value:e.dataset.value||((r=e.textContent)==null?void 0:r.trim())||"item",label:e.dataset.label||((s=e.textContent)==null?void 0:s.trim())||e.dataset.value||"Item",href:e.dataset.href,target:e.dataset.target,rel:e.dataset.rel,icon:e.dataset.icon,iconHtml:e.dataset.iconHtml,contentHtml:e.dataset.contentHtml,badge:e.dataset.badge,description:e.dataset.description,section:e.dataset.section,disabled:e.hasAttribute("data-disabled"),active:e.hasAttribute("data-active"),tone:e.dataset.tone||"default",children:i}}_renderIcon(e){const i=String(e.iconHtml||"").trim();if(i)return i;const t=String(e.icon||"").trim();return t?d(t):""}_normalizeItems(e,i=0,t=""){return e.map((r,s)=>{var b,p,v,f;const a=((b=r.label)==null?void 0:b.trim())||((p=r.value)==null?void 0:p.trim())||`Item ${s+1}`,n=((v=r.value)==null?void 0:v.trim())||x(a),u=((f=r.section)==null?void 0:f.trim())||t||"",c=`${x(u||"nav")}-${x(n)}-${i}-${s}`,h=this._normalizeItems(r.children||[],i+1,u);return{...r,id:c,label:a,value:n,section:u,children:h,depth:i}})}_groupItems(e){const i=[],t=new Map;for(const r of e){const s=r.section||"",a=t.get(s);if(a){a.items.push(r);continue}const n={label:s,items:[r]};t.set(s,n),i.push(n)}return i}_filterItems(e,i){const t=i.trim().toLowerCase();return t?e.map(r=>{const s=[r.label,r.description,r.value,r.section].filter(Boolean).some(n=>String(n).toLowerCase().includes(t)),a=s?r.children:this._filterItems(r.children,t);return!s&&!a.length?null:{...r,children:a}}).filter(r=>!!r):e}_bindInteractions(){this.root.querySelectorAll(".item-button").forEach(i=>{i.onclick=t=>{const r=t.currentTarget,s=r.dataset.action,a=r.dataset.itemId||"",n=r.dataset.value||"";if(r.getAttribute("aria-disabled")!=="true"){if(s==="toggle"){t.preventDefault(),this._toggleExpanded(a);return}if(s==="navigate"){this._selectValue(n);return}t.preventDefault(),this._selectValue(n)}},i.onkeydown=t=>{const r=t.currentTarget,s=r.dataset.itemId||"",a=r.dataset.value||"";t.key==="ArrowRight"&&r.dataset.action==="toggle"?(t.preventDefault(),this._expanded.add(s),this._syncExpandedDom()):t.key==="ArrowLeft"?(t.preventDefault(),this._expanded.delete(s),this._syncExpandedDom()):(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),r.dataset.action==="toggle"?this._toggleExpanded(s):this._selectValue(a))}});const e=this.root.querySelector(".resize-handle");e&&(e.onkeydown=i=>this._handleResizeKey(i),e.onpointerdown=i=>this._startResize(i))}_toggleExpanded(e){this.hasAttribute("collapsed")||(this._expanded.has(e)?this._expanded.delete(e):this._expanded.add(e),this._syncExpandedDom())}_syncExpandedDom(){this.root.querySelectorAll(".item").forEach(e=>{const i=e.dataset.itemId||"";this._expanded.has(i)&&!this.hasAttribute("collapsed")?e.setAttribute("data-expanded","true"):e.removeAttribute("data-expanded")})}_selectValue(e){this.value=e;const i=this._flattenItems(this._collectItems()),t=i.findIndex(a=>a.value===e),r=i[t],s={index:t,value:e,label:(r==null?void 0:r.label)||e,item:r};this.dispatchEvent(new CustomEvent("select",{detail:s,bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{detail:s,bubbles:!0}))}_syncActiveDom(){const e=this.value;this.root.querySelectorAll(".item-button").forEach(i=>{e&&i.dataset.value===e?(i.setAttribute("data-active","true"),i.setAttribute("aria-current","page")):(i.removeAttribute("data-active"),i.removeAttribute("aria-current"))})}_flattenItems(e){return e.flatMap(i=>[i,...this._flattenItems(i.children)])}_applySizing(){const e=C(this.getAttribute("size")),i=_[e],t=l(this.getAttribute("width"),i.expanded),r=l(this.getAttribute("min-width"),i.min),s=l(this.getAttribute("max-width"),i.max),a=l(this.getAttribute("collapsed-width"),i.collapsed),n=this._restoreWidth(t),u=Math.min(Math.max(n,r),s),c=this.hasAttribute("collapsed")?a:u;this.style.setProperty("--ui-sidebar-width",`${u}px`),this.style.setProperty("--ui-sidebar-min-width",`${r}px`),this.style.setProperty("--ui-sidebar-max-width",`${s}px`),this.style.setProperty("--ui-sidebar-collapsed-width",`${a}px`),this.style.setProperty("--ui-sidebar-current-width",`${c}px`),this.style.setProperty("inline-size",`${c}px`)}_applyRadius(){const e=this.getAttribute("radius"),i=this.getAttribute("item-radius");if(!e||["none","sm","md","lg","full"].includes(e)){this.style.removeProperty("--ui-sidebar-radius"),i||this.style.removeProperty("--ui-sidebar-item-radius"),this.style.removeProperty("--ui-sidebar-promo-radius");return}const t=y(e)||e;this.style.setProperty("--ui-sidebar-radius",t),i||this.style.setProperty("--ui-sidebar-item-radius",t),this.style.setProperty("--ui-sidebar-promo-radius",t)}_applyItemMetrics(){const e=y(this.getAttribute("item-radius")),i=g(this.getAttribute("item-gap")),t=g(this.getAttribute("item-padding-x")),r=g(this.getAttribute("item-padding-y")),s=g(this.getAttribute("item-height")),a=g(this.getAttribute("item-font-size")),n=g(this.getAttribute("item-line-height"));this._setOptionalCssVar("--ui-sidebar-item-radius",e),this._setOptionalCssVar("--ui-sidebar-item-gap",i),this._setOptionalCssVar("--ui-sidebar-item-padding-x",t),this._setOptionalCssVar("--ui-sidebar-item-padding-y",r),this._setOptionalCssVar("--ui-sidebar-item-height",s),this._setOptionalCssVar("--ui-sidebar-item-font-size",a),this._setOptionalCssVar("--ui-sidebar-item-line-height",n)}_setOptionalCssVar(e,i){if(!i){this.style.removeProperty(e);return}this.style.setProperty(e,i)}_restoreWidth(e){if(!this.hasAttribute("auto-save"))return e;const i=this.getAttribute("storage-key");if(!i)return e;try{const t=window.localStorage.getItem(`ui-sidebar:${i}`);if(!t)return e;const r=Number.parseFloat(t);return Number.isFinite(r)?r:e}catch{return e}}_persistWidth(e){if(!this.hasAttribute("auto-save"))return;const i=this.getAttribute("storage-key");if(i)try{window.localStorage.setItem(`ui-sidebar:${i}`,`${e}`)}catch{}}_currentExpandedWidth(){const e=Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));return Number.isFinite(e)&&e>0?e:l(this.getAttribute("width"),_[C(this.getAttribute("size"))].expanded)}_bindResponsiveCollapse(){var t;if((t=this._responsiveCleanup)==null||t.call(this),this._responsiveCleanup=null,typeof window>"u"||typeof window.matchMedia!="function")return;const e=window.matchMedia("(max-width: 767px)"),i=()=>this._syncResponsiveCollapse(e.matches);typeof e.addEventListener=="function"?e.addEventListener("change",i):typeof e.addListener=="function"&&e.addListener(i),this._responsiveCleanup=()=>{typeof e.removeEventListener=="function"?e.removeEventListener("change",i):typeof e.removeListener=="function"&&e.removeListener(i)},i()}_syncResponsiveCollapse(e){if(this.hasAttribute("collapsible")){if(e){!this.hasAttribute("collapsed")&&!this._userCollapsePreference&&(this._responsiveAutoCollapsed=!0,this._lastExpandedWidth=this._currentExpandedWidth(),this.setAttribute("collapsed",""),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!0,source:"responsive"},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!0,source:"responsive"},bubbles:!0})));return}this._responsiveAutoCollapsed&&!this._userCollapsePreference&&(this._responsiveAutoCollapsed=!1,this.hasAttribute("collapsed")&&(this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("toggle",{detail:{collapsed:!1,source:"responsive"},bubbles:!0})),this.dispatchEvent(new CustomEvent("collapse-change",{detail:{collapsed:!1,source:"responsive"},bubbles:!0}))))}}_emitWidthChange(e){const i={width:l(this.style.getPropertyValue("--ui-sidebar-width"),0),collapsedWidth:l(this.style.getPropertyValue("--ui-sidebar-collapsed-width"),0),minWidth:l(this.style.getPropertyValue("--ui-sidebar-min-width"),0),maxWidth:l(this.style.getPropertyValue("--ui-sidebar-max-width"),0),source:e};this.dispatchEvent(new CustomEvent("width-change",{detail:i,bubbles:!0}))}_handleResizeKey(e){const t=this.getAttribute("position")==="right"?-1:1,r=this._currentExpandedWidth(),s=l(this.style.getPropertyValue("--ui-sidebar-min-width"),r),a=l(this.style.getPropertyValue("--ui-sidebar-max-width"),r);let n=r;if(e.key==="ArrowRight")n=r+16*t;else if(e.key==="ArrowLeft")n=r-16*t;else if(e.key==="Home")n=s;else if(e.key==="End")n=a;else return;e.preventDefault(),n=Math.min(Math.max(n,s),a),this.style.setProperty("--ui-sidebar-width",`${n}px`),this.hasAttribute("collapsed")||(this.style.setProperty("--ui-sidebar-current-width",`${n}px`),this.style.setProperty("inline-size",`${n}px`)),this._persistWidth(n),this._emitWidthChange("keyboard")}_startResize(e){if(!this.hasAttribute("resizable"))return;e.preventDefault();const i=this.getAttribute("position")==="right",t=e.clientX,r=this._currentExpandedWidth(),s=l(this.style.getPropertyValue("--ui-sidebar-min-width"),r),a=l(this.style.getPropertyValue("--ui-sidebar-max-width"),r);this._dragging=!0,this.dispatchEvent(new CustomEvent("resize-start",{detail:{width:r},bubbles:!0}));const n=c=>{const h=c.clientX-t,b=i?r-h:r+h,p=Math.min(Math.max(b,s),a);this.style.setProperty("--ui-sidebar-width",`${p}px`),this.hasAttribute("collapsed")||(this.style.setProperty("--ui-sidebar-current-width",`${p}px`),this.style.setProperty("inline-size",`${p}px`)),this.dispatchEvent(new CustomEvent("resize",{detail:{width:p},bubbles:!0}))},u=()=>{if(!this._dragging)return;this._dragging=!1,window.removeEventListener("pointermove",n),window.removeEventListener("pointerup",u);const c=this._currentExpandedWidth();this._persistWidth(c),this._emitWidthChange("pointer"),this.dispatchEvent(new CustomEvent("resize-end",{detail:{width:c},bubbles:!0}))};window.addEventListener("pointermove",n),window.addEventListener("pointerup",u),this._resizeCleanup=()=>{window.removeEventListener("pointermove",n),window.removeEventListener("pointerup",u)}}}customElements.get("ui-sidebar")||customElements.define("ui-sidebar",E);exports.UISidebar=E;