@askrjs/themes 0.0.3 → 0.0.6

package/templates/theme/index.css

@@ -1,27 +1,36 @@
 @import "./tokens.css";
+@import "./styles/base/reset.css";
 @import "./styles/base/typography.css";
 @import "./styles/base/icon.css";
 @import "./styles/base/utilities.css";
 @import "./styles/layout/layout.css";
 @import "./styles/layout/responsive-layout.css";
+@import "./styles/layout/block.css";
 @import "./styles/layout/patterns.css";
 @import "./styles/layout/aspect-ratio.css";
 @import "./styles/shell/theme.css";
 @import "./styles/shell/header.css";
 @import "./styles/shell/navbar.css";
+@import "./styles/shell/sidebar.css";
 @import "./styles/actions/button.css";
+@import "./styles/actions/button-group.css";
 @import "./styles/actions/toggle.css";
 @import "./styles/actions/toggle-group.css";
+@import "./styles/display/alert.css";
 @import "./styles/forms/input.css";
+@import "./styles/forms/input-group.css";
 @import "./styles/forms/textarea.css";
+@import "./styles/forms/form.css";
+@import "./styles/forms/field.css";
 @import "./styles/forms/checkbox.css";
 @import "./styles/forms/switch.css";
 @import "./styles/forms/radio-group.css";
 @import "./styles/forms/select.css";
 @import "./styles/forms/slider.css";
 @import "./styles/forms/label.css";
-@import "./styles/forms/form.css";
 @import "./styles/display/card.css";
+@import "./styles/display/list-group.css";
+@import "./styles/display/virtual-list.css";
 @import "./styles/display/progress.css";
 @import "./styles/display/progress-circle.css";
 @import "./styles/display/badge.css";
@@ -29,18 +38,19 @@
 @import "./styles/display/avatar.css";
 @import "./styles/display/separator.css";
 @import "./styles/display/table.css";
+@import "./styles/display/virtual-table.css";
 @import "./styles/display/scroll-area.css";
 @import "./styles/display/spinner.css";
 @import "./styles/display/coverage.css";
 @import "./styles/navigation/breadcrumb.css";
-@import "./styles/navigation/tabs.css";
+@import "./styles/navigation/nav.css";
+@import "./styles/navigation/pagination.css";
 @import "./styles/navigation/menu.css";
 @import "./styles/navigation/menubar.css";
-@import "./styles/navigation/navigation-menu.css";
 @import "./styles/disclosure/accordion.css";
 @import "./styles/disclosure/collapsible.css";
 @import "./styles/overlays/alert-dialog.css";
-@import "./styles/overlays/dropdown-menu.css";
+@import "./styles/overlays/dropdown.css";
 @import "./styles/overlays/toast.css";
 @import "./styles/overlays/dialog.css";
 @import "./styles/overlays/popover.css";

package/templates/theme/styles/actions/button-group.css

@@ -0,0 +1,74 @@
+:where(.btn-group, [data-slot="button-group"]) {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"]) {
+  flex-wrap: nowrap;
+}
+
+:where(.btn-group[data-attached="false"], [data-slot="button-group"][data-attached="false"]) {
+  flex-wrap: wrap;
+}
+
+:where(.btn-group-vertical, [data-slot="button-group"][data-orientation="vertical"]) {
+  flex-direction: column;
+}
+
+:where(.btn-group[data-attached="false"], [data-slot="button-group"][data-attached="false"]) {
+  gap: var(--ak-space-xs);
+}
+
+:where(.btn-group, [data-slot="button-group"]) > :where(.btn, [data-slot="button"]) {
+  position: relative;
+  min-inline-size: 0;
+  box-shadow: none;
+}
+
+:where(.btn-group[data-attached="false"], [data-slot="button-group"][data-attached="false"])
+  > :where(.btn, [data-slot="button"]) {
+  border-radius: var(--ak-radius-md);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"]) {
+  border-radius: 0;
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"]):first-child {
+  border-start-start-radius: var(--ak-radius-md);
+  border-end-start-radius: var(--ak-radius-md);
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"]):last-child {
+  border-start-end-radius: var(--ak-radius-md);
+  border-end-end-radius: var(--ak-radius-md);
+}
+
+:where(.btn-group[data-attached="true"], [data-slot="button-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"])
+  + :where(.btn, [data-slot="button"]) {
+  margin-inline-start: -1px;
+}
+
+:where(
+    .btn-group-vertical,
+    [data-slot="button-group"][data-orientation="vertical"][data-attached="true"]
+  )
+  > :where(.btn, [data-slot="button"])
+  + :where(.btn, [data-slot="button"]) {
+  margin-inline-start: 0;
+  margin-block-start: -1px;
+}
+
+:where(.btn-group-vertical, [data-slot="button-group"][data-orientation="vertical"])
+  > :where(.btn, [data-slot="button"]) {
+  inline-size: 100%;
+  justify-content: center;
+}

