@askrjs/themes 0.0.8 → 0.0.10

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

@@ -1,68 +1,90 @@
 :where([data-slot="virtual-table"]) {
-  inline-size: 100%;
+  min-inline-size: 0;
   max-inline-size: 100%;
-  overflow: auto;
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
+  border: 1px solid var(--ak-color-border);
   border-radius: var(--ak-radius-lg);
-  background: var(--ak-color-surface-raised);
+  background: var(--ak-color-surface);
   color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
-  scrollbar-gutter: stable;
-  -webkit-overflow-scrolling: touch;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ak-color-border-strong) transparent;
+}
+
+:where([data-slot="virtual-table"][data-viewport="lg"]) {
+  block-size: 28rem;
 }
 
 :where([data-slot="virtual-table-table"]) {
   inline-size: 100%;
-  min-inline-size: max-content;
-  border-collapse: separate;
+  min-inline-size: var(--ak-virtual-table-min-inline-size, 44rem);
+  border-collapse: collapse;
   border-spacing: 0;
-  table-layout: fixed;
+  background: transparent;
+  color: inherit;
 }
 
-:where([data-slot="virtual-table-head"]) {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: var(--ak-color-surface-muted);
+:where([data-slot="virtual-table"][data-table-width="compact"])
+  :where([data-slot="virtual-table-table"]) {
+  min-inline-size: var(--ak-virtual-table-compact-min-inline-size, 40rem);
 }
 
-:where([data-slot="virtual-table-body"]) {
-  background: var(--ak-color-surface-raised);
+:where([data-slot="virtual-table-head"]) {
+  background: var(--ak-color-surface-muted);
 }
 
 :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"]) {
+:where([data-slot="virtual-table-body"]) {
   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);
+:where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
+  padding: var(--ak-space-sm);
+  border-block-end: 1px solid var(--ak-color-border);
   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;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 :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;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+:where([data-slot="virtual-table-row"]) {
+  background: transparent;
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="virtual-table-row"]:hover) {
+  background: var(--ak-color-hover);
+}
+
+:where([data-slot="virtual-table-row"][data-selected="true"]) {
+  background: var(--ak-color-selected);
+  color: var(--ak-color-text);
+}
+
+:where([data-slot="virtual-table-spacer-row"]) {
+  background: transparent;
+}
+
+@media (max-width: 30rem) {
+  :where([data-slot="virtual-table-header-cell"], [data-slot="virtual-table-cell"]) {
+    padding: var(--ak-space-sm) var(--ak-space-xs);
+    font-size: var(--ak-font-size-xs);
+    line-height: var(--ak-line-height-tight);
+  }
 }

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

@@ -2,17 +2,17 @@
   appearance: none;
   display: inline-grid;
   place-content: center;
-  inline-size: 1.25rem;
-  block-size: 1.25rem;
+  inline-size: 1rem;
+  block-size: 1rem;
   flex: none;
   margin: 0;
-  border: 1px solid var(--ak-color-border-strong);
+  border: 1px solid var(--ak-color-input);
   border-radius: calc(var(--ak-radius-sm) - 2px);
   background: var(--ak-color-surface);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 0.85rem 0.85rem;
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: none;
   cursor: pointer;
   transition:
     transform var(--ak-duration-fast) var(--ak-ease-standard),
@@ -23,43 +23,34 @@
 
 :where([data-slot="checkbox"]:hover) {
   border-color: var(--ak-color-primary);
-  box-shadow:
-    var(--ak-shadow-sm),
-    0 0 0 4px color-mix(in srgb, var(--ak-color-primary-soft) 54%, transparent);
 }
 
 :where([data-slot="checkbox"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
-    var(--ak-shadow-sm);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where([data-slot="checkbox"][data-state="checked"]),
 :where([data-slot="checkbox"][aria-checked="true"]) {
-  border-color: color-mix(in srgb, var(--ak-color-primary-active) 60%, var(--ak-color-primary));
+  border-color: var(--ak-color-primary);
   background-color: var(--ak-color-primary);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M3.5 8.25 6.5 11.25 12.5 4.75'/%3E%3C/svg%3E");
-  box-shadow:
-    var(--ak-shadow-sm),
-    0 0 0 1px color-mix(in srgb, var(--ak-color-primary) 22%, transparent);
+  box-shadow: none;
 }
 
 :where([data-slot="checkbox"][data-state="indeterminate"]),
 :where([data-slot="checkbox"][aria-checked="mixed"]) {
-  border-color: color-mix(in srgb, var(--ak-color-primary-active) 60%, var(--ak-color-primary));
+  border-color: var(--ak-color-primary);
   background-color: var(--ak-color-primary);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-width='2.25' d='M4 8h8'/%3E%3C/svg%3E");
-  box-shadow:
-    var(--ak-shadow-sm),
-    0 0 0 1px color-mix(in srgb, var(--ak-color-primary) 22%, transparent);
+  box-shadow: none;
 }
 
 :where([data-slot="checkbox"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
+  background: var(--ak-color-disabled-bg);
+  border-color: var(--ak-color-input);
   box-shadow: none;
-  opacity: 1;
+  opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
 }

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

@@ -7,13 +7,13 @@
   width: 100%;
   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: 1px solid var(--ak-color-input);
   border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
+  background: transparent;
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
-  line-height: 1.25;
-  box-shadow: var(--ak-shadow-sm);
+  line-height: 1.25rem;
+  box-shadow: var(--ak-shadow-xs);
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     border-color var(--ak-duration-fast) var(--ak-ease-standard),
@@ -25,31 +25,30 @@
 }
 
 :where(.input:hover, [data-slot="input"]:hover) {
-  background: var(--ak-color-surface-muted);
-  border-color: var(--ak-color-border-strong);
-  box-shadow: var(--ak-shadow-sm);
+  border-color: var(--ak-color-input);
+  box-shadow: var(--ak-shadow-xs);
 }
 
 :where(.input:focus-visible, [data-slot="input"]:focus-visible) {
   outline: none;
-  border-color: var(--ak-color-primary);
+  border-color: var(--ak-color-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));
+  background: 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]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
+  background: var(--ak-color-disabled-bg);
+  border-color: var(--ak-color-input);
   box-shadow: none;
-  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
+  opacity: 0.5;
 }
 
 :where(.input-sm, [data-slot="input"][data-size="sm"]) {

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

@@ -4,59 +4,76 @@
 }
 
 :where([data-slot="radio-group"][data-orientation="horizontal"]) {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
 }
 
 :where([data-slot="radio-group-item"]) {
-  display: inline-flex;
-  align-items: center;
+  appearance: none;
+  display: flex;
+  align-items: flex-start;
   gap: var(--ak-space-sm);
-  min-height: var(--ak-density-control-height-md);
-  min-inline-size: 0;
-  padding: 0 var(--ak-density-control-padding-x-md);
+  min-block-size: 2.75rem;
+  inline-size: 100%;
+  padding: var(--ak-space-md);
   border: 1px solid var(--ak-color-border);
-  border-radius: var(--ak-radius-md);
+  border-radius: var(--ak-radius-lg);
   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;
+  box-shadow: none;
   cursor: pointer;
+  font: inherit;
+  text-align: start;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     border-color var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard),
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-: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);
+:where([data-slot="radio-group-item"])::before {
+  content: "";
+  display: block;
+  flex: 0 0 auto;
+  inline-size: 1rem;
+  block-size: 1rem;
+  margin-block-start: 0.125rem;
+  border: 1px solid var(--ak-color-input);
+  border-radius: var(--ak-radius-round);
+  background: radial-gradient(circle, transparent 0 37%, transparent 38%), var(--ak-color-surface);
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
 :where([data-slot="radio-group-item"]:hover) {
-  background: var(--ak-color-hover);
   border-color: var(--ak-color-border-strong);
-}
-
-:where([data-slot="radio-group-item"]:active) {
-  background: var(--ak-color-active);
+  background: var(--ak-color-surface-raised);
 }
 
 :where([data-slot="radio-group-item"]:focus-visible) {
   outline: none;
+  border-color: var(--ak-color-ring);
   box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
+:where([data-slot="radio-group-item"][data-state="checked"]) {
+  border-color: var(--ak-color-primary);
+  background: color-mix(in srgb, var(--ak-color-primary) 4%, var(--ak-color-surface));
+}
+
+:where([data-slot="radio-group-item"][data-state="checked"])::before {
+  border-color: var(--ak-color-primary);
+  background:
+    radial-gradient(circle, var(--ak-color-primary) 0 37%, transparent 38%), var(--ak-color-surface);
+  box-shadow: inset 0 0 0 3px var(--ak-color-surface);
+}
+
 :where([data-slot="radio-group-item"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
+  background: var(--ak-color-disabled-bg);
+  border-color: var(--ak-color-input);
+  color: var(--ak-color-text-muted);
   box-shadow: none;
-  color: var(--ak-color-disabled-text);
-  pointer-events: none;
   cursor: not-allowed;
+  opacity: 0.55;
+  pointer-events: none;
 }

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

@@ -1,7 +1,7 @@
 :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%);
+  --_select-border: var(--ak-color-input);
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -13,11 +13,11 @@
   padding-inline: var(--_select-padding-x);
   border: 1px solid var(--_select-border);
   border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
+  background: transparent;
   color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: none;
   font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-medium);
+  font-weight: var(--ak-font-weight-regular);
   line-height: 1;
   cursor: pointer;
   transition:
@@ -27,33 +27,28 @@
 }
 
 :where(.select-trigger:hover, [data-slot="select-trigger"]:hover) {
-  background: var(--ak-color-surface-muted);
-  border-color: var(--ak-color-border-strong);
+  border-color: var(--ak-color-input);
 }
 
 :where(.select-trigger:focus-visible, [data-slot="select-trigger"]:focus-visible) {
   outline: none;
-  border-color: var(--ak-color-primary);
-  box-shadow:
-    0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
-    var(--ak-shadow-sm);
+  border-color: var(--ak-color-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :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 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
-    var(--ak-shadow-sm);
+  border-color: var(--ak-color-ring);
+  background: transparent;
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where(.select-trigger[data-disabled], [data-slot="select-trigger"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
+  background: var(--ak-color-disabled-bg);
+  border-color: var(--ak-color-input);
   box-shadow: none;
-  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
+  opacity: 0.5;
 }
 
 :where(.select-trigger-sm, [data-slot="select-trigger"][data-size="sm"]) {
@@ -95,12 +90,8 @@
 }
 
 :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%
-  );
+  --_select-surface: var(--ak-color-popover);
+  --_select-border: var(--ak-color-border);
 
   display: grid;
   gap: 0.25rem;
@@ -109,9 +100,9 @@
   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);
+  padding: var(--ak-space-xs);
   border: 1px solid var(--_select-border);
-  border-radius: var(--ak-radius-lg);
+  border-radius: var(--ak-radius-md);
   background: var(--_select-surface);
   box-shadow: var(--ak-shadow-md);
   z-index: var(--ak-z-dropdown);
@@ -125,38 +116,45 @@
 }
 
 :where(.select-item, [data-slot="select-item"]) {
+  appearance: none;
   display: flex;
   align-items: center;
-  min-height: var(--ak-density-control-height-md);
-  padding: 0 var(--ak-density-control-padding-x-md);
+  inline-size: 100%;
+  min-height: 2rem;
+  padding: 0 var(--ak-space-sm);
+  border: 0;
   border-radius: var(--ak-radius-md);
+  background: transparent;
   color: var(--ak-color-text);
   cursor: pointer;
+  font-family: inherit;
   font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-medium);
