diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index 4ca114d..3c47a12 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -2791,52 +2791,54 @@
     }
   }
 }
-.button-group {
-  isolation: isolate;
-  display: inline-flex;
-  width: fit-content;
-  align-items: stretch;
-  > *:focus-visible, > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
-    position: relative;
-    z-index: 10;
-  }
-  > hr[role='separator'] {
-    margin: calc(var(--spacing) * 0);
-    height: auto;
-    width: calc(var(--spacing) * 0);
-    flex-shrink: 0;
-    align-self: stretch;
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-input);
-  }
-  &:not([data-orientation='vertical']) {
-    > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left-style: var(--tw-border-style);
-      border-left-width: 0px;
+@layer components {
+  .button-group {
+    isolation: isolate;
+    display: inline-flex;
+    width: fit-content;
+    align-items: stretch;
+    > *:focus-visible, > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
+      position: relative;
+      z-index: 10;
     }
-    > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-  &[data-orientation='vertical'] {
-    flex-direction: column;
     > hr[role='separator'] {
-      height: 1px;
-      width: auto;
+      margin: calc(var(--spacing) * 0);
+      height: auto;
+      width: calc(var(--spacing) * 0);
+      flex-shrink: 0;
+      align-self: stretch;
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-input);
     }
-    > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-top-style: var(--tw-border-style);
-      border-top-width: 0px;
+    &:not([data-orientation='vertical']) {
+      > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-left-style: var(--tw-border-style);
+        border-left-width: 0px;
+      }
+      > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
-    > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+    &[data-orientation='vertical'] {
+      flex-direction: column;
+      > hr[role='separator'] {
+        height: 1px;
+        width: auto;
+      }
+      > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-top-style: var(--tw-border-style);
+        border-top-width: 0px;
+      }
+      > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
   }
 }
@@ -4401,355 +4403,357 @@
     }
   }
 }