package/templates/theme/styles/actions/button.css

@@ -1,4 +1,4 @@
-:where(.btn, [data-slot="button"]) {
+:where(.btn, .btn-close, [data-slot="button"]) {
   --_button-height: var(--ak-density-control-height-md);
   --_button-padding-x: var(--ak-density-control-padding-x-md);
   --_button-radius: var(--ak-radius-md);
@@ -18,11 +18,13 @@
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
-  letter-spacing: -0.015em;
+  letter-spacing: 0;
   text-decoration: none;
+  text-align: center;
   cursor: pointer;
   user-select: none;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  white-space: normal;
   vertical-align: middle;
   -webkit-tap-highlight-color: transparent;
   transition:
@@ -55,7 +57,7 @@
   outline: none;
   box-shadow:
     0 0 0 1px var(--ak-color-surface),
-    0 0 0 4px var(--ak-color-focus-ring);
+    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
 }
 
 :where(.btn[data-disabled], .btn:disabled, [data-slot="button"][data-disabled]) {
@@ -143,12 +145,12 @@
 }
 
 :where(.btn-destructive:hover, [data-slot="button"][data-variant="destructive"]:hover) {
-  background: color-mix(in srgb, black 4%, var(--ak-color-danger));
+  background: color-mix(in srgb, var(--ak-color-danger) 94%, var(--ak-color-danger-ink) 6%);
   border-color: color-mix(in srgb, var(--ak-color-danger-ink) 48%, var(--ak-color-danger));
 }
 
 :where(.btn-destructive:active, [data-slot="button"][data-variant="destructive"]:active) {
-  background: color-mix(in srgb, black 9%, var(--ak-color-danger));
+  background: color-mix(in srgb, var(--ak-color-danger) 88%, var(--ak-color-danger-ink) 12%);
   border-color: color-mix(in srgb, var(--ak-color-danger-ink) 56%, var(--ak-color-danger));
 }
 
@@ -178,16 +180,54 @@
   color: var(--ak-color-link-hover);
 }
 
