@loidolt/theme-styles 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-styles",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Base styles, fonts, accessibility helpers, and utilities for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -14,6 +14,7 @@
     "./accessibility": "./src/accessibility.css",
     "./utilities": "./src/utilities.css",
     "./components": "./src/components.css",
+    "./fonts": "./src/fonts.css",
     "./fonts/*": "./src/fonts/*",
     "./package.json": "./package.json"
   },
@@ -30,7 +31,7 @@
     "build": "node -e \"console.log('theme-styles: source CSS is publish-ready')\""
   },
   "dependencies": {
-    "@loidolt/theme-tokens": "^0.2.0"
+    "@loidolt/theme-tokens": "^0.3.0"
   },
   "publishConfig": {
     "access": "public",

package/src/accessibility.css

@@ -13,7 +13,8 @@
  * just on the other side of the border box. Zero specificity, declared after the rule above,
  * so it overrides by document order without escalating specificity.
  */
-:where(.ldt-topbar__nav, .ldt-table-wrap, .ldt-sidebar, .ldt-dialog__body) :where(:focus-visible) {
+:where(.ldt-topbar__nav, .ldt-table-wrap, .ldt-sidebar, .ldt-dialog__body, .ldt-drawer__body)
+  :where(:focus-visible) {
   outline-offset: -2px;
 }
 
@@ -55,10 +56,17 @@
  * plain declarations already override every component animation while app CSS still wins.
  */
 @media (prefers-reduced-motion: reduce) {
-  :where(*, *::before, *::after) {
+  /* Pseudo-elements are invalid inside `:where()` and get dropped from its forgiving
+     list, so they are listed separately — animations on `::before`/`::after` must slow
+     down too. Delays are zeroed so nothing appears to hang waiting on a dead animation. */
+  *,
+  ::before,
+  ::after {
     scroll-behavior: auto;
+    animation-delay: 0.01ms;
     animation-duration: 0.01ms;
     animation-iteration-count: 1;
+    transition-delay: 0.01ms;
     transition-duration: 0.01ms;
   }
 }

package/src/base.css

@@ -1,6 +1,11 @@
 /* Deep slice: assumes the token custom properties are already loaded.
    Import '@loidolt/theme-styles/tokens' (or the whole '@loidolt/theme-styles') first. */
-:where(*, *::before, *::after) {
+/* Pseudo-elements are invalid inside `:where()` and get dropped from its forgiving list,
+   so they are listed separately. `*` already has zero specificity; `::before`/`::after`
+   carry (0,0,1), the minimum a pseudo-element can have. */
+*,
+::before,
+::after {
   box-sizing: border-box;
 }
 :where(html) {
@@ -46,7 +51,8 @@
 :where(code, pre, kbd, samp) {
   font-family: var(--loidolt-font-mono);
 }
-:where(::selection) {
+/* Pseudo-elements cannot appear inside `:where()`; bare `::selection` is (0,0,1). */
+::selection {
   color: var(--loidolt-on-accent);
   background: var(--loidolt-accent);
 }

package/src/components.css

@@ -41,6 +41,13 @@
   border-color: var(--loidolt-danger);
   background: var(--loidolt-danger);
 }
+/* Without this, the base hover would flip a destructive button to the neutral inverse
+   surface — the danger affordance must survive hover. */
+.ldt-button--danger:hover:not(:disabled, [aria-disabled='true']) {
+  color: var(--loidolt-on-danger);
+  border-color: var(--loidolt-danger-hover);
+  background: var(--loidolt-danger-hover);
+}
 .ldt-button--ghost,
 .ldt-button--text {
   border-color: transparent;
@@ -183,6 +190,19 @@
   padding: 0;
   border: 0;
 }
+/* A legend is shrink-to-fit by default, which collapses the space-between that pushes the
+   "optional" marker to the far end. */
+.ldt-legend {
+  width: 100%;
+}
+.ldt-fieldset__body {
+  display: grid;
+  gap: var(--ldt-gap, var(--loidolt-space-3));
+  margin-top: 0.35rem;
+}
+.ldt-fieldset > :where(.ldt-field__description, .ldt-field__error) {
+  margin-top: 0.35rem;
+}
 .ldt-radio-group {
   display: flex;
   flex-wrap: wrap;
@@ -277,17 +297,47 @@
   font-family: var(--loidolt-font-utility);
   font-size: var(--loidolt-font-size-sm);
 }
+/*
+ * A badge reports state; it is never pressable. Standing at control height it would otherwise be
+ * indistinguishable from a button, so three things separate them, none of which depend on hover:
+ * the pill silhouette against the system's hard corners, the recessed fill instead of a raised
+ * one, and text that stays a step smaller than button text at every size.
+ */
 .ldt-badge {
   display: inline-flex;
   align-items: center;
   min-height: 1.4rem;
-  padding: 0.15rem 0.45rem;
+  padding: 0.15rem 0.5rem;
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-border-radius-pill);
   color: var(--loidolt-text-muted);
+  background: var(--loidolt-surface-sunken);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
+  /* The label voice (`.ldt-eyebrow`, `.ldt-field__label`), not the tighter control voice. */
+  letter-spacing: var(--loidolt-font-tracking-wide);
   text-transform: uppercase;
 }
+/*
+ * Size steps take the button scale's *box* so a badge in a row of controls lines up with them,
+ * but not its type scale — the smaller text is part of what marks the badge as inert. Without a
+ * size class the badge keeps its compact inline metrics, which is what table cells and running
+ * copy want.
+ */
+.ldt-badge--sm {
+  min-height: var(--loidolt-size-control-sm);
+  padding: 0.38rem 0.7rem;
+  line-height: 1;
+}
+.ldt-badge--md {
+  min-height: var(--loidolt-size-control);
+  padding: 0.5rem 0.9rem;
+  line-height: 1;
+}
+.ldt-badge--lg {
+  min-height: var(--loidolt-size-control-lg);
+  padding: 0.5rem 1.25rem;
+  line-height: 1;
+}
 .ldt-badge--accent {
   color: var(--loidolt-on-accent);
   border-color: var(--loidolt-accent);
@@ -350,6 +400,110 @@
 .ldt-table tbody tr:last-child td {
   border-bottom: 0;
 }
+/* Logical values: an `end`-aligned column follows the writing direction rather than pinning
+   itself to the right in RTL. */
+.ldt-table :where(th, td)[data-align='start'] {
+  text-align: start;
+}
+.ldt-table :where(th, td)[data-align='center'] {
+  text-align: center;
+}
+.ldt-table :where(th, td)[data-align='end'] {
+  text-align: end;
+}
+/*
+ * Sticky header. The scroll container has to be bounded or there is nothing to stick within —
+ * `--ldt-table-height` is that bound, and the wrapper switches to two-axis scrolling.
+ */
+.ldt-table-wrap--sticky {
+  max-height: var(--ldt-table-height, 24rem);
+  overflow: auto;
+}
+.ldt-table--sticky thead :where(th) {
+  position: sticky;
+  z-index: var(--loidolt-z-raised);
+  top: 0;
+  background: var(--loidolt-surface-alt);
+  /* `border-collapse: collapse` drops the borders of a sticky cell — the collapsed edge belongs
+     to the table, which scrolls away. An inset shadow is painted by the cell itself and stays. */
+  border-bottom: 0;
+  box-shadow: inset 0 -1px 0 var(--loidolt-border);
+}
+.ldt-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.ldt-table__sort:hover {
+  color: var(--loidolt-text);
+}
+/* A CSS triangle rather than a glyph: no icon dependency, and nothing that can fall back to
+   tofu in a font that lacks the arrow. */
+.ldt-table__sort-indicator {
+  width: 0;
+  height: 0;
+  border-inline: 0.3rem solid transparent;
+  border-bottom: 0.34rem solid currentColor;
+  opacity: 0;
+}
+.ldt-table__sort:hover .ldt-table__sort-indicator {
+  opacity: 0.4;
+}
+.ldt-table__sort[data-sort='ascending'] .ldt-table__sort-indicator,
+.ldt-table__sort[data-sort='descending'] .ldt-table__sort-indicator {
+  opacity: 1;
+}
+.ldt-table__sort[data-sort='descending'] .ldt-table__sort-indicator {
+  transform: rotate(180deg);
+}
+.ldt-table__empty td {
+  padding: 0;
+  border-bottom: 0;
+}
+/* Inside a table the surrounding rule is already the boundary; a second dashed one reads as a
+   rendering fault. */
+.ldt-table__empty .ldt-empty-state {
+  border: 0;
+}
+.ldt-empty-state {
+  display: grid;
+  justify-items: center;
+  gap: 0.5rem;
+  padding: var(--loidolt-space-10) var(--loidolt-space-6);
+  border: var(--loidolt-border-width) dashed var(--loidolt-border);
+  color: var(--loidolt-text-muted);
+  background: var(--loidolt-surface);
+  text-align: center;
+}
+.ldt-empty-state__icon {
+  color: var(--loidolt-text-muted);
+  font-size: var(--loidolt-font-size-xl);
+  line-height: 1;
+}
+.ldt-empty-state__title {
+  margin: 0;
+  color: var(--loidolt-text);
+  font-size: var(--loidolt-font-size-md);
+}
+.ldt-empty-state__description {
+  max-width: 42rem;
+  margin: 0;
+}
+.ldt-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--loidolt-space-2);
+  margin-top: var(--loidolt-space-2);
+}
 
 .ldt-alert {
   padding: 0.8rem 1rem;
@@ -536,6 +690,101 @@
   margin: 0.25rem 0 0;
   color: var(--loidolt-text-muted);
 }
+/*
+ * Drawer: a dialog anchored to an edge. `--ldt-drawer-size` is the measure across that edge —
+ * width for left/right, height for top/bottom — always capped so the scrim stays reachable and
+ * the panel never becomes a full-screen trap with no visible way out.
+ */
+.ldt-drawer {
+  position: fixed;
+  z-index: var(--loidolt-z-dialog);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+  border: 0 solid var(--loidolt-border-strong);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface);
+  box-shadow: var(--loidolt-shadow-modal);
+}
+.ldt-drawer--left,
+.ldt-drawer--right {
+  inset-block: 0;
+  width: min(var(--ldt-drawer-size, 20rem), calc(100vw - 3rem));
+}
+.ldt-drawer--left {
+  left: 0;
+  border-right-width: var(--loidolt-border-width);
+  animation: ldt-drawer-in-left var(--loidolt-motion-slow) var(--loidolt-motion-easing);
+}
+.ldt-drawer--right {
+  right: 0;
+  border-left-width: var(--loidolt-border-width);
+  animation: ldt-drawer-in-right var(--loidolt-motion-slow) var(--loidolt-motion-easing);
+}
+.ldt-drawer--top,
+.ldt-drawer--bottom {
+  inset-inline: 0;
+  height: min(var(--ldt-drawer-size, 20rem), calc(100dvh - 3rem));
+}
+.ldt-drawer--top {
+  top: 0;
+  border-bottom-width: var(--loidolt-border-width);
+  animation: ldt-drawer-in-top var(--loidolt-motion-slow) var(--loidolt-motion-easing);
+}
+.ldt-drawer--bottom {
+  bottom: 0;
+  border-top-width: var(--loidolt-border-width);
+  animation: ldt-drawer-in-bottom var(--loidolt-motion-slow) var(--loidolt-motion-easing);
+}
+@keyframes ldt-drawer-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes ldt-drawer-in-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+@keyframes ldt-drawer-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+}
+@keyframes ldt-drawer-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+}
+.ldt-drawer__header,
+.ldt-drawer__body,
+.ldt-drawer__footer {
+  padding: 1rem 1.25rem;
+}
+.ldt-drawer__header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-drawer__body {
+  overflow-y: auto;
+}
+.ldt-drawer__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  border-top: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-drawer__title {
+  margin: 0;
+  font-size: var(--loidolt-font-size-lg);
+}
+.ldt-drawer__description {
+  margin: 0.25rem 0 0;
+  color: var(--loidolt-text-muted);
+}
 .ldt-popover,
 .ldt-menu {
   z-index: var(--loidolt-z-menu);
@@ -571,11 +820,22 @@
   text-align: left;
   text-decoration: none;
 }
