@askrjs/themes 0.0.3 → 0.0.4

package/templates/theme/styles/display/virtual-list.css

@@ -0,0 +1,29 @@
+:where([data-slot="virtual-list"]) {
+  display: grid;
+  gap: 0;
+  inline-size: 100%;
+  max-block-size: 100%;
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  overflow: auto;
+  scrollbar-gutter: stable;
+  -webkit-overflow-scrolling: touch;
+}
+
+:where([data-slot="virtual-list-row"]) {
+  display: flex;
+  align-items: stretch;
+  min-inline-size: 0;
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+  border-block-end: 1px solid var(--ak-color-border-subtle);
+  background: inherit;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="virtual-list-row"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-hover) 70%, transparent);
+}

package/templates/theme/styles/display/virtual-table.css

@@ -0,0 +1,68 @@
+:where([data-slot="virtual-table"]) {
+  inline-size: 100%;
+  max-inline-size: 100%;
+  overflow: auto;
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  scrollbar-gutter: stable;
+  -webkit-overflow-scrolling: touch;
+}
+
+:where([data-slot="virtual-table-table"]) {
+  inline-size: 100%;
+  min-inline-size: max-content;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+:where([data-slot="virtual-table-head"]) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--ak-color-surface-muted);
+}
+
+:where([data-slot="virtual-table-body"]) {
+  background: var(--ak-color-surface-raised);
+}
+
+:where([data-slot="virtual-table-header-row"]) {
+  background: inherit;
+}
+
+:where([data-slot="virtual-table-row"]) {
+  background: inherit;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="virtual-table-row"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-hover) 70%, transparent);
+}
+
+:where([data-slot="virtual-table-spacer-row"]) {
+  background: transparent;
+}
+
+:where([data-slot="virtual-table-header-cell"]),
+:where([data-slot="virtual-table-cell"]) {
+  padding: 0.7rem var(--ak-space-md);
+  border-block-end: 1px solid var(--ak-color-border-subtle);
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  text-align: start;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+}
+
+:where([data-slot="virtual-table-header-cell"]) {
+  color: var(--ak-color-text-muted);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: normal;
+}

package/templates/theme/styles/forms/checkbox.css

@@ -4,6 +4,7 @@
   place-content: center;
   inline-size: 1.25rem;
   block-size: 1.25rem;
+  flex: none;
   margin: 0;
   border: 1px solid var(--ak-color-border-strong);
   border-radius: calc(var(--ak-radius-sm) - 2px);
@@ -30,7 +31,7 @@
 :where([data-slot="checkbox"]:focus-visible) {
   outline: none;
   box-shadow:
-    0 0 0 4px var(--ak-color-focus-ring),
+    0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
     var(--ak-shadow-sm);
 }
 

package/templates/theme/styles/forms/field.css

@@ -0,0 +1,22 @@
+:where(.field, [data-slot="field"]) {
+  display: grid;
+  gap: var(--ak-space-xs);
+  min-inline-size: 0;
+}
+
+:where(.field-hint, [data-slot="field-hint"]) {
+  margin: 0;
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
+}
+
+:where(.field-error, [data-slot="field-error"]) {
+  margin: 0;
+  color: var(--ak-color-danger-ink);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
+}

package/templates/theme/styles/forms/form.css

@@ -1,5 +1,5 @@
 :where([data-slot="form"]) {
   display: grid;
-  gap: var(--ak-space-4);
+  gap: var(--ak-space-md);
   min-inline-size: 0;
 }

package/templates/theme/styles/forms/input-group.css

