@loidolt/theme-styles 0.4.0 → 0.6.0

package/src/components/forms.css

@@ -76,6 +76,24 @@
   height: 1rem;
   accent-color: var(--loidolt-accent);
 }
+/* A choice with a sentence under it: the control aligns with the label's first line. */
+.ldt-choice--described {
+  align-items: flex-start;
+}
+.ldt-choice--described input {
+  margin-top: 0.1rem;
+}
+.ldt-choice__text {
+  display: grid;
+  gap: 0.15rem;
+}
+.ldt-choice__description {
+  color: var(--loidolt-text-muted);
+  font: var(--loidolt-font-size-sm) / var(--loidolt-font-line-height-normal)
+    var(--loidolt-font-display);
+  letter-spacing: normal;
+  text-transform: none;
+}
 .ldt-fieldset {
   min-width: 0;
   margin: 0;
@@ -139,6 +157,9 @@
   grid-template-columns: 2rem minmax(0, 1fr) 2rem;
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-control);
 }
+.ldt-number-field--bare {
+  grid-template-columns: minmax(0, 1fr);
+}
 .ldt-number-field .ldt-number-field__input {
   border: 0;
   text-align: center;
@@ -199,3 +220,298 @@
   opacity: 0.4;
   cursor: not-allowed;
 }
