@db-vincent/components 0.1.0 → 0.1.1

package/src/styles/switch.css

@@ -0,0 +1,143 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-switch {
+    --ds-switch-w: var(--switch-track-width-md);
+    --ds-switch-h: var(--switch-track-height-md);
+    align-items: flex-start;
+    cursor: pointer;
+    display: inline-flex;
+    gap: var(--switch-gap);
+    position: relative;
+  }
+
+  .ds-switch--sm {
+    --ds-switch-w: var(--switch-track-width-sm);
+    --ds-switch-h: var(--switch-track-height-sm);
+  }
+
+  .ds-switch__input {
+    height: var(--ds-switch-h);
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    width: var(--ds-switch-w);
+  }
+
+  .ds-switch__track {
+    align-items: center;
+    background: var(--switch-track-bg);
+    border-radius: var(--radius-full);
+    display: inline-flex;
+    flex: none;
+    height: var(--ds-switch-h);
+    padding: var(--switch-thumb-inset);
+    transition:
+      background-color var(--switch-duration) var(--switch-ease),
+      transform var(--duration-fast) var(--switch-ease);
+    width: var(--ds-switch-w);
+  }
+
+  .ds-switch__thumb {
+    background: var(--switch-thumb-bg);
+    border-radius: var(--radius-full);
+    height: calc(var(--ds-switch-h) - var(--switch-thumb-inset) * 2);
+    transition:
+      background-color var(--switch-duration) var(--switch-ease),
+      transform var(--switch-duration) var(--switch-ease);
+    width: calc(var(--ds-switch-h) - var(--switch-thumb-inset) * 2);
+  }
+
+  .ds-switch__input:checked + .ds-switch__track {
+    background: var(--switch-track-bg-checked);
+  }
+
+  .ds-switch__input:checked + .ds-switch__track .ds-switch__thumb {
+    background: var(--switch-thumb-bg-checked);
+    transform: translateX(calc(var(--ds-switch-w) - var(--ds-switch-h)));
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .ds-switch:hover .ds-switch__input:not(:disabled) + .ds-switch__track {
+      background: var(--switch-track-bg-hover);
+    }
+
+    .ds-switch:hover
+      .ds-switch__input:not(:disabled):checked
+      + .ds-switch__track {
+      background: var(--switch-track-bg-checked-hover);
+    }
+  }
+
+  .ds-switch:has(.ds-switch__input:not(:disabled)):active .ds-switch__track {
+    transform: scale(var(--switch-press-scale));
+  }
+
+  .ds-switch__input:focus-visible + .ds-switch__track {
+    outline: var(--switch-focus-width) solid var(--switch-focus-color);
+    outline-offset: var(--switch-focus-offset);
+  }
+
+  .ds-switch__input[aria-invalid="true"] + .ds-switch__track {
+    box-shadow: inset 0 0 0 1px var(--switch-track-border-invalid);
+  }
+
+  .ds-switch__input:disabled + .ds-switch__track {
+    background: var(--switch-track-bg-disabled);
+    box-shadow: inset 0 0 0 1px var(--switch-track-border-disabled);
+  }
+
+  .ds-switch__input:disabled + .ds-switch__track .ds-switch__thumb {
+    background: var(--switch-thumb-bg-disabled);
+  }
+
+  .ds-switch:has(.ds-switch__input:disabled) {
+    cursor: not-allowed;
+  }
+
+  .ds-switch__label {
+    color: var(--switch-label-fg);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    /* Centre the first line on the track. */
+    padding-block-start: calc((var(--ds-switch-h) - var(--leading-sm)) / 2);
+  }
+
+  .ds-switch:has(.ds-switch__input:disabled) .ds-switch__label {
+    color: var(--switch-label-fg-disabled);
+  }
+
+  .ds-switch__hint,
+  .ds-switch__error {
+    display: block;
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+    margin-block-start: var(--space-0-5);
+  }
+
+  .ds-switch__hint {
+    color: var(--switch-hint-fg);
+  }
+
+  .ds-switch__error {
+    align-items: flex-start;
+    color: var(--switch-error-fg);
+    display: flex;
+    font-weight: var(--weight-medium);
+    gap: var(--space-1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-switch__thumb {
+      transition-property: background-color;
+    }
+
+    .ds-switch__track {
+      transition-property: background-color;
+    }
+
+    .ds-switch:has(.ds-switch__input:not(:disabled)):active .ds-switch__track {
+      transform: none;
+    }
+  }
+}

package/src/styles/table.css

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

package/src/styles/tabs.css

