@adamarant/designsystem 0.11.2

package/src/components/drop-zone.css

@@ -0,0 +1,166 @@
+/* ==========================================================================
+   Component: Drop Zone
+   Dashed-border upload area with icon, label, hint, and progress states.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="button" if clickable, tabindex="0" for keyboard access
+   - Label: aria-label="Upload files" or visible label via aria-labelledby
+   - Drag state: announce via aria-live="polite" region
+   - Progress: use aria-busy="true" during upload, aria-valuenow for progress
+   ==========================================================================
+
+   Usage:
+     <div class="ds-drop-zone">
+       <div class="ds-drop-zone__icon">☁</div>
+       <p class="ds-drop-zone__label">Drop files here or click to upload</p>
+       <p class="ds-drop-zone__hint">JPG, PNG, WebP · Max 10 MB</p>
+     </div>
+
+   States:
+     ds-drop-zone--active      Drag-over highlight
+     ds-drop-zone--uploading   Progress state (reduced opacity on content)
+
+   Sizes:
+     ds-drop-zone--lg          Taller area (empty-state hero usage)
+
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Base
+   --------------------------------------------------------------------------- */
+
+.ds-drop-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-8) var(--ds-space-6);
+  border: none;
+  border-radius: var(--ds-radius-xl);
+  text-align: center;
+  cursor: pointer;
+  background-color: transparent;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+
+  /* The dashed border is rendered as an inline SVG background-image because
+     CSS dashed borders don't anti-alias well around border-radius. SVG in
+     data: URLs can't reference CSS custom properties, so the stroke colors
+     are inlined per theme below — they MUST stay in sync with
+     --ds-color-border / --ds-color-border-hover / --ds-color-border-active. */
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    scroll-margin-block: var(--ds-space-16, 4rem);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Hover background only — stroke handled per theme below
+     --------------------------------------------------------------------------- */
+
+  &:hover {
+    background-color: var(--ds-color-surface-hover);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Icon container
+     --------------------------------------------------------------------------- */
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: var(--ds-radius-xl);
+    background-color: var(--ds-color-surface-muted);
+    color: var(--ds-color-text-secondary);
+    transition: color var(--ds-duration-fast) var(--ds-ease-default);
+  }
+
+  &:hover &__icon {
+    color: var(--ds-color-text);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Label + hint
+     --------------------------------------------------------------------------- */
+
+  &__label {
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text);
+  }
+
+  &__hint {
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+    margin-block-start: calc(-1 * var(--ds-space-1));
+  }
+
+  /* ---------------------------------------------------------------------------
+     States
+     --------------------------------------------------------------------------- */
+
+  /* Active — drag-over: bg only, stroke handled per theme below */
+  &--active {
+    background-color: var(--ds-color-surface-active);
+  }
+
+  /* Uploading */
+  &--uploading {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Sizes
+     --------------------------------------------------------------------------- */
+
+  &--lg {
+    padding: var(--ds-space-16) var(--ds-space-4);
+    min-height: 16rem;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Error message
+     --------------------------------------------------------------------------- */
+
+  &__error {
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-error);
+  }
+}
+
+/* ===========================================================================
+   Theme-scoped dashed border strokes — hex values mirror the border tokens
+   exactly so the drop zone reads as a tinted variant of the standard border.
+   =========================================================================== */
+
+/* Light theme — mirrors --ds-color-border / -hover / -active in colors.css */
+[data-theme="light"] .ds-drop-zone {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='99%25' rx='16' ry='16' fill='none' stroke='%23e4e4e7' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E");
+}
+
+[data-theme="light"] .ds-drop-zone:hover {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='99%25' rx='16' ry='16' fill='none' stroke='%23d4d4d8' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E");
+}
+
+[data-theme="light"] .ds-drop-zone--active {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='99%25' rx='16' ry='16' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E");
+}
+
+/* Dark theme — mirrors --ds-color-border / -hover / -active in colors.css */
+[data-theme="dark"] .ds-drop-zone {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='99%25' rx='16' ry='16' fill='none' stroke='%2327272a' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E");
+}
+
+[data-theme="dark"] .ds-drop-zone:hover {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='99%25' rx='16' ry='16' fill='none' stroke='%233f3f46' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E");
+}
+
+[data-theme="dark"] .ds-drop-zone--active {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='99%25' rx='16' ry='16' fill='none' stroke='%2352525b' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E");
+}