-.sidebar {
-  &:not([data-sidebar-initialized]) {
-    @media (width < 48rem) {
-      display: none;
+@layer components {
+  .sidebar {
+    &:not([data-sidebar-initialized]) {
+      @media (width < 48rem) {
+        display: none;
+      }
     }
-  }
-  &:not([aria-hidden]), &[aria-hidden=false] {
-    @media (width < 48rem) {
+    &:not([aria-hidden]), &[aria-hidden=false] {
+      @media (width < 48rem) {
+        position: fixed;
+      }
+      @media (width < 48rem) {
+        inset: calc(var(--spacing) * 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;
-    }
-    @media (width < 48rem) {
-      inset: calc(var(--spacing) * 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);
+      inset-block: calc(var(--spacing) * 0);
+      z-index: 50;
+      display: flex;
+      width: var(--sidebar-mobile-width);
+      flex-direction: column;
+      background-color: var(--color-sidebar);
+      color: var(--color-sidebar-foreground);
+      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);
       }
     }
-  }
-  nav {
-    position: fixed;
-    inset-block: calc(var(--spacing) * 0);
-    z-index: 50;
-    display: flex;
-    width: var(--sidebar-mobile-width);
-    flex-direction: column;
-    background-color: var(--color-sidebar);
-    color: var(--color-sidebar-foreground);
-    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: calc(var(--spacing) * 0);
-      border-right-style: var(--tw-border-style);
-      border-right-width: 1px;
-    }
     & + * {
-      position: relative;
-      @media (width >= 48rem) {
-        margin-left: 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);
     }
-    &[aria-hidden=true] {
+    &:not([data-side]), &[data-side=left] {
       nav {
-        --tw-translate-x: -100%;
-        translate: var(--tw-translate-x) var(--tw-translate-y);
+        left: calc(var(--spacing) * 0);
+        border-right-style: var(--tw-border-style);
+        border-right-width: 1px;
       }
       & + * {
-        @media (width >= 48rem) {
-          margin-left: calc(var(--spacing) * 0);
-        }
-      }
-    }
-  }
-  &[data-side=right] {
-    nav {
-      right: calc(var(--spacing) * 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: calc(var(--spacing) * 0);
-        }
-      }
-    }
-  }
-  nav {
-    > header, > footer {
-      display: flex;
-      flex-direction: column;
-      gap: calc(var(--spacing) * 2);
-      padding: calc(var(--spacing) * 2);
-    }
-    [role=separator] {
-      margin-inline: calc(var(--spacing) * 2);
-      width: auto;
-      border-color: var(--color-sidebar-border);
-    }
-    > section {
-      display: flex;
-      min-height: calc(var(--spacing) * 0);
-      flex: 1;
-      flex-direction: column;
-      gap: calc(var(--spacing) * 2);
-      overflow-y: auto;
-      > [role=group] {
         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: calc(var(--spacing) * 0);
+          }
+        }
+      }
+    }
+    &[data-side=right] {
+      nav {
+        right: calc(var(--spacing) * 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: calc(var(--spacing) * 0);
+          }
+        }
+      }
+    }
+    nav {
+      > header, > footer {
         display: flex;
-        width: 100%;
-        min-width: calc(var(--spacing) * 0);
         flex-direction: column;
+        gap: calc(var(--spacing) * 2);
         padding: calc(var(--spacing) * 2);
       }
-      h3 {
-        display: flex;
-        height: calc(var(--spacing) * 8);
-        flex-shrink: 0;
-        align-items: center;
-        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);
-        --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;
-        &: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;
-        }
+      [role=separator] {
+        margin-inline: calc(var(--spacing) * 2);
+        width: auto;
+        border-color: var(--color-sidebar-border);
       }
-      ul {
+      > section {
         display: flex;
-        width: 100%;
-        min-width: calc(var(--spacing) * 0);
+        min-height: calc(var(--spacing) * 0);
+        flex: 1;
         flex-direction: column;
-        gap: calc(var(--spacing) * 1);
-        li {
+        gap: calc(var(--spacing) * 2);
+        overflow-y: auto;
+        > [role=group] {
           position: relative;
-          > a, > details > summary {
-            display: flex;
-            width: 100%;
-            align-items: center;
-            gap: calc(var(--spacing) * 2);
-            overflow: hidden;
-            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);
-            --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));
-            &: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);
-            }
-            &: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 {
-              width: calc(var(--spacing) * 4);
-              height: calc(var(--spacing) * 4);
-            }
-            &>svg {
-              flex-shrink: 0;
-            }
-            &[aria-current=page] {
-              background-color: var(--color-sidebar-accent);
-            }
-            &[aria-current=page] {
-              --tw-font-weight: var(--font-weight-medium);
-              font-weight: var(--font-weight-medium);
-            }
-            &[aria-current=page] {
-              color: var(--color-sidebar-accent-foreground);
-            }
-            &:not([data-variant]), &[data-variant=default] {
-              &:hover {
-                @media (hover: hover) {
-                  background-color: var(--color-sidebar-accent);
-                }
-              }
-              &:hover {
-                @media (hover: hover) {
-                  color: var(--color-sidebar-accent-foreground);
-                }
-              }
-            }
-            &[data-variant=outline] {
-              background-color: var(--color-background);
-              --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(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, hsl(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);
-                }
-              }
-            }
-            &:not([data-size]), &[data-size=default] {
-              height: calc(var(--spacing) * 8);
-              font-size: var(--text-sm);
-              line-height: var(--tw-leading, var(--text-sm--line-height));
-            }
-            &[data-size=sm] {
-              height: calc(var(--spacing) * 7);
-              font-size: var(--text-xs);
-              line-height: var(--tw-leading, var(--text-xs--line-height));
-            }
-            &[data-size=lg] {
-              height: calc(var(--spacing) * 12);
-              font-size: var(--text-sm);
-              line-height: var(--tw-leading, var(--text-sm--line-height));
-              &:is(:where(.group)[data-collapsible="icon"] *) {
-                padding: calc(var(--spacing) * 0) !important;
-              }
-            }
+          display: flex;
+          width: 100%;
+          min-width: calc(var(--spacing) * 0);
+          flex-direction: column;
+          padding: calc(var(--spacing) * 2);
+        }
+        h3 {
+          display: flex;
+          height: calc(var(--spacing) * 8);
+          flex-shrink: 0;
+          align-items: center;
+          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);
           }
