@askrjs/themes 0.0.9 → 0.0.11

package/templates/theme/styles/display/coverage.css

@@ -1,226 +1,32 @@
-/* Coverage selectors for askr-ui public slots/states that are intentionally minimal. */
-[data-slot="box"] {
-  display: block;
-}
-
-[data-slot="container"] {
-  box-sizing: border-box;
-}
-
-[data-slot="stack"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ak-space-md);
-}
-
-[data-slot="flex"] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ak-space-md);
-}
-
-[data-slot="inline"] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ak-space-md);
-}
-
-[data-slot="flex"][data-gap="initial:1"],
-[data-slot="inline"][data-gap="initial:1"] {
-  gap: var(--ak-space-1);
-}
-
-[data-slot="flex"][data-gap="initial:2"],
-[data-slot="inline"][data-gap="initial:2"] {
-  gap: var(--ak-space-2);
-}
-
-[data-slot="flex"][data-gap="initial:3"],
-[data-slot="inline"][data-gap="initial:3"] {
-  gap: var(--ak-space-3);
-}
-
-[data-slot="flex"][data-gap="initial:4"],
-[data-slot="inline"][data-gap="initial:4"] {
-  gap: var(--ak-space-4);
-}
-
-[data-slot="flex"][data-gap="initial:xs"],
-[data-slot="inline"][data-gap="initial:xs"] {
-  gap: var(--ak-space-xs);
-}
-
-[data-slot="flex"][data-gap="initial:sm"],
-[data-slot="inline"][data-gap="initial:sm"] {
-  gap: var(--ak-space-sm);
-}
-
-[data-slot="flex"][data-gap="initial:md"],
-[data-slot="inline"][data-gap="initial:md"] {
-  gap: var(--ak-space-md);
-}
-
-[data-slot="flex"][data-gap="initial:lg"],
-[data-slot="inline"][data-gap="initial:lg"] {
-  gap: var(--ak-space-lg);
-}
-
-[data-slot="flex"][data-gap="initial:xl"],
-[data-slot="inline"][data-gap="initial:xl"] {
-  gap: var(--ak-space-xl);
-}
-
-[data-slot="flex"][data-gap-x="initial:sm"],
-[data-slot="inline"][data-gap-x="initial:sm"] {
-  column-gap: var(--ak-space-sm);
-}
-
-[data-slot="flex"][data-gap-x="initial:md"],
-[data-slot="inline"][data-gap-x="initial:md"] {
-  column-gap: var(--ak-space-md);
-}
-
-[data-slot="flex"][data-gap-x="initial:lg"],
-[data-slot="inline"][data-gap-x="initial:lg"] {
-  column-gap: var(--ak-space-lg);
-}
-
-[data-slot="flex"][data-gap-y="initial:sm"],
-[data-slot="inline"][data-gap-y="initial:sm"] {
-  row-gap: var(--ak-space-sm);
-}
-
-[data-slot="flex"][data-gap-y="initial:md"],
-[data-slot="inline"][data-gap-y="initial:md"] {
-  row-gap: var(--ak-space-md);
-}
-
-[data-slot="flex"][data-gap-y="initial:lg"],
-[data-slot="inline"][data-gap-y="initial:lg"] {
-  row-gap: var(--ak-space-lg);
-}
-
-[data-slot="flex"][data-wrap="initial:nowrap"],
-[data-slot="inline"][data-wrap="initial:nowrap"] {
-  flex-wrap: nowrap;
-}
-
-[data-slot="flex"][data-wrap="initial:wrap-reverse"],
-[data-slot="inline"][data-wrap="initial:wrap-reverse"] {
-  flex-wrap: wrap-reverse;
-}
-
-[data-slot="section"] {
-  display: block;
+/* Minimal coverage selectors for public non-component slots/states. */
+:where([data-slot="theme-provider"]) {
+  min-block-size: 100vh;
+  color: var(--ak-color-text);
+  background: var(--ak-color-bg);
 }
 
-[data-slot="section"][data-size="initial:1"] {
-  padding-block: var(--ak-section-1);
-}
-
-[data-slot="section"][data-size="initial:2"] {
-  padding-block: var(--ak-section-2);
-}
-
-[data-slot="section"][data-size="initial:3"] {
-  padding-block: var(--ak-section-3);
-}
-
-[data-slot="section"][data-size="initial:4"] {
-  padding-block: var(--ak-section-4);
-}
-
-[data-slot="center"] {
-  display: grid;
-  place-items: center;
-}
-
-[data-slot="spacer"] {
-  flex: 1 1 auto;
-}
-
-[data-slot="spacer"][data-axis="inline"],
-[data-slot="spacer"][data-axis="block"] {
-  display: block;
-  flex-shrink: 0;
-}
-
-@media (min-width: 40rem) {
-  [data-slot="section"][data-size="sm:1"] {
-    padding-block: var(--ak-section-1);
-  }
-
-  [data-slot="section"][data-size="sm:2"] {
-    padding-block: var(--ak-section-2);
-  }
-
-  [data-slot="section"][data-size="sm:3"] {
-    padding-block: var(--ak-section-3);
-  }
-
-  [data-slot="section"][data-size="sm:4"] {
-    padding-block: var(--ak-section-4);
-  }
-}
-
-@media (min-width: 48rem) {
-  [data-slot="section"][data-size="md:1"] {
-    padding-block: var(--ak-section-1);
-  }
-
-  [data-slot="section"][data-size="md:2"] {
-    padding-block: var(--ak-section-2);
-  }
-
-  [data-slot="section"][data-size="md:3"] {
-    padding-block: var(--ak-section-3);
-  }
-
-  [data-slot="section"][data-size="md:4"] {
-    padding-block: var(--ak-section-4);
-  }
-}
-
-@media (min-width: 64rem) {
-  [data-slot="section"][data-size="lg:1"] {
-    padding-block: var(--ak-section-1);
-  }
-
-  [data-slot="section"][data-size="lg:2"] {
-    padding-block: var(--ak-section-2);
-  }
-
-  [data-slot="section"][data-size="lg:3"] {
-    padding-block: var(--ak-section-3);
-  }
-
-  [data-slot="section"][data-size="lg:4"] {
-    padding-block: var(--ak-section-4);
-  }
-}
-
-@media (min-width: 80rem) {
-  [data-slot="section"][data-size="xl:1"] {
-    padding-block: var(--ak-section-1);
-  }
-
-  [data-slot="section"][data-size="xl:2"] {
-    padding-block: var(--ak-section-2);
-  }
-
-  [data-slot="section"][data-size="xl:3"] {
-    padding-block: var(--ak-section-3);
-  }
-
-  [data-slot="section"][data-size="xl:4"] {
-    padding-block: var(--ak-section-4);
-  }
-}
-
-[data-slot="breadcrumb-item"] {
+:where([data-slot="theme-picker"]) {
   display: inline-flex;
-  align-items: center;
-  gap: var(--ak-space-sm);
+  min-block-size: var(--ak-density-control-height-md);
+  min-inline-size: min(8rem, 100%);
+  max-inline-size: 100%;
+  padding-inline: var(--ak-density-control-padding-x-md) 2.1rem;
+  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: inherit;
+  font-size: var(--ak-font-size-sm);
+  line-height: 1;
+  text-overflow: ellipsis;
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where([data-slot="theme-picker"]: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);
 }
 
 [data-slot="dialog-trigger"] {
@@ -228,8 +34,6 @@
 }
 
 [data-slot="dropdown-group"],
-[data-slot="menu-group"],
-[data-slot="menubar-group"],
 [data-slot="select-group"] {
   display: block;
 }
@@ -238,89 +42,10 @@
   display: inline;
 }
 
-[data-state="closed"] {
-  --ak-state-closed: 1;
-}
-
-[data-state="determinate"] {
-  --ak-state-determinate: 1;
-}
-
-[data-state="inactive"] {
-  --ak-state-inactive: 1;
-}
-
-[data-state="off"] {
-  --ak-state-off: 1;
-}
-
+[data-state="closed"],
+[data-state="determinate"],
+[data-state="inactive"],
+[data-state="off"],
 [data-state="unchecked"] {
-  --ak-state-unchecked: 1;
-}
-
-[data-accordion],
-[data-accordion-header],
-[data-active-item],
-[data-align],
-[data-askr-visually-hidden],
-[data-auto-fit],
-[data-avatar],
-[data-avatar-fallback],
-[data-avatar-image],
-[data-axis],
-[data-badge],
-[data-basis],
-[data-breadcrumb],
-[data-breadcrumb-current],
-[data-breadcrumb-item],
-[data-breadcrumb-link],
-[data-breadcrumb-list],
-[data-breadcrumb-separator],
-[data-centered],
-[data-collapse-below],
-[data-columns],
-[data-dialog-overlay],
-[data-dismissable-layer],
-[data-dropdown-label],
-[data-focus-ring],
-[data-focus-scope],
-[data-gap],
-[data-grow],
-[data-inline],
-[data-justify],
-[data-max],
-[data-max-width],
-[data-menubar],
-[data-menubar-label],
-[data-min-height],
-[data-min-item-width],
-[data-padding],
-[data-percentage],
-[data-progress],
-[data-progress-circle],
-[data-progress-circle-indicator],
-[data-progress-indicator],
-[data-required],
-[data-select-item-text],
-[data-select-label],
-[data-shrink],
-[data-side],
-[data-side-offset],
-[data-size],
-[data-skeleton],
-[data-slider],
-[data-slider-range],
-[data-slider-thumb],
-[data-slider-track],
-[data-toast],
-[data-toast-action],
-[data-toast-close],
-[data-toast-description],
-[data-toast-provider],
-[data-toast-title],
-[data-toast-viewport],
-[data-toggle-group],
-[data-value],
-[data-wrap] {
   --ak-contract-covered: 1;
 }

package/templates/theme/styles/display/scroll-area.css

@@ -1,49 +1,54 @@
 :where([data-slot="scroll-area-viewport"]) {
-  display: block;
-  inline-size: 100%;
+  min-inline-size: 0;
   max-inline-size: 100%;
-  block-size: 100%;
   overflow: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ak-color-border-strong) transparent;
 }
 