package/src/components/dropdown.css

@@ -0,0 +1,169 @@
+/* ==========================================================================
+   Component: Dropdown
+   Floating menu with surface bg, scale transition, keyboard-friendly items.
+
+   ARIA requirements (consumer responsibility):
+   - Trigger: aria-haspopup="true", aria-expanded="true|false"
+   - Menu: role="menu"
+   - Items: role="menuitem"
+   - Keyboard: ArrowUp/Down to navigate, Enter to select, Escape to close
+   - On open: move focus to first menu item
+   - On close: return focus to trigger
+   ========================================================================== */
+
+.ds-dropdown {
+  position: relative;
+
+  /* Open state — modifier on parent */
+  &--open .ds-dropdown__menu {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+  }
+
+  /* --- Trigger --- */
+
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  /* --- Menu panel --- */
+
+  &__menu {
+    position: absolute;
+    inset-block-start: calc(100% + var(--ds-space-1));
+    inset-inline-start: 0;
+    z-index: var(--ds-z-dropdown);
+    min-width: 12rem;
+    display: flex;
+    flex-direction: column;
+    padding-block: var(--ds-space-1-5);
+    background-color: var(--ds-color-surface-muted);
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-xl);
+    box-shadow: var(--ds-shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.96);
+    transform-origin: top left;
+    transition:
+      opacity var(--ds-duration-normal) var(--ds-ease-default),
+      visibility var(--ds-duration-normal) var(--ds-ease-default),
+      transform var(--ds-duration-normal) var(--ds-ease-out-expo);
+
+    /* Open state — modifier on menu */
+    &--open {
+      opacity: 1;
+      visibility: visible;
+      transform: scale(1);
+    }
+
+    /* --- Alignment variants --- */
+
+    &--right {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+      transform-origin: top right;
+    }
+
+    &--up {
+      inset-block-start: auto;
+      inset-block-end: calc(100% + var(--ds-space-1));
+      transform-origin: bottom left;
+
+      &.ds-dropdown__menu--right {
+        transform-origin: bottom right;
+      }
+    }
+
+    /* --- Width variants --- */
+    &--sm { min-width: 8rem; }
+    &--lg { min-width: 20rem; }
+    &--full { width: 100%; }
+    &--auto { min-width: auto; }
+  }
+
+  /* --- Menu item --- */
+
+  &__item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--ds-space-2);
+    padding: var(--ds-space-2) var(--ds-space-3);
+    margin-inline: var(--ds-space-1);
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-secondary);
+    cursor: pointer;
+    border-radius: var(--ds-radius-md);
+    transition:
+      color var(--ds-duration-fast) var(--ds-ease-default),
+      background-color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: var(--ds-color-surface-muted-hover);
+      color: var(--ds-color-text);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+
+    &--active,
+    &--active:hover {
+      background-color: var(--ds-color-surface-elevated);
+      color: var(--ds-color-text);
+    }
+
+    &--danger:hover {
+      color: var(--ds-color-error);
+    }
+
+    &--disabled {
+      opacity: var(--ds-opacity-disabled);
+      pointer-events: none;
+    }
+  }
+
+  /* --- Item slots --- */
+
+  &__item-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  &__item-label {
+    flex: 1;
+  }
+
+  &__item-shortcut {
+    margin-inline-start: auto;
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+  }
+
+  /* --- Divider --- */
+
+  &__divider {
+    margin-block: var(--ds-space-1);
+    border: 0;
+    border-block-start: 1px solid var(--ds-color-border);
+  }
+
+  /* --- Section header --- */
+
+  &__header {
+    padding: var(--ds-space-2) var(--ds-space-3);
+    margin-inline: var(--ds-space-1);
+    font-size: var(--ds-text-xs);
+    font-weight: var(--ds-weight-medium);
+    text-transform: uppercase;
+    letter-spacing: var(--ds-tracking-wide);
+    color: var(--ds-color-text-tertiary);
+  }
+}

