@askrjs/themes 0.0.9 → 0.0.11

package/templates/theme/styles/shell/sidebar.css

@@ -1,809 +1,227 @@
-@layer components {
-  :where(.sidebar, [data-slot="sidebar"]) {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    gap: var(--ak-space-md);
-    inline-size: 100%;
-    min-inline-size: 0;
-    min-block-size: var(--ak-layout-navbar-height);
-    max-inline-size: 100%;
-    block-size: 100%;
-    max-block-size: 100%;
-    overflow: hidden;
-    padding-block: var(--ak-space-xs);
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"]) {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    gap: var(--ak-space-md);
-    inline-size: 100%;
-    min-inline-size: 0;
-    flex: 1 1 auto;
-    min-block-size: 0;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    scrollbar-gutter: stable;
-  }
-
-  :where(.sidebar-rail, [data-slot="sidebar-rail"]) {
-    display: flex;
-    justify-content: flex-end;
-    inline-size: 100%;
-    min-block-size: var(--ak-density-control-height-md);
-    padding-inline: var(--ak-space-sm);
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(
-      .navbar-brand,
-      [data-slot="navbar-brand"],
-      .sidebar-brand,
-      [data-slot="sidebar-brand"]
-    ),
-  :where(.sidebar-panel-header, [data-slot="sidebar-panel-header"])
-    > :where(
-      .navbar-brand,
-      [data-slot="navbar-brand"],
-      .sidebar-brand,
-      [data-slot="sidebar-brand"]
-    ) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ak-space-sm);
-    inline-size: 100%;
-    min-inline-size: 0;
-    min-block-size: var(--ak-density-control-height-md);
-    overflow: hidden;
-    padding-inline: var(--ak-space-sm);
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a),
-  :where(.sidebar-panel-header, [data-slot="sidebar-panel-header"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ak-space-sm);
-    inline-size: 100%;
-    min-block-size: var(--ak-density-control-height-md);
-    min-inline-size: 0;
-    padding-inline: var(--ak-density-control-padding-x-sm);
-    border-radius: var(--ak-radius-md);
-    line-height: var(--ak-line-height-tight);
-    overflow: hidden;
-    overflow-wrap: anywhere;
-    color: var(--ak-color-text);
-    font-weight: var(--ak-font-weight-semibold);
-    text-decoration: none;
-    transition:
-      color var(--ak-duration-fast) var(--ak-ease-standard),
-      background var(--ak-duration-fast) var(--ak-ease-standard),
-      box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a:hover),
-  :where(.sidebar-panel-header, [data-slot="sidebar-panel-header"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a:hover) {
-    background: color-mix(in srgb, var(--ak-color-surface-muted) 76%, transparent);
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a:focus-visible),
-  :where(.sidebar-panel-header, [data-slot="sidebar-panel-header"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a:focus-visible) {
-    outline: none;
-    box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(.navbar-group, [data-slot="navbar-group"], .sidebar-group, [data-slot="sidebar-group"]) {
-    display: grid;
-    align-items: stretch;
-    align-content: start;
-    gap: var(--ak-space-xs);
-    inline-size: 100%;
-    margin-inline: 0;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(
-      .navbar-group[data-align="center"],
-      [data-slot="navbar-group"][data-align="center"],
-      .sidebar-group[data-align="center"],
-      [data-slot="sidebar-group"][data-align="center"]
-    ) {
-    justify-items: stretch;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(
-      .navbar-group[data-align="center"],
-      [data-slot="navbar-group"][data-align="center"],
-      .sidebar-group[data-align="center"],
-      [data-slot="sidebar-group"][data-align="center"]
-    )
-    > :where(
-      .navbar-group-label,
-      [data-slot="navbar-group-label"],
-      .sidebar-group-label,
-      [data-slot="sidebar-group-label"]
-    ) {
-    text-align: center;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(
-      .navbar-group[data-align="end"],
-      [data-slot="navbar-group"][data-align="end"],
-      .sidebar-group[data-align="end"],
-      [data-slot="sidebar-group"][data-align="end"]
-    ) {
-    justify-content: stretch;
-    margin-block-start: auto;
-    margin-inline-start: 0;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(
-      .navbar-group-body,
-      [data-slot="navbar-group-body"],
-      .sidebar-group-body,
-      [data-slot="sidebar-group-body"]
-    ) {
-    display: grid;
-    align-content: start;
-    gap: var(--ak-space-xs);
-    min-inline-size: 0;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(
-      .navbar-group-label,
-      [data-slot="navbar-group-label"],
-      .sidebar-group-label,
-      [data-slot="sidebar-group-label"]
-    ) {
-    color: var(--ak-color-text-muted);
-    font-size: var(--ak-font-size-xs);
-    font-weight: var(--ak-font-weight-semibold);
-    letter-spacing: 0.08em;
-    line-height: var(--ak-line-height-tight);
-    overflow: hidden;
-    padding-inline: var(--ak-space-sm);
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-    white-space: nowrap;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item) {
-    inline-size: 100%;
-    min-inline-size: 0;
-    justify-content: flex-start;
-    overflow: hidden;
-    position: relative;
-    text-align: start;
-    white-space: nowrap;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(
-      .navbar-group[data-align="center"],
-      [data-slot="navbar-group"][data-align="center"],
-      .sidebar-group[data-align="center"],
-      [data-slot="sidebar-group"][data-align="center"]
-    )
-    :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item) {
-    justify-content: center;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item)
-    > :where([data-slot="icon"], svg) {
-    flex: none;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item)
-    > :where(:not([data-slot="icon"]):not(svg)) {
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(
-      .nav-item[aria-current="page"],
-      .navbar-item[aria-current="page"],
-      [data-slot="nav-item"][aria-current="page"],
-      [data-slot="nav-link"][aria-current="page"],
-      .nav-item[data-active="true"],
-      .navbar-item[data-active="true"],
-      [data-slot="nav-item"][data-active="true"],
-      [data-slot="nav-link"][data-active="true"]
-    ) {
-    background: color-mix(in srgb, var(--ak-color-selected) 82%, var(--ak-color-surface));
-    border-color: var(--ak-color-selected-border);
-    box-shadow:
-      inset 2px 0 0 var(--ak-color-primary),
-      var(--ak-shadow-sm);
-    color: var(--ak-color-text);
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(
-      .nav-item[aria-current="page"],
-      .navbar-item[aria-current="page"],
-      [data-slot="nav-item"][aria-current="page"],
-      [data-slot="nav-link"][aria-current="page"],
-      .nav-item[data-active="true"],
-      .navbar-item[data-active="true"],
-      [data-slot="nav-item"][data-active="true"],
-      [data-slot="nav-link"][data-active="true"]
-    )::before {
-    content: "";
-    position: absolute;
-    inset-block: max(var(--ak-space-2xs, 0.125rem), 2px);
-    inset-inline-start: 0;
-    inline-size: 2px;
-    border-radius: 999px;
-    background: var(--ak-color-primary);
-    pointer-events: none;
-  }
-
-  :where(.sidebar-shell, [data-slot="sidebar-shell"], .sidebar-panel, [data-slot="sidebar-panel"])
-    :where(
-      .nav-item[aria-current="page"],
-      .navbar-item[aria-current="page"],
-      [data-slot="nav-item"][aria-current="page"],
-      [data-slot="nav-link"][aria-current="page"],
-      .nav-item[data-active="true"],
-      .navbar-item[data-active="true"],
-      [data-slot="nav-item"][data-active="true"],
-      [data-slot="nav-link"][data-active="true"]
-    )
-    > :where([data-slot="icon"], svg) {
-    color: var(--ak-color-primary);
-  }
-
-  :where(
-    .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-    [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-  ) {
-    inline-size: var(--ak-layout-sidebar-rail-width);
-  }
-
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"]) {
-    align-items: center;
-    gap: var(--ak-space-sm);
-    inline-size: var(--ak-layout-sidebar-rail-width);
-  }
-
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.sidebar-rail, [data-slot="sidebar-rail"]) {
-    justify-content: center;
-    padding-inline: 0;
-  }
-
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.sidebar-rail, [data-slot="sidebar-rail"]),
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(
-      .navbar-brand,
-      [data-slot="navbar-brand"],
-      .sidebar-brand,
-      [data-slot="sidebar-brand"]
-    ),
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    :where(.navbar-group, [data-slot="navbar-group"], .sidebar-group, [data-slot="sidebar-group"]),
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    :where(
-      .navbar-group-body,
-      [data-slot="navbar-group-body"],
-      .sidebar-group-body,
-      [data-slot="sidebar-group-body"]
-    ) {
-    inline-size: 100%;
-    min-inline-size: 0;
-  }
-
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(
-      .navbar-brand,
-      [data-slot="navbar-brand"],
-      .sidebar-brand,
-      [data-slot="sidebar-brand"]
-    ),
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a) {
-    justify-content: center;
-    padding-inline: 0;
-  }
-
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a),
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.sidebar-rail, [data-slot="sidebar-rail"])
-    > :where(.sidebar-rail-toggle, [data-slot="sidebar-rail-toggle"]),
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item) {
-    justify-content: center;
-    inline-size: var(--ak-density-control-height-md);
-    min-inline-size: 0;
-    block-size: var(--ak-density-control-height-md);
-    min-block-size: var(--ak-density-control-height-md);
-    padding-inline: 0;
-    gap: 0;
-  }
-
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    :where(.navbar-group, [data-slot="navbar-group"], .sidebar-group, [data-slot="sidebar-group"]) {
-    justify-items: center;
-    inline-size: 100%;
-  }
-
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    :where(
-      .navbar-group-body,
-      [data-slot="navbar-group-body"],
-      .sidebar-group-body,
-      [data-slot="sidebar-group-body"]
-    ) {
-    justify-items: center;
-  }
-
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    :where(
-      .navbar-group-label,
-      [data-slot="navbar-group-label"],
-      .sidebar-group-label,
-      [data-slot="sidebar-group-label"]
-    ),
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item)
-    > :where(:not([data-slot="icon"]):not(svg)),
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a)
-    > :where(:not([data-slot="icon"]):not(svg)) {
-    position: absolute;
-    overflow: hidden;
-    inline-size: 1px;
-    block-size: 1px;
-    padding: 0;
-    border: 0;
-    margin: -1px;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-  }
-
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"], .sidebar-item)
-    > :where([data-slot="icon"], svg),
-  :where(
-      .sidebar[data-icon-collapsed="true"][data-responsive-collapsed="false"],
-      [data-slot="sidebar"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
-    )
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a)
-    > :where([data-slot="icon"], svg) {
-    inline-size: var(--ak-icon-size-md);
-    block-size: var(--ak-icon-size-md);
-    font-size: var(--ak-font-size-md);
-  }
-
-  :where(
-    .sidebar-toggle,
-    [data-slot="sidebar-toggle"],
-    .sidebar-rail-toggle,
-    [data-slot="sidebar-rail-toggle"],
-    .sidebar-panel-close,
-    [data-slot="sidebar-panel-close"]
-  ) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--ak-space-sm);
-    max-inline-size: 100%;
-    min-inline-size: var(--ak-density-control-height-md);
-    min-block-size: var(--ak-density-control-height-md);
-    padding-inline: var(--ak-density-control-padding-x-sm);
-    border: 1px solid var(--ak-color-border);
-    border-radius: var(--ak-radius-md);
-    background: var(--ak-color-surface);
-    color: var(--ak-color-text);
-    font-size: var(--ak-font-size-sm);
-    font-weight: var(--ak-font-weight-medium);
-    cursor: pointer;
-    transition:
-      color var(--ak-duration-fast) var(--ak-ease-standard),
-      background var(--ak-duration-fast) var(--ak-ease-standard),
-      border-color var(--ak-duration-fast) var(--ak-ease-standard),
-      box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
-  }
-
-  :where(.sidebar-rail-toggle, [data-slot="sidebar-rail-toggle"]) {
-    inline-size: var(--ak-density-control-height-md);
-    min-inline-size: var(--ak-density-control-height-md);
-    block-size: var(--ak-density-control-height-md);
-    padding-inline: 0;
-  }
-
-  :where(
-    .sidebar-toggle:hover,
-    [data-slot="sidebar-toggle"]:hover,
-    .sidebar-rail-toggle:hover,
-    [data-slot="sidebar-rail-toggle"]:hover,
-    .sidebar-panel-close:hover,
-    [data-slot="sidebar-panel-close"]:hover
-  ) {
-    color: var(--ak-color-text);
-    background: var(--ak-color-hover);
-    border-color: var(--ak-color-border-strong);
-  }
-
-  :where(.sidebar-toggle[data-state="open"], [data-slot="sidebar-toggle"][data-state="open"]) {
-    border-color: var(--ak-color-primary);
-    background: var(--ak-color-primary-soft);
-    color: var(--ak-color-primary-ink);
-  }
-
-  :where(
-    .sidebar-toggle:focus-visible,
-    [data-slot="sidebar-toggle"]:focus-visible,
-    .sidebar-rail-toggle:focus-visible,
-    [data-slot="sidebar-rail-toggle"]:focus-visible,
-    .sidebar-panel-close:focus-visible,
-    [data-slot="sidebar-panel-close"]:focus-visible
-  ) {
-    outline: none;
-    box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
-  }
-
-  :where(
-    .sidebar-toggle-icon,
-    [data-slot="sidebar-toggle-icon"],
-    .sidebar-rail-toggle-icon,
-    [data-slot="sidebar-rail-toggle-icon"]
-  ) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--ak-icon-size-sm);
-    block-size: var(--ak-icon-size-sm);
-    flex: none;
-  }
-
-  :where(.sidebar-toggle-label, [data-slot="sidebar-toggle-label"]) {
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+:where([data-slot="sidebar"]) {
+  --ak-background-base: var(--ak-color-bg);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--ak-space-sm);
+  border-color: var(--ak-color-border);
+  background: var(--ak-background-base);
+  color: var(--ak-color-text);
+}
 
