@digiko-npm/designsystem 0.7.2 → 0.8.0

package/src/components/copy-button.css

@@ -0,0 +1,106 @@
+/* ==========================================================================
+   Component: Copy Button
+   Icon button with clipboard feedback state (idle → copied).
+
+   ARIA requirements (consumer responsibility):
+   - Button: aria-label="Copy [description]"
+   - After copy: update aria-label to "Copied" temporarily
+   - Use role="status" or aria-live="polite" for screen reader feedback
+
+   Usage:
+     <button class="ds-copy-btn" aria-label="Copy address">
+       <svg class="ds-copy-btn__icon">...</svg>         <!-- copy icon -->
+       <svg class="ds-copy-btn__icon-check">...</svg>    <!-- check icon -->
+     </button>
+
+     <!-- Active state (after copy): -->
+     <button class="ds-copy-btn ds-copy-btn--copied" aria-label="Copied">...</button>
+
+   Modifiers:
+     .ds-copy-btn--copied  — Show check icon, hide copy icon
+     .ds-copy-btn--sm      — Smaller (24px)
+     .ds-copy-btn--lg      — Larger (40px)
+   ========================================================================== */
+
+.ds-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
+  padding: var(--ds-space-1-5);
+  border: none;
+  border-radius: var(--ds-radius-md);
+  background: transparent;
+  color: var(--ds-color-text-tertiary);
+  cursor: pointer;
+  flex-shrink: 0;
+  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-hover);
+    color: var(--ds-color-text-secondary);
+  }
+
+  &: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);
+  }
+
+  /* --- Icons --- */
+  &__icon,
+  &__icon-check {
+    width: 1rem;
+    height: 1rem;
+    transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+  }
+
+  &__icon-check {
+    position: absolute;
+    opacity: 0;
+    color: var(--ds-color-success);
+  }
+
+  /* --- Copied state --- */
+  &--copied {
+    color: var(--ds-color-success);
+
+    & .ds-copy-btn__icon {
+      opacity: 0;
+    }
+
+    & .ds-copy-btn__icon-check {
+      opacity: 1;
+    }
+  }
+
+  /* --- Sizes --- */
+  &--sm {
+    width: var(--ds-size-1);
+    height: var(--ds-size-1);
+    padding: var(--ds-space-0-5);
+    border-radius: var(--ds-radius-sm);
+
+    & .ds-copy-btn__icon,
+    & .ds-copy-btn__icon-check {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+  }
+
+  &--lg {
+    width: var(--ds-size-3);
+    height: var(--ds-size-3);
+    padding: var(--ds-space-2);
+
+    & .ds-copy-btn__icon,
+    & .ds-copy-btn__icon-check {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+}

package/src/components/datepicker.css

@@ -37,259 +37,265 @@
      .ds-datepicker__day--other-month  — Dims days from adjacent months
    ========================================================================== */
 
-/* Wrapper */
 .ds-datepicker {
+  /* Wrapper */
   position: relative;
   display: inline-flex;
-}
-
-/* Trigger button */
-.ds-datepicker__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ds-space-1);
-  cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
-  color: var(--ds-color-text);
-  font: inherit;
-  line-height: 1;
-}
-
-.ds-datepicker__trigger:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-}
-
-/* Calendar panel */
-.ds-datepicker__panel {
-  position: absolute;
-  z-index: var(--ds-z-dropdown);
-  inset-block-start: calc(100% + var(--ds-offset-sm));
-  inset-inline-start: 0;
-  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-3);
-  min-width: 17rem;
-  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);
-}
-
-/* Open state */
-.ds-datepicker--open .ds-datepicker__panel {
-  opacity: 1;
-  visibility: visible;
-  transform: scale(1);
-}
-
-/* Header — month/year + nav arrows */
-.ds-datepicker__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-block-end: var(--ds-space-2);
-}
-
-.ds-datepicker__title {
-  font-size: var(--ds-text-sm);
-  font-weight: var(--ds-weight-semibold);
-  color: var(--ds-color-text);
-  user-select: none;
-}
-
-.ds-datepicker__nav {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border: none;
-  background: none;
-  border-radius: var(--ds-radius-md);
-  color: var(--ds-color-text-secondary);
-  cursor: pointer;
-  font-size: var(--ds-text-base);
-  transition: all var(--ds-duration-fast) var(--ds-ease-default);
-}
-
-.ds-datepicker__nav:hover {
-  background-color: var(--ds-color-bg-elevated);
-  color: var(--ds-color-text);
-}
-.ds-datepicker__nav:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-}
-
-/* Weekday header row */
-.ds-datepicker__weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  margin-block-end: var(--ds-space-1);
-}
-
-.ds-datepicker__weekday {
-  font-size: var(--ds-text-xs);
-  color: var(--ds-color-text-tertiary);
-  text-align: center;
-  padding: var(--ds-space-1) 0;
-  user-select: none;
-  font-weight: var(--ds-weight-medium);
-}
-
-/* Day grid */
-.ds-datepicker__grid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 1px;
-}
-
-/* Day cell */
-.ds-datepicker__day {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1;
-  border: none;
-  background: none;
-  border-radius: var(--ds-radius-md);
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text);
-  cursor: pointer;
-  transition: all var(--ds-duration-fast) var(--ds-ease-default);
-  padding: 0;
-  line-height: 1;
-  user-select: none;
-}
-
-.ds-datepicker__day:hover {
-  background-color: var(--ds-color-bg-elevated);
-}
-.ds-datepicker__day:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-}
-
-/* Today — subtle ring */
-.ds-datepicker__day--today {
-  box-shadow: inset 0 0 0 1px var(--ds-color-border-active);
-  font-weight: var(--ds-weight-semibold);
-}
-
-/* Selected — inverted fill */
-.ds-datepicker__day--selected {
-  background-color: var(--ds-color-text);
-  color: var(--ds-color-bg);
-  font-weight: var(--ds-weight-semibold);
-}
-
-.ds-datepicker__day--selected:hover {
-  background-color: var(--ds-color-text);
-  opacity: 0.85;
-}
-
-/* Other month days — dimmed */
-.ds-datepicker__day--other-month {
-  color: var(--ds-color-text-tertiary);
-  opacity: 0.4;
-}
-
-/* Footer — Today pill */
-.ds-datepicker__footer {
-  display: flex;
-  justify-content: center;
-  margin-block-start: var(--ds-space-2);
-  padding-block-start: var(--ds-space-2);
-  border-block-start: 1px solid var(--ds-color-border);
-}
-
-.ds-datepicker__today {
-  font-size: var(--ds-text-xs);
-  font-weight: var(--ds-weight-medium);
-  color: var(--ds-color-text-secondary);
-  background: none;
-  border: 1px solid var(--ds-color-border);
-  border-radius: var(--ds-radius-full);
-  padding: var(--ds-space-1) var(--ds-space-3);
-  cursor: pointer;
-  transition: all var(--ds-duration-fast) var(--ds-ease-default);
-}
-
-.ds-datepicker__today:hover {
-  background-color: var(--ds-color-bg-elevated);
-  color: var(--ds-color-text);
-  border-color: var(--ds-color-border-hover);
-}
-.ds-datepicker__today:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-}
-
-/* Step arrows — prev/next day buttons beside the date text */
-.ds-datepicker__step {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  border: none;
-  background: none;
-  border-radius: var(--ds-radius-default);
-  color: var(--ds-color-text-tertiary);
-  cursor: pointer;
-  font-size: var(--ds-text-xs);
-  transition: all var(--ds-duration-fast) var(--ds-ease-default);
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.ds-datepicker__step:hover {
-  background-color: var(--ds-color-bg-elevated);
-  color: var(--ds-color-text);
-}
-.ds-datepicker__step:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-}
-
-/* Compact mode — for inline table cells */
-.ds-datepicker--compact .ds-datepicker__panel {
-  min-width: 14rem;
-  padding: var(--ds-space-2);
-}
-
-.ds-datepicker--compact .ds-datepicker__title {
-  font-size: var(--ds-text-xs);
-}
-
-.ds-datepicker--compact .ds-datepicker__nav {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: var(--ds-text-sm);
-}
-
-.ds-datepicker--compact .ds-datepicker__weekday {
-  font-size: var(--ds-text-2xs);
-}
-
-.ds-datepicker--compact .ds-datepicker__day {
-  font-size: var(--ds-text-xs);
-}
-
-.ds-datepicker--compact .ds-datepicker__today {
-  font-size: var(--ds-text-2xs);
-  padding: 2px var(--ds-space-2);
-}
 