@@ -0,0 +1,120 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-tabs {
+    display: grid;
+    width: 100%;
+  }
+
+  .ds-tabs__list {
+    border-block-end: 1px solid var(--tabs-list-border);
+    display: flex;
+    gap: var(--tabs-list-gap);
+    overflow-x: auto;
+    position: relative;
+    scrollbar-width: none;
+  }
+
+  .ds-tabs__tab {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--tabs-tab-radius);
+    color: var(--tabs-tab-fg);
+    cursor: pointer;
+    display: inline-flex;
+    flex: none;
+    font-family: var(--font-body);
+    font-size: var(--tabs-tab-font-size);
+    font-weight: var(--tabs-tab-font-weight);
+    height: var(--tabs-tab-height);
+    line-height: var(--leading-sm);
+    padding-inline: var(--tabs-tab-padding-x);
+    position: relative;
+    transition:
+      background-color var(--duration-fast) var(--tabs-ease),
+      color var(--duration-fast) var(--tabs-ease),
+      transform var(--duration-fast) var(--tabs-ease);
+    white-space: nowrap;
+  }
+
+  .ds-tabs__tab[aria-selected="true"] {
+    color: var(--tabs-tab-fg-selected);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .ds-tabs__tab:hover:not(:disabled):not([aria-selected="true"]) {
+      background: var(--tabs-tab-bg-hover);
+      color: var(--tabs-tab-fg-hover);
+    }
+  }
+
+  .ds-tabs__tab:active:not(:disabled) {
+    transform: scale(0.97);
+  }
+
+  .ds-tabs__tab:focus-visible {
+    outline: var(--tabs-focus-width) solid var(--tabs-focus-color);
+    outline-offset: var(--tabs-focus-offset);
+  }
+
+  .ds-tabs__tab:disabled {
+    color: var(--tabs-tab-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Without script the selected tab carries its own underline. */
+  .ds-tabs__list:not([data-indicator])
+    .ds-tabs__tab[aria-selected="true"]::after {
+    background: var(--tabs-indicator-bg);
+    content: "";
+    height: var(--tabs-indicator-height);
+    inset-block-end: 0;
+    inset-inline: 0;
+    position: absolute;
+  }
+
+  /*
+   * Script measures the selected tab and sets --ds-tabs-x (px) and
+   * --ds-tabs-scale (unitless) against the full scroll width (--ds-tabs-track).
+   */
+  .ds-tabs__indicator {
+    background: var(--tabs-indicator-bg);
+    height: var(--tabs-indicator-height);
+    inset-block-end: 0;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    transform: translateX(var(--ds-tabs-x, 0)) scaleX(var(--ds-tabs-scale, 0));
+    transform-origin: left;
+    width: var(--ds-tabs-track, 100%);
+  }
+
+  .ds-tabs__list[data-indicator="ready"] .ds-tabs__indicator {
+    transition: transform var(--tabs-duration) var(--tabs-ease);
+  }
+
+  .ds-tabs__panel {
+    padding-block-start: var(--tabs-panel-padding);
+  }
+
+  .ds-tabs__panel:focus-visible {
+    border-radius: var(--tabs-tab-radius);
+    outline: var(--tabs-focus-width) solid var(--tabs-focus-color);
+    outline-offset: var(--tabs-focus-width);
+  }
+
+  .ds-tabs__panel[hidden] {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-tabs__tab:active:not(:disabled) {
+      transform: none;
+    }
+
+    .ds-tabs__list[data-indicator="ready"] .ds-tabs__indicator {
+      transition: none;
+    }
+  }
+}

package/src/styles/theme-toggle.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-theme-toggle__sun,
   .ds-theme-toggle__moon {

package/src/styles/toast.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   /* A toast is a neutral, raised popover surface. The type lives in the icon;
      the card itself stays calm so a stack never reads as inline content. */
@@ -94,8 +96,10 @@
     white-space: nowrap;
   }
 
-  .ds-toast__action:hover {
-    background: var(--toast-action-bg-hover);
+  @media (hover: hover) and (pointer: fine) {
+    .ds-toast__action:hover {
+      background: var(--toast-action-bg-hover);
+    }
   }
 
   .ds-toast__action:focus-visible {
@@ -121,9 +125,11 @@
     width: var(--space-7);
   }
 
-  .ds-toast__close:hover {
-    background: var(--toast-close-bg-hover);
-    color: var(--toast-close-fg-hover);
+  @media (hover: hover) and (pointer: fine) {
+    .ds-toast__close:hover {
+      background: var(--toast-close-bg-hover);
+      color: var(--toast-close-fg-hover);
+    }
   }
 
   .ds-toast__close:focus-visible {
@@ -147,7 +153,6 @@
   /* Toast cards share one bottom-end anchor. Collapsed, older cards peek out
      behind the frontmost one; hover or keyboard focus expands the stack. */
   .ds-toast-region .ds-toast {
-    animation: ds-toast-in var(--duration-base) var(--ease-standard);
     bottom: 0;
     inset-inline-end: 0;
     position: absolute;
@@ -157,18 +162,30 @@
       scale(calc(1 - var(--toast-index, 0) * var(--toast-stack-scale-step)));
     transform-origin: bottom center;
     transition:
-      transform var(--duration-base) var(--ease-spring),
+      transform var(--duration-slow) var(--ease-spring),
       opacity var(--duration-base) var(--ease-standard);
     z-index: calc(100 - var(--toast-index, 0));
   }
 
+  @starting-style {
+    .ds-toast-region .ds-toast {
+      opacity: 0;
+      transform: translateY(100%) scale(0.98);
+    }
+  }
+
   .ds-toast-region:hover .ds-toast,
   .ds-toast-region:focus-within .ds-toast {
     transform: translateY(calc(-1 * var(--toast-offset, 0px))) scale(1);
   }
 
   .ds-toast-region .ds-toast[data-toast-leaving] {
-    animation: ds-toast-out var(--duration-fast) var(--ease-exit) forwards;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(100%) scale(0.98);
+    transition:
+      transform 150ms var(--ease-standard),
+      opacity 150ms var(--ease-standard);
   }
 
   .ds-toast-region .ds-toast[data-toast-limited] {
@@ -178,18 +195,6 @@
     transition: opacity var(--duration-fast) var(--ease-exit);
   }
 
-  @keyframes ds-toast-in {
-    from {
-      opacity: 0;
-    }
-  }
-
-  @keyframes ds-toast-out {
-    to {
-      opacity: 0;
-    }
-  }
-
   @keyframes ds-toast-spin {
     to {
       transform: rotate(360deg);
@@ -197,11 +202,24 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .ds-toast-region .ds-toast,
-    .ds-toast-region .ds-toast[data-toast-leaving],
+    .ds-toast-region .ds-toast {
+      transition: opacity 120ms var(--ease-standard);
+    }
+
+    @starting-style {
+      .ds-toast-region .ds-toast {
+        opacity: 0;
+        transform: none;
+      }
+    }
+
+    .ds-toast-region .ds-toast[data-toast-leaving] {
+      transform: none;
+      transition: opacity 120ms var(--ease-standard);
+    }
+
     .ds-toast--loading .ds-toast__icon {
       animation: none;
-      transition: none;
     }
   }
 }

package/src/styles/tooltip.css

@@ -0,0 +1,63 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+/* Positioning and the .ds-anchor wrapper live in popover.css. */
+@layer components {
+  .ds-tooltip {
+    --ds-anchor-gap: var(--tooltip-gap);
+
+    background: var(--tooltip-bg);
+    border: 0;
+    border-radius: var(--tooltip-radius);
+    color: var(--tooltip-fg);
+    font-size: var(--tooltip-font-size);
+    line-height: var(--tooltip-line-height);
+    max-width: min(var(--tooltip-max-width), calc(100vw - var(--space-8)));
+    opacity: 0;
+    overflow: visible;
+    padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
+    transform: scale(var(--tooltip-scale-from));
+    transition:
+      opacity var(--tooltip-duration) var(--tooltip-ease-exit),
+      transform var(--tooltip-duration) var(--tooltip-ease-exit),
+      display var(--tooltip-duration) allow-discrete,
+      overlay var(--tooltip-duration) allow-discrete;
+    width: max-content;
+  }
+
+  .ds-tooltip:popover-open {
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity var(--tooltip-duration) var(--tooltip-ease-enter),
+      transform var(--tooltip-duration) var(--tooltip-ease-enter),
+      display var(--tooltip-duration) allow-discrete,
+      overlay var(--tooltip-duration) allow-discrete;
+  }
+
+  /* Set by script when another tooltip is open or just closed: skip the
+     animation so scanning a toolbar feels immediate. */
+  .ds-tooltip[data-instant],
+  .ds-tooltip[data-instant]:popover-open {
+    transition-duration: 0s;
+  }
+
+  @starting-style {
+    .ds-tooltip:popover-open {
+      opacity: 0;
+      transform: scale(var(--tooltip-scale-from));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-tooltip,
+    .ds-tooltip:popover-open {
+      transform: none;
+    }
+
+    @starting-style {
+      .ds-tooltip:popover-open {
+        transform: none;
+      }
+    }
+  }
+}

package/src/styles/topbar.css

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