-          > details {
-            &:not([open]) {
-              > summary {
-                &::after {
-                  rotate: calc(90deg * -1);
-                }
-              }
-            }
-            > summary {
-              &::after {
-                margin-left: auto;
-                display: block;
-                width: calc(var(--spacing) * 3.5);
-                height: calc(var(--spacing) * 3.5);
-                background-color: var(--color-primary);
-                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;
-              }
-            }
-            &::details-content {
-              padding-inline: calc(var(--spacing) * 3.5);
-            }
+          --tw-ring-color: var(--color-sidebar-ring);
+          --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;
+          &: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;
           }
         }
         ul {
           display: flex;
           width: 100%;
           min-width: calc(var(--spacing) * 0);
-          --tw-translate-x: 1px;
-          translate: var(--tw-translate-x) var(--tw-translate-y);
           flex-direction: column;
           gap: calc(var(--spacing) * 1);
-          border-left-style: var(--tw-border-style);
-          border-left-width: 1px;
-          border-color: var(--color-sidebar-border);
-          padding-inline: calc(var(--spacing) * 2.5);
-          padding-block: calc(var(--spacing) * 0.5);
+          li {
+            position: relative;
+            > a, > details > summary {
+              display: flex;
+              width: 100%;
+              align-items: center;
+              gap: calc(var(--spacing) * 2);
+              overflow: hidden;
+              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);
+              --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));
+              &: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);
+              }
+              &: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 {
+                width: calc(var(--spacing) * 4);
+                height: calc(var(--spacing) * 4);
+              }
+              &>svg {
+                flex-shrink: 0;
+              }
+              &[aria-current=page] {
+                background-color: var(--color-sidebar-accent);
+              }
+              &[aria-current=page] {
+                --tw-font-weight: var(--font-weight-medium);
+                font-weight: var(--font-weight-medium);
+              }
+              &[aria-current=page] {
+                color: var(--color-sidebar-accent-foreground);
+              }
+              &:not([data-variant]), &[data-variant=default] {
+                &:hover {
+                  @media (hover: hover) {
+                    background-color: var(--color-sidebar-accent);
+                  }
+                }
+                &:hover {
+                  @media (hover: hover) {
+                    color: var(--color-sidebar-accent-foreground);
+                  }
+                }
+              }
+              &[data-variant=outline] {
+                background-color: var(--color-background);
+                --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(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, hsl(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);
+                  }
+                }
+              }
+              &:not([data-size]), &[data-size=default] {
+                height: calc(var(--spacing) * 8);
+                font-size: var(--text-sm);
+                line-height: var(--tw-leading, var(--text-sm--line-height));
+              }
+              &[data-size=sm] {
+                height: calc(var(--spacing) * 7);
+                font-size: var(--text-xs);
+                line-height: var(--tw-leading, var(--text-xs--line-height));
+              }
+              &[data-size=lg] {
+                height: calc(var(--spacing) * 12);
+                font-size: var(--text-sm);
+                line-height: var(--tw-leading, var(--text-sm--line-height));
+                &:is(:where(.group)[data-collapsible="icon"] *) {
+                  padding: calc(var(--spacing) * 0) !important;
+                }
+              }
+            }
+            > details {
+              &:not([open]) {
+                > summary {
+                  &::after {
+                    rotate: calc(90deg * -1);
+                  }
+                }
+              }
+              > summary {
+                &::after {
+                  margin-left: auto;
+                  display: block;
+                  width: calc(var(--spacing) * 3.5);
+                  height: calc(var(--spacing) * 3.5);
+                  background-color: var(--color-primary);
+                  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;
+                }
+              }
+              &::details-content {
+                padding-inline: calc(var(--spacing) * 3.5);
+              }
+            }
+          }
+          ul {
+            display: flex;
+            width: 100%;
+            min-width: calc(var(--spacing) * 0);
+            --tw-translate-x: 1px;
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+            flex-direction: column;
+            gap: calc(var(--spacing) * 1);
+            border-left-style: var(--tw-border-style);
+            border-left-width: 1px;
+            border-color: var(--color-sidebar-border);
+            padding-inline: calc(var(--spacing) * 2.5);
+            padding-block: calc(var(--spacing) * 0.5);
+          }
         }
       }
     }
