@attrus-ds/core 0.1.0

package/dist/css/components/cards.css

@@ -0,0 +1,272 @@
+/* ================================================================
+   CARDS — components/cards.css
+   The container component. Defines surface, elevation, radius, padding.
+   100% token-driven; consumed by cards.html and any product UI.
+   ================================================================ */
+
+/* ----------------------------------------------------------------
+   Base — .card
+   Default = surface + xs shadow + md radius + hairline border.
+   ---------------------------------------------------------------- */
+.card {
+  display: block;
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs);
+  color: var(--color-foreground-default);
+  font-family: var(--font-sans);
+  /* base padding kicks in only when the card holds direct content
+     (no .card-header / .card-body subdivision) */
+  padding: var(--space-5) var(--space-6);
+  transition:
+    box-shadow var(--transition-base),
+    border-color var(--transition-base),
+    transform var(--transition-base),
+    background var(--transition-base);
+}
+
+/* If the card uses structured slots, drop the base padding —
+   each slot brings its own. */
+.card:has(> .card-header),
+.card:has(> .card-body),
+.card:has(> .card-footer),
+.card:has(> .card-canvas),
+.card:has(> .card-divider) {
+  padding: 0;
+}
+
+
+/* ----------------------------------------------------------------
+   Surface variants — pick by "what role does this container play"
+   ---------------------------------------------------------------- */
+
+/* Flat — no shadow. Use inside another card, or for table rows. */
+.card.flat        { box-shadow: none; }
+
+/* Subtle / inset — neutral fill, no shadow. Use for nested groups. */
+.card.subtle      { background: var(--color-background-subtle); box-shadow: none; }
+
+/* Sunken — like an input well; nested receipt/totals. */
+.card.sunken      { background: var(--color-background-sunken); box-shadow: none; border-color: var(--color-border-subtle); }
+
+/* Raised — md shadow. Floating panels, popovers, dropdowns. */
+.card.raised      { box-shadow: var(--shadow-md); }
+
+/* Floating — lg shadow. Modals, command palettes. */
+.card.floating    { box-shadow: var(--shadow-lg); border: 0; }
+
+/* Hero — brand gradient. For dashboard summary tiles only. */
+.card.hero {
+  background: var(--grad-hero);
+  color: var(--color-foreground-on-solid);
+  border: 0;
+  position: relative;
+  overflow: hidden;
+}
+.card.hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--grad-radial-glow);
+  pointer-events: none;
+}
+.card.hero > * { position: relative; z-index: 1; }
+
+/* Inverse — for cards on dark surfaces */
+.card.inverse {
+  background: var(--color-background-inverse);
+  color: var(--color-foreground-inverse-default);
+  border-color: var(--color-border-inverse);
+  box-shadow: none;
+}
+
+
+/* ----------------------------------------------------------------
+   Semantic accents — banner-style cards with semantic shadow
+   ---------------------------------------------------------------- */
+.card.accent-success {
+  background: var(--color-feedback-success-background);
+  border-color: var(--color-feedback-success-border);
+  box-shadow: var(--shadow-success-sm);
+  color: var(--color-foreground-default);
+}
+.card.accent-warning {
+  background: var(--color-feedback-warning-background);
+  border-color: var(--color-feedback-warning-border);
+  box-shadow: var(--shadow-warning-sm);
+  color: var(--color-foreground-default);
+}
+.card.accent-danger {
+  background: var(--color-feedback-danger-background);
+  border-color: var(--color-feedback-danger-border);
+  box-shadow: var(--shadow-danger-sm);
+  color: var(--color-foreground-default);
+}
+.card.accent-info {
+  background: var(--color-feedback-info-background);
+  border-color: var(--color-feedback-info-border);
+  box-shadow: var(--shadow-info-sm);
+  color: var(--color-foreground-default);
+}
+
+
+/* ----------------------------------------------------------------
+   Density modifiers — affect both .card and slot padding
+   ---------------------------------------------------------------- */
+.card.compact   > .card-header,
+.card.compact   > .card-body,
+.card.compact   > .card-footer { padding: var(--space-3) var(--space-4); }
+.card.compact:not(:has(> .card-header)):not(:has(> .card-body)):not(:has(> .card-footer)):not(:has(> .card-canvas)):not(:has(> .card-divider)) {
+  padding: var(--space-3) var(--space-4);
+}
+
+.card.spacious  > .card-header,
+.card.spacious  > .card-body,
+.card.spacious  > .card-footer { padding: var(--space-7) var(--space-8); }
+.card.spacious:not(:has(> .card-header)):not(:has(> .card-body)):not(:has(> .card-footer)):not(:has(> .card-canvas)):not(:has(> .card-divider)) {
+  padding: var(--space-7) var(--space-8);
+}
+
+
+/* ----------------------------------------------------------------
+   Slots — header / body / footer / canvas / divider
+   ---------------------------------------------------------------- */
+.card-header {
+  padding: var(--space-5) var(--space-6);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+.card-header h3,
+.card-header h4 {
+  margin: 0;
+  font-size: var(--fs-md);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--ls-title);
+  color: var(--color-foreground-default);
+}
+.card-header p {
+  margin: var(--space-1) 0 0;
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+  line-height: var(--lh-relaxed);
+}
+.card-header .actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.card-body {
+  padding: var(--space-5) var(--space-6);
+}
+
+.card-footer {
+  padding: var(--space-4) var(--space-6);
+  border-top: 1px solid var(--color-border-subtle);
+  background: var(--color-background-subtle);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+/* Canvas slot — full-bleed image / chart area */
+.card-canvas {
+  background: var(--color-background-canvas);
+  border-bottom: 1px solid var(--color-border-subtle);
+  overflow: hidden;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+/* Divider — thin separator inside body sections */
+.card-divider {
+  height: 1px;
+  background: var(--color-border-subtle);
+  margin: 0;
+  border: 0;
+}
+
+
+/* ----------------------------------------------------------------
+   Card layouts (helpers — common compositions)
+   ---------------------------------------------------------------- */
+
+/* KPI / stat card */
+.card-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.card-stat .stat-label {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--ls-caps);
+}
+.card-stat .stat-value {
+  font-family: var(--font-sans);
+  font-weight: var(--w-bold);
+  font-size: var(--fs-3xl);
+  letter-spacing: var(--ls-display);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-foreground-default);
+  line-height: 1.1;
+}
+.card-stat .stat-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--fs-xs);
+  font-weight: var(--w-semibold);
+  font-variant-numeric: tabular-nums;
+}
+.card-stat .stat-delta.up   { color: var(--color-feedback-success-foreground); }
+.card-stat .stat-delta.down { color: var(--color-feedback-danger-foreground); }
+.card-stat .stat-delta.flat { color: var(--color-foreground-muted); }
+.card-stat .stat-delta i, .card-stat .stat-delta svg,
+.card-stat .stat-delta svg { width: 12px; height: 12px; stroke-width: var(--icon-stroke); }
+
+/* Hero stat — for .card.hero */
+.card.hero .card-stat .stat-label { color: color-mix(in srgb, var(--color-pure-white) 70%, transparent); }
+.card.hero .card-stat .stat-value { color: var(--color-foreground-on-solid); font-size: var(--fs-5xl); }
+
+
+/* ----------------------------------------------------------------
+   Interactive — link / button cards
+   Apply .card.interactive to make the whole card clickable.
+   The card itself should be wrapped in <a> or <button>.
+   ---------------------------------------------------------------- */
+.card.interactive {
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+.card.interactive:hover {
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+.card.interactive:active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-xs);
+}
+.card.interactive:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+  border-color: var(--color-border-focus);
+}
+
+/* On inverse interactive */
+.card.inverse.interactive:hover {
+  background: var(--color-background-inverse-hover);
+  border-color: var(--color-border-inverse-strong);
+}