-  :where(.sidebar-rail-toggle-icon, [data-slot="sidebar-rail-toggle-icon"])
-    :where([data-slot="icon"], svg) {
-    inline-size: var(--ak-icon-size-sm);
-    block-size: var(--ak-icon-size-sm);
-  }
+:where([data-slot="sidebar"][data-variant="floating"]) {
+  margin: var(--ak-space-sm);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-lg);
+  box-shadow: var(--ak-shadow-sm);
+}
 
-  :where(.sidebar-rail-toggle-label, [data-slot="sidebar-rail-toggle-label"]) {
-    position: absolute;
-    overflow: hidden;
-    inline-size: 1px;
-    block-size: 1px;
-    padding: 0;
-    border: 0;
-    margin: -1px;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-  }
+:where([data-slot="sidebar"][data-variant="inset"]) {
+  margin: var(--ak-space-sm) 0 var(--ak-space-sm) var(--ak-space-sm);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-lg);
+}
 
-  :where(.sidebar-toggle-glyph--menu) {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.16rem;
-    inline-size: var(--ak-icon-size-sm);
-    block-size: var(--ak-icon-size-sm);
-  }
+:where([data-slot="sidebar"][data-side="right"]) {
+  border-inline-start: 1px solid var(--ak-color-border);
+  border-inline-end: 0;
+}
 
