@askrjs/themes 0.0.2 → 0.0.4

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

@@ -0,0 +1,109 @@
+:where(.alert, [data-slot="alert"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-surface-muted) 86%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-border) 82%, var(--ak-color-surface));
+  --_alert-ink: var(--ak-color-text);
+  --_alert-icon-bg: var(--ak-color-surface);
+  --_alert-icon-ink: var(--ak-color-text-muted);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ak-space-sm);
+  min-inline-size: 0;
+  padding: calc(var(--ak-layout-panel-padding) - 0.05rem) var(--ak-layout-panel-padding);
+  border: 1px solid var(--_alert-border);
+  border-radius: var(--ak-radius-lg);
+  background: var(--_alert-bg);
+  color: var(--_alert-ink);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.alert.alert-info, [data-slot="alert"][data-variant="info"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-info-soft) 52%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-info) 16%, var(--ak-color-border));
+  --_alert-ink: var(--ak-color-info-ink);
+  --_alert-icon-bg: color-mix(in srgb, var(--ak-color-info-soft) 60%, var(--ak-color-surface));
+  --_alert-icon-ink: var(--ak-color-info);
+}
+
+:where(.alert.alert-success, [data-slot="alert"][data-variant="success"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-success-soft) 52%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-success) 16%, var(--ak-color-border));
+  --_alert-ink: var(--ak-color-success-ink);
+  --_alert-icon-bg: color-mix(in srgb, var(--ak-color-success-soft) 60%, var(--ak-color-surface));
+  --_alert-icon-ink: var(--ak-color-success);
+}
+
+:where(.alert.alert-warning, [data-slot="alert"][data-variant="warning"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-warning-soft) 52%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-warning) 16%, var(--ak-color-border));
+  --_alert-ink: var(--ak-color-warning-ink);
+  --_alert-icon-bg: color-mix(in srgb, var(--ak-color-warning-soft) 60%, var(--ak-color-surface));
+  --_alert-icon-ink: var(--ak-color-warning);
+}
+
+:where(.alert.alert-danger, [data-slot="alert"][data-variant="danger"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-danger-soft) 52%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-danger) 16%, var(--ak-color-border));
+  --_alert-ink: var(--ak-color-danger-ink);
+  --_alert-icon-bg: color-mix(in srgb, var(--ak-color-danger-soft) 60%, var(--ak-color-surface));
+  --_alert-icon-ink: var(--ak-color-danger);
+}
+
+:where(.alert-icon, [data-slot="alert-icon"]) {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  border-radius: var(--ak-radius-round);
+  background: var(--_alert-icon-bg);
+  color: var(--_alert-icon-ink);
+}
+
+:where(.alert-content, [data-slot="alert-content"]) {
+  display: grid;
+  gap: var(--ak-space-2xs, 0.25rem);
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+:where(.alert-title, [data-slot="alert-title"]) {
+  margin: 0;
+  color: currentColor;
+  font-size: var(--ak-font-size-md);
+  font-weight: var(--ak-font-weight-bold);
+  line-height: var(--ak-line-height-tight);
+  overflow-wrap: anywhere;
+}
+
+:where(.alert-description, [data-slot="alert-description"]) {
+  margin: 0;
+  color: color-mix(in srgb, currentColor 82%, var(--ak-color-text-muted));
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
+}
+
+:where(.alert-actions, [data-slot="alert-actions"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-xs);
+  margin-top: var(--ak-space-xs);
+}
+
+:where(.alert-close, [data-slot="alert-close"]) {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+@media (max-width: 30rem) {
+  :where(.alert, [data-slot="alert"]) {
+    gap: var(--ak-space-xs);
+    padding: var(--ak-space-md);
+  }
+
+  :where(.alert-icon, [data-slot="alert-icon"]) {
+    inline-size: 2rem;
+    block-size: 2rem;
+  }
+}

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

@@ -1,25 +1,30 @@
-[data-slot="avatar"] {
+:where(.avatar, [data-slot="avatar"]) {
   display: inline-grid;
+  flex: none;
   place-items: center;
   inline-size: 2.5rem;
   block-size: 2.5rem;
   overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 72%, transparent);
   border-radius: 999px;
-  background: var(--ak-color-surface-muted);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 86%, var(--ak-color-surface) 14%);
   color: var(--ak-color-text);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ak-color-surface) 72%, transparent);
 }
 