package/dist/css/components/combobox.css

@@ -0,0 +1,303 @@
+/* ============================================================
+   COMBOBOX — searchable single-select dropdown
+   Trigger + popover listbox with filterable options.
+   All values from tokens.
+   ============================================================ */
+
+.combobox {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-family: var(--font-sans);
+}
+
+/* Trigger — looks like an input with a chevron */
+.combobox-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  height: 40px;
+  padding: 0 var(--space-3) 0 var(--space-4);
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-medium);
+  color: var(--color-foreground-default);
+  cursor: pointer;
+  text-align: left;
+  transition: var(--transition-fast);
+}
+.combobox-trigger:hover {
+  background: var(--color-background-hover);
+  border-color: var(--color-border-strong);
+}
+.combobox-trigger:focus-visible,
+.combobox.is-open .combobox-trigger {
+  outline: none;
+  border-color: var(--color-foreground-accent);
+  box-shadow: var(--shadow-focus);
+}
+
+.combobox-value {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.combobox-placeholder {
+  color: var(--color-foreground-muted);
+  font-weight: var(--w-regular);
+}
+.combobox-chevron {
+  width: 16px; height: 16px;
+  stroke-width: var(--icon-stroke);
+  color: var(--color-foreground-muted);
+  flex-shrink: 0;
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.combobox.is-open .combobox-chevron { transform: rotate(180deg); }
+
+/* Leading icon variant */
+.combobox-trigger-icon {
+  width: 16px; height: 16px;
+  stroke-width: var(--icon-stroke);
+  color: var(--color-foreground-secondary);
+  flex-shrink: 0;
+}
+
+/* Avatar inside trigger (counterparty selector pattern) */
+.combobox-avatar {
+  width: 24px; height: 24px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-100);
+  color: var(--color-brand-secondary-700);
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-semibold);
+  flex-shrink: 0;
+  margin-left: calc(var(--space-1) * -1);
+}
+
+/* Listbox popover */
+.combobox-popover {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  left: 0;
+  right: 0;
+  z-index: 7000;
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xl);
+  display: none;
+  flex-direction: column;
+  max-height: 320px;
+}
+.combobox.is-open .combobox-popover { display: flex; }
+
+/* Search header */
+.combobox-search {
+  position: relative;
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
+.combobox-search input {
+  width: 100%;
+  box-sizing: border-box;
+  height: 32px;
+  padding: 0 var(--space-3) 0 var(--space-7);
+  background: var(--color-background-canvas);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-default);
+}
+.combobox-search input::placeholder { color: var(--color-foreground-muted); }
+.combobox-search input:focus {
+  outline: none;
+  border-color: var(--color-foreground-accent);
+  box-shadow: var(--shadow-focus);
+}
+.combobox-search-icon {
+  position: absolute;
+  left: calc(var(--space-3) + var(--space-2));
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px; height: 14px;
+  stroke-width: var(--icon-stroke);
+  color: var(--color-foreground-muted);
+  pointer-events: none;
+}
+
+/* Listbox region */
+.combobox-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-1);
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* Group headers */
+.combobox-group-label {
+  padding: var(--space-2) var(--space-3) var(--space-1);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+  color: var(--color-foreground-muted);
+}
+
+.combobox-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-default);
+  transition: background var(--duration-fast) var(--ease-standard);
+}
+.combobox-option:hover,
+.combobox-option.is-active {
+  background: var(--color-background-hover);
+}
+.combobox-option.is-selected {
+  background: var(--color-brand-secondary-50);
+  color: var(--color-foreground-accent);
+  font-weight: var(--w-semibold);
+}
+.combobox-option.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.combobox-option-content {
+  flex: 1;
+  min-width: 0;
+}
+.combobox-option-label {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.combobox-option-meta {
+  display: block;
+  font-size: var(--fs-xs);
+  color: var(--color-foreground-secondary);
+  font-weight: var(--w-regular);
+  margin-top: 1px;
+}
+.combobox-option.is-selected .combobox-option-meta {
+  color: var(--color-brand-secondary-600);
+}
+
+.combobox-option-check {
+  width: 16px; height: 16px;
+  stroke-width: 2.4;
+  color: var(--color-foreground-accent);
+  flex-shrink: 0;
+  opacity: 0;
+}
+.combobox-option.is-selected .combobox-option-check { opacity: 1; }
+
+.combobox-option-trailing {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  color: var(--color-foreground-muted);
+  flex-shrink: 0;
+}
+
+/* Empty state */
+.combobox-empty {
+  padding: var(--space-8) var(--space-4);
+  text-align: center;
+  color: var(--color-foreground-muted);
+  font-size: var(--fs-sm);
+}
+.combobox-empty strong {
+  display: block;
+  color: var(--color-foreground-default);
+  font-weight: var(--w-semibold);
+  margin-bottom: var(--space-1);
+}
+
+/* Footer (e.g. "Create new …") */
+.combobox-footer {
+  padding: var(--space-2);
+  border-top: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
+.combobox-footer-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  margin: var(--space-2);
+  margin-top: 0;
+  width: calc(100% - var(--space-4));
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-default);
+  cursor: pointer;
+  text-align: center;
+  box-shadow: var(--shadow-xs);
+  transition: var(--transition-fast);
+}
+.combobox-footer-action:hover {
+  background: var(--color-background-hover);
+  border-color: var(--color-border-strong);
+}
+.combobox-footer-action:active {
+  background: var(--color-background-press);
+}
+.combobox-footer-action:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+.combobox-footer-action svg,
+.combobox-footer-action i {
+  width: 14px;
+  height: 14px;
+  stroke-width: var(--icon-stroke);
+  color: var(--color-foreground-secondary);
+}
+.combobox-footer-action i, .combobox-footer-action svg {
+  width: 16px; height: 16px;
+  stroke-width: var(--icon-stroke);
+}
+
+/* States */
+.combobox-trigger[aria-disabled="true"],
+.combobox.is-disabled .combobox-trigger {
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-muted);
+  cursor: not-allowed;
+  border-color: var(--color-border-subtle);
+}
+.combobox.is-invalid .combobox-trigger {
+  border-color: var(--color-feedback-danger-border);
+}
+.combobox.is-invalid .combobox-trigger:focus-visible {
+  box-shadow: 0 0 0 3px var(--color-feedback-danger-background);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .combobox-chevron { transition: none; }
+  .combobox-option { transition: none; }
+}

