@adamarant/designsystem 0.11.2

package/src/components/input.css

@@ -0,0 +1,311 @@
+/* ==========================================================================
+   Component: Form Inputs
+   Surface bg, clean borders, focus ring.
+
+   ARIA requirements (consumer responsibility):
+   - Input: associate with <label for="id"> or aria-label
+   - Error state: add aria-invalid="true" + aria-describedby pointing to error msg
+   - Required: add aria-required="true" or HTML required attribute
+   - Input group: icon is decorative (pointer-events: none), no ARIA needed
+   - Checkbox/radio: use native <input type="checkbox|radio"> inside <label>
+   ========================================================================== */
+
+.ds-label {
+  display: block;
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-secondary);
+  margin-block-end: var(--ds-space-1-5);
+}
+
+.ds-input,
+.ds-textarea {
+  width: 100%;
+}
+
+.ds-input,
+.ds-textarea,
+.ds-select {
+  padding: 0 var(--ds-space-4);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-base); /* 16px — prevents iOS auto-zoom on focus */
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  outline: none;
+  transition:
+    border-color var(--ds-duration-fast) var(--ds-ease-default),
+    box-shadow var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-input,
+.ds-select {
+  height: var(--ds-size-3);
+}
+
+.ds-input {
+  /* Hover */
+  &:hover {
+    border-color: var(--ds-color-border-hover);
+  }
+
+  /* Focus — box-shadow ring instead of outline.
+     Inputs always trigger :focus-visible (browser heuristic for text entry),
+     so outline creates unavoidable double-border with offset.
+     box-shadow follows border-radius perfectly and has no gap. */
+  &:focus-visible {
+    border-color: var(--ds-ring-color);
+    box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    scroll-margin-block: var(--ds-space-16, 4rem);
+  }
+
+  &::placeholder {
+    color: var(--ds-color-text-tertiary);
+  }
+
+  /* States — error: border + ring match the semantic color */
+  &--error {
+    border-color: var(--ds-color-error);
+
+    &:hover {
+      border-color: var(--ds-color-error);
+    }
+
+    &:focus-visible {
+      border-color: var(--ds-color-error);
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-error);
+    }
+  }
+
+  /* States — success: border + ring match the semantic color */
+  &--success {
+    border-color: var(--ds-color-success);
+
+    &:hover {
+      border-color: var(--ds-color-success);
+    }
+
+    &:focus-visible {
+      border-color: var(--ds-color-success);
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-success);
+    }
+  }
+
+  /* Sizes */
+  &--xs {
+    height: var(--ds-size-1);
+    padding: 0 var(--ds-space-1-5);
+    font-size: var(--ds-text-xs);
+    border-radius: var(--ds-radius-sm);
+  }
+
+  &--sm {
+    height: var(--ds-size-2);
+    padding: 0 var(--ds-space-2);
+    font-size: var(--ds-text-sm);
+    border-radius: var(--ds-radius-md);
+  }
+
+  &--lg {
+    height: var(--ds-size-4);
+    padding: 0 var(--ds-space-4);
+    font-size: var(--ds-text-base);
+  }
+
+  /* --- Layout Modifiers ---
+     Override default width/display/chrome assumptions. */
+
+  /* Flush — naked input inside a styled container.
+     No border, no background, no padding, no focus ring.
+     The container handles visual chrome. */
+  &--flush {
+    background: transparent;
+    border: none;
+    padding: 0;
+    border-radius: 0;
+    box-shadow: none;
+    height: auto;
+
+    &:hover {
+      border-color: transparent;
+    }
+
+    &:focus-visible {
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* Inline — auto-width for use in flex rows */
+  &--inline {
+    width: auto;
+    display: inline-flex;
+  }
+}
+
+.ds-textarea {
+  &:hover {
+    border-color: var(--ds-color-border-hover);
+  }
+
+  &:focus-visible {
+    border-color: var(--ds-ring-color);
+    box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    scroll-margin-block: var(--ds-space-16, 4rem);
+  }
+
+  &::placeholder {
+    color: var(--ds-color-text-tertiary);
+  }
+
+  /* States — error */
+  &--error {
+    border-color: var(--ds-color-error);
+
+    &:hover {
+      border-color: var(--ds-color-error);
+    }
+
+    &:focus-visible {
+      border-color: var(--ds-color-error);
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-error);
+    }
+  }
+
+  /* Textarea */
+  min-height: 6rem;
+  padding: var(--ds-space-2-5) var(--ds-space-4);
+  height: auto;
+  resize: vertical;
+}
+
+.ds-select {
+  &:hover {
+    border-color: var(--ds-color-border-hover);
+  }
+
+  &:focus-visible {
+    border-color: var(--ds-ring-color);
+    box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    scroll-margin-block: var(--ds-space-16, 4rem);
+  }
+
+  /* Select */
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--ds-space-3) center;
+  padding-inline-end: var(--ds-space-8);
+
+  /* Sizes */
+  &--xs {
+    height: var(--ds-size-1);
+    padding: 0 var(--ds-space-1-5);
+    font-size: var(--ds-text-xs);
+    border-radius: var(--ds-radius-sm);
+  }
+
+  &--sm {
+    height: var(--ds-size-2);
+    padding: 0 var(--ds-space-2);
+    font-size: var(--ds-text-sm);
+    border-radius: var(--ds-radius-md);
+  }
+
+  &--lg {
+    height: var(--ds-size-4);
+    padding: 0 var(--ds-space-4);
+    font-size: var(--ds-text-base);
+    padding-inline-end: var(--ds-space-8);
+  }
+
+  /* Full width (opt-in for select, already default for input/textarea) */
+  &--full {
+    width: 100%;
+  }
+}
+
+/* --- Input Group ---
+   Wrapper for input with leading icon.
+   Icon sits inside the input via absolute positioning. */
+.ds-input-group {
+  position: relative;
+
+  &__icon {
+    position: absolute;
+    inset-inline-start: var(--ds-space-3);
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ds-color-text-tertiary);
+    pointer-events: none;
+  }
+
+  & .ds-input {
+    padding-inline-start: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+  }
+
+  /* --- Input Group: icon-right ---
+     Move icon to the right side, flip input padding. */
+  &--icon-right {
+    & .ds-input-group__icon {
+      inset-inline-start: auto;
+      inset-inline-end: var(--ds-space-3);
+    }
+
+    & .ds-input {
+      padding-inline-start: var(--ds-space-4);
+      padding-inline-end: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+    }
+  }
+}
+
+/* Help text */
+.ds-help {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-block-start: var(--ds-space-1-5);
+
+  &--error { color: var(--ds-color-error); }
+}
+
+/* Form Group (legacy — prefer ds-form) */
+.ds-form-group { margin-block-end: var(--ds-space-4); }
+
+/* --- Form Stack ---
+   Vertical form layout: comfortable spacing between fields (24px),
+   extra breathing room before the action area (32px).
+   Use ds-form__actions on the button/submit wrapper. */
+.ds-form {
+  & > * + * {
+    margin-block-start: var(--ds-space-6);
+  }
+
+  &__actions {
+    margin-block-start: var(--ds-space-8);
+  }
+}
+
+/* Checkbox / Radio */
+.ds-checkbox,
+.ds-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  cursor: pointer;
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+
+  & input {
+    accent-color: var(--ds-color-interactive);
+    width: 1rem;
+    height: 1rem;
+    min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+    min-height: 1.5rem;
+  }
+}

