@24vlh/vds 0.1.2 → 0.1.3

package/dist/components/toasts.css

@@ -1,421 +1,421 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Toast System
- *
- *  Responsibilities:
- *    - Provide floating and inline toast components with full stacking logic
- *    - Define neutral + semantic variants (info, success, warning, danger, error)
- *    - Implement icon slot, title/message layout, close button, and timed bar
- *    - Support in/out animation states, compact mode, and mobile reflow
- *    - Ensure accessibility: aria-live roles, focus-visible, reduced-motion
- *
- *  System Notes:
- *    - Token-driven: spacing, radii, borders, surfaces, shadows, motion, text
- *    - Pure CSS; JS only toggles lifecycle states (in, out, exiting)
- *    - Motion system honours prefers-reduced-motion
- *    - Semantic colours derive from feedback.css and theme tokens
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. TOAST TOKEN DEFINITIONS (component-level)
---------------------------------------------------------- */
-
-[data-vds-toast],
-.vds-toast {
-    --toast-duration: 5000ms;
-    --toast-feedback-padding-md: var(--space-4);
-}
-
-/* ---------------------------------------------------------
-   2. STACK CONTAINERS (FLOATING)
-   Usage:
-     <div class="toast-stack toast-stack--top-right">
-       <div class="toast toast--success">...</div>
-     </div>
---------------------------------------------------------- */
-
-.toast-stack {
-    position: fixed;
-    z-index: var(--z-toast);
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-    pointer-events: none;
-    align-items: stretch;
-    width: 20rem;
-    max-width: 100%;
-}
-
-.toast-stack .toast {
-    width: 100%;
-}
-
-.toast-stack--top-right {
-    top: var(--space-4);
-    right: var(--space-4);
-    align-items: flex-end;
-}
-
-.toast-stack--top-left {
-    top: var(--space-4);
-    left: var(--space-4);
-    align-items: flex-start;
-}
-
-.toast-stack--bottom-right {
-    bottom: var(--space-4);
-    right: var(--space-4);
-    align-items: flex-end;
-}
-
-.toast-stack--bottom-left {
-    bottom: var(--space-4);
-    left: var(--space-4);
-    align-items: flex-start;
-}
-
-.toast-stack--top-center {
-    top: var(--space-4);
-    left: 50%;
-    transform: translateX(-50%);
-    align-items: center;
-}
-
-.toast-stack--bottom-center {
-    bottom: var(--space-4);
-    left: 50%;
-    transform: translateX(-50%);
-    align-items: center;
-}
-
-@media (max-width: 640px) {
-    .toast-stack {
-        left: var(--space-2);
-        right: var(--space-2);
-        max-width: none;
-    }
-
-    .toast-stack--top-right,
-    .toast-stack--top-left,
-    .toast-stack--top-center {
-        top: auto;
-        bottom: var(--space-2);
-        transform: none;
-        align-items: stretch;
-    }
-
-    .toast-stack--bottom-right,
-    .toast-stack--bottom-left,
-    .toast-stack--bottom-center {
-        bottom: var(--space-2);
-        transform: none;
-        align-items: stretch;
-    }
-}
-
-/* ---------------------------------------------------------
-   3. BASE TOAST
-   Pattern:
-     <div class="toast toast--info" role="status" aria-live="polite">
-       <div class="toast__icon">…</div>
-       <div class="toast__body">
-         <div class="toast__title">Saved</div>
-         <div class="toast__message">Your changes were stored.</div>
-       </div>
-       <button class="toast__close" type="button" aria-label="Dismiss">×</button>
-       <div class="toast__progress"></div>
-     </div>
---------------------------------------------------------- */
-
-.toast {
-    pointer-events: auto;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto auto;
-    grid-template-areas:
-        "icon body close"
-        "progress progress progress";
-    grid-column-gap: var(--space-3);
-    -moz-column-gap: var(--space-3);
-         column-gap: var(--space-3);
-    grid-row-gap: var(--space-1);
-    row-gap: var(--space-1);
-
-    padding: var(--toast-feedback-padding-md);
-    border-radius: var(--radius-md);
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface);
-    color: var(--color-text);
-    box-shadow: var(--shadow-md);
-
-    font-size: var(--text-sm);
-    line-height: var(--line-height-normal);
-
-    opacity: 0;
-    transform: translateY(8px);
-    position: relative;
-}
-
-.toast__icon {
-    grid-area: icon;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 0;
-    width: var(--icon-sm);
-    height: var(--icon-sm);
-    flex-shrink: 0;
-}
-
-.toast__body {
-    grid-area: body;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    min-width: 0;
-}
-
-.toast__title {
-    font-weight: var(--font-weight-semibold);
-}
-
-.toast__message {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-.toast__close {
-    position: absolute;
-    top: var(--space-2);
-    right: var(--space-2);
-
-    -webkit-appearance: none;
-
-       -moz-appearance: none;
-
-            appearance: none;
-    border: none;
-    padding: var(--space-1);
-    background: transparent;
-    color: var(--color-text-soft);
-    cursor: pointer;
-    line-height: 0;
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.toast__close:hover {
-    color: var(--color-text);
-}
-
-.toast__close:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
-}
-
-.toast--in {
-    animation: toast-slide-in 180ms ease-out forwards;
-    animation: toast-slide-in 180ms var(--ease-out, ease-out) forwards;
-}
-
-.toast--out {
-    animation: toast-slide-out 150ms ease-in forwards;
-    animation: toast-slide-out 150ms var(--ease-in, ease-in) forwards;
-}
-
-.toast__progress {
-    grid-area: progress;
-    position: relative;
-    margin-top: var(--space-1);
-    height: 2px;
-    border-radius: var(--radius-full);
-    background-color: rgba(0, 0, 0, 0.08);
-    overflow: hidden;
-}
-
-.toast__progress::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform-origin: left center;
-    transform: scaleX(1);
-    background-color: currentColor;
-    animation: toast-progress var(--toast-duration) linear forwards;
-}
-
-.toast--compact {
-    grid-template-rows: auto;
-    grid-template-areas: "icon body close";
-}
-
-.toast--compact .toast__message {
-    font-size: var(--text-sm);
-    color: inherit;
-}
-
-.toast--compact .toast__title {
-    display: none;
-}
-
-.toast--compact .toast__progress {
-    display: none;
-}
-
-/* ---------------------------------------------------------
-   4. INLINE VARIANT (NON-FLOATING)
-   Usage:
-     <div class="toast toast--inline toast--warning">...</div>
---------------------------------------------------------- */
-
-.toast--inline {
-    position: static;
-    box-shadow: none;
-    width: 100%;
-    margin-top: var(--space-2);
-    margin-bottom: var(--space-2);
-}
-
-.toast--inline .toast__progress {
-    display: none;
-}
-
-/* ---------------------------------------------------------
-   5. SEMANTIC VARIANTS
---------------------------------------------------------- */
-
-.toast--neutral {
-    border-color: var(--color-muted-border);
-    background-color: var(--color-muted-bg);
-    color: var(--color-text);
-}
-
-.toast--info {
-    --toast-bg: var(--semantic-info-bg-strong, var(--color-info-soft));
-    --toast-border: var(--semantic-info-border-strong, var(--color-info));
-    --toast-text: var(--semantic-info-text-strong, var(--color-info-strong));
-}
-
-.toast--success {
-    --toast-bg: var(--semantic-success-bg-strong, var(--color-success-soft));
-    --toast-border: var(--semantic-success-border-strong, var(--color-success));
-    --toast-text: var(--semantic-success-text-strong, var(--color-success-strong));
-}
-
-.toast--warning {
-    --toast-bg: var(--semantic-warning-bg-strong, var(--color-warning-soft));
-    --toast-border: var(--semantic-warning-border-strong, var(--color-warning));
-    --toast-text: var(--semantic-warning-text-strong, var(--color-warning-strong));
-}
-
-.toast--danger,
-.toast--error {
-    --toast-bg: var(--semantic-error-bg-strong, var(--color-danger-soft));
-    --toast-border: var(--semantic-error-border-strong, var(--color-danger));
-    --toast-text: var(--semantic-error-text-strong, var(--color-danger-strong));
-}
-
-.toast--info,
-.toast--success,
-.toast--warning,
-.toast--danger,
-.toast--error {
-    background-color: var(--toast-bg);
-    color: var(--toast-text);
-    border-left: var(--border-width-strong) solid var(--toast-border);
-}
-
-.toast--info .toast__message,
-.toast--success .toast__message,
-.toast--warning .toast__message,
-.toast--danger .toast__message,
-.toast--error .toast__message,
-.toast--neutral .toast__message {
-    color: inherit;
-}
-
-/* ---------------------------------------------------------
-   6. ANIMATION STATES (ENTER / EXIT)
---------------------------------------------------------- */
-
-.toast--exiting {
-    animation: toast-slide-out var(--transition-fast) var(--ease-in) forwards;
-}
-
-@keyframes toast-slide-in {
-    from {
-        opacity: 0;
-        transform: translateY(8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes toast-slide-out {
-    from {
-        opacity: 1;
-        transform: translateY(0);
-    }
-    to {
-        opacity: 0;
-        transform: translateY(6px);
-    }
-}
-
-@keyframes toast-progress {
-    from {
-        transform: scaleX(1);
-    }
-    to {
-        transform: scaleX(0);
-    }
-}
-
-@keyframes toast-slide-in {
-    from {
-        opacity: 0;
-        transform: translateY(8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes toast-slide-out {
-    from {
-        opacity: 1;
-        transform: translateY(0);
-    }
-    to {
-        opacity: 0;
-        transform: translateY(6px);
-    }
-}
-
-/* ---------------------------------------------------------
-   7. REDUCED MOTION FALLBACKS
---------------------------------------------------------- */
-
-@media (prefers-reduced-motion: reduce) {
-    .toast {
-        animation: none;
-        opacity: 1;
-        transform: none;
-        transition: none;
-    }
-
-    .toast--exiting {
-        animation: none;
-        opacity: 0;
-    }
-
-    .toast__progress::before {
-        animation-duration: var(--motion-none);
-    }
-}
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Toast System
+ *
+ *  Responsibilities:
+ *    - Provide floating and inline toast components with full stacking logic
+ *    - Define neutral + semantic variants (info, success, warning, danger, error)
+ *    - Implement icon slot, title/message layout, close button, and timed bar
+ *    - Support in/out animation states, compact mode, and mobile reflow
+ *    - Ensure accessibility: aria-live roles, focus-visible, reduced-motion
+ *
+ *  System Notes:
+ *    - Token-driven: spacing, radii, borders, surfaces, shadows, motion, text
+ *    - Pure CSS; JS only toggles lifecycle states (in, out, exiting)
+ *    - Motion system honours prefers-reduced-motion
+ *    - Semantic colours derive from feedback.css and theme tokens
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. TOAST TOKEN DEFINITIONS (component-level)
+--------------------------------------------------------- */
+
+[data-vds-toast],
+.vds-toast {
+    --toast-duration: 5000ms;
+    --toast-feedback-padding-md: var(--space-4);
+}
+
+/* ---------------------------------------------------------
+   2. STACK CONTAINERS (FLOATING)
+   Usage:
+     <div class="toast-stack toast-stack--top-right">
+       <div class="toast toast--success">...</div>
+     </div>
+--------------------------------------------------------- */
+
+.toast-stack {
+    position: fixed;
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    pointer-events: none;
+    align-items: stretch;
+    width: 20rem;
+    max-width: 100%;
+}
+
+.toast-stack .toast {
+    width: 100%;
+}
+
+.toast-stack--top-right {
+    top: var(--space-4);
+    right: var(--space-4);
+    align-items: flex-end;
+}
+
+.toast-stack--top-left {
+    top: var(--space-4);
+    left: var(--space-4);
+    align-items: flex-start;
+}
+
+.toast-stack--bottom-right {
+    bottom: var(--space-4);
+    right: var(--space-4);
+    align-items: flex-end;
+}
+
+.toast-stack--bottom-left {
+    bottom: var(--space-4);
+    left: var(--space-4);
+    align-items: flex-start;
+}
+
+.toast-stack--top-center {
+    top: var(--space-4);
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+}
+
+.toast-stack--bottom-center {
+    bottom: var(--space-4);
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+}
+
+@media (max-width: 640px) {
+    .toast-stack {
+        left: var(--space-2);
+        right: var(--space-2);
+        max-width: none;
+    }
+
+    .toast-stack--top-right,
+    .toast-stack--top-left,
+    .toast-stack--top-center {
+        top: auto;
+        bottom: var(--space-2);
+        transform: none;
+        align-items: stretch;
+    }
+
+    .toast-stack--bottom-right,
+    .toast-stack--bottom-left,
+    .toast-stack--bottom-center {
+        bottom: var(--space-2);
+        transform: none;
+        align-items: stretch;
+    }
+}
+
+/* ---------------------------------------------------------
+   3. BASE TOAST
+   Pattern:
+     <div class="toast toast--info" role="status" aria-live="polite">
+       <div class="toast__icon">…</div>
+       <div class="toast__body">
+         <div class="toast__title">Saved</div>
+         <div class="toast__message">Your changes were stored.</div>
+       </div>
+       <button class="toast__close" type="button" aria-label="Dismiss">×</button>
+       <div class="toast__progress"></div>
+     </div>
+--------------------------------------------------------- */
+
+.toast {
+    pointer-events: auto;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+        "icon body close"
+        "progress progress progress";
+    grid-column-gap: var(--space-3);
+    -moz-column-gap: var(--space-3);
+         column-gap: var(--space-3);
+    grid-row-gap: var(--space-1);
+    row-gap: var(--space-1);
+
+    padding: var(--toast-feedback-padding-md);
+    border-radius: var(--radius-md);
+    border: var(--border-width) solid var(--color-border-subtle);
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    box-shadow: var(--shadow-md);
+
+    font-size: var(--text-sm);
+    line-height: var(--line-height-normal);
+
+    opacity: 0;
+    transform: translateY(8px);
+    position: relative;
+}
+
+.toast__icon {
+    grid-area: icon;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0;
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    flex-shrink: 0;
+}
+
+.toast__body {
+    grid-area: body;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+}
+
+.toast__title {
+    font-weight: var(--font-weight-semibold);
+}
+
+.toast__message {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.toast__close {
+    position: absolute;
+    top: var(--space-2);
+    right: var(--space-2);
+
+    -webkit-appearance: none;
+
+       -moz-appearance: none;
+
+            appearance: none;
+    border: none;
+    padding: var(--space-1);
+    background: transparent;
+    color: var(--color-text-soft);
+    cursor: pointer;
+    line-height: 0;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.toast__close:hover {
+    color: var(--color-text);
+}
+
+.toast__close:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+}
+
+.toast--in {
+    animation: toast-slide-in 180ms ease-out forwards;
+    animation: toast-slide-in 180ms var(--ease-out, ease-out) forwards;
+}
+
+.toast--out {
+    animation: toast-slide-out 150ms ease-in forwards;
+    animation: toast-slide-out 150ms var(--ease-in, ease-in) forwards;
+}
+
+.toast__progress {
+    grid-area: progress;
+    position: relative;
+    margin-top: var(--space-1);
+    height: 2px;
+    border-radius: var(--radius-full);
+    background-color: rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+}
+
+.toast__progress::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform-origin: left center;
+    transform: scaleX(1);
+    background-color: currentColor;
+    animation: toast-progress var(--toast-duration) linear forwards;
+}
+
+.toast--compact {
+    grid-template-rows: auto;
+    grid-template-areas: "icon body close";
+}
+
+.toast--compact .toast__message {
+    font-size: var(--text-sm);
+    color: inherit;
+}
+
+.toast--compact .toast__title {
+    display: none;
+}
+
+.toast--compact .toast__progress {
+    display: none;
+}
+
+/* ---------------------------------------------------------
+   4. INLINE VARIANT (NON-FLOATING)
+   Usage:
+     <div class="toast toast--inline toast--warning">...</div>
+--------------------------------------------------------- */
+
+.toast--inline {
+    position: static;
+    box-shadow: none;
+    width: 100%;
+    margin-top: var(--space-2);
+    margin-bottom: var(--space-2);
+}
+
+.toast--inline .toast__progress {
+    display: none;
+}
+
+/* ---------------------------------------------------------
+   5. SEMANTIC VARIANTS
+--------------------------------------------------------- */
+
+.toast--neutral {
+    border-color: var(--color-muted-border);
+    background-color: var(--color-muted-bg);
+    color: var(--color-text);
+}
+
+.toast--info {
+    --toast-bg: var(--semantic-info-bg-strong, var(--color-info-soft));
+    --toast-border: var(--semantic-info-border-strong, var(--color-info));
+    --toast-text: var(--semantic-info-text-strong, var(--color-info-strong));
+}
+
+.toast--success {
+    --toast-bg: var(--semantic-success-bg-strong, var(--color-success-soft));
+    --toast-border: var(--semantic-success-border-strong, var(--color-success));
+    --toast-text: var(--semantic-success-text-strong, var(--color-success-strong));
+}
+
+.toast--warning {
+    --toast-bg: var(--semantic-warning-bg-strong, var(--color-warning-soft));
+    --toast-border: var(--semantic-warning-border-strong, var(--color-warning));
+    --toast-text: var(--semantic-warning-text-strong, var(--color-warning-strong));
+}
+
+.toast--danger,
+.toast--error {
+    --toast-bg: var(--semantic-error-bg-strong, var(--color-danger-soft));
+    --toast-border: var(--semantic-error-border-strong, var(--color-danger));
+    --toast-text: var(--semantic-error-text-strong, var(--color-danger-strong));
+}
+
+.toast--info,
+.toast--success,
+.toast--warning,
+.toast--danger,
+.toast--error {
+    background-color: var(--toast-bg);
+    color: var(--toast-text);
+    border-left: var(--border-width-strong) solid var(--toast-border);
+}
+
+.toast--info .toast__message,
+.toast--success .toast__message,
+.toast--warning .toast__message,
+.toast--danger .toast__message,
+.toast--error .toast__message,
+.toast--neutral .toast__message {
+    color: inherit;
+}
+
+/* ---------------------------------------------------------
+   6. ANIMATION STATES (ENTER / EXIT)
+--------------------------------------------------------- */
+
+.toast--exiting {
+    animation: toast-slide-out var(--transition-fast) var(--ease-in) forwards;
+}
+
+@keyframes toast-slide-in {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes toast-slide-out {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+}
+
+@keyframes toast-progress {
+    from {
+        transform: scaleX(1);
+    }
+    to {
+        transform: scaleX(0);
+    }
+}
+
+@keyframes toast-slide-in {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes toast-slide-out {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+}
+
+/* ---------------------------------------------------------
+   7. REDUCED MOTION FALLBACKS
+--------------------------------------------------------- */
+
+@media (prefers-reduced-motion: reduce) {
+    .toast {
+        animation: none;
+        opacity: 1;
+        transform: none;
+        transition: none;
+    }
+
+    .toast--exiting {
+        animation: none;
+        opacity: 0;
+    }
+
+    .toast__progress::before {
+        animation-duration: var(--motion-none);
+    }
+}