+  font-weight: var(--ak-font-weight-regular);
   overflow-wrap: anywhere;
+  text-align: start;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
 :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);
+  background: var(--ak-color-accent);
+  color: var(--ak-color-accent-ink);
 }
 
 :where(.select-item:hover, [data-slot="select-item"]:hover) {
-  background: color-mix(in srgb, var(--ak-color-hover) 68%, var(--ak-color-surface));
+  background: var(--ak-color-accent);
 }
 
 :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);
+  background: var(--ak-color-accent);
+  box-shadow: none;
 }
 
 :where(.select-item[data-disabled], [data-slot="select-item"][data-disabled]) {
-  color: var(--ak-color-disabled-text);
+  color: var(--ak-color-text-muted);
+  opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
 }

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

@@ -1,68 +1,86 @@
 :where([data-slot="slider"]) {
-  position: relative;
-  display: flex;
+  --_slider-track-size: 0.5rem;
+  --_slider-thumb-size: 1.125rem;
+
+  display: grid;
   align-items: center;
-  min-block-size: 1.75rem;
+  inline-size: 100%;
   min-inline-size: 0;
+  min-block-size: var(--ak-density-control-height-md);
+  padding-block: calc((var(--ak-density-control-height-md) - var(--_slider-track-size)) / 2);
   touch-action: none;
 }
 
 :where([data-slot="slider"][data-orientation="vertical"]) {
-  min-block-size: 10rem;
-  min-inline-size: 1.75rem;
+  justify-items: center;
+  inline-size: var(--ak-density-control-height-md);
+  min-block-size: 8rem;
+  padding-block: 0;
+  padding-inline: calc((var(--ak-density-control-height-md) - var(--_slider-track-size)) / 2);
 }
 
 :where([data-slot="slider-track"]) {
   position: relative;
-  flex: 1;
-  block-size: 0.375rem;
-  border-radius: 999px;
-  background: var(--ak-color-surface-muted);
+  display: block;
+  inline-size: 100%;
+  block-size: var(--_slider-track-size);
+  border-radius: var(--ak-radius-round);
+  background: var(--ak-color-input);
+  cursor: pointer;
+  overflow: visible;
 }
 