+:where(.btn-close) {
+  justify-content: center;
+  gap: 0;
+  inline-size: var(--_button-height);
+  padding-inline: 0;
+  border-color: transparent;
+  border-radius: var(--ak-radius-round);
+  background: transparent;
+  box-shadow: none;
+}
+
+:where(.btn-close:hover) {
+  background: var(--ak-color-hover);
+  border-color: transparent;
+}
+
+:where(.btn-close:active) {
+  background: var(--ak-color-active);
+  border-color: transparent;
+}
+
+:where(.btn-close:focus-visible) {
+  outline: none;
+  box-shadow:
+    0 0 0 1px var(--ak-color-surface),
+    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+}
+
+:where(.btn-close[data-disabled], .btn-close:disabled) {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 1;
+}
+
 :where(.btn-sm, [data-slot="button"][data-size="sm"]) {
   --_button-height: var(--ak-density-control-height-sm);
   --_button-padding-x: var(--ak-density-control-padding-x-sm);
-  font-size: 0.8125rem;
+  font-size: var(--ak-font-size-xs);
 }
 
 :where(.btn-lg, [data-slot="button"][data-size="lg"]) {
   --_button-height: var(--ak-density-control-height-lg);
   --_button-padding-x: var(--ak-density-control-padding-x-lg);
-  font-size: 0.9375rem;
+  font-size: var(--ak-font-size-sm);
 }
 
 :where(.btn-icon, [data-slot="button"][data-size="icon"]) {

package/templates/theme/styles/actions/toggle-group.css

@@ -1,22 +1,26 @@
-[data-slot="toggle-group"] {
+:where([data-slot="toggle-group"]) {
   display: inline-flex;
+  flex-wrap: wrap;
   gap: 0.25rem;
 }
 
-[data-slot="toggle-group"][data-orientation="vertical"] {
+:where([data-slot="toggle-group"][data-orientation="vertical"]) {
   flex-direction: column;
 }
 
-[data-slot="toggle-group-item"] {
+:where([data-slot="toggle-group-item"]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 2.5rem;
-  padding: 0 var(--ak-space-md);
+  min-height: var(--ak-density-control-height-md);
+  padding: 0 var(--ak-density-control-padding-x-md);
   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-semibold);
+  line-height: 1;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -25,28 +29,31 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="toggle-group-item"]:hover {
+:where([data-slot="toggle-group-item"]:hover) {
   background: var(--ak-color-hover);
   border-color: var(--ak-color-border-strong);
 }
 
-[data-slot="toggle-group-item"]:active {
+:where([data-slot="toggle-group-item"]:active) {
   background: var(--ak-color-active);
 }
 
-[data-slot="toggle-group-item"][data-state="on"] {
+:where([data-slot="toggle-group-item"][data-state="on"]) {
   border-color: var(--ak-color-primary);
   background: var(--ak-color-primary-soft);
   color: var(--ak-color-primary-ink);
 }
 
-[data-slot="toggle-group-item"]:focus-visible {
+:where([data-slot="toggle-group-item"]:focus-visible) {
   outline: none;
-  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);
 }
 
-[data-slot="toggle-group-item"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="toggle-group-item"][data-disabled]) {
+  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;
 }

package/templates/theme/styles/actions/toggle.css

@@ -1,14 +1,17 @@
-[data-slot="toggle"] {
+:where([data-slot="toggle"]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--ak-space-sm);
-  min-height: 2.5rem;
-  padding: 0 var(--ak-space-md);
+  min-height: var(--ak-density-control-height-md);
+  padding: 0 var(--ak-density-control-padding-x-md);
   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-semibold);
+  line-height: 1;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -17,28 +20,31 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="toggle"]:hover {
+:where([data-slot="toggle"]:hover) {
   background: var(--ak-color-hover);
   border-color: var(--ak-color-border-strong);
 }
 
-[data-slot="toggle"]:active {
+:where([data-slot="toggle"]:active) {
   background: var(--ak-color-active);
 }
 
-[data-slot="toggle"][data-state="on"] {
+:where([data-slot="toggle"][data-state="on"]) {
   border-color: var(--ak-color-primary);
   background: var(--ak-color-primary-soft);
   color: var(--ak-color-primary-ink);
 }
 
-[data-slot="toggle"]:focus-visible {
+:where([data-slot="toggle"]:focus-visible) {
   outline: none;
-  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);
 }
 
-[data-slot="toggle"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="toggle"][data-disabled]) {
+  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;
 }

package/templates/theme/styles/base/icon.css

@@ -1,6 +1,8 @@
 :where([data-slot="icon"]) {
   display: inline-block;
   flex: 0 0 auto;
+  inline-size: var(--ak-icon-size, 1em);
+  block-size: var(--ak-icon-size, 1em);
   vertical-align: -0.125em;
   color: inherit;
 }

package/templates/theme/styles/base/reset.css

@@ -0,0 +1,28 @@
+:where(*, *::before, *::after) {
+  box-sizing: border-box;
+}
+
+:where(html) {
+  background: var(--ak-color-bg);
+  color-scheme: light dark;
+}
+
+:where(body) {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--ak-color-bg);
+  color: var(--ak-color-text);
+}
+
+:where(a) {
+  color: inherit;
+}
+
+:where(svg) {
+  display: block;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 84%, transparent);
+  color: var(--ak-color-text);
+}

package/templates/theme/styles/base/typography.css

@@ -3,47 +3,46 @@
 }
 
 :where(body) {
-  margin: 0;
   font-family: var(--ak-font-family-body);
   font-size: var(--ak-type-3-size);
-  line-height: 1.58;
+  line-height: var(--ak-line-height-normal);
   letter-spacing: 0;
 }
 
 :where(h1, h2, h3, h4, h5, h6) {
   color: var(--ak-color-text);
   font-family: var(--ak-font-family-body);
-  font-weight: 650;
+  font-weight: var(--ak-font-weight-semibold);
   text-wrap: balance;
   margin: 0;
 }
 
 :where(h1) {
-  font-size: clamp(3rem, 6vw, var(--ak-type-9-size));
-  line-height: 0.93;
-  letter-spacing: -0.04em;
+  font-size: clamp(2.75rem, 5.2vw, var(--ak-type-9-size));
+  line-height: 0.98;
+  letter-spacing: var(--ak-type-9-letter-spacing);
   font-family: var(--ak-font-family-body);
   font-weight: 700;
 }
 
 :where(h2) {
-  font-size: clamp(2.25rem, 4vw, var(--ak-type-8-size));
-  line-height: 0.98;
-  letter-spacing: -0.03em;
+  font-size: clamp(2rem, 3.4vw, var(--ak-type-8-size));
+  line-height: 1.04;
+  letter-spacing: var(--ak-type-8-letter-spacing);
   font-family: var(--ak-font-family-body);
   font-weight: 700;
 }
 
 :where(h3) {
   font-size: var(--ak-type-7-size);
-  line-height: 1.08;
-  letter-spacing: -0.03em;
+  line-height: 1.12;
+  letter-spacing: var(--ak-type-7-letter-spacing);
 }
 
 :where(h4) {
   font-size: var(--ak-type-6-size);
-  line-height: 1.15;
-  letter-spacing: -0.03em;
+  line-height: 1.16;
+  letter-spacing: var(--ak-type-6-letter-spacing);
 }
 
 :where(h5) {
@@ -63,9 +62,11 @@
 }
 
 :where(p, li) {
+  margin: 0;
   font-size: var(--ak-type-3-size);
-  line-height: 1.64;
-  letter-spacing: -0.01em;
+  line-height: 1.6;
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
 }
 
 :where(small) {
@@ -99,6 +100,13 @@
 }
 
 :where(code, kbd) {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.16em 0.45em;
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 86%, var(--ak-color-surface) 14%);
+  border-radius: calc(var(--ak-radius-sm) - 2px);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 88%, var(--ak-color-surface) 12%);
+  color: var(--ak-color-text);
   font-size: 0.9em;
 }
 
@@ -111,7 +119,7 @@
 
 .ak-prose {
   display: grid;
-  gap: 1rem;
+  gap: 0.875rem;
   max-inline-size: 44rem;
 }
 
@@ -182,7 +190,7 @@
   display: grid;
   gap: 0.4rem;
   padding: 0.875rem;
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 86%, white 14%);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 86%, var(--ak-color-surface) 14%);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   box-shadow: var(--ak-shadow-sm);
@@ -201,6 +209,18 @@
 }
 
 @media (max-width: 720px) {
+  :where(h1) {
+    font-size: clamp(2.25rem, 12vw, 3.25rem);
+  }
+
+  :where(h2) {
+    font-size: clamp(1.8rem, 9vw, 2.4rem);
+  }
+
+  :where(h3) {
+    font-size: clamp(1.5rem, 7vw, var(--ak-type-7-size));
+  }
+
   .ak-type-scale__row {
     grid-template-columns: 1fr;
     gap: 0.35rem;

package/templates/theme/styles/disclosure/accordion.css

@@ -1,9 +1,9 @@
-[data-slot="accordion"] {
+:where([data-slot="accordion"]) {
   display: grid;
   gap: var(--ak-space-sm);
 }
 
-[data-slot="accordion-item"] {
+:where([data-slot="accordion-item"]) {
   border: 1px solid var(--ak-color-border);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
@@ -11,24 +11,30 @@
   transition: border-color var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="accordion-item"][data-state="open"] {
+:where([data-slot="accordion-item"][data-state="open"]) {
   border-color: var(--ak-color-primary);
 }
 
-[data-slot="accordion-header"] {
+:where([data-slot="accordion-header"]) {
   margin: 0;
 }
 
-[data-slot="accordion-trigger"] {
+:where([data-slot="accordion-trigger"]) {
   display: flex;
   align-items: center;
   justify-content: space-between;
   inline-size: 100%;
-  min-height: 2.75rem;
-  padding: 0 var(--ak-space-md);
+  min-height: var(--ak-density-control-height-lg);
+  min-inline-size: 0;
+  padding: 0 var(--ak-density-control-padding-x-md);
   border: 0;
   background: transparent;
   color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+  text-align: start;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -36,27 +42,29 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="accordion-trigger"]:hover {
+:where([data-slot="accordion-trigger"]:hover) {
   background: var(--ak-color-hover);
 }
 
-[data-slot="accordion-trigger"]:active {
+:where([data-slot="accordion-trigger"]:active) {
   background: var(--ak-color-active);
 }
 
-[data-slot="accordion-trigger"]:focus-visible {
+:where([data-slot="accordion-trigger"]:focus-visible) {
   outline: none;
-  box-shadow: inset 0 0 0 3px var(--ak-color-focus-ring);
+  box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-[data-slot="accordion-trigger"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="accordion-trigger"][data-disabled]) {
+  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
 }
 
-[data-slot="accordion-content"] {
+:where([data-slot="accordion-content"]) {
   padding: 0 var(--ak-space-md) var(--ak-space-md);
   color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
 }

package/templates/theme/styles/disclosure/collapsible.css

@@ -1,13 +1,19 @@
-[data-slot="collapsible-trigger"] {
+:where([data-slot="collapsible-trigger"]) {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 2.5rem;
-  padding: 0 var(--ak-space-md);
+  min-height: var(--ak-density-control-height-md);
+  min-inline-size: 0;
+  padding: 0 var(--ak-density-control-padding-x-md);
   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-semibold);
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+  text-align: start;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -16,32 +22,37 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="collapsible-trigger"][data-state="open"] {
+:where([data-slot="collapsible-trigger"][data-state="open"]) {
   border-color: var(--ak-color-primary);
 }
 
-[data-slot="collapsible-trigger"]:hover {
+:where([data-slot="collapsible-trigger"]:hover) {
   background: var(--ak-color-hover);
   border-color: var(--ak-color-border-strong);
 }
 
-[data-slot="collapsible-trigger"]:active {
+:where([data-slot="collapsible-trigger"]:active) {
   background: var(--ak-color-active);
 }
 
-[data-slot="collapsible-trigger"]:focus-visible {
+:where([data-slot="collapsible-trigger"]:focus-visible) {
   outline: none;
-  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);
 }
 
-[data-slot="collapsible-trigger"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="collapsible-trigger"][data-disabled]) {
+  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;
 }
 
-[data-slot="collapsible-content"] {
+:where([data-slot="collapsible-content"]) {
   padding: var(--ak-space-md) 0 0;
   color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
 }