@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/sidebar.css

@@ -0,0 +1,716 @@
+/* @auvyx/ui sidebar | order 28 */
+@layer components {
+  .sidebar {
+      &:not([data-sidebar-initialized]) {
+        @media (width < 48rem) {
+          display: none;
+        }
+      }
+      &:not([aria-hidden]), &[aria-hidden=false] {
+        @media (width < 48rem) {
+          position: fixed;
+        }
+        @media (width < 48rem) {
+          inset: 0;
+        }
+        @media (width < 48rem) {
+          z-index: 40;
+        }
+        @media (width < 48rem) {
+          background-color: color-mix(in srgb, #000 50%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+          }
+        }
+      }
+      > nav {
+        position: fixed;
+        inset-block: 0;
+        z-index: 50;
+        display: flex;
+        width: var(--sidebar-mobile-width);
+        flex-direction: column;
+        transition-property: transform, translate, scale, rotate;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+        --tw-duration: 300ms;
+        transition-duration: 300ms;
+        --tw-ease: var(--ease-in-out);
+        transition-timing-function: var(--ease-in-out);
+        @media (width >= 48rem) {
+          width: var(--sidebar-width);
+        }
+      }
+      & + * {
+        transition-property: margin;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+        --tw-duration: 300ms;
+        transition-duration: 300ms;
+        --tw-ease: var(--ease-in-out);
+        transition-timing-function: var(--ease-in-out);
+      }
+      &:not([data-side]), &[data-side=left] {
+        > nav {
+          left: 0;
+          border-right-style: var(--tw-border-style);
+          border-right-width: 1px;
+        }
+        & + * {
+          position: relative;
+          @media (width >= 48rem) {
+            margin-left: var(--sidebar-width);
+          }
+        }
+        &[aria-hidden=true] {
+          > nav {
+            --tw-translate-x: -100%;
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+          }
+          & + * {
+            @media (width >= 48rem) {
+              margin-left: 0;
+            }
+          }
+        }
+      }
+      &[data-side=right] {
+        > nav {
+          right: 0;
+          border-left-style: var(--tw-border-style);
+          border-left-width: 1px;
+        }
+        & + * {
+          position: relative;
+          @media (width >= 48rem) {
+            margin-right: var(--sidebar-width);
+          }
+        }
+        &[aria-hidden=true] {
+          > nav {
+            --tw-translate-x: 100%;
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+          }
+          & + * {
+            @media (width >= 48rem) {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+      > nav {
+        > header, > footer {
+          display: flex;
+          flex-direction: column;
+        }
+        [role=separator] {
+          width: auto;
+        }
+        > section {
+          display: flex;
+          min-height: 0;
+          flex: 1;
+          flex-direction: column;
+          overflow-y: auto;
+          > [role=group] {
+            position: relative;
+            display: flex;
+            width: 100%;
+            min-width: 0;
+            flex-direction: column;
+          }
+          h3 {
+            display: flex;
+            flex-shrink: 0;
+            align-items: center;
+            --tw-outline-style: none;
+            outline-style: none;
+            @media (forced-colors: active) {
+              outline: 2px solid transparent;
+              outline-offset: 2px;
+            }
+            transition-property: margin,opacity;
+            transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+            transition-duration: var(--tw-duration, var(--default-transition-duration));
+            --tw-duration: 200ms;
+            transition-duration: 200ms;
+            --tw-ease: linear;
+            transition-timing-function: linear;
+            &>svg {
+              flex-shrink: 0;
+            }
+          }
+          ul {
+            display: flex;
+            width: 100%;
+            min-width: 0;
+            flex-direction: column;
+            li {
+              position: relative;
+              > a, > button, > details > summary {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                overflow: hidden;
+                text-align: left;
+                --tw-outline-style: none;
+                outline-style: none;
+                @media (forced-colors: active) {
+                  outline: 2px solid transparent;
+                  outline-offset: 2px;
+                }
+                transition-property: width,height,padding;
+                transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+                transition-duration: var(--tw-duration, var(--default-transition-duration));
+                &:disabled {
+                  pointer-events: none;
+                }
+                &:disabled {
+                  opacity: 50%;
+                }
+                &[aria-disabled="true"] {
+                  pointer-events: none;
+                }
+                &[aria-disabled="true"] {
+                  opacity: 50%;
+                }
+                &>span:last-child {
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+                &>svg {
+                  flex-shrink: 0;
+                }
+              }
+              > details {
+                &:not([open]) {
+                  > summary {
+                    &::after {
+                      rotate: calc(90deg * -1);
+                    }
+                    &:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *)::after {
+                      rotate: 90deg;
+                    }
+                  }
+                }
+                > summary {
+                  &::after {
+                    margin-inline-start: auto;
+                    display: block;
+                    width: calc(var(--spacing) * 3.5);
+                    height: calc(var(--spacing) * 3.5);
+                    background-color: currentcolor;
+                    transition-property: transform, translate, scale, rotate;
+                    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+                    transition-duration: var(--tw-duration, var(--default-transition-duration));
+                    --tw-ease: linear;
+                    transition-timing-function: linear;
+                    --tw-content: '';
+                    content: var(--tw-content);
+                    mask-image: var(--chevron-down-icon);
+                    mask-size: 1rem;
+                    mask-position: center;
+                    mask-repeat: no-repeat;
+                  }
+                }
+              }
+            }
+            ul {
+              display: flex;
+              min-width: 0;
+              flex-direction: column;
+            }
+          }
+        }
+      }
+    }
+}
+
+@layer components {
+  .sidebar > nav {
+      background-color: var(--color-sidebar);
+      color: var(--color-sidebar-foreground);
+    }
+  .sidebar > nav > header, .sidebar > nav > footer {
+      gap: calc(var(--spacing) * 2);
+      padding: calc(var(--spacing) * 2);
+    }
+  .sidebar > nav > section {
+      gap: calc(var(--spacing) * 2);
+    }
+  .sidebar > nav [role=separator] {
+      margin-inline: calc(var(--spacing) * 2);
+      border-color: var(--color-sidebar-border);
+    }
+  .sidebar > nav > section > [role=group] {
+      padding: calc(var(--spacing) * 2);
+    }
+  .sidebar > nav h3 {
+      height: calc(var(--spacing) * 8);
+      border-radius: var(--radius-md);
+      padding-inline: calc(var(--spacing) * 2);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-sidebar-foreground);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent);
+      }
+      --tw-ring-color: var(--color-sidebar-ring);
+      transition-property: margin,opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      --tw-duration: 200ms;
+      transition-duration: 200ms;
+      --tw-ease: linear;
+      transition-timing-function: linear;
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &>svg {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+  .sidebar > nav > section > [role=group] > ul {
+      gap: var(--spacing);
+    }
+  .sidebar > nav > section > [role=group] {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  .sidebar > nav li > :is(a, button), .sidebar > nav li > details > summary {
+      gap: calc(var(--spacing) * 2);
+      border-radius: var(--radius-md);
+      padding: calc(var(--spacing) * 2);
+      text-align: left;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-ring-color: var(--color-sidebar-ring);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-sidebar-accent);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-sidebar-accent-foreground);
+        }
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-outline-style: none;
+        outline-style: none;
+        @media (forced-colors: active) {
+          outline: 2px solid transparent;
+          outline-offset: 2px;
+        }
+      }
+      &:active {
+        background-color: var(--color-sidebar-accent);
+      }
+      &:active {
+        color: var(--color-sidebar-accent-foreground);
+      }
+      &[data-open] {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-sidebar-accent);
+          }
+        }
+      }
+      &[data-open] {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-sidebar-accent-foreground);
+          }
+        }
+      }
+      &>svg {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+      &>svg {
+        flex-shrink: 0;
+      }
+    }
+  .sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]), .sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
+      background-color: var(--color-sidebar-accent);
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-sidebar-accent-foreground);
+    }
+  .sidebar > nav li > :is(a, button):not([data-variant]), .sidebar > nav li > details > summary:not([data-variant]), .sidebar > nav li > :is(a, button)[data-variant=default], .sidebar > nav li > details > summary[data-variant=default] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-sidebar-accent);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-sidebar-accent-foreground);
+        }
+      }
+    }
+  .sidebar > nav li > :is(a, button)[data-variant=outline], .sidebar > nav li > details > summary[data-variant=outline] {
+      background-color: var(--color-background);
+      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-sidebar-accent);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-sidebar-accent-foreground);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent));
+          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        }
+      }
+    }
+  .sidebar > nav li > :is(a, button):not([data-size]), .sidebar > nav li > details > summary:not([data-size]), .sidebar > nav li > :is(a, button)[data-size=default], .sidebar > nav li > details > summary[data-size=default] {
+      height: calc(var(--spacing) * 8);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  .sidebar > nav li > :is(a, button)[data-size=sm], .sidebar > nav li > details > summary[data-size=sm] {
+      height: calc(var(--spacing) * 7);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  .sidebar > nav li > :is(a, button)[data-size=lg], .sidebar > nav li > details > summary[data-size=lg] {
+      height: calc(var(--spacing) * 12);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  .sidebar > nav li > details > summary::after {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  .sidebar > nav li > details::details-content {
+      padding-inline: calc(var(--spacing) * 3.5);
+    }
+  .sidebar > nav ul ul {
+      --tw-translate-x: 1px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+      gap: var(--spacing);
+      border-inline-start-style: var(--tw-border-style);
+      border-inline-start-width: 1px;
+      border-color: var(--color-sidebar-border);
+      padding-inline: calc(var(--spacing) * 2.5);
+      padding-block: calc(var(--spacing) * 0.5);
+      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        --tw-translate-x: -1px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  .sidebar > nav ul ul > li > :is(a, button), .sidebar > nav ul ul > li > details > summary {
+      height: calc(var(--spacing) * 7);
+      gap: calc(var(--spacing) * 2);
+      border-radius: var(--radius-md);
+      padding-inline: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-sidebar-foreground);
+      --tw-ring-color: var(--color-sidebar-ring);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-sidebar-accent);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-sidebar-accent-foreground);
+        }
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:active {
+        background-color: var(--color-sidebar-accent);
+      }
+      &:active {
+        color: var(--color-sidebar-accent-foreground);
+      }
+      &>svg {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+}
+
+@layer components {
+  :root {
+      --sidebar-width-icon: 3rem;
+    }
+  .sidebar {
+      --sidebar-gap: 0px;
+      > nav {
+        top: var(--sidebar-top, 0px);
+        transition-property: translate, width, inset;
+      }
+      &:not([data-collapsible='icon'][data-state='collapsed']) [data-tooltip]::before {
+        display: none;
+      }
+    }
+  .sidebar:is([data-variant='floating'], [data-variant='inset']) {
+      --sidebar-gap: 0.5rem;
+    }
+  @media (width >= 48rem) {
+      .sidebar[data-variant='floating'] > nav {
+        inset-block: calc(var(--sidebar-top, 0px) + var(--sidebar-gap)) var(--sidebar-gap);
+        inline-size: calc(var(--sidebar-width) - var(--sidebar-gap) * 2);
+        block-size: auto;
+      }
+      .sidebar[data-variant='floating']:is(:not([data-side]), [data-side='left']) > nav {
+        left: var(--sidebar-gap);
+      }
+      .sidebar[data-variant='floating'][data-side='right'] > nav {
+        right: var(--sidebar-gap);
+      }
+      .sidebar[data-variant='inset'] > nav {
+        border-inline-width: 0;
+      }
+      .sidebar[data-variant='inset'] + * {
+        margin-block: 0.5rem;
+        min-block-size: calc(100svh - 1rem);
+        overflow: hidden;
+      }
+      .sidebar[data-variant='inset']:is(:not([data-side]), [data-side='left']) + * {
+        margin-right: 0.5rem;
+      }
+      .sidebar[data-variant='inset'][aria-hidden='true'] + * {
+        margin-left: 0.5rem;
+      }
+      .sidebar[data-collapsible='icon'][data-state='collapsed'] {
+        > nav {
+          translate: none;
+          inline-size: var(--sidebar-width-icon);
+          overflow: hidden;
+        }
+        &:is(:not([data-side]), [data-side='left']) + * {
+          margin-left: var(--sidebar-width-icon);
+        }
+        &[data-side='right'] + * {
+          margin-right: var(--sidebar-width-icon);
+        }
+        &[data-variant='floating']:is(:not([data-side]), [data-side='left']) + * {
+          margin-left: calc(var(--sidebar-width-icon) + 1rem);
+        }
+        &[data-variant='floating'][data-side='right'] + * {
+          margin-right: calc(var(--sidebar-width-icon) + 1rem);
+        }
+        nav h3, nav ul ul, nav details::details-content, nav summary::after, nav [data-sidebar-hide-collapsed]:not([data-popover] *), nav :is(header, footer, section) :is(a, button, summary):not([data-popover] *) > :not(:first-child) {
+          display: none;
+        }
+        nav :is(header, footer, section) :is(li > a, li > button, li > details > summary, [data-sidebar-item]):not([data-popover] *) {
+          inline-size: 2rem;
+          block-size: 2rem;
+          padding: 0.5rem;
+          justify-content: center;
+          overflow: visible;
+        }
+        nav :is(header, footer) :is(li > a, li > button, [data-sidebar-item])[data-size='lg'] {
+          padding: 0;
+        }
+      }
+      @supports (anchor-name: --a) {
+        .sidebar[data-collapsible='icon'][data-state='collapsed'] > nav li {
+          anchor-scope: --bc-sidebar-item;
+          > :is(a, button)[data-tooltip], > details > summary[data-tooltip] {
+            anchor-name: --bc-sidebar-item;
+            &::before {
+              position: fixed;
+              inset: auto;
+              position-anchor: --bc-sidebar-item;
+              position-area: inline-end;
+              margin-inline-start: 0.5rem;
+              translate: none;
+            }
+          }
+        }
+      }
+      .sidebar:is(:not([data-side]), [data-side='left']):not([aria-hidden='true']) ~ .sidebar[data-side='right'] + * {
+        margin-left: var(--sidebar-width);
+      }
+      .sidebar:is(:not([data-side]), [data-side='left'])[data-collapsible='icon'][data-state='collapsed'] ~ .sidebar[data-side='right'] + * {
+        margin-left: var(--sidebar-width-icon);
+      }
+    }
+  .sidebar[data-position='static'] {
+      display: flex;
+      min-block-size: 0;
+      block-size: 100%;
+      background: none;
+      position: static;
+      inset: auto;
+      > nav {
+        position: relative;
+        inset: auto;
+        translate: none;
+        inline-size: var(--sidebar-width);
+        block-size: 100%;
+        z-index: auto;
+      }
+      & + * {
+        margin: 0;
+      }
+    }
+  @media (width < 48rem) {
+      .sidebar[data-position='static'] {
+        display: flex !important;
+      }
+    }
+  @media (width >= 48rem) {
+      body:has(> .sidebar[data-variant='inset']) {
+        background: var(--sidebar);
+      }
+    }
+  .sidebar > nav :is(li > a, li > button, [data-sidebar-item]) {
+      > span:has(> strong, > small) {
+        display: grid;
+        flex: 1;
+        min-inline-size: 0;
+        text-align: start;
+        line-height: 1.25;
+        > :is(strong, small) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      > svg:last-child:not(:first-child) {
+        margin-inline-start: auto;
+      }
+    }
+  .sidebar > nav [data-sidebar-item] {
+      display: flex;
+      inline-size: 100%;
+      align-items: center;
+      overflow: hidden;
+      text-align: start;
+      outline: none;
+    }
+  .sidebar > nav li > :is(a, button) > [data-badge] {
+      margin-inline-start: auto;
+      font-variant-numeric: tabular-nums;
+    }
+  .sidebar > nav > :is(header, footer) ul {
+      display: flex;
+      inline-size: 100%;
+      min-inline-size: 0;
+      flex-direction: column;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      > li {
+        position: relative;
+        > :is(a, button) {
+          display: flex;
+          inline-size: 100%;
+          align-items: center;
+          overflow: hidden;
+          text-align: start;
+          outline: none;
+          > svg {
+            flex-shrink: 0;
+          }
+          > span:last-child:not(:has(> strong, > small)) {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+}
+
+@layer components {
+  @media (width >= 48rem) {
+      .sidebar[data-variant='floating'] > nav {
+        border-radius: var(--auvyx-r-surface);
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+        border-color: var(--color-sidebar-border);
+        --tw-shadow: var(--shadow-sm, 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      .sidebar[data-variant='inset'] + * {
+        border-radius: var(--auvyx-r-card);
+        background-color: var(--color-background);
+        --tw-shadow: var(--shadow-sm, 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  .sidebar > nav [data-sidebar-item] {
+      gap: calc(var(--spacing) * 2);
+      border-radius: var(--auvyx-r-control);
+      padding: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-ring-color: var(--color-sidebar-ring);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-sidebar-accent);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-sidebar-accent-foreground);
+        }
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &>svg {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+      &>svg {
+        flex-shrink: 0;
+      }
+    }
+  .sidebar > nav [data-sidebar-item][data-size='lg'] {
+      height: calc(var(--spacing) * 12);
+    }
+  .sidebar > nav :is(li > a, li > button, [data-sidebar-item]) > span:has(> strong, > small) > strong {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  .sidebar > nav :is(li > a, li > button, [data-sidebar-item]) > span:has(> strong, > small) > small {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      opacity: 70%;
+    }
+  .sidebar > nav li > :is(a, button) > [data-badge] {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-sidebar-foreground);
+    }
+  .sidebar[data-position='static'] > nav {
+      border-inline-end-style: var(--tw-border-style);
+      border-inline-end-width: 1px;
+    }
+  .sidebar > nav > :is(header, footer) ul {
+      gap: var(--spacing);
+    }
+  .sidebar > nav .dropdown-menu:has(> [data-sidebar-item]) {
+      display: flex;
+      width: 100%;
+    }
+}