-[data-slot="avatar-image"] {
+:where(.avatar-image, [data-slot="avatar-image"]) {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
 }
 
-[data-slot="avatar-fallback"] {
+:where(.avatar-fallback, [data-slot="avatar-fallback"]) {
   display: inline-grid;
   place-items: center;
   inline-size: 100%;
   block-size: 100%;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
+  overflow-wrap: anywhere;
 }

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

@@ -2,8 +2,10 @@
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  min-height: 1.625rem;
-  padding: 0 0.625rem;
+  min-height: 1.5rem;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding: 0 0.55rem;
   border: 1px solid color-mix(in srgb, var(--ak-color-primary) 10%, var(--ak-color-border-subtle));
   border-radius: var(--ak-radius-sm);
   background: color-mix(in srgb, var(--ak-color-primary-soft) 58%, var(--ak-color-surface));
@@ -11,7 +13,14 @@
   box-shadow: none;
   font-size: var(--ak-font-size-xs);
   font-weight: var(--ak-font-weight-semibold);
-  letter-spacing: 0.015em;
+  line-height: 1;
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.badge, [data-slot="badge"]) > :where([data-slot="icon"]) {
+  inline-size: var(--ak-icon-size-sm);
+  block-size: var(--ak-icon-size-sm);
 }
 
 :where(.badge-secondary, [data-slot="badge"][data-variant="secondary"]) {

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

@@ -1,8 +1,9 @@
 :where(.card, [data-slot="card"]) {
   display: grid;
-  gap: var(--ak-space-xs);
+  gap: var(--ak-space-md);
   padding: var(--ak-layout-panel-padding);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 86%, white 14%);
+  border: 1px solid
+    color-mix(in srgb, var(--ak-color-border-subtle) 86%, var(--ak-color-surface) 14%);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
@@ -32,13 +33,16 @@
   margin: 0;
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-lg);
-  font-weight: 650;
-  line-height: 1.15;
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: -0.01em;
+  line-height: 1.2;
 }
 
 :where(.card-description, [data-slot="card-description"]) {
   margin: 0;
   color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
 }
 
 :where(.card-content, [data-slot="card-content"]) {
@@ -51,3 +55,11 @@
   gap: var(--ak-space-sm);
   align-items: center;
 }
+
+:where(.card-actions, [data-slot="card-actions"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-sm);
+  align-items: center;
+  justify-content: flex-end;
+}

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

@@ -1,11 +1,10 @@
 /* Coverage selectors for askr-ui public slots/states that are intentionally minimal. */