diff --git a/package.json b/package.json
index 0e39c2b..c0441c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "shadcn/ui for the rest of us",
   "author": "hunvreus",
   "type": "module",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index d1880eb..5077bd8 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat-cli",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Add Basecoat components to your project",
   "author": "hunvreus",
   "license": "MIT",
diff --git a/packages/css/package.json b/packages/css/package.json
index e36d8e3..eb240d3 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index 6b2b05a..1eb314e 100644
--- a/src/css/basecoat.css
+++ b/src/css/basecoat.css
@@ -381,42 +381,44 @@
 }
 
 /* Button Group */
-.button-group {
-  @apply inline-flex w-fit items-stretch isolate;
-  
-  > *:focus-visible,
-  > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
-    @apply relative z-10;
-  }
-
-  > hr[role='separator'] {
-    @apply w-0 h-auto self-stretch border border-input shrink-0 m-0;
-  }
-
-  &:not([data-orientation='vertical']) {
-    > *:not(:first-child),
-    > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
-      @apply rounded-l-none border-l-0;
+@layer components {
+  .button-group {
+    @apply inline-flex w-fit items-stretch isolate;
+    
+    > *:focus-visible,
+    > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
+      @apply relative z-10;
     }
-    > *:not(:last-child),
-    > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
-      @apply rounded-r-none;
-    }
-  }  
-  &[data-orientation='vertical'] {
-    @apply flex-col;
 
     > hr[role='separator'] {
-      @apply w-auto h-px;
+      @apply w-0 h-auto self-stretch border border-input shrink-0 m-0;
     }
-    
-    > *:not(:first-child),
-    > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
-      @apply rounded-t-none border-t-0;
-    }
-    > *:not(:last-child),
-    > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
-      @apply rounded-b-none;
+
+    &:not([data-orientation='vertical']) {
+      > *:not(:first-child),
+      > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+        @apply rounded-l-none border-l-0;
+      }
+      > *:not(:last-child),
+      > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+        @apply rounded-r-none;
+      }
+    }  
+    &[data-orientation='vertical'] {
+      @apply flex-col;
+
+      > hr[role='separator'] {
+        @apply w-auto h-px;
+      }
+      
+      > *:not(:first-child),
+      > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+        @apply rounded-t-none border-t-0;
+      }
+      > *:not(:last-child),
+      > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+        @apply rounded-b-none;
+      }
     }
   }
 }
@@ -988,119 +990,121 @@
 }
 
 /* Sidebar */
