@attrus-ds/core 0.1.0

package/dist/css/components/number-input.css

@@ -0,0 +1,138 @@
+/* ============================================================
+   NUMBER INPUT — numeric field with − / + accelerator buttons
+   For bounded quantities: counts, percentages, days, seats.
+   All values from tokens.
+
+   Renamed from .stepper (Nov 2025) to free the "Stepper" name
+   for the multi-step flow indicator component. See stepper.css.
+   ============================================================ */
+
+.number-input {
+  display: inline-flex;
+  align-items: stretch;
+  height: 40px;
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-sans);
+  transition: var(--transition-fast);
+  overflow: hidden;
+}
+.number-input:hover { border-color: var(--color-border-strong); }
+.number-input:focus-within {
+  border-color: var(--color-foreground-accent);
+  box-shadow: var(--shadow-focus);
+}
+
+.number-input-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  background: transparent;
+  border: none;
+  color: var(--color-foreground-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: var(--transition-fast);
+}
+.number-input-btn:hover {
+  background: var(--color-background-hover);
+  color: var(--color-foreground-default);
+}
+.number-input-btn:focus-visible { outline: none; background: var(--color-background-hover); }
+.number-input-btn:disabled,
+.number-input-btn[aria-disabled="true"] {
+  color: var(--color-foreground-muted);
+  cursor: not-allowed;
+  background: transparent;
+}
+.number-input-btn i, .number-input-btn svg {
+  width: 14px; height: 14px;
+  stroke-width: 2.4;
+}
+
+.number-input-field {
+  flex: 1;
+  min-width: 0;
+  width: 80px;
+  padding: 0 var(--space-2);
+  background: transparent;
+  border: none;
+  border-left: 1px solid var(--color-border-subtle);
+  border-right: 1px solid var(--color-border-subtle);
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-medium);
+  color: var(--color-foreground-default);
+  text-align: center;
+  -moz-appearance: textfield;
+}
+.number-input-field::-webkit-outer-spin-button,
+.number-input-field::-webkit-inner-spin-button {
+  -webkit-appearance: none; margin: 0;
+}
+.number-input-field:focus { outline: none; }
+
+/* Sizes */
+.number-input-sm { height: 32px; }
+.number-input-sm .number-input-btn { width: 28px; }
+.number-input-sm .number-input-btn i, .number-input-sm .number-input-btn svg { width: 12px; height: 12px; }
+.number-input-sm .number-input-field { font-size: var(--fs-xs); width: 56px; }
+
+.number-input-lg { height: 48px; }
+.number-input-lg .number-input-btn { width: 44px; }
+.number-input-lg .number-input-btn i, .number-input-lg .number-input-btn svg { width: 16px; height: 16px; }
+.number-input-lg .number-input-field { font-size: var(--fs-md); width: 96px; }
+
+/* With suffix (currency, unit) */
+.number-input-suffix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--space-3);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+  color: var(--color-foreground-muted);
+  border-left: 1px solid var(--color-border-subtle);
+  background: var(--color-background-subtle);
+}
+
+.number-input-prefix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--space-3);
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-muted);
+  border-right: 1px solid var(--color-border-subtle);
+  background: var(--color-background-subtle);
+}
+
+/* States */
+.number-input.is-disabled,
+.number-input:has(.number-input-field:disabled) {
+  background: var(--color-background-subtle);
+  border-color: var(--color-border-subtle);
+  cursor: not-allowed;
+}
+.number-input.is-disabled .number-input-field,
+.number-input-field:disabled {
+  color: var(--color-foreground-muted);
+  cursor: not-allowed;
+}
+
+.number-input.is-invalid {
+  border-color: var(--color-feedback-danger-border);
+}
+.number-input.is-invalid:focus-within {
+  box-shadow: 0 0 0 3px var(--color-feedback-danger-background);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .number-input, .number-input-btn { transition: none; }
+}

package/dist/css/components/overlays.css

