@digiko-npm/designsystem 0.7.2 → 0.8.0

package/src/components/pagination.css

@@ -31,145 +31,158 @@
   align-items: center;
   gap: var(--ds-space-1);
   font-family: var(--ds-font-sans);
+  container-type: inline-size;
+
+  /* ---------------------------------------------------------------------------
+     Item (page number)
+     --------------------------------------------------------------------------- */
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 var(--ds-space-1);
+    border: none;
+    border-radius: var(--ds-radius-md);
+    background: transparent;
+    color: var(--ds-color-text-secondary);
+    font-size: var(--ds-text-sm);
+    font-family: var(--ds-font-sans);
+    cursor: pointer;
+    transition:
+      background-color var(--ds-duration-fast) var(--ds-ease-out),
+      color var(--ds-duration-fast) var(--ds-ease-out);
+    -webkit-appearance: none;
+    appearance: none;
+
+    &:hover {
+      background-color: var(--ds-color-bg-elevated);
+      color: var(--ds-color-text);
+    }
+
+    &: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);
+    }
+
+    /* ---------------------------------------------------------------------------
+       Active page
+       --------------------------------------------------------------------------- */
+
+    &--active,
+    &--active:hover {
+      background-color: var(--ds-color-inverted);
+      color: var(--ds-color-on-inverted);
+      cursor: default;
+    }
+
+    /* ---------------------------------------------------------------------------
+       Disabled item
+       --------------------------------------------------------------------------- */
+
+    &--disabled,
+    &--disabled:hover {
+      opacity: var(--ds-opacity-disabled);
+      pointer-events: none;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Previous / Next navigation buttons
+     --------------------------------------------------------------------------- */
+
+  &__prev,
+  &__next {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--ds-radius-md);
+    background: transparent;
+    color: var(--ds-color-text-secondary);
+    font-size: var(--ds-text-sm);
+    font-family: var(--ds-font-sans);
+    cursor: pointer;
+    transition:
+      background-color var(--ds-duration-fast) var(--ds-ease-out),
+      color var(--ds-duration-fast) var(--ds-ease-out);
+    -webkit-appearance: none;
+    appearance: none;
+
+    &:hover {
+      background-color: var(--ds-color-bg-elevated);
+      color: var(--ds-color-text);
+    }
+
+    &: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);
+    }
+
+    &:disabled {
+      opacity: var(--ds-opacity-disabled);
+      pointer-events: none;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Ellipsis
+     --------------------------------------------------------------------------- */
+
+  &__ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    color: var(--ds-color-text-tertiary);
+    font-size: var(--ds-text-sm);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Page info text (e.g. "Page 1 of 10")
+     --------------------------------------------------------------------------- */
+
+  &__info {
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-tertiary);
+    white-space: nowrap;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Modifier: Compact
+     --------------------------------------------------------------------------- */
+
+  &--compact {
+    & .ds-pagination__item,
+    & .ds-pagination__prev,
+    & .ds-pagination__next,
+    & .ds-pagination__ellipsis {
+      min-width: 1.75rem;
+      height: 1.75rem;
+      font-size: var(--ds-text-xs);
+    }
+  }
 }
 