package/src/components/kbd.css

@@ -0,0 +1,54 @@
+/* ==========================================================================
+   Kbd
+   ==========================================================================
+   Keyboard shortcut display component with a raised 3D key appearance.
+   Use individually or group multiple keys with ds-kbd-group for combos
+   like "Cmd + K".
+
+   Usage:
+     <kbd class="ds-kbd">Esc</kbd>
+
+     <span class="ds-kbd-group">
+       <kbd class="ds-kbd">Cmd</kbd>
+       <span class="ds-kbd-group__separator">+</span>
+       <kbd class="ds-kbd">K</kbd>
+     </span>
+
+   Modifiers:
+     .ds-kbd--lg  — Larger key display
+   ========================================================================== */
+
+.ds-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-1-5);
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-xs);
+  background-color: var(--ds-color-surface-muted);
+  border: 1px solid var(--ds-color-border);
+  border-block-end-width: 2px;
+  border-radius: var(--ds-radius-sm);
+  color: var(--ds-color-text-secondary);
+  line-height: 1;
+  vertical-align: baseline;
+
+  /* Large variant */
+  &--lg {
+    font-size: var(--ds-text-sm);
+    padding: var(--ds-space-1) var(--ds-space-2);
+  }
+}
+
+/* Key group (for combos like Cmd + K) */
+.ds-kbd-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+
+  /* Separator between keys */
+  &__separator {
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+  }
+}

package/src/components/media-library.css