-.ldt-menu__item:hover,
+.ldt-menu__item:hover:not(:disabled, [data-disabled]),
 .ldt-menu__item[data-highlighted] {
   color: var(--loidolt-text-inverse);
   background: var(--loidolt-surface-inverse);
 }
+/* Exposed to assistive tech (no aria-hidden): a shortcut nobody can hear may as well
+   not exist. Muted normally; inherits the inverse ink while highlighted. */
+.ldt-menu__hint {
+  color: var(--loidolt-text-muted);
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
+  letter-spacing: 0.08em;
+}
+.ldt-menu__item:hover:not(:disabled, [data-disabled]) .ldt-menu__hint,
+.ldt-menu__item[data-highlighted] .ldt-menu__hint {
+  color: inherit;
+}
 .ldt-menu__item[data-disabled],
 .ldt-menu__item:disabled {
   opacity: 0.4;
@@ -645,6 +905,171 @@
   padding-block: 1rem;
 }
 
+.ldt-accordion {
+  border-top: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-accordion__item {
+  border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-accordion__heading {
+  margin: 0;
+}
+.ldt-accordion__trigger {
+  width: 100%;
+  min-height: var(--loidolt-size-control-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border: 0;
+  padding: 0.75rem 0;
+  color: var(--loidolt-text);
+  background: transparent;
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+  letter-spacing: 0.08em;
+  text-align: left;
+  text-transform: uppercase;
+}
+.ldt-accordion__trigger:hover:not([data-disabled]) {
+  color: var(--loidolt-text-accent);
+}
+.ldt-accordion__trigger[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.ldt-accordion__indicator {
+  width: 0;
+  height: 0;
+  flex: 0 0 auto;
+  border-inline: 0.3rem solid transparent;
+  border-top: 0.34rem solid currentColor;
+  transition: transform var(--loidolt-motion-normal) var(--loidolt-motion-easing);
+}
+.ldt-accordion__trigger[data-state='open'] .ldt-accordion__indicator {
+  transform: rotate(180deg);
+}
+.ldt-accordion__body {
+  padding-bottom: 1rem;
+  color: var(--loidolt-text-muted);
+}
+.ldt-toggle-group {
+  display: inline-flex;
+  border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+}
+.ldt-toggle-group[data-orientation='vertical'] {
+  flex-direction: column;
+}
+.ldt-toggle-group__item {
+  min-height: var(--loidolt-size-control);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  border: 0;
+  padding: 0 0.85rem;
+  color: var(--loidolt-text-muted);
+  background: transparent;
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+/* One shared rule between neighbours, so the group reads as a single object rather than a row
+   of separate buttons. */
+.ldt-toggle-group__item + .ldt-toggle-group__item {
+  border-left: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-toggle-group[data-orientation='vertical'] .ldt-toggle-group__item + .ldt-toggle-group__item {
+  border-left: 0;
+  border-top: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-toggle-group__item:hover:not([data-disabled], :disabled) {
+  color: var(--loidolt-text);
+}
+.ldt-toggle-group__item[data-state='on'] {
+  color: var(--loidolt-on-accent);
+  background: var(--loidolt-accent);
+}
+.ldt-toggle-group__item[data-state='on']:hover:not([data-disabled], :disabled) {
+  color: var(--loidolt-on-accent);
+  background: var(--loidolt-accent-hover);
+}
+.ldt-toggle-group__item[data-disabled],
+.ldt-toggle-group__item:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.ldt-toggle-group--sm .ldt-toggle-group__item {
+  min-height: var(--loidolt-size-control-sm);
+  padding: 0 0.65rem;
+  font-size: var(--loidolt-font-size-xs);
+}
+.ldt-toggle-group--lg .ldt-toggle-group__item {
+  min-height: var(--loidolt-size-control-lg);
+  padding: 0 1.2rem;
+}
+.ldt-breadcrumbs__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ldt-breadcrumbs__item {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+/* Generated content, so the separator is never selected, copied, or read aloud. */
+.ldt-breadcrumbs__item + .ldt-breadcrumbs__item::before {
+  content: var(--ldt-breadcrumb-separator, '/');
+  color: var(--loidolt-text-muted);
+}
+.ldt-breadcrumbs__link,
+.ldt-breadcrumbs__current {
+  overflow: hidden;
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
+  letter-spacing: var(--loidolt-font-tracking-utility);
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.ldt-breadcrumbs__link {
+  color: var(--loidolt-text-muted);
+  text-decoration: none;
+}
+.ldt-breadcrumbs__link:hover {
+  color: var(--loidolt-text-accent);
+  text-decoration: underline;
+}
+.ldt-breadcrumbs__current {
+  color: var(--loidolt-text);
+}
+.ldt-pagination__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+}
+.ldt-pagination__ellipsis {
+  padding-inline: 0.35rem;
+  color: var(--loidolt-text-muted);
+}
+.ldt-pagination__page {
+  min-width: var(--loidolt-size-control-sm);
+}
+.ldt-pagination__page[aria-current='page'],
+/* The base button hover is more specific than a plain `[aria-current]` rule, so the current
+   page needs its own hover or it flips to the neutral inverse surface on the way past. */
+.ldt-pagination__page[aria-current='page']:hover:not(:disabled, [aria-disabled='true']) {
+  color: var(--loidolt-on-accent);
+  border-color: var(--loidolt-accent);
+  background: var(--loidolt-accent);
+}
 .ldt-app-shell {
   min-height: 100dvh;
   display: grid;