-:where([data-slot="slider-track"][data-orientation="vertical"]) {
-  inline-size: 0.375rem;
+:where([data-slot="slider"][data-orientation="vertical"] [data-slot="slider-track"]) {
+  inline-size: var(--_slider-track-size);
   block-size: 100%;
+  min-block-size: 8rem;
 }
 
 :where([data-slot="slider-range"]) {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
-  inline-size: var(--ak-slider-percentage);
-  border-radius: 999px;
+  inline-size: var(--ak-slider-percentage, 0%);
+  border-radius: inherit;
   background: var(--ak-color-primary);
-  opacity: 0.85;
+  pointer-events: none;
 }
 
-:where([data-slot="slider-range"][data-orientation="vertical"]) {
-  inset-block-end: 0;
-  inset-block-start: auto;
-  inline-size: 100%;
-  block-size: var(--ak-slider-percentage);
+:where([data-slot="slider"][data-orientation="vertical"] [data-slot="slider-range"]) {
+  inset-block: auto 0;
+  inset-inline: 0;
+  inline-size: auto;
+  block-size: var(--ak-slider-percentage, 0%);
 }
 
 :where([data-slot="slider-thumb"]) {
   position: absolute;
-  inline-size: 1rem;
-  block-size: 1rem;
-  border: 2px solid var(--ak-color-primary);
-  border-radius: 999px;
+  inset-block-start: 50%;
+  inset-inline-start: var(--ak-slider-percentage, 0%);
+  display: block;
+  inline-size: var(--_slider-thumb-size);
+  block-size: var(--_slider-thumb-size);
+  border: 1px solid var(--ak-color-primary);
+  border-radius: var(--ak-radius-round);
   background: var(--ak-color-surface);
-  box-shadow: var(--ak-shadow-sm);
-  transition: box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+  box-shadow: var(--ak-shadow-xs);
+  cursor: grab;
+  transform: translate(-50%, -50%);
+  transition:
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard),
+    background var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="slider-thumb"][data-orientation="horizontal"]) {
-  inset-inline-start: calc(var(--ak-slider-percentage) - 0.5rem);
-  inset-block-start: 50%;
-  transform: translateY(-50%);
+:where([data-slot="slider"][data-orientation="vertical"] [data-slot="slider-thumb"]) {
+  inset-block: auto var(--ak-slider-percentage, 0%);
+  inset-inline-start: 50%;
+  transform: translate(-50%, 50%);
 }
 
-:where([data-slot="slider-thumb"][data-orientation="vertical"]) {
-  inset-inline-start: 50%;
-  inset-block-end: calc(var(--ak-slider-percentage) - 0.5rem);
-  transform: translateX(-50%);
+:where([data-slot="slider-thumb"]:hover) {
+  background: var(--ak-color-surface-raised);
+  box-shadow: var(--ak-shadow-sm);
 }
 
 :where([data-slot="slider-thumb"]:focus-visible) {
@@ -70,22 +88,18 @@
   box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-:where([data-slot="slider"][data-disabled]) {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-:where([data-slot="slider"][data-disabled]) :where([data-slot="slider-track"]) {
-  background: var(--ak-color-disabled-surface);
+:where([data-slot="slider-thumb"]:active) {
+  cursor: grabbing;
 }
 
-:where([data-slot="slider"][data-disabled]) :where([data-slot="slider-range"]) {
-  background: var(--ak-color-disabled-border);
-  opacity: 1;
+:where([data-slot="slider"][data-disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-:where([data-slot="slider"][data-disabled]) :where([data-slot="slider-thumb"]) {
-  border-color: var(--ak-color-disabled-border);
-  background: var(--ak-color-disabled-bg);
-  box-shadow: none;
+:where(
+  [data-slot="slider"][data-disabled] [data-slot="slider-track"],
+  [data-slot="slider"][data-disabled] [data-slot="slider-thumb"]
+) {
+  cursor: not-allowed;
 }