@db-vincent/components 0.0.0-stage → 0.1.0

package/src/styles/toast.css

@@ -0,0 +1,207 @@
+@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;
+  }
+
+  .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);
+  }
+
+  .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 {
+    animation: ds-toast-in var(--duration-base) var(--ease-standard);
+    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-base) var(--ease-spring),
+      opacity var(--duration-base) var(--ease-standard);
+    z-index: calc(100 - var(--toast-index, 0));
+  }
+
+  .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;
+  }
+
+  .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-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ds-toast-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes ds-toast-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-toast-region .ds-toast,
+    .ds-toast-region .ds-toast[data-toast-leaving],
+    .ds-toast--loading .ds-toast__icon {
+      animation: none;
+      transition: none;
+    }
+  }
+}

package/src/styles/topbar.css

@@ -0,0 +1,30 @@
+@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.