@@ -0,0 +1,405 @@
+/* ============================================================
+   OVERLAY SYSTEM — Modal + Drawer
+   Both share scrim, entry/exit motion, focus management.
+   All values from tokens.
+   ============================================================ */
+
+/* =================== SCRIM =================== */
+.scrim {
+  position: fixed;
+  inset: 0;
+  background: var(--color-scrim);
+  backdrop-filter: blur(var(--scrim-blur));
+  -webkit-backdrop-filter: blur(var(--scrim-blur));
+  z-index: 9000;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-base) var(--ease-standard);
+}
+.scrim.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Fallback for browsers without backdrop-filter — strengthen the tint to compensate. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .scrim { background: rgba(10, 15, 31, 0.55); }
+}
+
+/* =================== MODAL =================== */
+.modal {
+  position: fixed;
+  z-index: 9100;
+  top: 50%; left: 50%;
+  transform: translate(-50%, calc(-50% + 32px)) scale(0.96);
+  width: min(560px, calc(100vw - var(--space-8)));
+  max-height: calc(100vh - var(--space-12));
+  display: flex;
+  flex-direction: column;
+  background: var(--color-background-surface);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-2xl);
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, opacity;
+  /* Exit (default state) — quick fade + small slide */
+  transition:
+    opacity var(--duration-base) var(--ease-standard),
+    transform var(--duration-base) var(--ease-standard);
+}
+.modal.is-open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(-50%, -50%) scale(1);
+  /* Entry — page-level pace, emphasized for the "land" feel */
+  transition:
+    opacity var(--duration-slower) var(--ease-standard),
+    transform var(--duration-deliberate) var(--ease-emphasis);
+}
+
+/* Sizes */
+.modal-sm  { width: min(420px, calc(100vw - var(--space-8))); }
+.modal-md  { width: min(560px, calc(100vw - var(--space-8))); }
+.modal-lg  { width: min(720px, calc(100vw - var(--space-8))); }
+.modal-xl  { width: min(960px, calc(100vw - var(--space-8))); }
+
+/* Header */
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-6) var(--space-4);
+}
+.modal-header-text { flex: 1; min-width: 0; }
+.modal-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-xl);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--ls-title);
+  line-height: var(--lh-tight);
+  color: var(--color-foreground-default);
+  margin: 0 0 var(--space-1);
+}
+.modal-subtitle {
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+  line-height: var(--lh-normal);
+  margin: 0;
+}
+.modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px; height: 32px;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-foreground-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: var(--transition-fast);
+}
+.modal-close:hover {
+  background: var(--color-background-hover);
+  color: var(--color-foreground-default);
+}
+.modal-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.modal-close i, .modal-close svg { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
+
+/* Body */
+.modal-body {
+  padding: var(--space-2) var(--space-6) var(--space-6);
+  overflow-y: auto;
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-default);
+  line-height: var(--lh-relaxed);
+  flex: 1;
+}
+.modal-body p { margin: 0 0 var(--space-3); }
+.modal-body p:last-child { margin-bottom: 0; }
+
+/* Footer */
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-6) var(--space-6);
+  border-top: 1px solid var(--color-border-subtle);
+  margin-top: auto;
+  flex-shrink: 0;
+}
+.modal-footer-spread { justify-content: space-between; }
+.modal-footer-aux {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--fs-xs);
+  color: var(--color-foreground-muted);
+}
+
+/* Variant: destructive — top accent strip */
+.modal-destructive .modal-header {
+  border-top: 3px solid var(--color-feedback-danger-foreground);
+  padding-top: calc(var(--space-6) - 3px);
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+}
+.modal-destructive .modal-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px; height: 40px;
+  background: var(--color-feedback-danger-background);
+  color: var(--color-feedback-danger-foreground);
+  border-radius: var(--radius-pill);
+  margin-bottom: var(--space-3);
+}
+.modal-destructive .modal-icon i, .modal-destructive .modal-icon svg { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
+
+
+/* =================== DRAWER =================== */
+.drawer {
+  position: fixed;
+  z-index: 9100;
+  background: var(--color-background-surface);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-shadow: var(--shadow-2xl);
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, opacity;
+  /* Exit — slide back out + fade */
+  transition:
+    transform var(--duration-slow) var(--ease-standard),
+    opacity var(--duration-base) var(--ease-standard);
+}
+.drawer.is-open {
+  opacity: 1;
+  pointer-events: auto;
+  /* Entry — page-level pace, emphasized */
+  transition:
+    transform var(--duration-deliberate) var(--ease-emphasis),
+    opacity var(--duration-slower) var(--ease-standard);
+}
+
+/* Right (default).
+   --drawer-w drives both the width AND stack offsets so size variants
+   automatically scale the stacking math. --drawer-offset shifts the panel
+   inward when stacked behind another drawer. */
+.drawer-right {
+  --drawer-w: min(440px, 90vw);
+  --drawer-offset: 0px;
+  top: 0; right: 0; bottom: 0;
+  width: var(--drawer-w);
+  border-top-left-radius: var(--radius-xs);
+  border-bottom-left-radius: var(--radius-xs);
+  transform: translateX(100%);
+}
+.drawer-right.is-open { transform: translateX(calc(-1 * var(--drawer-offset))); }
+
+/* Left */
+.drawer-left {
+  --drawer-w: min(320px, 85vw);
+  --drawer-offset: 0px;
+  top: 0; left: 0; bottom: 0;
+  width: var(--drawer-w);
+  border-top-right-radius: var(--radius-xs);
+  border-bottom-right-radius: var(--radius-xs);
+  transform: translateX(-100%);
+}
+.drawer-left.is-open { transform: translateX(var(--drawer-offset)); }
+
+/* =================== STACKED DRAWERS ===================
+   Open a second drawer alongside the first instead of replacing it.
+   --drawer-stack = how many slots inward to shift; 0 = frontmost panel.
+   Slot width derived from --drawer-w so size variants stack correctly.
+   Cap at 3 stacked panels for screens ≥1280px; 2 below.
+   Usage: <aside class="drawer drawer-right drawer-md" data-stack="1"> */
+.drawer-right[data-stack="1"], .drawer-left[data-stack="1"] { --drawer-offset: var(--drawer-w); }
+.drawer-right[data-stack="2"], .drawer-left[data-stack="2"] { --drawer-offset: calc(var(--drawer-w) * 2); }
+.drawer-right[data-stack="3"], .drawer-left[data-stack="3"] { --drawer-offset: calc(var(--drawer-w) * 3); }
+
+/* Stacked panels lose their inner radius — they butt up against a sibling.
+   Separator is placed on the edge that TOUCHES the adjacent panel.
+   `:has(~)` only matches FOLLOWING siblings, so we apply rules from the
+   panel that comes EARLIER in the DOM (the back panel, which is rendered
+   before the front panel in modal-drawer.html). */
+
+/* Back panel (stack ≥ 1): when followed by an open front panel,
+   only flatten the INNER edge (right side) and add separator there.
+   Outer edge (left side) keeps the rounded corners. */
+.drawer-right[data-stack]:not([data-stack="0"]).is-open:has(~ .drawer-right[data-stack="0"].is-open) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 2px solid var(--color-border-default);
+}
+.drawer-left[data-stack]:not([data-stack="0"]).is-open:has(~ .drawer-left[data-stack="0"].is-open) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 2px solid var(--color-border-default);
+}
+
+/* Front panel (stack=0): when PRECEDED by an open back panel, flatten
+   the inner-side radius and add the matching separator. Use the parent's
+   `:has` to detect the configuration, then target the front. */
+:has(> .drawer-right[data-stack]:not([data-stack="0"]).is-open) > .drawer-right[data-stack="0"].is-open {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 2px solid var(--color-border-default);
+}
+:has(> .drawer-left[data-stack]:not([data-stack="0"]).is-open) > .drawer-left[data-stack="0"].is-open {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 2px solid var(--color-border-default);
+}
+
+/* Bottom */
+.drawer-bottom {
+  left: 0; right: 0; bottom: 0;
+  max-height: 80vh;
+  border-top-left-radius: var(--radius-sm);
+  border-top-right-radius: var(--radius-sm);
+  transform: translateY(100%);
+}
+.drawer-bottom.is-open { transform: translateY(0); }
+
+/* Drawer sizes (right/left) — feed --drawer-w so stacking math scales */
+.drawer-sm  { --drawer-w: min(360px, 90vw); width: var(--drawer-w); }
+.drawer-md  { --drawer-w: min(440px, 90vw); width: var(--drawer-w); }
+.drawer-lg  { --drawer-w: min(560px, 92vw); width: var(--drawer-w); }
+.drawer-xl  { --drawer-w: min(720px, 94vw); width: var(--drawer-w); }
+
+/* Drawer parts (mirror modal vocabulary).
+   Header and footer are STICKY with a liquid-glass background: body
+   content scrolls underneath them with a frosted blur. The drawer
+   itself is the scroll container (see .drawer overflow-y above). */
+.drawer-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  background: var(--glass-white);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border-bottom: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .drawer-header, .drawer-footer { background: var(--color-background-surface); }
+}
+.drawer-header-text { flex: 1; min-width: 0; }
+.drawer-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-lg);
+  font-weight: var(--w-bold);
+  letter-spacing: var(--ls-title);
+  line-height: var(--lh-tight);
+  color: var(--color-foreground-default);
+  margin: 0 0 var(--space-1);
+}
+.drawer-subtitle {
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+  line-height: var(--lh-normal);
+  margin: 0;
+}
+.drawer-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  width: 32px; height: 32px;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-foreground-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: var(--transition-fast);
+}
+.drawer-close:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.drawer-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.drawer-close i, .drawer-close svg { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
+
+/* Header lead tile — standardized icon container on the LEFT of the header.
+   40×40, top-aligned, consistent radius; caller sets bg/color per context. */
+.drawer-lead {
+  width: 40px; height: 40px;
+  flex-shrink: 0;
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+}
+.drawer-lead i, .drawer-lead svg { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
+
+.drawer-body {
+  padding: var(--space-6);
+  flex: 1 0 auto;
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-default);
+  line-height: var(--lh-relaxed);
+}
+
+.drawer-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-6);
+  background: var(--glass-white);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border-top: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
+
+/* Drawer-bottom drag handle (mobile-style) */
+.drawer-handle {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-3) 0 var(--space-1);
+  background: var(--glass-white);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  flex-shrink: 0;
+}
+/* When a handle precedes the header (bottom drawer), the header no longer
+   needs its own glass top — they read as one frosted bar. */
+.drawer-handle + .drawer-header { border-top: 0; }
+.drawer-handle::before {
+  content: "";
+  width: 36px;
+  height: 4px;
+  background: var(--color-border-strong);
+  border-radius: var(--radius-pill);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .scrim, .modal, .drawer, .modal.is-open, .drawer.is-open {
+    transition: opacity var(--duration-instant) linear !important;
+  }
+  .modal.is-open { transform: translate(-50%, -50%); }
+  .drawer-right.is-open,
+  .drawer-left.is-open,
+  .drawer-bottom.is-open { transform: none; }
+  .drawer-right { transform: none; }
+  .drawer-left { transform: none; }
+  .drawer-bottom { transform: none; }
+}