@askrjs/themes 0.0.3 → 0.0.6

package/src/themes/default/styles/forms/textarea.css

@@ -1,13 +1,18 @@
 :where(.textarea, [data-slot="textarea"]) {
+  --_textarea-min-height: 7rem;
+  --_textarea-padding-block: var(--ak-space-sm);
+  --_textarea-padding-inline: var(--ak-space-md);
   box-sizing: border-box;
   width: 100%;
-  min-height: 7rem;
-  padding: var(--ak-space-sm) var(--ak-space-md);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  min-height: var(--_textarea-min-height);
+  padding-block: var(--_textarea-padding-block);
+  padding-inline: var(--_textarea-padding-inline);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
   resize: vertical;
   box-shadow: var(--ak-shadow-sm);
   transition:
@@ -16,7 +21,7 @@
 }
 
 :where(.textarea, [data-slot="textarea"])::placeholder {
-  color: var(--ak-color-text-muted);
+  color: var(--ak-color-text-subtle);
 }
 
 :where(.textarea:hover, [data-slot="textarea"]:hover) {
@@ -27,11 +32,35 @@
 :where(.textarea:focus-visible, [data-slot="textarea"]:focus-visible) {
   outline: none;
   border-color: var(--ak-color-primary);
-  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
+
+:where(.textarea[aria-invalid="true"], [data-slot="textarea"][aria-invalid="true"]) {
+  border-color: var(--ak-color-danger);
+  background: color-mix(in srgb, var(--ak-color-danger-soft) 12%, var(--ak-color-surface));
+  box-shadow: 0 0 0 var(--ak-focus-ring-width)
+    color-mix(in srgb, var(--ak-color-danger-soft) 82%, transparent);
 }
 
 :where(.textarea[data-disabled], .textarea:disabled, [data-slot="textarea"][data-disabled]) {
-  opacity: 0.5;
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
 }
+
+:where(.textarea-sm, [data-slot="textarea"][data-size="sm"]) {
+  --_textarea-min-height: 5.75rem;
+  --_textarea-padding-block: var(--ak-space-xs);
+  --_textarea-padding-inline: var(--ak-space-sm);
+  font-size: var(--ak-font-size-xs);
+}
+
+:where(.textarea-lg, [data-slot="textarea"][data-size="lg"]) {
+  --_textarea-min-height: 8.75rem;
+  --_textarea-padding-block: var(--ak-space-md);
+  --_textarea-padding-inline: var(--ak-space-lg);
+  font-size: var(--ak-font-size-sm);
+}

package/src/themes/default/styles/layout/aspect-ratio.css

@@ -1,5 +1,7 @@
 :where([data-slot="aspect-ratio"]) {
   display: block;
-  width: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
   overflow: hidden;
 }

package/src/themes/default/styles/layout/block.css

@@ -0,0 +1,23 @@
+:where([data-slot="block"]) {
+  display: grid;
+}
+
+:where([data-slot="block"][data-size="initial:xs"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+}
+
+:where([data-slot="block"][data-size="initial:sm"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+}
+
+:where([data-slot="block"][data-size="initial:md"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+}
+
+:where([data-slot="block"][data-size="initial:lg"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
+}
+
+:where([data-slot="block"][data-size="initial:xl"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
+}

package/src/themes/default/styles/layout/layout.css

@@ -64,7 +64,7 @@
   padding-right: var(--ak-pr-initial, var(--ak-px-initial, var(--ak-layout-page-gutter)));
 }
 
-:where([data-slot="container"][data-fluid="true"]) {
+:where([data-slot="container"][data-size="initial:fluid"]) {
   --ak-container-inline-size: 100%;
 }
 

package/src/themes/default/styles/layout/patterns.css

@@ -1,9 +1,10 @@
 :where(.empty-state, [data-slot="empty-state"]) {
   display: grid;
   place-items: center;
-  gap: var(--ak-space-3);
-  min-block-size: 18rem;
-  padding: var(--ak-space-7) var(--ak-space-4);
+  gap: var(--ak-space-sm);
+  min-inline-size: 0;
+  min-block-size: min(18rem, 52dvh);
+  padding: clamp(var(--ak-space-lg), 7vw, var(--ak-space-6)) var(--ak-space-4);
   border: 1px dashed var(--ak-color-border);
   border-radius: var(--ak-radius-lg);
   background: color-mix(in srgb, var(--ak-color-surface-muted) 80%, transparent);
@@ -25,6 +26,9 @@
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-lg);
   font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: 0;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
 }
 
 :where(.empty-state-description, [data-slot="empty-state-description"]) {
@@ -32,6 +36,7 @@
   max-inline-size: 32rem;
   color: var(--ak-color-text-muted);
   line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
 }
 
 :where(.empty-state-actions, [data-slot="empty-state-actions"]) {
@@ -40,4 +45,151 @@
   justify-content: center;
   gap: var(--ak-space-2);
   flex-wrap: wrap;
+  max-inline-size: 100%;
+}
+
+:where(.section-header) {
+  display: grid;
+  max-inline-size: 54rem;
+}
+
+:where(.section-header-copy) {
+  display: grid;
+  gap: 0.7rem;
+}
+
+:where(.eyebrow) {
+  margin: 0;
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-bold);
+  letter-spacing: 0.09em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+:where(.section-header) :where(h1) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: clamp(2.4rem, 1.55rem + 2.6vw, 4rem);
+  font-weight: var(--ak-font-weight-bold);
+  letter-spacing: -0.055em;
+  line-height: 0.98;
+  text-wrap: balance;
+}
+
+:where(.section-header) :where(h2) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: var(--ak-type-7-size);
+  font-weight: var(--ak-font-weight-bold);
+  letter-spacing: var(--ak-type-7-letter-spacing);
+  line-height: var(--ak-type-7-line-height);
+  text-wrap: balance;
+}
+
+:where(.section-header-description) {
+  line-height: 1.68;
+}
+
+:where(.icon-badge) {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.65rem;
+  block-size: 2.65rem;
+  border-radius: 0.9rem;
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 70%, var(--ak-color-surface));
+  color: var(--ak-color-primary);
+}
+
+:where(.site-footer) {
+  display: grid;
+  margin-top: clamp(4rem, 3rem + 2vw, 6rem);
+  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
+  padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem);
+  border-top: 1px solid
+    color-mix(in srgb, var(--ak-color-border-subtle) 78%, var(--ak-color-surface) 22%);
+  background: color-mix(in srgb, var(--ak-color-surface) 42%, transparent);
+}
+
+:where(.site-footer) > :where([data-slot="container"]) {
+  display: grid;
+  gap: clamp(1.5rem, 1rem + 1vw, 2.25rem);
+}
+
+:where(.site-footer) :where([data-slot="block"]) {
+  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
+}
+
+:where(.site-footer) :where([data-slot="block"] > *) {
+  min-width: 0;
+}
+
+:where(.site-footer) :where([data-slot="block"] > :first-child) {
+  max-width: 34rem;
+}
+
+:where(.site-footer) :where([data-slot="block"] > :first-child > p:first-child) {
+  font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+:where(.site-footer) :where([data-slot="block"] > :first-child > a) {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  color: var(--ak-color-text);
+  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
+  letter-spacing: -0.04em;
+  text-decoration: none;
+}
+
+:where(.site-footer) :where([data-slot="block"] > :first-child > p:last-of-type) {
+  max-inline-size: 50ch;
+}
+
+:where(.site-footer) :where([data-slot="badge"]) {
+  color: var(--ak-color-text-muted);
+}
+
+:where(.site-footer) :where(h3) {
+  margin: 0;
+  font-size: 0.92rem;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+:where(.site-footer) :where(nav a) {
+  display: block;
+  padding: 0.35rem 0;
+  color: var(--ak-color-text-muted);
+  text-decoration: none;
+  transition:
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    text-decoration-color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(.site-footer) :where(nav a:hover) {
+  color: var(--ak-color-text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--ak-color-primary) 32%, transparent);
+  text-underline-offset: 0.18em;
+}
+
+:where(.site-footer) > :where([data-slot="container"]) > :where([data-slot="flex"]:last-child) {
+  margin-top: 0.25rem;
+  font-size: 0.92rem;
+}
+
+@media (max-width: 48rem) {
+  :where(.site-footer) :where([data-slot="block"]) {
+    grid-template-columns: 1fr;
+  }
+
+  :where(.site-footer) > :where([data-slot="container"]) > :where([data-slot="flex"]:last-child) {
+    justify-content: flex-start;
+  }
 }

package/src/themes/default/styles/layout/responsive-layout.css

@@ -1,16 +1,27 @@
-:where([data-slot="topbar-layout"]),
-:where([data-slot="sidebar-layout"]) {
+:where([data-slot="shell"]) {
   min-block-size: 100vh;
   background: var(--ak-color-bg);
   color: var(--ak-color-text);
 }
 
-:where([data-slot="topbar-layout"]) {
+:where([data-shell-scroll-lock="true"]) {
+  overflow: hidden;
+}
+
+:where([data-slot="shell"]) {
   display: flex;
+}
+
+:where([data-slot="shell"][data-variant="topbar"]) {
+  flex-direction: column;
+}
+
+:where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"]) {
   flex-direction: column;
+  gap: var(--ak-space-lg);
 }
 
-:where([data-slot="topbar-layout"]) > :where([data-slot="navbar"]) {
+:where([data-slot="shell"][data-variant="topbar"]) > :where([data-slot="shell-nav"]) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -22,17 +33,13 @@
   background: color-mix(in srgb, var(--ak-color-surface) 98%, transparent);
 }
 
-:where([data-slot="sidebar-layout"]) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ak-space-lg);
-}
-
-:where([data-slot="sidebar-layout"][data-sidebar-position="end"]) {
-  flex-direction: column;
-}
-
-:where([data-slot="sidebar-layout"]) > :where([data-slot="sidebar"]) {
+:where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"])
+  > :where([data-slot="shell-nav"]) {
+  display: grid;
+  align-content: stretch;
+  flex: 0 0 100vh;
+  min-block-size: 100vh;
+  padding: var(--ak-layout-page-gutter);
   inline-size: 100%;
   max-inline-size: 100%;
   min-inline-size: 0;
@@ -41,14 +48,26 @@
   border-block-end: 1px solid var(--ak-color-border);
 }
 
-:where([data-slot="topbar-layout"]) > :where([data-slot="main"]),
-:where([data-slot="sidebar-layout"]) > :where([data-slot="main"]) {
+:where([data-slot="shell"]) > :where([data-slot="shell-main"]) {
   flex: 1 1 auto;
   min-inline-size: 0;
   inline-size: 100%;
   padding: var(--ak-layout-page-gutter);
 }
 
+[data-slot="shell"][data-variant="rail"]
+  > [data-slot="shell-nav"]
+  :where([data-slot="nav-item"], [data-slot="nav-link"]) {
+  font-size: 0;
+}
+
+[data-slot="shell"][data-variant="rail"]
+  > [data-slot="shell-nav"]
+  :where([data-slot="nav-item"], [data-slot="nav-link"])
+  > :where([data-slot="icon"], svg) {
+  font-size: var(--ak-font-size-sm);
+}
+
 :where([data-slot="flex"][data-collapse-below="sm"]),
 :where([data-slot="flex"][data-collapse-below="md"]),
 :where([data-slot="flex"][data-collapse-below="lg"]),
@@ -57,153 +76,155 @@
   align-items: stretch;
 }
 
-:where([data-slot="sidebar-layout"][data-collapse-below="sm"]),
-:where([data-slot="sidebar-layout"][data-collapse-below="md"]),
-:where([data-slot="sidebar-layout"][data-collapse-below="lg"]),
-:where([data-slot="sidebar-layout"][data-collapse-below="xl"]) {
-  flex-direction: column;
-}
-
-:where([data-slot="sidebar-layout"][data-collapse-below="sm"]) > :where([data-slot="sidebar"]),
-:where([data-slot="sidebar-layout"][data-collapse-below="md"]) > :where([data-slot="sidebar"]),
-:where([data-slot="sidebar-layout"][data-collapse-below="lg"]) > :where([data-slot="sidebar"]),
-:where([data-slot="sidebar-layout"][data-collapse-below="xl"]) > :where([data-slot="sidebar"]) {
-  inline-size: 100%;
-  flex-basis: auto;
-}
-
-:where([data-slot="sidebar-layout"][data-sidebar-width="sm"]) > :where([data-slot="sidebar"]) {
-  inline-size: var(--ak-layout-sidebar-width-sm);
-  flex-basis: var(--ak-layout-sidebar-width-sm);
-}
-
-:where([data-slot="sidebar-layout"][data-sidebar-width="md"]) > :where([data-slot="sidebar"]) {
-  inline-size: var(--ak-layout-sidebar-width-md);
-  flex-basis: var(--ak-layout-sidebar-width-md);
-}
-
-:where([data-slot="sidebar-layout"][data-sidebar-width="lg"]) > :where([data-slot="sidebar"]) {
-  inline-size: var(--ak-layout-sidebar-width-lg);
-  flex-basis: var(--ak-layout-sidebar-width-lg);
-}
-
-:where([data-slot="sidebar-layout"][data-sidebar-width="xl"]) > :where([data-slot="sidebar"]) {
-  inline-size: var(--ak-layout-sidebar-width-xl);
-  flex-basis: var(--ak-layout-sidebar-width-xl);
-}
-
 @media (min-width: 40rem) {
   :where([data-slot="flex"][data-collapse-below="sm"]) {
     flex-direction: row;
     align-items: center;
   }
 
-  :where([data-slot="sidebar-layout"]) {
+  :where([data-slot="shell"][data-variant="sidebar"], [data-slot="shell"][data-variant="rail"]) {
     flex-direction: row;
     align-items: stretch;
   }
 
-  :where([data-slot="sidebar-layout"][data-sidebar-position="end"]) {
-    flex-direction: row-reverse;
-  }
-
-  :where([data-slot="sidebar-layout"][data-collapse-below="md"]),
-  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]),
-  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) {
-    flex-direction: column;
-  }
-
-  :where([data-slot="sidebar-layout"]) > :where([data-slot="sidebar"]) {
+  :where([data-slot="shell"][data-variant="sidebar"]) > :where([data-slot="shell-nav"]) {
     inline-size: var(--ak-layout-sidebar-width);
     flex-basis: var(--ak-layout-sidebar-width);
+    align-self: stretch;
+    min-block-size: 100vh;
+    max-block-size: 100dvh;
+    position: sticky;
+    inset-block-start: 0;
+    overflow: hidden;
     border-block-end: 0;
     border-inline-end: 1px solid var(--ak-color-border);
   }
 
-  :where([data-slot="sidebar-layout"][data-collapse-below="md"]) > :where([data-slot="sidebar"]),
-  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) > :where([data-slot="sidebar"]),
-  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) > :where([data-slot="sidebar"]) {
-    inline-size: 100%;
-    flex-basis: auto;
-    border-block-end: 1px solid var(--ak-color-border);
-    border-inline-end: 0;
-  }
-}
-
-@media (min-width: 48rem) {
-  :where([data-slot="topbar-layout"]) > :where([data-slot="navbar"]) {
-    padding-inline: var(--ak-layout-page-gutter);
+  :where([data-slot="shell"][data-variant="rail"]) > :where([data-slot="shell-nav"]) {
+    inline-size: var(--ak-layout-sidebar-rail-width);
+    flex: 0 0 var(--ak-layout-sidebar-rail-width);
+    align-self: stretch;
+    min-block-size: 100vh;
+    max-block-size: 100dvh;
+    padding-inline: 0;
+    position: sticky;
+    inset-block-start: 0;
+    overflow: hidden;
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--ak-color-border);
   }
 
-  :where([data-slot="topbar-layout"]) > :where([data-slot="main"]),
-  :where([data-slot="sidebar-layout"]) > :where([data-slot="main"]) {
-    padding: var(--ak-layout-page-gutter);
+  :where([data-slot="shell"][data-variant="rail"])
+    > :where([data-slot="shell-nav"])
+    :where([data-slot="sidebar"]) {
+    inline-size: var(--ak-layout-sidebar-rail-width);
   }
 
-  :where([data-slot="flex"][data-collapse-below="md"]) {
-    flex-direction: row;
+  :where([data-slot="shell"][data-variant="rail"])
+    > :where([data-slot="shell-nav"])
+    :where([data-slot="sidebar-shell"]) {
     align-items: center;
+    gap: var(--ak-space-sm);
   }
 
-  :where([data-slot="sidebar-layout"][data-collapse-below="md"]) {
-    flex-direction: row;
-    align-items: stretch;
-  }
-
-  :where([data-slot="sidebar-layout"][data-sidebar-position="end"][data-collapse-below="md"]) {
-    flex-direction: row-reverse;
+  :where([data-slot="shell"][data-variant="rail"])
+    > :where([data-slot="shell-nav"])
+    :where([data-slot="sidebar-rail"]) {
+    justify-content: center;
+    padding-inline: 0;
   }
 
-  :where([data-slot="sidebar-layout"][data-collapse-below="md"]) > :where([data-slot="sidebar"]) {
-    inline-size: var(--ak-layout-sidebar-width);
-    flex-basis: var(--ak-layout-sidebar-width);
-    border-block-end: 0;
-    border-inline-end: 1px solid var(--ak-color-border);
+  :where([data-slot="shell"][data-variant="rail"])
+    > :where([data-slot="shell-nav"])
+    :where(
+      [data-slot="navbar-group"],
+      [data-slot="sidebar-group"],
+      [data-slot="navbar-group-body"],
+      [data-slot="sidebar-group-body"]
+    ) {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  :where([data-slot="shell"][data-variant="rail"])
+    > :where([data-slot="shell-nav"])
+    :where([data-slot="navbar-group-label"], [data-slot="sidebar-group-label"]),
+  :where([data-slot="shell"][data-variant="rail"])
+    > :where([data-slot="shell-nav"])
+    :where([data-slot="nav-item"], [data-slot="nav-link"])
+    > :where(:not([data-slot="icon"]):not(svg)) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  :where([data-slot="shell"][data-variant="rail"])
+    > :where([data-slot="shell-nav"])
+    :where([data-slot="nav-item"], [data-slot="nav-link"]) {
+    justify-content: center;
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding-inline: 0;
   }
 }
 
-@media (min-width: 64rem) {
-  :where([data-slot="flex"][data-collapse-below="lg"]) {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) {
-    flex-direction: row;
-    align-items: stretch;
+@media (min-width: 48rem) {
+  :where([data-slot="shell"][data-variant="topbar"]) > :where([data-slot="shell-nav"]) {
+    padding-inline: var(--ak-layout-page-gutter);
   }
 
-  :where([data-slot="sidebar-layout"][data-sidebar-position="end"][data-collapse-below="lg"]) {
-    flex-direction: row-reverse;
+  :where([data-slot="shell"]) > :where([data-slot="shell-main"]) {
+    padding: var(--ak-layout-page-gutter);
   }
+}
 
-  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) > :where([data-slot="sidebar"]) {
+@media (min-width: 64rem) {
+  :where([data-slot="shell"][data-variant="sidebar"]) > :where([data-slot="shell-nav"]) {
     inline-size: var(--ak-layout-sidebar-width);
     flex-basis: var(--ak-layout-sidebar-width);
     border-block-end: 0;
     border-inline-end: 1px solid var(--ak-color-border);
   }
-}
-
-@media (min-width: 80rem) {
-  :where([data-slot="flex"][data-collapse-below="xl"]) {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) {
-    flex-direction: row;
-    align-items: stretch;
-  }
 
-  :where([data-slot="sidebar-layout"][data-sidebar-position="end"][data-collapse-below="xl"]) {
-    flex-direction: row-reverse;
+  :where([data-slot="shell"][data-variant="rail"]) > :where([data-slot="shell-nav"]) {
+    inline-size: var(--ak-layout-sidebar-rail-width);
+    flex-basis: var(--ak-layout-sidebar-rail-width);
   }
+}
 
-  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) > :where([data-slot="sidebar"]) {
+@media (min-width: 80rem) {
+  :where([data-slot="shell"][data-variant="sidebar"]) > :where([data-slot="shell-nav"]) {
     inline-size: var(--ak-layout-sidebar-width);
     flex-basis: var(--ak-layout-sidebar-width);
     border-block-end: 0;
     border-inline-end: 1px solid var(--ak-color-border);
   }
+
+  :where([data-slot="shell"][data-variant="rail"]) > :where([data-slot="shell-nav"]) {
+    inline-size: var(--ak-layout-sidebar-rail-width);
+    flex-basis: var(--ak-layout-sidebar-rail-width);
+  }
+}
+
+@media (min-width: 40rem) {
+  :where([data-slot="shell"][data-variant="sidebar"])
+    > [data-slot="shell-nav"]:has(
+      > [data-slot="sidebar"][data-collapsible="icon"][data-icon-collapsed="true"][data-responsive-collapsed="false"]
+    ) {
+    flex: 0 0 var(--ak-layout-sidebar-rail-width);
+    width: var(--ak-layout-sidebar-rail-width);
+    inline-size: var(--ak-layout-sidebar-rail-width);
+    flex-basis: var(--ak-layout-sidebar-rail-width);
+    min-width: var(--ak-layout-sidebar-rail-width);
+    min-inline-size: var(--ak-layout-sidebar-rail-width);
+    max-width: var(--ak-layout-sidebar-rail-width);
+    max-inline-size: var(--ak-layout-sidebar-rail-width);
+    padding-left: 0;
+    padding-right: 0;
+    padding-inline: 0;
+  }
 }

package/src/themes/default/styles/navigation/breadcrumb.css

@@ -1,6 +1,7 @@
 :where([data-slot="breadcrumb"]) {
   color: var(--ak-color-text-muted);
   font-size: var(--ak-font-size-xs);
+  line-height: var(--ak-line-height-tight);
 }
 
 :where([data-slot="breadcrumb-list"]) {
@@ -22,11 +23,16 @@
 :where([data-slot="breadcrumb-link"]) {
   color: var(--ak-color-text-muted);
   text-decoration: none;
-  transition: color var(--ak-duration-fast) var(--ak-ease-standard);
+  transition:
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    text-decoration-color var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
 :where([data-slot="breadcrumb-link"]:hover) {
   color: var(--ak-color-text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--ak-color-primary) 36%, transparent);
+  text-underline-offset: 0.18em;
 }
 
 :where([data-slot="breadcrumb-current"]) {