+/*
+ * Combobox and MultiSelect. The wrapper draws the field — underline, or box when `--boxed` —
+ * so chips, the text input and the open button all sit inside one boundary.
+ */
+.ldt-combobox {
+  width: 100%;
+  min-height: var(--loidolt-size-control);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+  border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  padding: 0.2rem 0 0.2rem 0.15rem;
+  color: var(--loidolt-text);
+}
+.ldt-combobox--boxed {
+  border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  padding-inline: 0.5rem 0;
+  background: var(--loidolt-surface-input);
+}
+.ldt-combobox:focus-within {
+  border-color: var(--loidolt-accent);
+}
+.ldt-combobox:has([aria-invalid='true']) {
+  border-color: var(--loidolt-danger);
+}
+.ldt-combobox[data-disabled],
+.ldt-combobox:has(:disabled) {
+  opacity: 0.55;
+}
+.ldt-combobox__input {
+  flex: 1 1 6rem;
+  min-width: 0;
+  min-height: 1.5rem;
+  border: 0;
+  padding: 0.2rem 0;
+  color: inherit;
+  background: transparent;
+}
+.ldt-combobox__trigger {
+  display: inline-grid;
+  place-items: center;
+  align-self: stretch;
+  width: 1.75rem;
+  min-height: 1.5rem;
+  border: 0;
+  padding: 0;
+  color: var(--loidolt-text-muted);
+  background: transparent;
+}
+.ldt-combobox__trigger svg {
+  transition: transform var(--loidolt-motion-fast) var(--loidolt-motion-easing);
+}
+.ldt-combobox__trigger[data-state='open'] svg {
+  transform: rotate(180deg);
+}
+.ldt-multi-select__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*
+ * Slider. The wrapper's inline padding is half a thumb, so a thumb centred on either end value
+ * stays inside the box without the browser measuring it after hydration.
+ */
+.ldt-slider {
+  --ldt-slider-thumb: 1rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--loidolt-space-3);
+  padding-inline: calc(var(--ldt-slider-thumb) / 2);
+}
+.ldt-slider__control {
+  position: relative;
+  flex: 1;
+  min-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  touch-action: none;
+  user-select: none;
+}
+.ldt-slider__track {
+  position: relative;
+  width: 100%;
+  height: var(--ldt-slider-thickness, 0.25rem);
+  overflow: hidden;
+  background: var(--loidolt-border);
+}
+.ldt-slider__range {
+  position: absolute;
+  height: 100%;
+  background: var(--loidolt-accent);
+}
+.ldt-slider__thumb {
+  display: block;
+  width: var(--ldt-slider-thumb);
+  height: var(--ldt-slider-thumb);
+  border: 2px solid var(--loidolt-accent);
+  background: var(--loidolt-surface-input);
+  cursor: grab;
+  transition: background var(--loidolt-motion-fast) var(--loidolt-motion-easing);
+}
+.ldt-slider__thumb[data-active] {
+  background: var(--loidolt-accent);
+  cursor: grabbing;
+}
+.ldt-slider__tick {
+  width: var(--loidolt-border-width);
+  height: 0.5rem;
+  background: var(--loidolt-border-strong);
+  transform: translateY(0.55rem);
+}
+.ldt-slider__value {
+  min-width: 3ch;
+  color: var(--loidolt-text-muted);
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+.ldt-slider[data-disabled] {
+  opacity: 0.45;
+}
+.ldt-slider[data-disabled] .ldt-slider__thumb {
+  cursor: not-allowed;
+}
+.ldt-slider--vertical {
+  width: auto;
+  height: var(--ldt-slider-length, 10rem);
+  flex-direction: column;
+  padding-inline: 0;
+  padding-block: calc(var(--ldt-slider-thumb) / 2);
+}
+.ldt-slider--vertical .ldt-slider__control {
+  min-height: 0;
+  width: 1.5rem;
+  flex-direction: column;
+  justify-content: center;
+}
+.ldt-slider--vertical .ldt-slider__track {
+  width: var(--ldt-slider-thickness, 0.25rem);
+  height: 100%;
+}
+.ldt-slider--vertical .ldt-slider__range {
+  width: 100%;
+  height: auto;
+}
+
+/* Password field: the input and its reveal button share the field's boundary. */
+.ldt-password-input {
+  width: 100%;
+  min-height: var(--loidolt-size-control);
+  display: flex;
+  align-items: stretch;
+  border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-control);
+}
+.ldt-password-input--boxed {
+  border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  background: var(--loidolt-surface-input);
+}
+.ldt-password-input:focus-within {
+  border-color: var(--loidolt-accent);
+}
+.ldt-password-input:has([aria-invalid='true']) {
+  border-color: var(--loidolt-danger);
+}
+.ldt-password-input__input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  padding: 0.45rem 0.15rem;
+  color: var(--loidolt-text);
+  background: transparent;
+}
+.ldt-password-input--boxed .ldt-password-input__input {
+  padding-inline: 0.65rem;
+}
+.ldt-password-input__toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 2.25rem;
+  min-height: 1.5rem;
+  border: 0;
+  padding: 0;
+  color: var(--loidolt-text-muted);
+  background: transparent;
+}
+.ldt-password-input__toggle:hover:not(:disabled),
+.ldt-password-input__toggle[aria-pressed='true'] {
+  color: var(--loidolt-text-accent);
+}
+
+/* One-time code: one square cell per character over a single hidden input. */
+.ldt-otp-input {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.ldt-otp-input__cell {
+  position: relative;
+  width: var(--loidolt-size-control-lg);
+  height: var(--loidolt-size-control-lg);
+  display: grid;
+  place-items: center;
+  border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface-input);
+  font: var(--loidolt-font-size-lg) var(--loidolt-font-utility);
+  font-variant-numeric: tabular-nums;
+}
+/* The input is visually hidden, so the active cell carries the focus indicator for it. */
+.ldt-otp-input:focus-within .ldt-otp-input__cell[data-active] {
+  border-color: var(--loidolt-accent);
+  outline: 2px solid var(--loidolt-focus-ring);
+  outline-offset: 1px;
+}
+.ldt-otp-input:has([aria-invalid='true']) .ldt-otp-input__cell {
+  border-color: var(--loidolt-danger);
+}
+.ldt-otp-input__gap {
+  width: 0.5rem;
+  height: var(--loidolt-border-width);
+  background: var(--loidolt-border-strong);
+}
+.ldt-otp-input__caret {
+  width: 1px;
+  height: 1.1em;
+  background: currentColor;
+  animation: ldt-caret 1s steps(1) infinite;
+}
+@keyframes ldt-caret {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* Signature capture: a paper-toned pad with a baseline, so drawing feels like signing a line. */
+.ldt-signature {
+  display: grid;
+  gap: var(--loidolt-space-2);
+}
+.ldt-signature__surface {
+  position: relative;
+  border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface-input);
+}
+.ldt-signature__surface::after {
+  content: '';
+  position: absolute;
+  inset: auto var(--loidolt-space-4) 28%;
+  border-bottom: var(--loidolt-border-width) dashed var(--loidolt-border-strong);
+  pointer-events: none;
+}
+.ldt-signature__canvas {
+  display: block;
+  width: 100%;
+  height: var(--ldt-signature-height, 10rem);
+  touch-action: none;
+  cursor: crosshair;
+}
+.ldt-signature[data-disabled] .ldt-signature__canvas {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.ldt-signature__hint {
+  margin: 0;
+  color: var(--loidolt-text-muted);
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+}
+.ldt-signature__typed {
+  display: grid;
+  gap: var(--loidolt-space-2);
+}
+.ldt-signature__preview {
+  min-height: 4.5rem;
+  margin: 0;
+  overflow: hidden;
+  border-bottom: var(--loidolt-border-width) dashed var(--loidolt-border-strong);
+  padding: var(--loidolt-space-2) var(--loidolt-space-3) 0;
+  color: var(--loidolt-text);
+  font-size: 2.5rem;
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ldt-signature__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--loidolt-space-2);
+}