-  :where(.sidebar-toggle-glyph--menu > span) {
-    display: block;
-    block-size: 1.5px;
-    inline-size: 100%;
-    border-radius: 999px;
-    background: currentColor;
-  }
+:where([data-slot="sidebar-provider"]) {
+  display: flex;
+  min-block-size: 100svh;
+  inline-size: 100%;
+  background: var(--ak-color-bg);
+}
 
-  :where(.sidebar-toggle-glyph--rail) {
-    position: relative;
-    display: inline-flex;
-    inline-size: 0.5rem;
-    block-size: 0.5rem;
-  }
+:where([data-slot="sidebar-inset"]) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  background: var(--ak-color-bg);
+}
 
-  :where(.sidebar-toggle-glyph--rail)::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-block-start: 1.75px solid currentColor;
-    border-inline-end: 1.75px solid currentColor;
-  }
+:where([data-slot="sidebar-header"], [data-slot="sidebar-footer"]) {
+  display: grid;
+  gap: var(--ak-space-xs);
+  padding: var(--ak-space-sm);
+}
 
-  :where(.sidebar-toggle-glyph--rail.is-collapsed)::before {
-    transform: rotate(45deg);
-  }
+:where([data-slot="sidebar-content"]) {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--ak-space-sm);
+  min-block-size: 0;
+  overflow: auto;
+}
 
