@db-vincent/components 0.0.0-stage → 0.1.1

package/src/styles/toast.css

@@ -0,0 +1,225 @@
+@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. */
+  .ds-toast {
+    align-items: center;
+    background: var(--toast-bg);
+    border: 1px solid var(--toast-border);
+    border-radius: var(--toast-radius);
+    box-shadow: var(--toast-shadow);
+    color: var(--toast-fg);
+    display: flex;
+    gap: var(--toast-gap);
+    max-width: min(var(--toast-width), calc(100vw - var(--space-8)));
+    min-width: 0;
+    padding: var(--toast-padding);
+    pointer-events: auto;
+    width: 100%;
+  }
+
+  .ds-toast__icon {
+    color: var(--toast-icon-fg);
+    display: inline-flex;
+    flex: none;
+  }
+
+  .ds-toast--info .ds-toast__icon {
+    color: var(--toast-info-icon);
+  }
+
+  .ds-toast--success .ds-toast__icon {
+    color: var(--toast-success-icon);
+  }
+
+  .ds-toast--warning .ds-toast__icon {
+    color: var(--toast-warning-icon);
+  }
+
+  .ds-toast--danger .ds-toast__icon {
+    color: var(--toast-danger-icon);
+  }
+
+  .ds-toast--loading .ds-toast__icon {
+    animation: ds-toast-spin calc(var(--duration-slower) * 2) linear infinite;
+    color: var(--toast-loading-icon);
+  }
+
+  .ds-toast__content {
+    display: grid;
+    flex: 1;
+    gap: var(--toast-body-gap);
+    min-width: 0;
+  }
+
+  .ds-toast__title {
+    color: var(--toast-fg);
+    font-size: var(--toast-title-size);
+    font-weight: var(--toast-title-weight);
+    line-height: var(--leading-sm);
+    margin: 0;
+  }
+
+  .ds-toast__body {
+    color: var(--toast-body-fg);
+    font-size: var(--toast-body-size);
+    line-height: var(--leading-sm);
+    margin: 0;
+  }
+
+  .ds-toast__actions {
+    align-items: center;
+    display: flex;
+    flex: none;
+    gap: var(--space-2);
+  }
+
+  .ds-toast__action {
+    align-items: center;
+    background: var(--toast-action-bg);
+    border: 1px solid var(--toast-action-border);
+    border-radius: var(--toast-action-radius);
+    color: var(--toast-action-fg);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-size: var(--toast-action-font-size);
+    font-weight: var(--toast-action-font-weight);
+    height: var(--toast-action-height);
+    justify-content: center;
+    padding-inline: var(--toast-action-padding-x);
+    text-decoration: none;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard);
+    white-space: nowrap;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .ds-toast__action:hover {
+      background: var(--toast-action-bg-hover);
+    }
+  }
+
+  .ds-toast__action:focus-visible {
+    outline: var(--toast-focus-width) solid var(--toast-focus-color);
+    outline-offset: var(--toast-focus-offset);
+  }
+
+  .ds-toast__close {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-sm);
+    color: var(--toast-close-fg);
+    cursor: pointer;
+    display: inline-flex;
+    flex: none;
+    height: var(--space-7);
+    justify-content: center;
+    padding: 0;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      color var(--duration-fast) var(--ease-standard);
+    width: var(--space-7);
+  }
+
+  @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 {
+    outline: var(--toast-focus-width) solid var(--toast-focus-color);
+    outline-offset: var(--toast-focus-offset);
+  }
+
+  .ds-toast-region {
+    bottom: var(--space-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-viewport-gap);
+    inset-inline-end: var(--space-4);
+    max-width: calc(100vw - var(--space-8));
+    pointer-events: none;
+    position: fixed;
+    width: min(var(--toast-width), calc(100vw - var(--space-8)));
+    z-index: var(--z-toast);
+  }
+
+  /* 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 {
+    bottom: 0;
+    inset-inline-end: 0;
+    position: absolute;
+    transform: translateY(
+        calc(var(--toast-index, 0) * var(--toast-stack-peek) * -1)
+      )
+      scale(calc(1 - var(--toast-index, 0) * var(--toast-stack-scale-step)));
+    transform-origin: bottom center;
+    transition:
+      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] {
+    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] {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(var(--space-3)) scale(0.98);
+    transition: opacity var(--duration-fast) var(--ease-exit);
+  }
+
+  @keyframes ds-toast-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .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;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-topbar {
+    background: var(--topbar-bg);
+    border-bottom: 1px solid var(--topbar-border);
+  }
+
+  .ds-topbar__inner {
+    align-items: center;
+    display: flex;
+    gap: var(--topbar-gap);
+    min-height: var(--topbar-height);
+    padding-inline: var(--topbar-padding-x);
+  }
+
+  .ds-topbar__start {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .ds-topbar__actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--topbar-gap);
+    margin-inline-start: auto;
+  }
+
+  .ds-topbar__start:empty + .ds-topbar__actions {
+    margin-inline-start: 0;
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.