@@ -0,0 +1,202 @@
+:where(.input-group, [data-slot="input-group"]) {
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 0;
+}
+
+:where(.input-group-vertical, [data-slot="input-group"][data-orientation="vertical"]) {
+  flex-direction: column;
+}
+
+:where(.input-group[data-attached="false"], [data-slot="input-group"][data-attached="false"]) {
+  gap: var(--ak-space-xs);
+}
+
+:where(.input-group, [data-slot="input-group"])
+  > :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    .btn,
+    .input-group-text,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="button"],
+    [data-slot="input-group-text"]
+  ) {
+  flex: 0 0 auto;
+  margin: 0;
+  border-radius: 0;
+}
+
+:where(.input-group, [data-slot="input-group"])
+  > :where(.btn, .input-group-text, [data-slot="button"], [data-slot="input-group-text"]) {
+  box-shadow: none;
+}
+
+:where(.input-group, [data-slot="input-group"])
+  > :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"]
+  ) {
+  flex: 1 1 12rem;
+  width: auto;
+  min-inline-size: 0;
+  box-shadow: none;
+}
+
+:where(.input-group[data-attached="false"], [data-slot="input-group"][data-attached="false"])
+  > :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    .btn,
+    .input-group-text,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="button"],
+    [data-slot="input-group-text"]
+  ) {
+  border-radius: var(--ak-radius-md);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.input-group[data-attached="true"], [data-slot="input-group"][data-attached="true"])
+  > :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    .btn,
+    .input-group-text,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="button"],
+    [data-slot="input-group-text"]
+  )
+  + :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    .btn,
+    .input-group-text,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="button"],
+    [data-slot="input-group-text"]
+  ) {
+  margin-inline-start: -1px;
+}
+
+:where(
+    .input-group-vertical[data-attached="true"],
+    [data-slot="input-group"][data-attached="true"][data-orientation="vertical"]
+  )
+  > :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    .btn,
+    .input-group-text,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="button"],
+    [data-slot="input-group-text"]
+  )
+  + :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    .btn,
+    .input-group-text,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="button"],
+    [data-slot="input-group-text"]
+  ) {
+  margin-inline-start: 0;
+  margin-block-start: -1px;
+}
+
+:where(.input-group[data-attached="true"], [data-slot="input-group"][data-attached="true"])
+  > :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"]
+  ):first-child {
+  border-start-start-radius: var(--ak-radius-md);
+  border-end-start-radius: var(--ak-radius-md);
+}
+
+:where(.input-group[data-attached="true"], [data-slot="input-group"][data-attached="true"])
+  > :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"]
+  ):last-child {
+  border-start-end-radius: var(--ak-radius-md);
+  border-end-end-radius: var(--ak-radius-md);
+}
+
+:where(.input-group[data-attached="true"], [data-slot="input-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"]):first-child,
+:where(.input-group[data-attached="true"], [data-slot="input-group"][data-attached="true"])
+  > :where(.input-group-text, [data-slot="input-group-text"]):first-child {
+  border-start-start-radius: var(--ak-radius-md);
+  border-end-start-radius: var(--ak-radius-md);
+}
+
+:where(.input-group[data-attached="true"], [data-slot="input-group"][data-attached="true"])
+  > :where(.btn, [data-slot="button"]):last-child,
+:where(.input-group[data-attached="true"], [data-slot="input-group"][data-attached="true"])
+  > :where(.input-group-text, [data-slot="input-group-text"]):last-child {
+  border-start-end-radius: var(--ak-radius-md);
+  border-end-end-radius: var(--ak-radius-md);
+}
+
+:where(.input-group-vertical, [data-slot="input-group"][data-orientation="vertical"])
+  > :where(
+    .input,
+    .textarea,
+    .select-trigger,
+    .btn,
+    .input-group-text,
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="button"],
+    [data-slot="input-group-text"]
+  ) {
+  inline-size: 100%;
+}
+
+:where(.input-group-text, [data-slot="input-group-text"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--ak-density-control-height-md);
+  padding-inline: var(--ak-density-control-padding-x-md);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
+  background: var(--ak-color-surface-muted);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  line-height: 1;
+  white-space: nowrap;
+}

package/templates/theme/styles/forms/input.css

@@ -1,15 +1,18 @@
 :where(.input, [data-slot="input"]) {
+  --_input-height: var(--ak-density-control-height-md);
+  --_input-padding-x: var(--ak-density-control-padding-x-md);
   appearance: none;
   box-sizing: border-box;
-  min-height: var(--ak-density-control-height-md);
+  min-height: var(--_input-height);
   width: 100%;
-  padding: 0 var(--ak-density-control-padding-x-md);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  padding-block: 0;
+  padding-inline: var(--_input-padding-x);
+  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);
+  line-height: 1.25;
   box-shadow: var(--ak-shadow-sm);
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -30,13 +33,14 @@
 :where(.input:focus-visible, [data-slot="input"]:focus-visible) {
   outline: none;
   border-color: var(--ak-color-primary);
-  box-shadow: 0 0 0 4px var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where(.input[aria-invalid="true"], [data-slot="input"][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 4px color-mix(in srgb, var(--ak-color-danger-soft) 82%, transparent);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width)
+    color-mix(in srgb, var(--ak-color-danger-soft) 82%, transparent);
 }
 
 :where(.input[data-disabled], .input:disabled, [data-slot="input"][data-disabled]) {
@@ -47,3 +51,15 @@
   pointer-events: none;
   cursor: not-allowed;
 }
+
+:where(.input-sm, [data-slot="input"][data-size="sm"]) {
+  --_input-height: var(--ak-density-control-height-sm);
+  --_input-padding-x: var(--ak-density-control-padding-x-sm);
+  font-size: var(--ak-font-size-xs);
+}
+
+:where(.input-lg, [data-slot="input"][data-size="lg"]) {
+  --_input-height: var(--ak-density-control-height-lg);
+  --_input-padding-x: var(--ak-density-control-padding-x-lg);
+  font-size: var(--ak-font-size-sm);
+}

package/templates/theme/styles/forms/label.css

@@ -3,4 +3,6 @@
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
+  line-height: var(--ak-line-height-tight);
+  overflow-wrap: anywhere;
 }

