@adamarant/designsystem 0.11.2

package/src/components/pin-input.css

@@ -0,0 +1,136 @@
+/* ==========================================================================
+   Component: Pin Input
+   One-character-per-field input for OTP codes, PINs, and verification.
+
+   ARIA requirements (consumer responsibility):
+   - Each input: inputmode="numeric", pattern="[0-9]", maxlength="1"
+   - Group: role="group", aria-label="Verification code"
+   - Auto-focus next field on input, previous on backspace
+   - Paste: distribute characters across fields
+
+   Usage:
+     <div class="ds-pin-input" role="group" aria-label="Verification code">
+       <input class="ds-pin-input__field" inputmode="numeric" maxlength="1" />
+       <input class="ds-pin-input__field" inputmode="numeric" maxlength="1" />
+       <input class="ds-pin-input__field" inputmode="numeric" maxlength="1" />
+       <span class="ds-pin-input__separator">–</span>
+       <input class="ds-pin-input__field" inputmode="numeric" maxlength="1" />
+       <input class="ds-pin-input__field" inputmode="numeric" maxlength="1" />
+       <input class="ds-pin-input__field" inputmode="numeric" maxlength="1" />
+     </div>
+
+   Modifiers:
+     .ds-pin-input--sm/--lg  — Size variants
+     .ds-pin-input--error    — Error state (red border)
+     .ds-pin-input--success  — Success state (green border)
+   ========================================================================== */
+
+.ds-pin-input {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+}
+
+/* --- Individual field --- */
+.ds-pin-input__field {
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
+  padding: 0;
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  background-color: var(--ds-color-surface);
+  color: var(--ds-color-text);
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-xl);
+  font-weight: var(--ds-weight-semibold);
+  text-align: center;
+  line-height: 1;
+  caret-color: var(--ds-color-interactive);
+  transition:
+    border-color var(--ds-duration-fast) var(--ds-ease-default),
+    box-shadow var(--ds-duration-fast) var(--ds-ease-default);
+  -moz-appearance: textfield;
+}
+
+.ds-pin-input__field::-webkit-inner-spin-button,
+.ds-pin-input__field::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.ds-pin-input__field::placeholder {
+  color: var(--ds-color-text-disabled);
+}
+
+.ds-pin-input__field:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+.ds-pin-input__field:focus {
+  outline: none;
+  border-color: var(--ds-color-border-active);
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+/* --- Separator (dash between groups) --- */
+.ds-pin-input__separator {
+  color: var(--ds-color-text-tertiary);
+  font-size: var(--ds-text-lg);
+  user-select: none;
+  padding-inline: var(--ds-space-0-5);
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* SM */
+.ds-pin-input--sm {
+  gap: var(--ds-space-1-5);
+}
+
+.ds-pin-input--sm .ds-pin-input__field {
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
+  font-size: var(--ds-text-base);
+  border-radius: var(--ds-radius-md);
+}
+
+/* LG */
+.ds-pin-input--lg {
+  gap: var(--ds-space-3);
+}
+
+.ds-pin-input--lg .ds-pin-input__field {
+  width: var(--ds-size-4);
+  height: var(--ds-size-4);
+  font-size: var(--ds-text-2xl);
+}
+
+/* ==========================================================================
+   State variants
+   ========================================================================== */
+
+/* Error */
+.ds-pin-input--error .ds-pin-input__field {
+  border-color: var(--ds-color-error);
+}
+
+.ds-pin-input--error .ds-pin-input__field:focus {
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-error);
+}
+
+/* Success */
+.ds-pin-input--success .ds-pin-input__field {
+  border-color: var(--ds-color-success);
+}
+
+.ds-pin-input--success .ds-pin-input__field:focus {
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-success);
+}
+
+/* Disabled */
+.ds-pin-input--disabled .ds-pin-input__field {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
+}

package/src/components/popover.css