-[data-slot="container"] {
-  box-sizing: border-box;
+[data-slot="box"] {
+  display: block;
 }
 
-[data-slot="grid"] {
-  display: grid;
-  gap: var(--ak-space-md);
+[data-slot="container"] {
+  box-sizing: border-box;
 }
 
 [data-slot="stack"] {
@@ -14,12 +13,32 @@
   gap: var(--ak-space-md);
 }
 
-[data-slot="inline"] {
+[data-slot="flex"] {
   display: flex;
   flex-wrap: wrap;
   gap: var(--ak-space-md);
 }
 
+[data-slot="section"] {
+  display: block;
+}
+
+[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;
@@ -29,6 +48,84 @@
   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"] {
   display: inline-flex;
   align-items: center;
@@ -39,7 +136,7 @@
   cursor: pointer;
 }
 
-[data-slot="dropdown-menu-group"],
+[data-slot="dropdown-group"],
 [data-slot="menu-group"],
 [data-slot="menubar-group"],
 [data-slot="select-group"] {
@@ -93,7 +190,7 @@
 [data-columns],
 [data-dialog-overlay],
 [data-dismissable-layer],
-[data-dropdown-menu-label],
+[data-dropdown-label],
 [data-fluid],
 [data-focus-ring],
 [data-focus-scope],
@@ -107,11 +204,6 @@
 [data-menubar-label],
 [data-min-height],
 [data-min-item-width],
-[data-navigation-menu],
-[data-navigation-menu-indicator],
-[data-navigation-menu-link],
-[data-navigation-menu-list],
-[data-navigation-menu-viewport],
 [data-padding],
 [data-percentage],
 [data-progress],
@@ -130,8 +222,6 @@
 [data-slider-range],
 [data-slider-thumb],
 [data-slider-track],
-[data-tabs],
-[data-tabs-list],
 [data-toast],
 [data-toast-action],
 [data-toast-close],

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

@@ -0,0 +1,84 @@
+:where(.list-group, [data-slot="list-group"]) {
+  display: grid;
+  gap: 0;
+  padding: 0;
+  margin: 0;
+  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);
+  box-shadow: var(--ak-shadow-sm);
+  list-style: none;
+  overflow: clip;
+}
+
+:where(.list-group-flush, [data-slot="list-group"][data-flush="true"]) {
+  border-inline: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+:where(.list-group-horizontal, [data-slot="list-group"][data-orientation="horizontal"]) {
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+}
+
+:where(.list-group-item, [data-slot="list-group-item"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-inline-size: 0;
+  min-block-size: 2.625rem;
+  padding: var(--ak-space-sm) var(--ak-space-md);
+  border-block-start: 1px solid
+    color-mix(in srgb, var(--ak-color-border-subtle) 86%, var(--ak-color-surface));
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
+  text-decoration: none;
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(.list-group > :first-child, [data-slot="list-group"] > :first-child) {
+  border-block-start: 0;
+}
+
+:where(
+  .list-group-horizontal > .list-group-item,
+  [data-slot="list-group"][data-orientation="horizontal"] > [data-slot="list-group-item"]
+) {
+  border-block-start: 0;
+  border-inline-start: 1px solid
+    color-mix(in srgb, var(--ak-color-border-subtle) 86%, var(--ak-color-surface));
+}
+
+:where(
+  .list-group-horizontal > .list-group-item:first-child,
+  [data-slot="list-group"][data-orientation="horizontal"]
+    > [data-slot="list-group-item"]:first-child
+) {
+  border-inline-start: 0;
+}
+
+:where(.list-group-item-action, [data-slot="list-group-item"][data-action="true"]) {
+  cursor: pointer;
+}
+
+:where(.list-group-item-action:hover, [data-slot="list-group-item"][data-action="true"]:hover) {
+  background: var(--ak-color-surface-muted);
+}
+
+:where(.list-group-item.active, [data-slot="list-group-item"][data-active="true"]) {
+  background: var(--ak-color-selected);
+  color: var(--ak-color-text);
+}
+
+:where(.list-group-item.disabled, [data-slot="list-group-item"][data-disabled="true"]) {
+  background: var(--ak-color-disabled-surface);
+  color: var(--ak-color-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/templates/theme/styles/display/progress-circle.css

@@ -1,8 +1,9 @@
-[data-slot="progress-circle"] {
+:where([data-slot="progress-circle"]) {
   display: inline-grid;
   place-items: center;
   inline-size: 2.75rem;
   block-size: 2.75rem;
+  flex: none;
   border-radius: 999px;
   background: conic-gradient(
     var(--ak-color-primary) var(--ak-progress-percentage),
@@ -10,7 +11,7 @@
   );
 }
 
-[data-slot="progress-circle-indicator"] {
+:where([data-slot="progress-circle-indicator"]) {
   inline-size: 1.9rem;
   block-size: 1.9rem;
   border-radius: 999px;

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

@@ -1,18 +1,21 @@
-[data-slot="progress"] {
+:where([data-slot="progress"]) {
+  position: relative;
   inline-size: 100%;
-  block-size: 0.625rem;
+  min-inline-size: 0;
+  block-size: 0.5rem;
   overflow: hidden;
   border-radius: 999px;
-  background: var(--ak-color-surface-muted);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 86%, var(--ak-color-surface));
 }
 
-[data-slot="progress-indicator"] {
+:where([data-slot="progress-indicator"]) {
   block-size: 100%;
   inline-size: var(--ak-progress-percentage);
   border-radius: inherit;
   background: var(--ak-color-primary);
+  transition: inline-size var(--ak-duration-normal) var(--ak-ease-standard);
 }
 
-[data-slot="progress-indicator"][data-state="indeterminate"] {
+:where([data-slot="progress-indicator"][data-state="indeterminate"]) {
   inline-size: 35%;
 }

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

@@ -1,6 +1,12 @@
 :where([data-slot="scroll-area-viewport"]) {
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  block-size: 100%;
+  overflow: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
 }
 
 :where([data-slot="scroll-area-viewport"]::-webkit-scrollbar) {
@@ -10,9 +16,12 @@
 :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;
 }
 
 :where([data-slot="scroll-area-scrollbar"][data-orientation="vertical"]) {
@@ -25,10 +34,16 @@
 }
 
 :where([data-slot="scroll-area-thumb"]) {
+  display: block;
+  flex: 1 1 auto;
+  min-inline-size: 100%;
+  min-block-size: 100%;
   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);
 }

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

@@ -1,15 +1,15 @@
-[data-slot="separator"] {
+:where([data-slot="separator"]) {
   display: block;
   flex: none;
-  background: var(--ak-color-border);
+  background: color-mix(in srgb, var(--ak-color-border) 82%, transparent);
 }
 
-[data-slot="separator"][data-orientation="horizontal"] {
+:where([data-slot="separator"][data-orientation="horizontal"]) {
   inline-size: 100%;
   block-size: 1px;
 }
 
-[data-slot="separator"][data-orientation="vertical"] {
+:where([data-slot="separator"][data-orientation="vertical"]) {
   inline-size: 1px;
   block-size: 100%;
 }

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

@@ -1,6 +1,29 @@
-[data-slot="skeleton"] {
+:where([data-slot="skeleton"]) {
   display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
   min-height: 1rem;
   border-radius: var(--ak-radius-sm);
-  background: color-mix(in srgb, var(--ak-color-surface-muted) 62%, var(--ak-color-surface));
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--ak-color-surface-muted) 62%, var(--ak-color-surface)),
+    color-mix(in srgb, var(--ak-color-surface-muted) 78%, var(--ak-color-surface)),
+    color-mix(in srgb, var(--ak-color-surface-muted) 62%, var(--ak-color-surface))
+  );
+  background-size: 200% 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :where([data-slot="skeleton"]) {
+    animation: ak-skeleton-shimmer 1.4s var(--ak-ease-standard) infinite;
+  }
+}
+
+@keyframes ak-skeleton-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
 }

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

@@ -3,7 +3,7 @@
   Styling is intentionally shared through progress-circle slots.
 */
 
-[data-slot="progress-circle"][data-state="indeterminate"] {
+:where([data-slot="progress-circle"][data-state="indeterminate"]) {
   inline-size: 2.25rem;
   block-size: 2.25rem;
 }

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

@@ -1,12 +1,14 @@
 :where([data-slot="table"]) {
   inline-size: 100%;
+  min-inline-size: 0;
   border-collapse: separate;
   border-spacing: 0;
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  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);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-sm);
+  overflow: hidden;
 }
 
 :where([data-slot="table-caption"]) {
@@ -41,21 +43,22 @@
 
 :where([data-slot="table-header-cell"]),
 :where([data-slot="table-cell"]) {
-  padding: 0.8rem var(--ak-space-md);
+  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="table-header-cell"]) {
   color: var(--ak-color-text-muted);
   font-weight: var(--ak-font-weight-semibold);
-  letter-spacing: 0.025em;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
-  white-space: nowrap;
+  white-space: normal;
 }
 
 :where([data-slot="table-cell"]) {