package/src/components/layout.css

@@ -11,10 +11,10 @@
   color: var(--loidolt-text);
   background: var(--loidolt-background);
 }
-.ldt-app-shell > :where(header, main, footer) {
+.ldt-app-shell > :where(header, main, footer, .ldt-app-shell__main) {
   min-width: 0;
 }
-.ldt-app-shell > main,
+.ldt-app-shell > :where(main, .ldt-app-shell__main),
 .ldt-workspace-container {
   /* Workspace normally sits directly in AppShell's main row. Naming that row as an inline-size
      container lets the same compact layout work when the shell itself is embedded or split. The
@@ -247,6 +247,8 @@
 .ldt-page-header__title {
   margin: 0;
   font-size: var(--loidolt-font-size-xl);
+  /* A long unbroken title — a file name, an identifier — must still reflow at 320px. */
+  overflow-wrap: anywhere;
 }
 .ldt-page-header__description {
   max-width: 48rem;
@@ -289,7 +291,10 @@
     gap: 0.15rem;
   }
   .ldt-contextbar__detail {
-    display: none;
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+    overflow-wrap: anywhere;
   }
   .ldt-workspace,
   .ldt-workspace--sidebar,
@@ -329,3 +334,66 @@
     padding: var(--loidolt-space-4);
   }
 }
+/* A row of list controls — search, filters, view options — on the recessed surface. */
+.ldt-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--loidolt-space-2);
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  padding: var(--loidolt-space-2) var(--loidolt-space-3);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface-alt);
+}
+.ldt-toolbar--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+.ldt-toolbar__end {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--loidolt-space-2);
+  margin-inline-start: auto;
+}
+.ldt-toolbar--vertical .ldt-toolbar__end {
+  flex-direction: column;
+  align-items: stretch;
+  margin-inline-start: 0;
+  margin-block-start: auto;
+}
+
+/*
+ * A filter area that expands under its toggle. Rows animate from `0fr` to `1fr`, which lets the
+ * height follow the content without measuring it.
+ */
+.ldt-filter-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--loidolt-motion-slow) var(--loidolt-motion-easing);
+}
+.ldt-filter-panel[data-state='open'] {
+  grid-template-rows: 1fr;
+}
+.ldt-filter-panel__clip {
+  min-height: 0;
+  overflow: hidden;
+}
+.ldt-filter-panel__body {
+  margin-top: var(--loidolt-space-2);
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  padding: var(--loidolt-space-4);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface-alt);
+}
+.ldt-filter-panel__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ldt-min, 12rem)), 1fr));
+  align-items: end;
+  gap: var(--ldt-gap, var(--loidolt-space-4));
+}
+.ldt-filter-panel__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--loidolt-space-3);
+}