-  :where(.sidebar-toggle-glyph--rail.is-expanded)::before {
-    transform: rotate(225deg);
-  }
+:where([data-slot="sidebar-group"]) {
+  display: grid;
+  gap: var(--ak-space-xs);
+  min-inline-size: 0;
+}
 
-  :where(.sidebar-panel, [data-slot="sidebar-panel"]) {
-    position: static;
-    z-index: var(--ak-z-modal);
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    box-sizing: border-box;
-    gap: var(--ak-space-xs);
-    overflow: auto;
-    overscroll-behavior: contain;
-    inline-size: 100%;
-    min-inline-size: 0;
-    max-inline-size: 100%;
-    padding: var(--ak-space-md);
-    border: 1px solid var(--ak-color-border);
-    background: var(--ak-color-surface-raised);
-    box-shadow: var(--ak-shadow-lg);
-  }
+:where([data-slot="sidebar-group-label"]) {
+  min-block-size: var(--ak-density-control-height-xs);
+  padding-inline: var(--ak-space-sm);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-medium);
+  line-height: var(--ak-density-control-height-xs);
+}
 
-  :where([data-slot="sidebar"][data-responsive-collapsed="true"])
-    > :where(.sidebar-panel, [data-slot="sidebar-panel"]) {
-    position: fixed;
-    inset-block: 0;
-    inset-inline-start: 0;
-    inline-size: min(
-      calc(100vw - max(2.25rem, env(safe-area-inset-right))),
-      var(--ak-layout-mobile-drawer-width, 22rem)
-    );
-    max-inline-size: calc(100vw - max(2.25rem, env(safe-area-inset-right)));
-    max-block-size: 100dvh;
-    gap: var(--ak-space-md);
-    padding-block: max(var(--ak-space-md), env(safe-area-inset-top))
-      max(var(--ak-space-md), env(safe-area-inset-bottom));
-    padding-inline-start: max(var(--ak-space-md), env(safe-area-inset-left));
-    border-inline-start: 0;
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-    border-start-end-radius: var(--ak-radius-lg);
-    border-end-end-radius: var(--ak-radius-lg);
-    box-shadow: var(--ak-shadow-xl, var(--ak-shadow-lg));
-    transform-origin: left center;
-  }
+:where([data-slot="sidebar-group-content"]) {
+  display: grid;
+  gap: var(--ak-space-xs);
+  min-inline-size: 0;
+}
 