package/dist/css/components/empty-states.css

@@ -0,0 +1,61 @@
+/* ============================================================
+   EMPTY STATES — production component CSS
+   Used by empty-states.html and any product surface that needs
+   a zero-data placeholder. All values resolve to design tokens.
+   ============================================================ */
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 14px;
+  padding: 56px 24px;
+  border-radius: var(--radius-md);
+  background: transparent;
+  border: 0;
+}
+.empty.empty-default { padding: 56px 24px; gap: 14px; }
+.empty.empty-compact { padding: 28px 20px; gap: 10px; }
+
+.empty-illo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.empty-illo svg { display: block; }
+
+.empty h4 {
+  font-family: var(--font-sans);
+  font-size: var(--fs-lg);
+  font-weight: var(--w-bold);
+  letter-spacing: -.01em;
+  color: var(--color-foreground-default);
+  margin: 0;
+  max-width: 360px;
+}
+.empty.empty-compact h4 { font-size: var(--fs-md); }
+
+.empty p {
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+  line-height: var(--lh-relaxed);
+  margin: 0;
+  max-width: 360px;
+  text-wrap: pretty;
+}
+
+.empty-actions {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: var(--space-1);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* ---- tone: warning ---- */
+.empty.empty-warning {
+  background: var(--color-feedback-warning-background);
+  border: 1px solid var(--color-feedback-warning-border);
+}