-/* ---------------------------------------------------------------------------
-   Item (page number)
-   --------------------------------------------------------------------------- */
-
-.ds-pagination__item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  height: 2rem;
-  padding: 0 var(--ds-space-1);
-  border: none;
-  border-radius: var(--ds-radius-md);
-  background: transparent;
-  color: var(--ds-color-text-secondary);
-  font-size: var(--ds-text-sm);
-  font-family: var(--ds-font-sans);
-  cursor: pointer;
-  transition:
-    background-color var(--ds-duration-fast) var(--ds-ease-out),
-    color var(--ds-duration-fast) var(--ds-ease-out);
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.ds-pagination__item:hover {
-  background-color: var(--ds-color-bg-elevated);
-  color: var(--ds-color-text);
-}
-
-.ds-pagination__item: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);
-}
-
-/* ---------------------------------------------------------------------------
-   Active page
-   --------------------------------------------------------------------------- */
-
-.ds-pagination__item--active,
-.ds-pagination__item--active:hover {
-  background-color: var(--ds-color-inverted);
-  color: var(--ds-color-on-inverted);
-  cursor: default;
-}
-
-/* ---------------------------------------------------------------------------
-   Disabled item
-   --------------------------------------------------------------------------- */
-
-.ds-pagination__item--disabled,
-.ds-pagination__item--disabled:hover {
-  opacity: var(--ds-opacity-disabled);
-  pointer-events: none;
-}
-
-/* ---------------------------------------------------------------------------
-   Previous / Next navigation buttons
-   --------------------------------------------------------------------------- */
-
-.ds-pagination__prev,
-.ds-pagination__next {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  height: 2rem;
-  padding: 0;
-  border: none;
-  border-radius: var(--ds-radius-md);
-  background: transparent;
-  color: var(--ds-color-text-secondary);
-  font-size: var(--ds-text-sm);
-  font-family: var(--ds-font-sans);
-  cursor: pointer;
-  transition:
-    background-color var(--ds-duration-fast) var(--ds-ease-out),
-    color var(--ds-duration-fast) var(--ds-ease-out);
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.ds-pagination__prev:hover,
-.ds-pagination__next:hover {
-  background-color: var(--ds-color-bg-elevated);
-  color: var(--ds-color-text);
-}
-
-.ds-pagination__prev:focus-visible,
-.ds-pagination__next: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);
-}
-
-.ds-pagination__prev:disabled,
-.ds-pagination__next:disabled {
-  opacity: var(--ds-opacity-disabled);
-  pointer-events: none;
-}
-
-/* ---------------------------------------------------------------------------
-   Ellipsis
-   --------------------------------------------------------------------------- */
-
-.ds-pagination__ellipsis {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  height: 2rem;
-  color: var(--ds-color-text-tertiary);
-  font-size: var(--ds-text-sm);
-  user-select: none;
-  pointer-events: none;
-}
-
-/* ---------------------------------------------------------------------------
-   Page info text (e.g. "Page 1 of 10")
-   --------------------------------------------------------------------------- */
-
-.ds-pagination__info {
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text-tertiary);
-  white-space: nowrap;
-}
-
-/* ---------------------------------------------------------------------------
-   Modifier: Compact
-   --------------------------------------------------------------------------- */
-
-.ds-pagination--compact .ds-pagination__item,
-.ds-pagination--compact .ds-pagination__prev,
-.ds-pagination--compact .ds-pagination__next,
-.ds-pagination--compact .ds-pagination__ellipsis {
-  min-width: 1.75rem;
-  height: 1.75rem;
-  font-size: var(--ds-text-xs);
+/* Container query: hide page numbers when pagination is narrow, show only prev/next */
+@container (max-width: 320px) {
+  .ds-pagination__item,
+  .ds-pagination__ellipsis {
+    display: none;
+  }
+
+  .ds-pagination__info {
+    flex: 1;
+    text-align: center;
+  }
 }

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

@@ -24,88 +24,88 @@
 .ds-popover {
   position: relative;
   display: inline-flex;
-}
 
-.ds-popover__content {
-  position: absolute;
-  z-index: var(--ds-z-dropdown);
-  background-color: var(--ds-color-surface);
-  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),
-    visibility var(--ds-duration-fast) var(--ds-ease),
-    transform var(--ds-duration-fast) var(--ds-ease-out-expo);
-}
+  &__content {
+    position: absolute;
+    z-index: var(--ds-z-dropdown);
+    background-color: var(--ds-color-surface);
+    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),
+      visibility var(--ds-duration-fast) var(--ds-ease),
+      transform var(--ds-duration-fast) var(--ds-ease-out-expo);
 
-/* Open state */
-.ds-popover--open .ds-popover__content {
-  opacity: 1;
-  visibility: visible;
-  transform: scale(1);
-}
+    /* Size: small */
+    &--sm {
+      min-width: 12rem;
+      padding: var(--ds-space-3);
+    }
 
-/* Placement: bottom (default) */
-.ds-popover__content,
-.ds-popover--bottom .ds-popover__content {
-  inset-block-start: calc(100% + var(--ds-offset-md));
-  inset-inline-start: 50%;
-  transform: translateX(-50%) scale(0.96);
-}
+    /* Size: large */
+    &--lg {
+      min-width: 24rem;
+    }
+  }
 
-.ds-popover--open .ds-popover__content,
-.ds-popover--bottom.ds-popover--open .ds-popover__content {
-  transform: translateX(-50%) scale(1);
-}
+  /* Open state */
+  &--open .ds-popover__content {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+  }
 
-/* Placement: top */
-.ds-popover--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);
-}
+  /* 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);
+  }
 
-.ds-popover--top.ds-popover--open .ds-popover__content {
-  transform: translateX(-50%) scale(1);
-}
+  &--open .ds-popover__content,
+  &--bottom&--open .ds-popover__content {
+    transform: translateX(-50%) scale(1);
+  }
 
-/* Placement: left */
-.ds-popover--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);
-}
+  /* 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);
+  }
 
-.ds-popover--left.ds-popover--open .ds-popover__content {
-  transform: translateY(-50%) scale(1);
-}
+  &--top&--open .ds-popover__content {
+    transform: translateX(-50%) scale(1);
+  }
 
-/* Placement: right */
-.ds-popover--right .ds-popover__content {
-  inset-inline-start: calc(100% + var(--ds-offset-md));
-  inset-block-start: 50%;
-  transform: translateY(-50%) scale(0.96);
-}
+  /* 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);
+  }
 
-.ds-popover--right.ds-popover--open .ds-popover__content {
-  transform: translateY(-50%) scale(1);
-}
+  &--left&--open .ds-popover__content {
+    transform: translateY(-50%) scale(1);
+  }
 
-/* Size: small */
-.ds-popover__content--sm {
-  min-width: 12rem;
-  padding: var(--ds-space-3);
-}
+  /* 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);
+  }
 
-/* Size: large */
-.ds-popover__content--lg {
-  min-width: 24rem;
+  &--right&--open .ds-popover__content {
+    transform: translateY(-50%) scale(1);
+  }
 }