@db-vincent/components 0.1.0 → 0.1.1

package/src/styles/motion.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer motion {
   .ds-motion-lift,
   .ds-motion-underline,
@@ -31,12 +33,18 @@
         var(--ds-motion-delay);
   }
 
-  .ds-motion-lift:hover,
   .ds-motion-lift:focus-visible {
     box-shadow: var(--motion-lift-shadow);
     transform: translateY(var(--motion-lift-y));
   }
 
+  @media (hover: hover) and (pointer: fine) {
+    .ds-motion-lift:hover {
+      box-shadow: var(--motion-lift-shadow);
+      transform: translateY(var(--motion-lift-y));
+    }
+  }
+
   .ds-motion-underline {
     background-image: linear-gradient(currentColor, currentColor);
     background-position: 0 100%;
@@ -66,11 +74,16 @@
       var(--ds-motion-delay);
   }
 
-  .ds-motion-arrow:hover .ds-motion-arrow__target,
   .ds-motion-arrow:focus-visible .ds-motion-arrow__target {
     transform: translateX(var(--motion-nudge));
   }
 
+  @media (hover: hover) and (pointer: fine) {
+    .ds-motion-arrow:hover .ds-motion-arrow__target {
+      transform: translateX(var(--motion-nudge));
+    }
+  }
+
   .ds-motion-row {
     transition:
       background-color var(--ds-motion-time) var(--motion-ease)
@@ -78,11 +91,16 @@
       transform var(--ds-motion-time) var(--motion-ease) var(--ds-motion-delay);
   }
 
-  .ds-motion-row:hover,
   .ds-motion-row:focus-within {
     transform: translateX(var(--motion-row-nudge));
   }
 
