@db-vincent/components 0.1.0 → 0.1.1

package/src/styles/avatar.css

@@ -0,0 +1,131 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-avatar {
+    --ds-avatar-size: var(--avatar-size-md);
+    --ds-avatar-font-size: var(--avatar-font-size-md);
+    --ds-avatar-status-size: var(--avatar-status-size-md);
+    --ds-avatar-radius: var(--avatar-radius-circle);
+
+    border-radius: var(--ds-avatar-radius);
+    display: inline-flex;
+    flex: none;
+    height: var(--ds-avatar-size);
+    position: relative;
+    vertical-align: middle;
+    width: var(--ds-avatar-size);
+  }
+
+  .ds-avatar--sm {
+    --ds-avatar-size: var(--avatar-size-sm);
+    --ds-avatar-font-size: var(--avatar-font-size-sm);
+    --ds-avatar-status-size: var(--avatar-status-size-sm);
+  }
+
+  .ds-avatar--lg {
+    --ds-avatar-size: var(--avatar-size-lg);
+    --ds-avatar-font-size: var(--avatar-font-size-lg);
+    --ds-avatar-status-size: var(--avatar-status-size-lg);
+  }
+
+  .ds-avatar--square {
+    --ds-avatar-radius: var(--avatar-radius-square);
+  }
+
+  .ds-avatar__face {
+    background: var(--avatar-bg);
+    border: 1px solid var(--avatar-border);
+    border-radius: inherit;
+    color: var(--avatar-fg);
+    display: grid;
+    inset: 0;
+    overflow: hidden;
+    place-items: center;
+    position: absolute;
+  }
+
+  .ds-avatar__fallback {
+    font-family: var(--avatar-font);
+    font-size: var(--ds-avatar-font-size);
+    font-weight: var(--avatar-font-weight);
+    letter-spacing: var(--type-label-tracking);
+    line-height: 1;
+    user-select: none;
+  }
+
+  .ds-avatar__count {
+    font-family: var(--avatar-count-font);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ds-avatar__img {
+    grid-area: 1 / 1;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .ds-avatar__fallback {
+    grid-area: 1 / 1;
+  }
+
+  .ds-avatar[data-failed] .ds-avatar__img {
+    display: none;
+  }
+
+  /* Status is never colour alone: busy carries a bar, away and offline are
+     hollow, and the text lives in the avatar's accessible name. */
+  .ds-avatar__status {
+    --ds-avatar-status-color: var(--avatar-status-online);
+
+    background: var(--ds-avatar-status-color);
+    border: 1px solid var(--ds-avatar-status-color);
+    border-radius: var(--avatar-radius-circle);
+    height: var(--ds-avatar-status-size);
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    outline: var(--avatar-ring-width) solid var(--avatar-ring);
+    position: absolute;
+    width: var(--ds-avatar-status-size);
+  }
+
+  .ds-avatar__status--away {
+    --ds-avatar-status-color: var(--avatar-status-away);
+
+    background: var(--avatar-status-mark);
+  }
+
+  .ds-avatar__status--busy {
+    --ds-avatar-status-color: var(--avatar-status-busy);
+  }
+
+  .ds-avatar__status--busy::after {
+    background: var(--avatar-status-mark);
+    content: "";
+    height: var(--avatar-ring-width);
+    inset-inline: 20%;
+    position: absolute;
+    top: calc(50% - var(--avatar-ring-width) / 2);
+  }
+
+  .ds-avatar__status--offline {
+    --ds-avatar-status-color: var(--avatar-status-offline);
+
+    background: var(--avatar-status-mark);
+  }
+
+  .ds-avatar-group {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .ds-avatar-group .ds-avatar {
+    outline: var(--avatar-ring-width) solid var(--avatar-ring);
+  }
+
+  .ds-avatar-group .ds-avatar + .ds-avatar {
+    margin-inline-start: calc(
+      var(--ds-avatar-size) * -1 * var(--avatar-overlap-ratio)
+    );
+  }
+}

package/src/styles/badge.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-badge {
     align-items: center;

package/src/styles/base.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer base {
   *,
   *::before,

package/src/styles/breadcrumbs.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-breadcrumbs {
     font-size: var(--breadcrumbs-font-size);

package/src/styles/button.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-button {
     align-items: center;
@@ -20,7 +22,8 @@
       background-color var(--duration-fast) var(--ease-standard),
       border-color var(--duration-fast) var(--ease-standard),
       color var(--duration-fast) var(--ease-standard),
-      box-shadow var(--duration-fast) var(--ease-standard);
+      box-shadow var(--duration-fast) var(--ease-standard),
+      transform var(--duration-fast) var(--ease-standard);
     user-select: none;
     white-space: nowrap;
   }
@@ -34,6 +37,10 @@
     background: var(--button-secondary-bg-active);
   }
 
+  .ds-button:active:not(:disabled, [aria-disabled="true"]) {
+    transform: scale(0.97);
+  }
+
   .ds-button:focus-visible {
     outline: var(--button-focus-width) solid var(--button-focus-color);
     outline-offset: var(--button-focus-offset);
@@ -137,7 +144,7 @@
   }
 
   .ds-button__spinner {
-    animation: ds-button-spin var(--duration-slower) linear infinite;
+    animation: ds-button-spin calc(var(--duration-slower) * 2) linear infinite;
     border: var(--spinner-stroke) solid currentColor;
     border-right-color: transparent;
     border-radius: var(--radius-full);
@@ -156,6 +163,10 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .ds-button:active:not(:disabled, [aria-disabled="true"]) {
+      transform: none;
+    }
+
     .ds-button__spinner {
       animation-duration: 1.6s;
     }

package/src/styles/card.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-card {
     background: var(--card-bg);
@@ -33,10 +35,12 @@
     text-decoration: none;
   }
 
-  a.ds-card:hover {
-    border-color: var(--card-hover-border);
-    box-shadow: var(--card-raised-shadow);
-    transform: translateY(-1px);
+  @media (hover: hover) and (pointer: fine) {
+    a.ds-card:hover {
+      border-color: var(--card-hover-border);
+      box-shadow: var(--card-raised-shadow);
+      transform: translateY(-1px);
+    }
   }
 
   a.ds-card:focus-visible {

package/src/styles/chip.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-chip {
     align-items: center;

package/src/styles/choice.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-choice {
     align-items: flex-start;
@@ -101,12 +103,16 @@
     border-radius: var(--radius-full);
     content: "";
     height: var(--radio-dot-size);
-    transform: scale(0);
-    transition: transform var(--duration-fast) var(--ease-standard);
+    opacity: 0;
+    transform: scale(0.5);
+    transition:
+      opacity var(--duration-fast) var(--ease-standard),
+      transform var(--duration-fast) var(--ease-standard);
     width: var(--radio-dot-size);
   }
 
   .ds-choice--radio .ds-choice__input:checked + .ds-choice__box::after {
+    opacity: 1;
     transform: scale(1);
   }
 

package/src/styles/code.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-code {
     margin: 0;

package/src/styles/empty.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-empty {
     align-items: center;

package/src/styles/example.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-example {
     display: grid;

package/src/styles/grid.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-grid {
     display: grid;

package/src/styles/input.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-field {
     display: grid;
@@ -58,7 +60,7 @@
     box-shadow:
       0 0 0 var(--input-focus-width) var(--input-bg),
       0 0 0 calc(var(--input-focus-width) * 2) var(--input-ring-focus);
-    outline: none;
+    outline: 2px solid transparent;
   }
 
   .ds-input--sm {
@@ -104,6 +106,14 @@
     resize: vertical;
   }
 
+  textarea.ds-input--resize-none {
+    resize: none;
+  }
+
+  textarea.ds-input--resize-both {
+    resize: both;
+  }
+
   .ds-field__hint,
   .ds-field__error {
     align-items: flex-start;

package/src/styles/menu.css

@@ -0,0 +1,151 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+/* The surface, animation and anchoring come from popover.css. */
+@layer components {
+  .ds-menu {
+    max-height: min(var(--menu-max-height), calc(100dvh - var(--space-8)));
+    min-width: var(--menu-min-width);
+    overflow-y: auto;
+    padding: var(--menu-padding);
+  }
+
+  /* Focus lands on the surface after a pointer open so no row looks chosen;
+     the rows draw the focus ring as soon as it moves. */
+  .ds-menu:focus-visible {
+    outline: 0;
+  }
+
+  /* Menus align to the trigger's start edge instead of centring on it. */
+  @supports (position-area: block-end) {
+    .ds-menu.ds-popover--bottom,
+    .ds-menu.ds-popover--top {
+      justify-self: normal;
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+    }
+
+    .ds-menu.ds-popover--bottom {
+      position-area: block-end span-inline-end;
+      transform-origin: top left;
+    }
+
+    .ds-menu.ds-popover--top {
+      position-area: block-start span-inline-end;
+      transform-origin: bottom left;
+    }
+
+    .ds-menu.ds-popover--start,
+    .ds-menu.ds-popover--end {
+      align-self: normal;
+      position-try-fallbacks:
+        flip-inline,
+        flip-block,
+        flip-block flip-inline;
+    }
+
+    .ds-menu.ds-popover--start {
+      position-area: inline-start span-block-end;
+      transform-origin: top right;
+    }
+
+    .ds-menu.ds-popover--end {
+      position-area: inline-end span-block-end;
+      transform-origin: top left;
+    }
+  }
+
+  .ds-menu__item {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--menu-item-radius);
+    color: var(--menu-item-fg);
+    cursor: pointer;
+    display: flex;
+    font-family: var(--font-body);
+    font-size: var(--menu-item-font-size);
+    gap: var(--menu-item-gap);
+    line-height: var(--menu-item-line-height);
+    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+    text-align: start;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  .ds-menu__item:focus {
+    background: var(--menu-item-bg-active);
+    outline: 0;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .ds-menu__item:hover {
+      background: var(--menu-item-bg-active);
+    }
+  }
+
+  .ds-menu__item:focus-visible {
+    outline: var(--menu-focus-width) solid var(--menu-focus-color);
+    outline-offset: var(--menu-focus-offset);
+  }
+
+  .ds-menu__item[aria-disabled="true"] {
+    color: var(--menu-item-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  .ds-menu__item--danger {
+    color: var(--menu-item-danger-fg);
+  }
+
+  .ds-menu__item--danger:focus {
+    background: var(--menu-item-danger-bg-active);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .ds-menu__item--danger:hover:not([aria-disabled="true"]) {
+      background: var(--menu-item-danger-bg-active);
+    }
+  }
+
+  .ds-menu__icon {
+    color: var(--menu-icon-fg);
+    display: inline-flex;
+    flex: none;
+  }
+
+  .ds-menu__item--danger .ds-menu__icon {
+    color: inherit;
+  }
+
+  .ds-menu__item[aria-disabled="true"] .ds-menu__icon {
+    color: inherit;
+  }
+
+  .ds-menu__indicator {
+    color: var(--menu-indicator-fg);
+    display: inline-flex;
+    flex: none;
+    height: var(--menu-indicator-size);
+    width: var(--menu-indicator-size);
+  }
+
+  .ds-menu__item[aria-checked="false"] .ds-menu__indicator > * {
+    visibility: hidden;
+  }
+
+  .ds-menu__label {
+    color: var(--menu-label-fg);
+    font-size: var(--menu-label-font-size);
+    font-weight: var(--weight-medium);
+    line-height: var(--leading-xs);
+    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  }
+
+  .ds-menu__separator {
+    border-block-start: 1px solid var(--menu-separator);
+    height: 0;
+    margin-block: var(--space-1);
+  }
+}

package/src/styles/modal.css

@@ -1,4 +1,12 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
+  /* showModal() makes the page inert but does not stop it scrolling. */
+  html:has(.ds-modal[open]) {
+    overflow: hidden;
+    scrollbar-gutter: stable;
+  }
+
   .ds-modal {
     background: var(--modal-bg);
     border: 1px solid var(--modal-border);
@@ -8,36 +16,159 @@
     margin: auto;
     max-height: calc(100dvh - var(--space-8));
     max-width: var(--modal-max-width-md);
+    opacity: 0;
     overflow: auto;
     padding: 0;
+    transform: scale(0.98);
+    transition:
+      opacity 120ms var(--ease-standard),
+      transform 120ms var(--ease-standard),
+      display 120ms allow-discrete,
+      overlay 120ms allow-discrete;
     width: calc(100% - var(--space-8));
   }
 
+  .ds-modal[open] {
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity 200ms var(--ease-enter),
+      transform 200ms var(--ease-enter),
+      display 200ms allow-discrete,
+      overlay 200ms allow-discrete;
+  }
+
   .ds-modal::backdrop {
     background: var(--modal-backdrop);
+    opacity: 0;
+    transition:
+      opacity 180ms var(--ease-standard),
+      display 180ms allow-discrete,
+      overlay 180ms allow-discrete;
+  }
+
+  .ds-modal[open]::backdrop {
+    opacity: 1;
   }
 
-  .ds-modal--sheet {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
+  /* Edge-anchored dialogs (drawer: start, end, bottom) slide in from the edge
+     they sit on. Enter is slower than exit. */
+  .ds-modal--drawer {
+    --ds-modal-from: translateY(100%);
+
+    opacity: 1;
+    transform: var(--ds-modal-from);
+    transition:
+      transform var(--modal-drawer-duration-exit) var(--ease-standard),
+      display var(--modal-drawer-duration-exit) allow-discrete,
+      overlay var(--modal-drawer-duration-exit) allow-discrete;
+  }
+
+  .ds-modal--drawer[open] {
+    transform: none;
+    transition:
+      transform var(--modal-drawer-duration-enter) var(--ease-drawer),
+      display var(--modal-drawer-duration-enter) allow-discrete,
+      overlay var(--modal-drawer-duration-enter) allow-discrete;
+  }
+
+  /* Header and footer stay put; the body scrolls. */
+  .ds-modal--drawer {
+    border-radius: 0;
+    margin-block: 0;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  /* Bottom: full-width sheet, top corners rounded, capped height so the page
+     stays visible behind it. */
+  .ds-modal--bottom {
+    border-start-end-radius: var(--modal-radius);
+    border-start-start-radius: var(--modal-radius);
     margin-block: auto 0;
     max-height: 90dvh;
     max-width: var(--modal-max-width-lg);
     width: 100%;
   }
 
-  @media (max-width: 699px) {
-    .ds-modal--sheet {
-      max-width: 100%;
-    }
+  /* Start and end: full height, pinned to one inline edge. */
+  .ds-modal--start,
+  .ds-modal--end {
+    height: 100dvh;
+    max-height: 100dvh;
+    width: min(var(--modal-drawer-width-md), calc(100% - var(--space-8)));
   }
 
-  .ds-modal[open] {
-    animation: ds-modal-in var(--duration-base) var(--ease-enter);
+  .ds-modal--start.ds-modal--sm,
+  .ds-modal--end.ds-modal--sm {
+    width: min(var(--modal-drawer-width-sm), calc(100% - var(--space-8)));
+  }
+
+  .ds-modal--start.ds-modal--lg,
+  .ds-modal--end.ds-modal--lg {
+    width: min(var(--modal-drawer-width-lg), calc(100% - var(--space-8)));
+  }
+
+  .ds-modal--drawer[open] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .ds-modal--drawer .ds-modal__header,
+  .ds-modal--drawer .ds-modal__footer {
+    flex: none;
+  }
+
+  .ds-modal--drawer .ds-modal__body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .ds-modal--start {
+    --ds-modal-from: translateX(-100%);
+
+    border-start-end-radius: var(--modal-radius);
+    border-end-end-radius: var(--modal-radius);
+    margin-inline: 0 auto;
+  }
+
+  .ds-modal--end {
+    --ds-modal-from: translateX(100%);
+
+    border-start-start-radius: var(--modal-radius);
+    border-end-start-radius: var(--modal-radius);
+    margin-inline: auto 0;
+  }
+
+  .ds-modal--start:dir(rtl) {
+    --ds-modal-from: translateX(100%);
+  }
+
+  .ds-modal--end:dir(rtl) {
+    --ds-modal-from: translateX(-100%);
+  }
+
+  @starting-style {
+    .ds-modal[open] {
+      opacity: 0;
+      transform: translateY(var(--space-2)) scale(0.97);
+    }
+
+    .ds-modal[open]::backdrop {
+      opacity: 0;
+    }
+
+    .ds-modal--drawer[open] {
+      opacity: 1;
+      transform: var(--ds-modal-from);
+    }
   }
 
-  .ds-modal--sheet[open] {
-    animation: ds-sheet-in var(--duration-base) var(--ease-enter);
+  @media (max-width: 699px) {
+    .ds-modal--bottom {
+      max-width: 100%;
+    }
   }
 
   .ds-modal--sm {
@@ -114,30 +245,41 @@
     padding: var(--space-4) var(--modal-padding);
   }
 
-  @keyframes ds-modal-in {
-    from {
-      opacity: 0;
-      transform: translateY(var(--space-2)) scale(0.985);
+  @media (prefers-reduced-motion: reduce) {
+    .ds-modal::backdrop {
+      transition-duration: 120ms;
     }
-    to {
-      opacity: 1;
+
+    .ds-modal,
+    .ds-modal[open] {
       transform: none;
+      transition-duration: 120ms;
     }
-  }
 
-  @keyframes ds-sheet-in {
-    from {
-      transform: translateY(100%);
+    .ds-modal--drawer {
+      opacity: 0;
+      transform: none;
+      transition:
+        opacity 120ms var(--ease-standard),
+        display 120ms allow-discrete,
+        overlay 120ms allow-discrete;
     }
-    to {
+
+    .ds-modal--drawer[open] {
+      opacity: 1;
       transform: none;
+      transition:
+        opacity 120ms var(--ease-standard),
+        display 120ms allow-discrete,
+        overlay 120ms allow-discrete;
     }
-  }
 
-  @media (prefers-reduced-motion: reduce) {
-    .ds-modal[open],
-    .ds-modal--sheet[open] {
-      animation: none;
+    @starting-style {
+      .ds-modal[open],
+      .ds-modal--drawer[open] {
+        opacity: 0;
+        transform: none;
+      }
     }
   }
 }