-.sidebar {
-  &:not([data-sidebar-initialized]) {
-    @apply max-md:hidden;
-  }
-  &:not([aria-hidden]),
-  &[aria-hidden=false] {
-    @apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
-  }
-  nav {
-    @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;
-  }
-  & + * {
-    @apply transition-[margin] ease-in-out duration-300;
-  }
-  &:not([data-side]),
-  &[data-side=left] {
+@layer components {
+  .sidebar {
+    &:not([data-sidebar-initialized]) {
+      @apply max-md:hidden;
+    }
+    &:not([aria-hidden]),
+    &[aria-hidden=false] {
+      @apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
+    }
     nav {
-      @apply left-0 border-r;
+      @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;
     }
     & + * {
-      @apply relative md:ml-(--sidebar-width);
+      @apply transition-[margin] ease-in-out duration-300;
     }
-    &[aria-hidden=true] {
+    &:not([data-side]),
+    &[data-side=left] {
       nav {
-        @apply -translate-x-full;
+        @apply left-0 border-r;
       }
       & + * {
-        @apply md:ml-0;
+        @apply relative md:ml-(--sidebar-width);
+      }
+      &[aria-hidden=true] {
+        nav {
+          @apply -translate-x-full;
+        }
+        & + * {
+          @apply md:ml-0;
+        }
+      }
+    }
+    &[data-side=right] {
+      nav {
+        @apply right-0 border-l;
+      }
+      & + * {
+        @apply relative md:mr-(--sidebar-width);
+      }
+      &[aria-hidden=true] {
+        nav {
+          @apply translate-x-full;
+        }
+        & + * {
+          @apply md:mr-0;
+        }
       }
     }
-  }
-  &[data-side=right] {
     nav {
-      @apply right-0 border-l;
-    }
-    & + * {
-      @apply relative md:mr-(--sidebar-width);
-    }
-    &[aria-hidden=true] {
-      nav {
-        @apply translate-x-full;
+      > header,
+      > footer {
+        @apply flex flex-col gap-2 p-2;
       }
-      & + * {
-        @apply md:mr-0;
+      [role=separator] {
+        @apply border-sidebar-border mx-2 w-auto;
       }
-    }
-  }
-  nav {
-    > header,
-    > footer {
-      @apply flex flex-col gap-2 p-2;
-    }
-    [role=separator] {
-      @apply border-sidebar-border mx-2 w-auto;
-    }
-    > section {
-      @apply flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto;
+      > section {
+        @apply flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto;
 
-      > [role=group] {
-        @apply relative flex w-full min-w-0 flex-col p-2;
-      }
-      h3 {
-        @apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0;
-      }
-      ul {
-        @apply flex w-full min-w-0 flex-col gap-1;
-
-        li {
-          @apply relative;
-
-          > a,
-          > details > summary {
-            @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&[aria-current=page]]:bg-sidebar-accent [&[aria-current=page]]:font-medium [&[aria-current=page]]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0;
-
-            &:not([data-variant]),
-            &[data-variant=default] {
-              @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
-            }
-            &[data-variant=outline] {
-              @apply bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
-            }
-            &:not([data-size]),
-            &[data-size=default] {
-              @apply h-8 text-sm;
-            }
-            &[data-size=sm] {
-              @apply h-7 text-xs;
-            }
-            &[data-size=lg] {
-              @apply h-12 text-sm group-data-[collapsible=icon]:p-0!;
-            }
-          }
-          > details {
-            &:not([open]) {
-              > summary {
-                &::after {
-                  @apply -rotate-90;
-                }
-              }
-            }
-            > summary {
-              &::after {
-                @apply content-[''] block size-3.5 bg-primary ml-auto transition-transform ease-linear;
-                @apply mask-[image:var(--chevron-down-icon)] mask-size-[1rem] mask-no-repeat mask-center;
-              }
-            }
-            &::details-content {
-              @apply px-3.5;
-            }
-          }
+        > [role=group] {
+          @apply relative flex w-full min-w-0 flex-col p-2;
+        }
+        h3 {
+          @apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0;
         }
         ul {
-          @apply border-sidebar-border flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 w-full;
+          @apply flex w-full min-w-0 flex-col gap-1;
+
+          li {
+            @apply relative;
+
+            > a,
+            > details > summary {
+              @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&[aria-current=page]]:bg-sidebar-accent [&[aria-current=page]]:font-medium [&[aria-current=page]]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0;
+
+              &:not([data-variant]),
+              &[data-variant=default] {
+                @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
+              }
+              &[data-variant=outline] {
+                @apply bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
+              }
+              &:not([data-size]),
+              &[data-size=default] {
+                @apply h-8 text-sm;
+              }
+              &[data-size=sm] {
+                @apply h-7 text-xs;
+              }
+              &[data-size=lg] {
+                @apply h-12 text-sm group-data-[collapsible=icon]:p-0!;
+              }
+            }
+            > details {
+              &:not([open]) {
+                > summary {
+                  &::after {
+                    @apply -rotate-90;
+                  }
+                }
+              }
+              > summary {
+                &::after {
+                  @apply content-[''] block size-3.5 bg-primary ml-auto transition-transform ease-linear;
+                  @apply mask-[image:var(--chevron-down-icon)] mask-size-[1rem] mask-no-repeat mask-center;
+                }
+              }
+              &::details-content {
+                @apply px-3.5;
+              }
+            }
+          }
+          ul {
+            @apply border-sidebar-border flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 w-full;
+          }
         }
       }
     }