-  :where(.sidebar-panel-header, [data-slot="sidebar-panel-header"]) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex: none;
-    gap: var(--ak-space-md);
-    min-inline-size: 0;
-    padding-block-end: var(--ak-space-sm);
-    border-block-end: 1px solid var(--ak-color-border);
-  }
+:where([data-slot="sidebar-menu"]) {
+  display: grid;
+  gap: var(--ak-space-xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 
-  :where([data-slot="sidebar"][data-responsive-collapsed="true"])
-    > :where(.sidebar-panel, [data-slot="sidebar-panel"])
-    > :where(.sidebar-panel-header, [data-slot="sidebar-panel-header"]) {
-    position: sticky;
-    inset-block-start: calc(-1 * max(var(--ak-space-md), env(safe-area-inset-top)));
-    z-index: 1;
-    padding-block-start: max(var(--ak-space-md), env(safe-area-inset-top));
-    background: inherit;
-  }
+:where([data-slot="sidebar-menu-item"]) {
+  position: relative;
+  min-inline-size: 0;
+}
 
-  :where(.sidebar-panel-header, [data-slot="sidebar-panel-header"])
-    > :where(
-      .navbar-brand,
-      [data-slot="navbar-brand"],
-      .sidebar-brand,
-      [data-slot="sidebar-brand"]
-    ) {
-    inline-size: auto;
-    padding-inline: 0;
-  }
+:where([data-slot="sidebar-menu-button"]) {
+  --_sidebar-menu-button-hover-bg: color-mix(in oklch, var(--ak-color-text) 5%, transparent);
+  --_sidebar-menu-button-active-bg: color-mix(
+    in oklch,
+    var(--ak-color-text) 7%,
+    var(--ak-color-bg)
+  );
+
+  display: flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-block-size: var(--ak-density-control-height-sm);
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding-inline: var(--ak-space-sm);
+  border: 1px solid transparent;
+  border-radius: var(--ak-radius-md);
+  background: transparent;
+  color: var(--ak-color-text);
+  font: inherit;
+  font-size: var(--ak-font-size-sm);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
 
-  :where(.sidebar-panel-header, [data-slot="sidebar-panel-header"])
-    > :where(.navbar-brand, [data-slot="navbar-brand"], .sidebar-brand, [data-slot="sidebar-brand"])
-    :where(a) {
-    color: var(--ak-color-text);
-    font-size: var(--ak-font-size-lg);
-    font-weight: var(--ak-font-weight-semibold);
-    letter-spacing: 0;
-    overflow-wrap: anywhere;
-  }
+:where(
+  [data-slot="sidebar-menu-button"] > [data-slot="icon"],
+  [data-slot="sidebar-menu-button"] > svg
+) {
+  flex: none;
+  inline-size: var(--ak-icon-size-sm);
+  block-size: var(--ak-icon-size-sm);
+}
 
-  :where(.sidebar-panel-close, [data-slot="sidebar-panel-close"]) {
-    flex: none;
-    inline-size: var(--ak-density-control-height-md);
-    block-size: var(--ak-density-control-height-md);
-    margin-inline-start: auto;
-    padding-inline: 0;
-  }
+:where([data-slot="sidebar-menu-button"]:hover) {
+  background: var(--_sidebar-menu-button-hover-bg);
+  color: var(--ak-color-text);
+}
 
-  :where(.sidebar-panel, [data-slot="sidebar-panel"])
-    > :where(.navbar-group, [data-slot="navbar-group"], .sidebar-group, [data-slot="sidebar-group"])
-    > :where(
-      .navbar-group-label,
-      [data-slot="navbar-group-label"],
-      .sidebar-group-label,
-      [data-slot="sidebar-group-label"]
-    ) {
-    padding-inline: 0;
-  }
+:where([data-slot="sidebar-menu-button"][data-active="true"]) {
+  background: var(--_sidebar-menu-button-active-bg);
+  color: var(--ak-color-text);
+  font-weight: var(--ak-font-weight-medium);
+}
 
-  :where(.sidebar-mobile, [data-slot="sidebar-mobile"]) {
-    display: none;
-  }
+:where([data-slot="sidebar-menu-button"][data-active="true"]:hover) {
+  background: color-mix(in oklch, var(--ak-color-text) 9%, var(--ak-color-bg));
+}
 
-  :where([data-slot="sidebar"][data-responsive-collapsed="true"]) {
-    inline-size: 100%;
-  }
+:where([data-slot="sidebar-menu-button"][data-variant="outline"]) {
+  border-color: var(--ak-color-border);
+  background: var(--ak-color-bg);
+  box-shadow: none;
+}
 
-  :where([data-slot="sidebar"][data-responsive-collapsed="true"])
-    > :where(.sidebar-mobile, [data-slot="sidebar-mobile"]) {
-    display: flex;
-    justify-content: flex-end;
-    min-inline-size: 0;
-  }
+:where([data-slot="sidebar-menu-button"][data-size="sm"]) {
+  min-block-size: var(--ak-density-control-height-xs);
+  font-size: var(--ak-font-size-xs);
+}
 
-  :where([data-slot="sidebar"][data-responsive-collapsed="true"])
-    > :where(.sidebar-shell, [data-slot="sidebar-shell"]) {
-    display: none;
-  }
+:where([data-slot="sidebar-menu-button"][data-size="lg"]) {
+  min-block-size: var(--ak-density-control-height-md);
+}
 
-  :where(.sidebar-backdrop, [data-slot="sidebar-backdrop"]) {
-    position: fixed;
-    inset: 0;
-    z-index: var(--ak-z-modal-backdrop);
-    border: 0;
-    background: color-mix(in srgb, var(--ak-color-backdrop) 88%, transparent);
-    backdrop-filter: blur(2px);
-    cursor: default;
-  }
+:where(
+  [data-slot="sidebar-menu-button"]:focus-visible,
+  [data-slot="sidebar-trigger"]:focus-visible
+) {
+  outline: none;
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
 
-  @media (prefers-reduced-motion: no-preference) {
-    :where(
-      .sidebar-backdrop[data-state="open"],
-      [data-slot="sidebar-backdrop"][data-state="open"]
-    ) {
-      animation: sidebar-backdrop-in var(--ak-duration-fast) var(--ak-ease-standard);
-    }
+:where([data-slot="sidebar-menu-action"]) {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--ak-space-xs);
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--ak-density-control-height-xs);
+  block-size: var(--ak-density-control-height-xs);
+  padding: 0;
+  border: 0;
+  border-radius: var(--ak-radius-sm);
+  background: transparent;
+  color: var(--ak-color-text-muted);
+  transform: translateY(-50%);
+  cursor: pointer;
+}
 
-    :where(.sidebar-panel[data-state="open"], [data-slot="sidebar-panel"][data-state="open"]) {
-      animation: sidebar-drawer-in var(--ak-duration-normal) var(--ak-ease-standard);
-    }
+:where([data-slot="sidebar-menu-action"]:hover) {
+  background: var(--ak-color-accent);
+  color: var(--ak-color-accent-ink);
+}
 
-    :where(.sidebar-panel[data-state="closed"], [data-slot="sidebar-panel"][data-state="closed"]) {
-      animation: sidebar-drawer-out var(--ak-duration-fast) var(--ak-ease-standard);
-      pointer-events: none;
-    }
-  }
+:where([data-slot="sidebar-menu-badge"]) {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--ak-space-sm);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+  transform: translateY(-50%);
+}
 
-  @keyframes sidebar-backdrop-in {
-    from {
-      opacity: 0;
-    }
-  }
+:where([data-slot="sidebar-rail"]) {
+  flex: 0 0 var(--ak-layout-sidebar-rail-width);
+  border: 0;
+  border-inline-end: 1px solid var(--ak-color-border);
+  background: var(--ak-color-surface-muted);
+  cursor: ew-resize;
+}
 
-  @keyframes sidebar-drawer-in {
-    from {
-      opacity: 0;
-      transform: translateX(-0.75rem);
-    }
-  }
+:where([data-slot="sidebar-trigger"]) {
+  flex: none;
+}
 
-  @keyframes sidebar-drawer-out {
-    to {
-      opacity: 0;
-      transform: translateX(-0.75rem);
-    }
-  }
+:where([data-slot="sidebar"][data-collapsible="icon"]) :where([data-slot="sidebar-group-label"]),
+:where([data-slot="sidebar"][data-collapsible="icon"])
+  :where([data-slot="sidebar-menu-button"] > :not(svg):not([data-slot="icon"])),
+:where([data-slot="sidebar"][data-collapsible="icon"]) :where([data-slot="sidebar-menu-badge"]) {
+  display: none;
+}
 
-  @media (prefers-reduced-motion: reduce) {
-    :where(.sidebar-backdrop, [data-slot="sidebar-backdrop"]),
-    :where(.sidebar-panel, [data-slot="sidebar-panel"]) {
-      animation: none;
-    }
+:where([data-slot="sidebar"][data-collapsible="icon"]) :where([data-slot="sidebar-menu-button"]) {
+  justify-content: center;
+}
 
-    :where(.sidebar-backdrop, [data-slot="sidebar-backdrop"]) {
-      backdrop-filter: none;
-    }
-  }
+:where([data-slot="sidebar"][data-collapsible="icon"]) :where([data-slot="sidebar-content"]) {
+  overflow: visible;
 }