-.ds-datepicker--compact .ds-datepicker__footer {
-  margin-block-start: var(--ds-space-1);
-  padding-block-start: var(--ds-space-1);
+  /* Trigger button */
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ds-space-1);
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--ds-color-text);
+    font: inherit;
+    line-height: 1;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+  }
+
+  /* Calendar panel */
+  &__panel {
+    position: absolute;
+    z-index: var(--ds-z-dropdown);
+    inset-block-start: calc(100% + var(--ds-offset-sm));
+    inset-inline-start: 0;
+    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-3);
+    min-width: 17rem;
+    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);
+  }
+
+  /* Open state */
+  &--open &__panel {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+  }
+
+  /* Header — month/year + nav arrows */
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-block-end: var(--ds-space-2);
+  }
+
+  &__title {
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-semibold);
+    color: var(--ds-color-text);
+    user-select: none;
+  }
+
+  &__nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: none;
+    background: none;
+    border-radius: var(--ds-radius-md);
+    color: var(--ds-color-text-secondary);
+    cursor: pointer;
+    font-size: var(--ds-text-base);
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: var(--ds-color-bg-elevated);
+      color: var(--ds-color-text);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+  }
+
+  /* Weekday header row */
+  &__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-block-end: var(--ds-space-1);
+  }
+
+  &__weekday {
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+    text-align: center;
+    padding: var(--ds-space-1) 0;
+    user-select: none;
+    font-weight: var(--ds-weight-medium);
+  }
+
+  /* Day grid */
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 1px;
+  }
+
+  /* Day cell */
+  &__day {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    border: none;
+    background: none;
+    border-radius: var(--ds-radius-md);
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text);
+    cursor: pointer;
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+    padding: 0;
+    line-height: 1;
+    user-select: none;
+
+    &:hover {
+      background-color: var(--ds-color-bg-elevated);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+
+    /* Today — subtle ring */
+    &--today {
+      box-shadow: inset 0 0 0 1px var(--ds-color-border-active);
+      font-weight: var(--ds-weight-semibold);
+    }
+
+    /* Selected — inverted fill */
+    &--selected {
+      background-color: var(--ds-color-text);
+      color: var(--ds-color-bg);
+      font-weight: var(--ds-weight-semibold);
+
+      &:hover {
+        background-color: var(--ds-color-text);
+        opacity: 0.85;
+      }
+    }
+
+    /* Other month days — dimmed */
+    &--other-month {
+      color: var(--ds-color-text-tertiary);
+      opacity: 0.4;
+    }
+  }
+
+  /* Footer — Today pill */
+  &__footer {
+    display: flex;
+    justify-content: center;
+    margin-block-start: var(--ds-space-2);
+    padding-block-start: var(--ds-space-2);
+    border-block-start: 1px solid var(--ds-color-border);
+  }
+
+  &__today {
+    font-size: var(--ds-text-xs);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text-secondary);
+    background: none;
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-full);
+    padding: var(--ds-space-1) var(--ds-space-3);
+    cursor: pointer;
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: var(--ds-color-bg-elevated);
+      color: var(--ds-color-text);
+      border-color: var(--ds-color-border-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+  }
+
+  /* Step arrows — prev/next day buttons beside the date text */
+  &__step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    border: none;
+    background: none;
+    border-radius: var(--ds-radius-default);
+    color: var(--ds-color-text-tertiary);
+    cursor: pointer;
+    font-size: var(--ds-text-xs);
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+    padding: 0;
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: var(--ds-color-bg-elevated);
+      color: var(--ds-color-text);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+  }
+
+  /* Compact mode — for inline table cells */
+  &--compact {
+    & .ds-datepicker__panel {
+      min-width: 14rem;
+      padding: var(--ds-space-2);
+    }
+
+    & .ds-datepicker__title {
+      font-size: var(--ds-text-xs);
+    }
+
+    & .ds-datepicker__nav {
+      width: 1.5rem;
+      height: 1.5rem;
+      font-size: var(--ds-text-sm);
+    }
+
+    & .ds-datepicker__weekday {
+      font-size: var(--ds-text-2xs);
+    }
+
+    & .ds-datepicker__day {
+      font-size: var(--ds-text-xs);
+    }
+
+    & .ds-datepicker__today {
+      font-size: var(--ds-text-2xs);
+      padding: 2px var(--ds-space-2);
+    }
+
+    & .ds-datepicker__footer {
+      margin-block-start: var(--ds-space-1);
+      padding-block-start: var(--ds-space-1);
+    }
+  }
 }