package/src/components/empty-state.css

@@ -0,0 +1,75 @@
+/* ==========================================================================
+   Component: Empty State
+   Centered message for when there's no data to display.
+   ========================================================================== */
+
+.ds-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--ds-space-12);
+  gap: var(--ds-space-4);
+
+  &__icon {
+    width: 3rem;
+    height: 3rem;
+    color: var(--ds-color-text-tertiary);
+    margin-block-end: var(--ds-space-2);
+  }
+
+  &__title {
+    font-family: var(--ds-font-display);
+    font-weight: var(--ds-font-display-weight);
+    font-size: var(--ds-text-lg);
+    color: var(--ds-color-text);
+    letter-spacing: var(--ds-tracking-tight);
+    line-height: var(--ds-leading-tight);
+  }
+
+  &__description {
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-secondary);
+    max-width: 20rem;
+    line-height: var(--ds-leading-relaxed);
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ds-space-3);
+    margin-block-start: var(--ds-space-2);
+  }
+
+  /* --- Compact variant --- */
+
+  &--compact {
+    padding: var(--ds-space-8);
+
+    & .ds-empty-state__icon {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    & .ds-empty-state__title {
+      font-size: var(--ds-text-base);
+    }
+  }
+
+  /* --- Card variant --- */
+
+  &--card {
+    background-color: var(--ds-color-surface);
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-xl);
+  }
+
+  /* --- Left-aligned variant --- */
+  &--left {
+    align-items: flex-start;
+    text-align: start;
+  }
+}

package/src/components/field.css

@@ -0,0 +1,112 @@
+/* ==========================================================================
+   Component: Field
+   Unified wrapper for form fields — label + input + hint + error.
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1-5);
+}
+
+/* ---------------------------------------------------------------------------
+   Label
+   --------------------------------------------------------------------------- */
+
+.ds-field__label {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+  line-height: var(--ds-leading-normal);
+}
+
+/* Required asterisk */
+.ds-field--required .ds-field__label::after {
+  content: " *";
+  color: var(--ds-color-error);
+}
+
+/* ---------------------------------------------------------------------------
+   Hint (help text below input)
+   --------------------------------------------------------------------------- */
+
+.ds-field__hint {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  line-height: var(--ds-leading-normal);
+}
+
+/* ---------------------------------------------------------------------------
+   Error message
+   --------------------------------------------------------------------------- */
+
+.ds-field__error {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-error);
+  line-height: var(--ds-leading-normal);
+}
+
+/* Animated error appearance */
+.ds-field__error[data-animate] {
+  animation: ds-field-error-in var(--ds-duration-fast) var(--ds-ease-out);
+}
+
+@keyframes ds-field-error-in {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Success message */
+.ds-field__success {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-success);
+  line-height: var(--ds-leading-normal);
+}
+
+/* Character counter */
+.ds-field__counter {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  line-height: var(--ds-leading-normal);
+  text-align: end;
+}
+
+.ds-field__counter--limit {
+  color: var(--ds-color-error);
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Horizontal layout (label left, input right)
+   --------------------------------------------------------------------------- */
+
+.ds-field--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--ds-space-4);
+}
+
+.ds-field--horizontal .ds-field__label {
+  flex-shrink: 0;
+  min-width: 8rem;
+  padding-block-start: var(--ds-space-2);
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Disabled
+   --------------------------------------------------------------------------- */
+
+.ds-field--disabled {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
+}