@editora/ui-core 0.1.9 → 0.1.10

package/dist/sidebar.esm.js

@@ -0,0 +1,1219 @@
+import { E as T } from "./ElementBase-909688f3.mjs";
+const _ = {
+  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 = /* @__PURE__ */ 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 = /* @__PURE__ */ new Set([
+  "width",
+  "min-width",
+  "max-width",
+  "collapsed-width",
+  "storage-key",
+  "auto-save"
+]), D = (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 V extends T {
+  constructor() {
+    super(...arguments), this._observer = null, this._resizeCleanup = null, this._responsiveCleanup = null, this._responsiveAutoCollapsed = !1, this._userCollapsePreference = !1, this._expanded = /* @__PURE__ */ 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(D(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", c = e.description ? `<div class="item-description">${d(e.description)}</div>` : "", u = e.contentHtml ? `<span class="copy custom-copy">${e.contentHtml}</span>` : `<span class="copy">
+            <span class="item-label">${d(e.label)}</span>
+            ${c}
+          </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, E = r ? ' aria-current="page" data-active="true"' : "", $ = e.disabled ? ' aria-disabled="true"' : ' aria-disabled="false"', k = e.tone && e.tone !== "default" ? ` data-tone="${d(e.tone)}"` : "", I = m ? ` href="${d(e.href || "")}"` : "", S = m && e.target ? ` target="${d(e.target)}"` : "", P = m && e.rel ? ` rel="${d(e.rel)}"` : "", L = e.children.length ? `<div class="submenu" part="submenu"><div class="submenu-inner">${e.children.map((R, W) => this._renderItem(R, `${t}-${W}`)).join("")}</div></div>` : "", w = m ? "a" : "button", H = 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"
+          ${H}
+          data-action="${e.children.length ? "toggle" : m ? "navigate" : "select"}"
+          data-item-id="${d(t)}"
+          data-value="${d(e.value)}"
+          ${I}
+          ${S}
+          ${P}
+          ${E}
+          ${$}
+          ${k}
+        >
+          ${v}
+          ${u}
+          ${f}
+        </${w}>
+        ${L}
+      </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), c = ((f = r.section) == null ? void 0 : f.trim()) || t || "", u = `${x(c || "nav")}-${x(n)}-${i}-${s}`, h = this._normalizeItems(r.children || [], i + 1, c);
+      return {
+        ...r,
+        id: u,
+        label: a,
+        value: n,
+        section: c,
+        children: h,
+        depth: i
+      };
+    });
+  }
+  _groupItems(e) {
+    const i = [], t = /* @__PURE__ */ 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), c = Math.min(Math.max(n, r), s), u = this.hasAttribute("collapsed") ? a : c;
+    this.style.setProperty("--ui-sidebar-width", `${c}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", `${u}px`), this.style.setProperty("inline-size", `${u}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 = (u) => {
+      const h = u.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 }));
+    }, c = () => {
+      if (!this._dragging)
+        return;
+      this._dragging = !1, window.removeEventListener("pointermove", n), window.removeEventListener("pointerup", c);
+      const u = this._currentExpandedWidth();
+      this._persistWidth(u), this._emitWidthChange("pointer"), this.dispatchEvent(new CustomEvent("resize-end", { detail: { width: u }, bubbles: !0 }));
+    };
+    window.addEventListener("pointermove", n), window.addEventListener("pointerup", c), this._resizeCleanup = () => {
+      window.removeEventListener("pointermove", n), window.removeEventListener("pointerup", c);
+    };
+  }
+}
+customElements.get("ui-sidebar") || customElements.define("ui-sidebar", V);
+export {
+  V as UISidebar
+};