@@ -0,0 +1,111 @@
+/* ==========================================================================
+   Popover
+   ==========================================================================
+   Flexible popover component for displaying complex content anchored to a
+   trigger element. Supports four placement directions (top, bottom, left,
+   right) and multiple size variants. Default placement is bottom.
+
+   Usage:
+     <div class="ds-popover ds-popover--open">
+       <button>Trigger</button>
+       <div class="ds-popover__content">...</div>
+     </div>
+
+   Modifiers:
+     .ds-popover--open         — Shows the popover content
+     .ds-popover--top          — Places content above the trigger
+     .ds-popover--bottom       — Places content below the trigger (default)
+     .ds-popover--left         — Places content to the left of the trigger
+     .ds-popover--right        — Places content to the right of the trigger
+     .ds-popover__content--sm  — Smaller popover (12rem min-width)
+     .ds-popover__content--lg  — Larger popover (24rem min-width)
+   ========================================================================== */
+
+.ds-popover {
+  position: relative;
+  display: inline-flex;
+
+  &__content {
+    position: absolute;
+    z-index: var(--ds-z-dropdown);
+    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);
+    padding: var(--ds-space-4);
+    min-width: 16rem;
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.96);
+    transition:
+      opacity var(--ds-duration-fast) var(--ds-ease-default),
+      visibility var(--ds-duration-fast) var(--ds-ease-default),
+      transform var(--ds-duration-fast) var(--ds-ease-out-expo);
+
+    /* Size: small */
+    &--sm {
+      min-width: 12rem;
+      padding: var(--ds-space-3);
+    }
+
+    /* Size: large */
+    &--lg {
+      min-width: 24rem;
+    }
+  }
+
+  /* Open state */
+  &--open .ds-popover__content {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+  }
+
+  /* Placement: bottom (default) */
+  & .ds-popover__content,
+  &--bottom .ds-popover__content {
+    inset-block-start: calc(100% + var(--ds-offset-md));
+    inset-inline-start: 50%;
+    transform: translateX(-50%) scale(0.96);
+  }
+
+  &--open .ds-popover__content,
+  &--bottom&--open .ds-popover__content {
+    transform: translateX(-50%) scale(1);
+  }
+
+  /* Placement: top */
+  &--top .ds-popover__content {
+    inset-block-end: calc(100% + var(--ds-offset-md));
+    inset-block-start: auto;
+    inset-inline-start: 50%;
+    transform: translateX(-50%) scale(0.96);
+  }
+
+  &--top&--open .ds-popover__content {
+    transform: translateX(-50%) scale(1);
+  }
+
+  /* Placement: left */
+  &--left .ds-popover__content {
+    inset-inline-end: calc(100% + var(--ds-offset-md));
+    inset-block-start: 50%;
+    inset-inline-start: auto;
+    transform: translateY(-50%) scale(0.96);
+  }
+
+  &--left&--open .ds-popover__content {
+    transform: translateY(-50%) scale(1);
+  }
+
+  /* Placement: right */
+  &--right .ds-popover__content {
+    inset-inline-start: calc(100% + var(--ds-offset-md));
+    inset-block-start: 50%;
+    transform: translateY(-50%) scale(0.96);
+  }
+
+  &--right&--open .ds-popover__content {
+    transform: translateY(-50%) scale(1);
+  }
+}

package/src/components/progress.css