+  @media (hover: hover) and (pointer: fine) {
+    .ds-motion-row:hover {
+      transform: translateX(var(--motion-row-nudge));
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .ds-motion-lift:hover,
     .ds-motion-lift:focus-visible,

package/src/styles/nav.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-nav {
     background: var(--nav-bg);

package/src/styles/navbar.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   /* The bar is a query container: it collapses by its own width, so it works
      the same as a page header, inside a split view or in a demo frame. */

package/src/styles/page-header.css

@@ -1,7 +1,10 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-page-header {
     display: grid;
     gap: var(--page-header-gap);
+    grid-template-columns: minmax(0, 1fr);
   }
 
   .ds-page-header__title {

package/src/styles/pagination.css

@@ -1,13 +1,17 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-pagination {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     gap: var(--pagination-gap);
   }
 
   .ds-pagination__list {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     gap: var(--pagination-gap);
     list-style: none;
     margin: 0;

package/src/styles/popover.css

@@ -0,0 +1,134 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  /* Wraps a trigger and its anchored surface. Each wrapper scopes the anchor
+     name, so any number of popovers, menus and tooltips can share it. */
+  .ds-anchor {
+    anchor-name: --ds-anchor;
+    anchor-scope: --ds-anchor;
+    display: inline-flex;
+  }
+
+  .ds-popover {
+    --ds-anchor-gap: var(--popover-gap);
+
+    background: var(--popover-bg);
+    border: 1px solid var(--popover-border);
+    border-radius: var(--popover-radius);
+    box-shadow: var(--popover-shadow);
+    color: var(--popover-fg);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    max-width: min(var(--popover-max-width), calc(100vw - var(--space-8)));
+    opacity: 0;
+    overflow: auto;
+    padding: var(--popover-padding);
+    transform: scale(var(--popover-scale-from));
+    transform-origin: top center;
+    transition:
+      opacity var(--popover-duration-exit) var(--popover-ease-exit),
+      transform var(--popover-duration-exit) var(--popover-ease-exit),
+      display var(--popover-duration-exit) allow-discrete,
+      overlay var(--popover-duration-exit) allow-discrete;
+  }
+
+  .ds-popover:popover-open {
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity var(--popover-duration-enter) var(--popover-ease-enter),
+      transform var(--popover-duration-enter) var(--popover-ease-enter),
+      display var(--popover-duration-enter) allow-discrete,
+      overlay var(--popover-duration-enter) allow-discrete;
+  }
+
+  /* Set by script when the surface opens from the keyboard. */
+  .ds-popover[data-instant]:popover-open {
+    transition-duration: 0s;
+  }
+
+  @starting-style {
+    .ds-popover:popover-open {
+      opacity: 0;
+      transform: scale(var(--popover-scale-from));
+    }
+  }
+
+  /* Anchor positioning. Every surface carries a placement modifier. Without
+     support the native popover stays centred in the viewport, which is still
+     usable. */
+  @supports (position-area: block-end) {
+    .ds-popover,
+    .ds-tooltip {
+      /* Centre on the anchor but never past the viewport edge. Held in a
+         variable because the CSS validator predates `safe anchor-center`. */
+      --ds-anchor-center: safe anchor-center;
+
+      inset: auto;
+      margin: 0;
+      position-anchor: --ds-anchor;
+    }
+
+    .ds-popover--bottom,
+    .ds-popover--top,
+    .ds-tooltip--bottom,
+    .ds-tooltip--top {
+      justify-self: var(--ds-anchor-center);
+      position-try-fallbacks: flip-block;
+    }
+
+    .ds-popover--bottom,
+    .ds-tooltip--bottom {
+      margin-block-start: var(--ds-anchor-gap);
+      position-area: block-end;
+      transform-origin: top center;
+    }
+
+    .ds-popover--top,
+    .ds-tooltip--top {
+      margin-block-end: var(--ds-anchor-gap);
+      position-area: block-start;
+      transform-origin: bottom center;
+    }
+
+    .ds-popover--start,
+    .ds-popover--end,
+    .ds-tooltip--start,
+    .ds-tooltip--end {
+      align-self: var(--ds-anchor-center);
+      position-try-fallbacks: flip-inline;
+    }
+
+    .ds-popover--start,
+    .ds-tooltip--start {
+      margin-inline-end: var(--ds-anchor-gap);
+      position-area: inline-start;
+      transform-origin: right center;
+    }
+
+    .ds-popover--end,
+    .ds-tooltip--end {
+      margin-inline-start: var(--ds-anchor-gap);
+      position-area: inline-end;
+      transform-origin: left center;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-popover,
+    .ds-popover:popover-open {
+      transform: none;
+      transition:
+        opacity var(--popover-duration-reduced) var(--popover-ease-exit),
+        display var(--popover-duration-reduced) allow-discrete,
+        overlay var(--popover-duration-reduced) allow-discrete;
+    }
+
+    @starting-style {
+      .ds-popover:popover-open {
+        opacity: 0;
+        transform: none;
+      }
+    }
+  }
+}

package/src/styles/progress.css

@@ -0,0 +1,95 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-progress {
+    --ds-progress-height: var(--progress-height-md);
+    --ds-progress-fill: var(--progress-accent);
+    display: grid;
+    gap: var(--progress-gap);
+    width: 100%;
+  }
+
+  .ds-progress--sm {
+    --ds-progress-height: var(--progress-height-sm);
+  }
+
+  .ds-progress--success {
+    --ds-progress-fill: var(--progress-success);
+  }
+
+  .ds-progress--warning {
+    --ds-progress-fill: var(--progress-warning);
+  }
+
+  .ds-progress--danger {
+    --ds-progress-fill: var(--progress-danger);
+  }
+
+  .ds-progress__head {
+    align-items: baseline;
+    display: flex;
+    font-size: var(--progress-font-size);
+    gap: var(--space-3);
+    justify-content: space-between;
+    line-height: var(--leading-sm);
+  }
+
+  .ds-progress__label {
+    color: var(--progress-label-fg);
+    font-weight: var(--weight-medium);
+  }
+
+  .ds-progress__value {
+    color: var(--progress-value-fg);
+    font-family: var(--progress-value-font);
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ds-progress__track {
+    background: var(--progress-track);
+    border-radius: var(--progress-radius);
+    height: var(--ds-progress-height);
+    overflow: hidden;
+  }
+
+  .ds-progress__bar {
+    background: var(--ds-progress-fill);
+    border-radius: var(--progress-radius);
+    height: 100%;
+    transform: scaleX(var(--ds-progress-value, 0));
+    transform-origin: left;
+    transition: transform var(--progress-duration) var(--progress-ease);
+    width: 100%;
+  }
+
+  .ds-progress--indeterminate .ds-progress__bar {
+    animation: ds-progress-slide var(--progress-indeterminate-duration)
+      var(--progress-ease) infinite;
+    transform: none;
+    transition: none;
+    width: var(--progress-indeterminate-width);
+  }
+
+  @keyframes ds-progress-slide {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(var(--progress-indeterminate-travel));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-progress__bar {
+      transition: none;
+    }
+
+    .ds-progress--indeterminate .ds-progress__bar {
+      animation: none;
+      background: var(--progress-indicator-static);
+      width: 100%;
+    }
+  }
+}

package/src/styles/section.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-section {
     border-top: 1px solid var(--section-border);

package/src/styles/select.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-select {
     position: relative;
@@ -39,7 +41,7 @@
     box-shadow:
       0 0 0 var(--select-focus-width) var(--select-focus-offset-color),
       0 0 0 calc(var(--select-focus-width) * 2) var(--select-border-focus);
-    outline: none;
+    outline: 2px solid transparent;
   }
 
   .ds-select__control:disabled {
@@ -106,7 +108,16 @@
     padding: var(--select-popup-padding);
     position: absolute;
     top: calc(100% + var(--select-popup-gap));
+    transform-origin: top center;
     z-index: var(--select-popup-z);
+    animation: ds-select-in var(--duration-base) var(--ease-enter);
+  }
+
+  @keyframes ds-select-in {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--space-1))) scale(0.97);
+    }
   }
 
   .ds-select__popup[hidden] {

package/src/styles/skeleton.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-skeleton {
     background: var(--skeleton-bg);

package/src/styles/spinner.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-spinner {
     border: var(--spinner-stroke) solid var(--spinner-track);

package/src/styles/sr-only.css

@@ -0,0 +1,14 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+/* Visually hidden, still announced. Shared so components that emit
+   .ds-sr-only do not depend on base.css being loaded. */
+@layer components {
+  .ds-sr-only {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}

package/src/styles/stepper.css

@@ -0,0 +1,169 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-stepper {
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+
+  .ds-stepper__item {
+    --ds-stepper-marker-bg: var(--stepper-marker-bg-upcoming);
+    --ds-stepper-marker-border: var(--stepper-marker-border-upcoming);
+    --ds-stepper-marker-fg: var(--stepper-marker-fg-upcoming);
+    --ds-stepper-label-fg: var(--stepper-label-fg-upcoming);
+    --ds-stepper-description-fg: var(--stepper-description-fg);
+    --ds-stepper-connector: var(--stepper-connector-bg);
+
+    align-content: start;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .ds-stepper__item[data-state="current"] {
+    --ds-stepper-marker-bg: var(--stepper-marker-bg-current);
+    --ds-stepper-marker-border: var(--stepper-marker-border-current);
+    --ds-stepper-marker-fg: var(--stepper-marker-fg-current);
+    --ds-stepper-label-fg: var(--stepper-label-fg);
+  }
+
+  .ds-stepper__item[data-state="complete"] {
+    --ds-stepper-marker-bg: var(--stepper-marker-bg-complete);
+    --ds-stepper-marker-border: var(--stepper-marker-border-complete);
+    --ds-stepper-marker-fg: var(--stepper-marker-fg-complete);
+    --ds-stepper-label-fg: var(--stepper-label-fg);
+    --ds-stepper-connector: var(--stepper-connector-bg-complete);
+  }
+
+  .ds-stepper__item[data-state="error"] {
+    --ds-stepper-marker-bg: var(--stepper-marker-bg-error);
+    --ds-stepper-marker-border: var(--stepper-marker-border-error);
+    --ds-stepper-marker-fg: var(--stepper-marker-fg-error);
+    --ds-stepper-label-fg: var(--stepper-label-fg-error);
+    --ds-stepper-description-fg: var(--stepper-description-fg-error);
+  }
+
+  .ds-stepper__marker {
+    align-items: center;
+    background: var(--ds-stepper-marker-bg);
+    border: var(--stepper-marker-border-width) solid
+      var(--ds-stepper-marker-border);
+    border-radius: var(--radius-full);
+    box-sizing: border-box;
+    color: var(--ds-stepper-marker-fg);
+    display: inline-flex;
+    font-family: var(--stepper-marker-font);
+    font-size: var(--stepper-marker-font-size);
+    font-variant-numeric: tabular-nums;
+    grid-column: 1;
+    grid-row: 1;
+    height: var(--stepper-marker-size);
+    justify-content: center;
+    line-height: 1;
+    transition:
+      background-color var(--stepper-duration) var(--stepper-ease),
+      border-color var(--stepper-duration) var(--stepper-ease),
+      color var(--stepper-duration) var(--stepper-ease);
+    width: var(--stepper-marker-size);
+  }
+
+  .ds-stepper__item::after {
+    background: var(--ds-stepper-connector);
+    content: "";
+    transition: background-color var(--stepper-duration) var(--stepper-ease);
+  }
+
+  .ds-stepper__item:last-child::after {
+    display: none;
+  }
+
+  .ds-stepper__body {
+    display: grid;
+    gap: var(--space-0-5);
+    grid-column: 1 / -1;
+    grid-row: 2;
+    min-width: 0;
+    padding-block-start: var(--stepper-gap);
+  }
+
+  .ds-stepper__label {
+    color: var(--ds-stepper-label-fg);
+    font-size: var(--type-label-size);
+    font-weight: var(--type-label-weight);
+    letter-spacing: var(--type-label-tracking);
+    line-height: var(--type-label-leading);
+    overflow-wrap: anywhere;
+    transition: color var(--stepper-duration) var(--stepper-ease);
+  }
+
+  .ds-stepper__item[data-state="current"] .ds-stepper__label {
+    font-weight: var(--weight-semibold);
+  }
+
+  .ds-stepper__description {
+    color: var(--ds-stepper-description-fg);
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    overflow-wrap: anywhere;
+    transition: color var(--stepper-duration) var(--stepper-ease);
+  }
+
+  /* Horizontal: the connector runs along the marker's row to the next step. */
+  .ds-stepper:not(.ds-stepper--vertical) .ds-stepper__item::after {
+    align-self: center;
+    block-size: var(--stepper-connector-size);
+    grid-column: 2;
+    grid-row: 1;
+    margin-inline: var(--stepper-connector-gap);
+  }
+
+  .ds-stepper:not(.ds-stepper--vertical) .ds-stepper__body {
+    padding-inline-end: var(--stepper-connector-gap);
+  }
+
+  .ds-stepper--vertical {
+    grid-auto-columns: auto;
+    grid-auto-flow: row;
+  }
+
+  .ds-stepper--vertical .ds-stepper__item {
+    column-gap: var(--stepper-gap);
+    grid-template-rows: auto 1fr;
+  }
+
+  /* Vertical: the body sits beside the marker; the connector drops below it
+     and stretches with the body. */
+  .ds-stepper--vertical .ds-stepper__body {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    padding-block-end: var(--stepper-step-gap);
+    padding-block-start: calc(
+      (var(--stepper-marker-size) - var(--type-label-leading)) / 2
+    );
+  }
+
+  .ds-stepper--vertical .ds-stepper__item:last-child .ds-stepper__body {
+    padding-block-end: 0;
+  }
+
+  .ds-stepper--vertical .ds-stepper__item::after {
+    grid-column: 1;
+    grid-row: 2;
+    inline-size: var(--stepper-connector-size);
+    justify-self: center;
+    margin-block: var(--stepper-connector-gap);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-stepper__marker,
+    .ds-stepper__item::after,
+    .ds-stepper__label,
+    .ds-stepper__description {
+      transition: none;
+    }
+  }
+}