@askrjs/themes 0.0.2 → 0.0.4

package/templates/theme/styles/navigation/menubar.css

@@ -1,19 +1,46 @@
-[data-slot="menubar"] {
+@keyframes ak-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-menu-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+:where([data-slot="menubar"]) {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.25rem;
 }
 
-[data-slot="menubar-trigger"] {
+:where([data-slot="menubar-trigger"]) {
+  --_trigger-border: color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 2.25rem;
-  padding: 0 var(--ak-space-sm);
-  border: 1px solid var(--ak-color-border);
+  min-height: var(--ak-density-control-height-md);
+  padding: 0 var(--ak-density-control-padding-x-sm);
+  border: 1px solid var(--_trigger-border);
   border-radius: var(--ak-radius-sm);
   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;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -22,68 +49,207 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="menubar-trigger"][data-state="open"] {
+:where([data-slot="menubar-trigger"][data-state="open"]) {
   border-color: var(--ak-color-primary);
-  background: var(--ak-color-primary-soft);
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 18%, var(--ak-color-surface));
   color: var(--ak-color-primary-ink);
 }
 
-[data-slot="menubar-trigger"]:hover {
+:where([data-slot="menubar-trigger"]:hover) {
   background: var(--ak-color-hover);
   border-color: var(--ak-color-border-strong);
 }
 
-[data-slot="menubar-content"] {
+:where([data-slot="menubar-trigger"]: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([data-slot="menubar-content"]) {
+  --_menubar-surface: var(--ak-color-surface-overlay);
+  --_menubar-border: color-mix(
+    in srgb,
+    var(--ak-color-border-subtle) 88%,
+    var(--_menubar-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: var(--ak-space-sm);
-  border: 1px solid var(--ak-color-border);
-  border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface-raised);
+  border: 1px solid var(--_menubar-border);
+  border-radius: var(--ak-radius-lg);
+  background: var(--_menubar-surface);
   color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: var(--ak-shadow-md);
+  z-index: var(--ak-z-dropdown);
+  transform-origin: top center;
+  animation: ak-menu-in var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="menubar-content"][data-state="closed"]) {
+  animation: ak-menu-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
 }
 
-[data-slot="menubar-item"],
-[data-slot="menubar-sub-trigger"] {
+:where([data-slot="menubar-item"]),
+:where([data-slot="menubar-sub-trigger"]) {
   display: flex;
   align-items: center;
-  min-height: 2.25rem;
-  padding: 0 var(--ak-space-sm);
+  min-height: var(--ak-density-control-height-md);
+  padding: 0 var(--ak-density-control-padding-x-md);
   border: 0;
-  border-radius: var(--ak-radius-sm);
+  border-radius: var(--ak-radius-md);
   background: transparent;
   color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  overflow-wrap: anywhere;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="menubar-item"]:hover,
-[data-slot="menubar-sub-trigger"]:hover {
+:where([data-slot="menubar-item"]:hover),
+:where([data-slot="menubar-sub-trigger"]:hover) {
   background: var(--ak-color-surface-muted);
 }
 
-[data-slot="menubar-item"][data-disabled],
-[data-slot="menubar-sub-trigger"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="menubar-item"]:focus-visible),
+:where([data-slot="menubar-sub-trigger"]:focus-visible) {
+  outline: none;
+  background: var(--ak-color-surface-muted);
+  box-shadow: inset 0 0 0 1px var(--ak-color-focus-ring);
+}
+
+:where([data-slot="menubar-item"][data-disabled]),
+:where([data-slot="menubar-sub-trigger"][data-disabled]) {
+  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
 }
 
-[data-slot="menubar-label"] {
-  padding: 0 var(--ak-space-sm);
-  color: var(--ak-color-text-muted);
+:where([data-slot="menubar-content"] [data-submenu="true"]) {
+  display: grid;
+  gap: 0.25rem;
+}
+
+:where([data-slot="menubar-content"] [data-submenu="true"] > [data-submenu-trigger="true"]) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-height: var(--ak-density-control-height-md);
+  padding: 0 var(--ak-density-control-padding-x-md);
+  border-radius: var(--ak-radius-md);
+  background: transparent;
+  color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  list-style: none;
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(
+  [data-slot="menubar-content"]
+    [data-submenu="true"]
+    > [data-submenu-trigger="true"]::-webkit-details-marker
+) {
+  display: none;
+}
+
+:where([data-slot="menubar-content"] [data-submenu="true"] > [data-submenu-trigger="true"]:hover) {
+  background: var(--ak-color-surface-muted);
+}
+
+:where(
+  [data-slot="menubar-content"] [data-submenu="true"] > [data-submenu-trigger="true"]:focus-visible
+) {
+  outline: none;
+  background: var(--ak-color-surface-muted);
+  box-shadow: inset 0 0 0 1px var(--ak-color-focus-ring);
+}
+
+:where([data-slot="menubar-content"] [data-submenu="true"][open] > [data-submenu-trigger="true"]) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 18%, var(--ak-color-surface));
+  color: var(--ak-color-primary-ink);
+}
+
+:where([data-slot="menubar-content"] [data-submenu="true"] > [data-submenu-trigger="true"]::after) {
+  content: "";
+  flex: none;
+  inline-size: 0.45rem;
+  block-size: 0.45rem;
+  margin-inline-start: var(--ak-space-xs);
+  border-inline-end: 1.5px solid currentColor;
+  border-block-end: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(
+  [data-slot="menubar-content"] [data-submenu="true"][open] > [data-submenu-trigger="true"]::after
+) {
+  transform: rotate(-135deg);
+}
+
+:where([data-slot="menubar-content"] [data-submenu-content="true"]) {
+  display: grid;
+  gap: 0.25rem;
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--ak-space-2xs, 0.125rem) 0 0 var(--ak-space-sm);
+}
+
+@media (min-width: 48rem) {
+  :where([data-slot="menubar-content"] [data-submenu-content="true"]) {
+    padding-inline-start: var(--ak-space-md);
+    border-inline-start: 1px solid var(--ak-color-border-subtle);
+  }
+}
+
+:where([data-slot="menubar-content"] [data-submenu-content="true"] > [data-submenu-item="true"]) {
+  list-style: none;
+}
+
+:where(
+  [data-slot="menubar-content"]
+    [data-submenu-content="true"]
+    > [data-submenu-item="true"]
+    > :where([data-slot="menubar-item"])
+) {
+  inline-size: 100%;
+}
+
+:where([data-slot="menubar-label"]) {
+  padding: 0 var(--ak-density-control-padding-x-md);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
   font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-[data-slot="menubar-separator"] {
+:where([data-slot="menubar-separator"]) {
   block-size: 1px;
   margin: 0.25rem 0;
   background: var(--ak-color-border);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="menubar-content"]) {
+    animation: none;
+  }
+}

package/templates/theme/styles/navigation/nav.css

@@ -0,0 +1,231 @@
+:where(.nav, [data-slot="nav"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ak-space-xs);
+}
+
+:where(.nav[data-orientation="vertical"], [data-slot="nav"][data-orientation="vertical"]) {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:where(ul.nav, ul[data-slot="nav"]) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-block-size: var(--ak-density-control-height-md);
+  min-inline-size: 0;
+  padding-inline: var(--ak-density-control-padding-x-sm);
+  border: 1px solid transparent;
+  border-radius: var(--ak-radius-md);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  overflow-wrap: anywhere;
+  text-decoration: none;
+  transition:
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    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(.nav[data-orientation="vertical"], [data-slot="nav"][data-orientation="vertical"])
+  :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"]) {
+  inline-size: 100%;
+  justify-content: flex-start;
+}
+
+:where(
+  .nav-item:hover,
+  .navbar-item:hover,
+  [data-slot="nav-item"]:hover,
+  [data-slot="nav-link"]:hover
+) {
+  color: var(--ak-color-text);
+  background: var(--ak-color-surface-muted);
+  border-color: color-mix(in srgb, var(--ak-color-border) 78%, var(--ak-color-surface) 22%);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(
+  .nav-item-icon,
+  .navbar-item-icon,
+  [data-slot="nav-item"][data-variant="icon"],
+  [data-slot="nav-link"][data-variant="icon"]
+) {
+  justify-content: center;
+  inline-size: var(--ak-density-control-height-md);
+  min-block-size: var(--ak-density-control-height-md);
+  padding-inline: 0;
+  border: 1px solid transparent;
+  color: var(--ak-color-text);
+  line-height: 1;
+}
+
+:where(
+    .nav-item-icon,
+    .navbar-item-icon,
+    [data-slot="nav-item"][data-variant="icon"],
+    [data-slot="nav-link"][data-variant="icon"]
+  )
+  > :where([data-slot="icon"], svg) {
+  flex: none;
+  color: currentColor;
+}
+
+:where(
+  .nav-item-icon:hover,
+  .navbar-item-icon:hover,
+  [data-slot="nav-item"][data-variant="icon"]:hover,
+  [data-slot="nav-link"][data-variant="icon"]:hover
+) {
+  border-color: transparent;
+}
+
+:where(
+  .nav-item-icon:active,
+  .navbar-item-icon:active,
+  [data-slot="nav-item"][data-variant="icon"]:active,
+  [data-slot="nav-link"][data-variant="icon"]:active
+) {
+  background: var(--ak-color-active);
+  border-color: transparent;
+}
+
+:where(
+  .nav-item[aria-current="page"],
+  .navbar-item[aria-current="page"],
+  [data-slot="nav-item"][aria-current="page"],
+  [data-slot="nav-link"][aria-current="page"],
+  .nav-item[data-active="true"],
+  .navbar-item[data-active="true"],
+  [data-slot="nav-item"][data-active="true"],
+  [data-slot="nav-link"][data-active="true"]
+) {
+  color: var(--ak-color-text);
+  background: var(--ak-color-selected);
+  border-color: var(--ak-color-selected-border);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(
+  .nav-item:focus-visible,
+  .navbar-item:focus-visible,
+  [data-slot="nav-item"]:focus-visible,
+  [data-slot="nav-link"]:focus-visible
+) {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
+
+:where(
+  .nav-item[data-active="true"]:hover,
+  .navbar-item[data-active="true"]:hover,
+  [data-slot="nav-item"][data-active="true"]:hover,
+  [data-slot="nav-link"][data-active="true"]:hover
+) {
+  background: color-mix(in srgb, var(--ak-color-selected) 72%, var(--ak-color-surface-muted));
+  border-color: var(--ak-color-selected-border);
+}
+
+:where(.nav[data-variant="tabs"], [data-slot="nav"][data-variant="tabs"]) {
+  align-items: flex-end;
+  gap: var(--ak-space-2xs, 0.125rem);
+  padding-block-end: var(--ak-space-2xs, 0.125rem);
+  box-shadow: inset 0 -1px 0 var(--ak-color-border);
+}
+
+:where(.nav[data-variant="tabs"], [data-slot="nav"][data-variant="tabs"])
+  :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"]) {
+  min-block-size: var(--ak-density-control-height-md);
+  padding-inline: var(--ak-space-md);
+  border-radius: calc(var(--ak-radius-md) + 2px) calc(var(--ak-radius-md) + 2px) 0 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--ak-color-text-muted);
+  box-shadow: none;
+}
+
+:where(.nav[data-variant="tabs"], [data-slot="nav"][data-variant="tabs"])
+  :where(
+    .nav-item:hover,
+    .navbar-item:hover,
+    [data-slot="nav-item"]:hover,
+    [data-slot="nav-link"]:hover
+  ) {
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 76%, var(--ak-color-surface));
+  border-color: transparent;
+  box-shadow: none;
+}
+
+:where(.nav[data-variant="tabs"], [data-slot="nav"][data-variant="tabs"])
+  :where(
+    .nav-item[aria-current="page"],
+    .navbar-item[aria-current="page"],
+    [data-slot="nav-item"][aria-current="page"],
+    [data-slot="nav-link"][aria-current="page"],
+    .nav-item[data-active="true"],
+    .navbar-item[data-active="true"],
+    [data-slot="nav-item"][data-active="true"],
+    [data-slot="nav-link"][data-active="true"]
+  ) {
+  color: var(--ak-color-text);
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 20%, var(--ak-color-surface));
+  border-color: transparent;
+  box-shadow: inset 0 -2px 0 var(--ak-color-primary);
+}
+
+:where(.nav[data-variant="pills"], [data-slot="nav"][data-variant="pills"]) {
+  display: inline-flex;
+  gap: var(--ak-space-xs);
+  padding: var(--ak-space-2xs, 0.125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 88%, var(--ak-color-surface));
+}
+
+:where(.nav[data-variant="pills"], [data-slot="nav"][data-variant="pills"])
+  :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"]) {
+  border-radius: 999px;
+  border-color: transparent;
+  background: transparent;
+  color: var(--ak-color-text-muted);
+  box-shadow: none;
+}
+
+:where(.nav[data-variant="pills"], [data-slot="nav"][data-variant="pills"])
+  :where(
+    .nav-item:hover,
+    .navbar-item:hover,
+    [data-slot="nav-item"]:hover,
+    [data-slot="nav-link"]:hover
+  ) {
+  background: color-mix(in srgb, var(--ak-color-surface) 82%, var(--ak-color-surface-muted));
+  border-color: transparent;
+  box-shadow: none;
+}
+
+:where(.nav[data-variant="pills"], [data-slot="nav"][data-variant="pills"])
+  :where(
+    .nav-item[aria-current="page"],
+    .navbar-item[aria-current="page"],
+    [data-slot="nav-item"][aria-current="page"],
+    [data-slot="nav-link"][aria-current="page"],
+    .nav-item[data-active="true"],
+    .navbar-item[data-active="true"],
+    [data-slot="nav-item"][data-active="true"],
+    [data-slot="nav-link"][data-active="true"]
+  ) {
+  color: var(--ak-color-text);
+  background: var(--ak-color-selected);
+  border-color: var(--ak-color-selected-border);
+  box-shadow: var(--ak-shadow-sm);
+}

package/templates/theme/styles/navigation/pagination.css

@@ -0,0 +1,91 @@
+:where(.pagination, [data-slot="pagination"]) {
+  display: flex;
+  max-inline-size: 100%;
+}
+
+:where(.pagination-list, [data-slot="pagination-list"]) {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-inline-size: 0;
+  gap: var(--ak-space-2xs, 0.125rem);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+:where(.page-item, [data-slot="pagination-item"]) {
+  display: block;
+}
+
+:where(.page-link, [data-slot="pagination-link"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 2.25rem;
+  min-block-size: 2.25rem;
+  padding-inline: var(--ak-space-sm);
+  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-muted);
+  box-shadow: var(--ak-shadow-sm);
+  font-size: var(--ak-font-size-sm);
+  line-height: 1;
+  overflow-wrap: anywhere;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    background-color 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(.page-link:hover, [data-slot="pagination-link"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.page-link:focus-visible, [data-slot="pagination-link"]: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(
+  .page-link.active,
+  .page-item.active > .page-link,
+  [data-slot="pagination-link"][data-active="true"],
+  [data-slot="pagination-item"][data-active="true"] > [data-slot="pagination-link"]
+) {
+  background: var(--ak-color-selected);
+  border-color: var(--ak-color-selected-border);
+  color: var(--ak-color-text);
+}
+
+:where(
+  .page-link.disabled,
+  .page-item.disabled > .page-link,
+  [data-slot="pagination-link"][data-disabled="true"],
+  [data-slot="pagination-item"][data-disabled="true"] > [data-slot="pagination-link"]
+) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  box-shadow: none;
+}
+
+:where(.pagination-ellipsis, [data-slot="pagination-ellipsis"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 2.25rem;
+  min-block-size: 2.25rem;
+  flex: none;
+  color: var(--ak-color-text-subtle);
+}

package/templates/theme/styles/overlays/alert-dialog.css

@@ -3,7 +3,7 @@
   Styling is intentionally shared through dialog slots.
 */
 
-[data-slot="dialog-content"] {
+:where([data-slot="dialog-content"]) {
   border-color: color-mix(in srgb, var(--ak-color-danger) 26%, var(--ak-color-border-subtle));
   border-width: 2px;
 }