@@ -0,0 +1,217 @@
+/* ==========================================================================
+   Progress Bar & Step Indicator
+   ==========================================================================
+   Two related components for communicating progress:
+
+   1. Progress bar — a horizontal fill bar with optional label row.
+      Sizes: --sm, (default), --lg
+      Statuses: --success, --warning, --error, --info
+
+   2. Step indicator — a numbered sequence of steps with connectors.
+      States: --completed, --current, --error
+      Layout: horizontal (default), --vertical
+
+   Progress bar usage:
+     <div class="ds-progress__label">
+       <span>Uploading…</span><span>64 %</span>
+     </div>
+     <div class="ds-progress">
+       <div class="ds-progress__bar" style="width: 64%"></div>
+     </div>
+
+   Step indicator usage:
+     <div class="ds-steps">
+       <div class="ds-step ds-step--completed">
+         <div class="ds-step__indicator">1</div>
+         <div class="ds-step__content">
+           <span class="ds-step__title">Account</span>
+           <span class="ds-step__description">Create your account</span>
+         </div>
+       </div>
+       <div class="ds-step__connector"></div>
+       <div class="ds-step ds-step--current">…</div>
+     </div>
+   ========================================================================== */
+
+/* ==========================================================================
+   Progress Bar
+   ========================================================================== */
+
+/* Label row (sits above the bar) */
+.ds-progress__label {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-block-end: var(--ds-space-1-5);
+}
+
+/* Track */
+.ds-progress {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--ds-color-surface-muted);
+  border-radius: var(--ds-radius-full);
+  overflow: hidden;
+
+  /* Fill */
+  &__bar {
+    height: 100%;
+    min-width: 0.25rem;
+    background-color: var(--ds-color-inverted);
+    border-radius: var(--ds-radius-full);
+    transition: width var(--ds-duration-normal) var(--ds-ease-default);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Sizes
+     --------------------------------------------------------------------------- */
+
+  &--sm {
+    height: 0.25rem;
+  }
+
+  &--lg {
+    height: 0.75rem;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Status colours
+     --------------------------------------------------------------------------- */
+
+  &--success .ds-progress__bar {
+    background-color: var(--ds-color-success);
+  }
+
+  &--warning .ds-progress__bar {
+    background-color: var(--ds-color-warning);
+  }
+
+  &--error .ds-progress__bar {
+    background-color: var(--ds-color-error);
+  }
+
+  &--info .ds-progress__bar {
+    background-color: var(--ds-color-info);
+  }
+}
+
+/* ==========================================================================
+   Step Indicator
+   ========================================================================== */
+
+/* Steps container (horizontal by default) */
+.ds-steps {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+
+  /* Vertical variant */
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+
+    & .ds-step__connector {
+      flex: none;
+      width: 2px;
+      height: 2rem;
+      min-width: auto;
+      margin-inline: 0;
+      margin-inline-start: calc(1rem - 1px); /* center under the 2 rem indicator */
+      margin-block: var(--ds-space-1);
+      background-color: var(--ds-color-border-subtle);
+    }
+
+    & .ds-step--completed + .ds-step__connector {
+      background-color: var(--ds-color-inverted);
+    }
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Single step
+   --------------------------------------------------------------------------- */
+
+.ds-step {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+
+  /* Circle indicator */
+  &__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--ds-radius-full);
+    border: 2px solid var(--ds-color-border);
+    font-size: var(--ds-text-xs);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text-tertiary);
+    background-color: var(--ds-color-surface);
+    flex-shrink: 0;
+    transition:
+      background-color var(--ds-duration-fast) var(--ds-ease-default),
+      border-color var(--ds-duration-fast) var(--ds-ease-default),
+      color var(--ds-duration-fast) var(--ds-ease-default);
+  }
+
+  /* Completed step */
+  &--completed &__indicator {
+    background-color: var(--ds-color-inverted);
+    border-color: var(--ds-color-inverted);
+    color: var(--ds-color-on-inverted);
+  }
+
+  /* Current step */
+  &--current &__indicator {
+    border-color: var(--ds-color-interactive);
+    color: var(--ds-color-text);
+  }
+
+  /* Error step */
+  &--error &__indicator {
+    border-color: var(--ds-color-error);
+    color: var(--ds-color-error);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Step content
+     --------------------------------------------------------------------------- */
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__title {
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text);
+  }
+
+  &__description {
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Connector (line between steps)
+     --------------------------------------------------------------------------- */
+
+  /* Horizontal connector */
+  &__connector {
+    flex: 1;
+    height: 2px;
+    min-width: var(--ds-space-4);
+    background-color: var(--ds-color-border);
+    margin-inline: var(--ds-space-2);
+  }
+
+  /* Filled connector after a completed step */
+  &--completed + &__connector {
+    background-color: var(--ds-color-inverted);
+  }
+}