@@ -0,0 +1,230 @@
+/* ==========================================================================
+   Component: Media Library
+   Composable classes for media management UI: grid items, selection toolbar,
+   detail panel, and folder sidebar. Used by CMS MediaLibrary component.
+
+   Classes:
+     ds-media-item              Grid thumbnail card (border, transition)
+     ds-media-item--selected    Selected state (interactive ring)
+     ds-media-item__thumb       Thumbnail area (surface-muted background)
+     ds-media-item__check       Selection check indicator (absolute, top-right)
+     ds-media-item__info        File name + size footer
+     ds-media-toolbar           Sticky selection toolbar bar
+     ds-media-toolbar__count    Selected items counter text
+     ds-media-toolbar__spacer   Flex spacer between left/right actions
+     ds-media-detail-slot       Reserved sidebar slot (fixed width, sticky) — render always to keep grid stable
+     ds-media-detail            Detail/edit sidebar card (surface card with padding) — render inside slot when selected
+     ds-media-detail__preview   Preview container (surface-muted, aspect-video)
+     ds-media-detail__action    Sidebar action button (Copy / Open / Delete)
+     ds-media-detail__action--danger  Destructive variant (Delete)
+     ds-media-folder            Folder sidebar container (responsive, hidden < md)
+     ds-media-folder__item      Folder list button
+     ds-media-folder__item--active  Active folder state
+     ds-media-folder__actions   Rename/delete buttons (visible on interaction)
+
+   ARIA:
+     - Grid items: <button type="button"> with aria-selected for state
+     - Toolbar: role="toolbar" with aria-label
+     - Bulk delete: aria-live="polite" for confirmation state change
+     - Folder sidebar: <nav> with aria-label
+   ========================================================================== */
+
+
+/* ─── Media Item ─────────────────────────────────────────────────────────── */
+
+.ds-media-item {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--ds-radius-lg);
+  border: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-surface);
+  transition:
+    border-color var(--ds-duration-fast) var(--ds-ease-default),
+    box-shadow var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-media-item:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+.ds-media-item--selected {
+  border-color: var(--ds-color-interactive);
+  box-shadow: 0 0 0 1px var(--ds-color-interactive);
+}
+
+.ds-media-item__thumb {
+  background-color: var(--ds-color-surface-muted);
+}
+
+.ds-media-item__check {
+  position: absolute;
+  inset-block-start: var(--ds-space-1-5);
+  inset-inline-end: var(--ds-space-1-5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-interactive);
+  color: var(--ds-color-static-white);
+  pointer-events: none;
+}
+
+.ds-media-item__info {
+  padding: var(--ds-space-2);
+}
+
+
+/* ─── Media Toolbar ──────────────────────────────────────────────────────── */
+
+.ds-media-toolbar {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--ds-z-sticky);
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-3) var(--ds-space-4);
+  margin-block-end: var(--ds-space-3);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-md);
+  box-shadow: var(--ds-shadow-sm);
+}
+
+.ds-media-toolbar__count {
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+}
+
+.ds-media-toolbar__spacer {
+  flex: 1;
+}
+
+
+/* ─── Media Detail ───────────────────────────────────────────────────────── */
+
+.ds-media-detail-slot {
+  width: 17.5rem;
+  flex-shrink: 0;
+  position: sticky;
+  inset-block-start: var(--ds-space-4);
+  align-self: flex-start;
+}
+
+.ds-media-detail {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-4);
+  padding: var(--ds-space-4);
+  border-radius: var(--ds-radius-xl);
+  border: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-surface);
+}
+
+.ds-media-detail__preview {
+  background-color: var(--ds-color-surface-muted);
+}
+
+.ds-media-detail__action {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  width: 100%;
+  padding: var(--ds-space-2) var(--ds-space-3);
+  border-radius: var(--ds-radius-md);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: start;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-media-detail__action:hover {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text);
+}
+
+.ds-media-detail__action--danger:hover,
+.ds-media-detail__action--danger:focus-visible {
+  color: var(--ds-color-error);
+}
+
+
+/* ─── Media Folder Sidebar ───────────────────────────────────────────────── */
+
+.ds-media-folder {
+  display: none;
+  width: 12rem;
+  flex-shrink: 0;
+  flex-direction: column;
+  border-radius: var(--ds-radius-xl);
+  border: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-surface);
+  padding: var(--ds-space-3);
+}
+
+@media (min-width: 768px) {
+  .ds-media-folder {
+    display: flex;
+  }
+}
+
+
+/* ─── Folder item — base + transient interaction ─────────────────────────── */
+
+.ds-media-folder__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  width: 100%;
+  padding: var(--ds-space-1-5) var(--ds-space-2);
+  border-radius: var(--ds-radius-md);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-secondary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-media-folder__item:hover {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text);
+}
+
+.ds-media-folder__item:hover .ds-media-folder__actions {
+  display: flex;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Folder item — persistent selection state
+   Separated to avoid semantic token hook window overlap.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ds-media-folder__item--active {
+  background-color: var(--ds-color-surface-active);
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-medium);
+}
+
+
+/* ─── Folder actions (visible on parent interaction) ─────────────────────── */
+
+.ds-media-folder__actions {
+  display: none;
+  align-items: center;
+  gap: var(--ds-space-0-5);
+  margin-inline-start: auto;
+}