-:where([data-slot="scroll-area-viewport"]::-webkit-scrollbar) {
-  display: none;
+:where([data-slot="scroll-area-viewport"][data-size="content"]) {
+  max-block-size: min(22rem, 60vh);
+}
+
+:where([data-slot="scroll-area-viewport"][data-orientation="horizontal"]) {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+:where([data-slot="scroll-area-viewport"][data-orientation="vertical"]) {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+:where([data-slot="scroll-area-viewport"]:focus-visible) {
+  outline: none;
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where([data-slot="scroll-area-scrollbar"]) {
   display: flex;
-  flex: 0 0 auto;
-  max-inline-size: 100%;
-  padding: 0.125rem;
-  border-radius: var(--ak-radius-round);
-  background: color-mix(in srgb, var(--ak-color-surface-muted) 72%, transparent);
-  touch-action: none;
   user-select: none;
+  touch-action: none;
+  background: transparent;
 }
 
 :where([data-slot="scroll-area-scrollbar"][data-orientation="vertical"]) {
-  width: 0.625rem;
+  inline-size: 0.625rem;
+  padding-inline: 0.125rem;
 }
 
 :where([data-slot="scroll-area-scrollbar"][data-orientation="horizontal"]) {
-  height: 0.625rem;
-  flex-direction: column;
+  block-size: 0.625rem;
+  padding-block: 0.125rem;
 }
 
 :where([data-slot="scroll-area-thumb"]) {
-  display: block;
-  flex: 1 1 auto;
-  min-inline-size: 100%;
-  min-block-size: 100%;
+  flex: 1;
   border-radius: var(--ak-radius-round);
   background: var(--ak-color-border-strong);
 }
 
 :where([data-slot="scroll-area-corner"]) {
-  display: block;
-  flex: 0 0 auto;
-  background: var(--ak-color-surface-muted);
+  background: transparent;
 }

package/templates/theme/styles/display/spinner.css

@@ -3,7 +3,44 @@
   Styling is intentionally shared through progress-circle slots.
 */
 
-:where([data-slot="progress-circle"][data-state="indeterminate"]) {
+:where(
+  [data-slot="progress-circle"][data-spinner="true"],
+  [data-slot="progress-circle"][data-state="indeterminate"]
+) {
   inline-size: 2.25rem;
   block-size: 2.25rem;
 }
+
+:where(
+  [data-slot="progress-circle"][data-spinner="true"] [data-slot="progress-circle-indicator"],
+  [data-slot="progress-circle"][data-state="indeterminate"] [data-slot="progress-circle-indicator"]
+) {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+}
+
+:where([data-slot="progress-circle"][data-spinner="true"][data-size="sm"]) {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+:where(
+  [data-slot="progress-circle"][data-spinner="true"][data-size="sm"]
+    [data-slot="progress-circle-indicator"]
+) {
+  inline-size: 0.625rem;
+  block-size: 0.625rem;
+}
+
+:where([data-slot="progress-circle"][data-spinner="true"][data-size="lg"]) {
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+}
+
+:where(
+  [data-slot="progress-circle"][data-spinner="true"][data-size="lg"]
+    [data-slot="progress-circle-indicator"]
+) {
+  inline-size: 1.9rem;
+  block-size: 1.9rem;
+}

package/templates/theme/styles/display/stat.css

@@ -0,0 +1,21 @@
+:where([data-slot="stat"]) {
+  display: grid;
+  gap: var(--ak-space-xs);
+  min-inline-size: 0;
+}
+
+:where([data-slot="stat-label"], [data-slot="stat-description"]) {
+  margin: 0;
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+}
+
+:where([data-slot="stat-value"]) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: 2.5rem;
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
+  letter-spacing: 0;
+}

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

@@ -1,16 +1,23 @@
 :where([data-slot="table"]) {
   inline-size: 100%;
   min-inline-size: 0;
-  border-collapse: separate;
+  border-collapse: collapse;
   border-spacing: 0;
-  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-raised);
+  table-layout: fixed;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: none;
   overflow: hidden;
 }
 
+:where([data-slot="data-table"]) {
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface);
+}
+
 :where([data-slot="table-caption"]) {
   padding: 0 0 var(--ak-space-sm);
   color: var(--ak-color-text-muted);
@@ -25,11 +32,11 @@
 }
 
 :where([data-slot="table-body"]) {
-  background: var(--ak-color-surface-raised);
+  background: transparent;
 }
 
 :where([data-slot="table-foot"]) {
-  background: var(--ak-color-surface-muted);
+  background: transparent;
 }
 
 :where([data-slot="table-row"]) {
@@ -38,13 +45,13 @@
 }
 
 :where([data-slot="table-row"]:hover) {
-  background: color-mix(in srgb, var(--ak-color-hover) 70%, transparent);
+  background: var(--ak-color-hover);
 }
 
 :where([data-slot="table-header-cell"]),
 :where([data-slot="table-cell"]) {
-  padding: 0.7rem var(--ak-space-md);
-  border-block-end: 1px solid var(--ak-color-border-subtle);
+  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);
@@ -53,12 +60,16 @@
   overflow-wrap: anywhere;
 }
 
+:where([data-slot="table-body"] [data-slot="table-row"]:last-child [data-slot="table-cell"]) {
+  border-block-end: 0;
+}
+
 :where([data-slot="table-header-cell"]) {
   color: var(--ak-color-text-muted);
   font-weight: var(--ak-font-weight-semibold);
-  letter-spacing: 0.04em;
+  letter-spacing: 0;
   overflow-wrap: normal;
-  text-transform: uppercase;
+  text-transform: none;
   word-break: normal;
   white-space: normal;
 }
@@ -66,3 +77,17 @@
 :where([data-slot="table-cell"]) {
   font-weight: var(--ak-font-weight-regular);
 }
+
+@media (max-width: 30rem) {
+  :where([data-slot="table-header-cell"]),
+  :where([data-slot="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);
+  }
+
+  :where([data-slot="table-header-cell"]) {
+    letter-spacing: 0;
+    overflow-wrap: anywhere;
+  }
+}

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

@@ -1,29 +1,40 @@
 :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%);
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--ak-color-border);
   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;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ak-color-border-strong) transparent;
+}
+
+:where([data-slot="virtual-list"][data-viewport="lg"]) {
+  block-size: 28rem;
 }
 
 :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);
+  background: transparent;
+  color: var(--ak-color-text);
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    color 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);
+  background: var(--ak-color-hover);
+}
+
+:where([data-slot="virtual-list-row"][data-visible="false"]) {
+  color: var(--ak-color-text-muted);
 }