package/templates/theme/styles/forms/radio-group.css

@@ -1,23 +1,29 @@
-[data-slot="radio-group"] {
+:where([data-slot="radio-group"]) {
   display: grid;
   gap: var(--ak-space-sm);
 }
 
-[data-slot="radio-group"][data-orientation="horizontal"] {
-  grid-auto-flow: column;
+:where([data-slot="radio-group"][data-orientation="horizontal"]) {
+  display: flex;
+  flex-wrap: wrap;
   justify-content: flex-start;
 }
 
-[data-slot="radio-group-item"] {
+:where([data-slot="radio-group-item"]) {
   display: inline-flex;
   align-items: center;
   gap: var(--ak-space-sm);
-  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-medium);
+  line-height: 1;
+  overflow-wrap: anywhere;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -26,28 +32,31 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="radio-group-item"][data-state="checked"] {
+:where([data-slot="radio-group-item"][data-state="checked"]) {
   border-color: var(--ak-color-primary);
   background: var(--ak-color-primary-soft);
   color: var(--ak-color-primary-ink);
 }
 
-[data-slot="radio-group-item"]:hover {
+:where([data-slot="radio-group-item"]:hover) {
   background: var(--ak-color-hover);
   border-color: var(--ak-color-border-strong);
 }
 
-[data-slot="radio-group-item"]:active {
+:where([data-slot="radio-group-item"]:active) {
   background: var(--ak-color-active);
 }
 
-[data-slot="radio-group-item"]:focus-visible {
+:where([data-slot="radio-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="radio-group-item"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="radio-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/forms/select.css

@@ -1,17 +1,24 @@
-:where([data-slot="select-trigger"]) {
+:where(.select-trigger, [data-slot="select-trigger"]) {
+  --_select-height: var(--ak-density-control-height-md);
+  --_select-padding-x: var(--ak-density-control-padding-x-md);
+  --_select-border: color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--ak-space-sm);
-  min-height: 2.875rem;
-  min-width: 12rem;
+  min-height: var(--_select-height);
+  min-width: min(12rem, 100%);
   width: 100%;
-  padding: 0 calc(var(--ak-space-lg) + 0.125rem);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 82%, white);
+  padding-block: 0;
+  padding-inline: var(--_select-padding-x);
+  border: 1px solid var(--_select-border);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-sm);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  line-height: 1;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -19,28 +26,28 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="select-trigger"]:hover) {
+:where(.select-trigger:hover, [data-slot="select-trigger"]:hover) {
   background: var(--ak-color-surface-muted);
   border-color: var(--ak-color-border-strong);
 }
 
-:where([data-slot="select-trigger"]:focus-visible) {
+:where(.select-trigger:focus-visible, [data-slot="select-trigger"]:focus-visible) {
   outline: none;
   border-color: var(--ak-color-primary);
   box-shadow:
-    0 0 0 4px var(--ak-color-focus-ring),
+    0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
     var(--ak-shadow-sm);
 }
 
-:where([data-slot="select-trigger"][data-state="open"]) {
+:where(.select-trigger[data-state="open"], [data-slot="select-trigger"][data-state="open"]) {
   border-color: var(--ak-color-primary);
   background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--ak-color-surface));
   box-shadow:
-    0 0 0 4px var(--ak-color-focus-ring),
+    0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
     var(--ak-shadow-sm);
 }
 
-:where([data-slot="select-trigger"][data-disabled]) {
+:where(.select-trigger[data-disabled], [data-slot="select-trigger"][data-disabled]) {
   background: var(--ak-color-disabled-surface);
   border-color: var(--ak-color-disabled-border);
   box-shadow: none;
@@ -49,7 +56,19 @@
   cursor: not-allowed;
 }
 
-:where([data-slot="select-value"][data-placeholder]) {
+:where(.select-trigger-sm, [data-slot="select-trigger"][data-size="sm"]) {
+  --_select-height: var(--ak-density-control-height-sm);
+  --_select-padding-x: var(--ak-density-control-padding-x-sm);
+  font-size: var(--ak-font-size-xs);
+}
+
+:where(.select-trigger-lg, [data-slot="select-trigger"][data-size="lg"]) {
+  --_select-height: var(--ak-density-control-height-lg);
+  --_select-padding-x: var(--ak-density-control-padding-x-lg);
+  font-size: var(--ak-font-size-sm);
+}
+
+:where(.select-value[data-placeholder], [data-slot="select-value"][data-placeholder]) {
   color: var(--ak-color-text-subtle);
 }
 
@@ -75,59 +94,79 @@
   }
 }
 
-:where([data-slot="select-content"]) {
+:where(.select-content, [data-slot="select-content"]) {
+  --_select-surface: var(--ak-color-surface-overlay);
+  --_select-border: color-mix(
+    in srgb,
+    var(--ak-color-border-subtle) 88%,
+    var(--_select-surface) 12%
+  );
+
   display: grid;
   gap: 0.25rem;
-  min-width: 12rem;
+  box-sizing: border-box;
+  min-inline-size: min(12rem, 100%);
+  max-inline-size: min(100%, calc(100vw - 1rem));
   max-block-size: min(20rem, calc(100vh - 4rem));
   overflow-y: auto;
   padding: calc(var(--ak-space-sm) + 0.125rem);
-  border: 1px solid var(--ak-color-border-subtle);
+  border: 1px solid var(--_select-border);
   border-radius: var(--ak-radius-lg);
-  background: var(--ak-color-surface-raised);
+  background: var(--_select-surface);
   box-shadow: var(--ak-shadow-md);
+  z-index: var(--ak-z-dropdown);
+  transform-origin: top center;
   animation: ak-select-in var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="select-content"][data-state="closed"]) {
+:where(.select-content[data-state="closed"], [data-slot="select-content"][data-state="closed"]) {
   animation: ak-select-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
 }
 
-:where([data-slot="select-item"]) {
+:where(.select-item, [data-slot="select-item"]) {
   display: flex;
   align-items: center;
-  min-height: 2.5rem;
-  padding: 0 calc(var(--ak-space-md) + 0.125rem);
+  min-height: var(--ak-density-control-height-md);
+  padding: 0 var(--ak-density-control-padding-x-md);
   border-radius: var(--ak-radius-md);
   color: var(--ak-color-text);
   cursor: pointer;
+  font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-medium);
+  overflow-wrap: anywhere;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="select-item"][data-state="checked"]) {
+:where(.select-item[data-state="checked"], [data-slot="select-item"][data-state="checked"]) {
   background: var(--ak-color-primary-soft);
   color: var(--ak-color-primary-ink);
 }
 
-:where([data-slot="select-item"]:hover) {
+:where(.select-item:hover, [data-slot="select-item"]:hover) {
   background: color-mix(in srgb, var(--ak-color-hover) 68%, var(--ak-color-surface));
 }
 
-:where([data-slot="select-item"]:focus-visible) {
+:where(.select-item:focus-visible, [data-slot="select-item"]:focus-visible) {
   outline: none;
   background: color-mix(in srgb, var(--ak-color-primary-soft) 32%, var(--ak-color-surface));
+  box-shadow: inset 0 0 0 1px var(--ak-color-focus-ring);
 }
 
-:where([data-slot="select-item"][data-disabled]) {
+:where(.select-item[data-disabled], [data-slot="select-item"][data-disabled]) {
   color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
 }
 
-:where([data-slot="select-label"]) {
+:where(.select-group, [data-slot="select-group"]) {
+  display: grid;
+  gap: 0.25rem;
+}
+
+:where(.select-label, [data-slot="select-label"]) {
   padding: 0 var(--ak-space-md);
   color: var(--ak-color-text-muted);
   font-size: var(--ak-font-size-xs);
@@ -136,8 +175,14 @@
   text-transform: uppercase;
 }
 
-:where([data-slot="select-separator"]) {
+:where(.select-separator, [data-slot="select-separator"]) {
   block-size: 1px;
   background: var(--ak-color-border);
   margin: 0.25rem 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.select-content, [data-slot="select-content"]) {
+    animation: none;
+  }
+}