@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/toasts.css

@@ -1,421 +1 @@
-/************************************************************
- * 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);
-    }
-}
+.vds-toast,[data-vds-toast]{--toast-duration:5000ms;--toast-feedback-padding-md:var(--space-4)}.toast-stack{align-items:stretch;display:flex;flex-direction:column;gap:var(--space-2);max-width:100%;pointer-events:none;position:fixed;width:20rem;z-index:var(--z-toast)}.toast-stack .toast{width:100%}.toast-stack--top-right{align-items:flex-end;right:var(--space-4);top:var(--space-4)}.toast-stack--top-left{align-items:flex-start;left:var(--space-4);top:var(--space-4)}.toast-stack--bottom-right{align-items:flex-end;bottom:var(--space-4);right:var(--space-4)}.toast-stack--bottom-left{align-items:flex-start;bottom:var(--space-4);left:var(--space-4)}.toast-stack--top-center{top:var(--space-4)}.toast-stack--bottom-center,.toast-stack--top-center{align-items:center;left:50%;transform:translateX(-50%)}.toast-stack--bottom-center{bottom:var(--space-4)}@media (max-width:640px){.toast-stack{left:var(--space-2);max-width:none;right:var(--space-2)}.toast-stack--top-center,.toast-stack--top-left,.toast-stack--top-right{align-items:stretch;bottom:var(--space-2);top:auto;transform:none}.toast-stack--bottom-center,.toast-stack--bottom-left,.toast-stack--bottom-right{align-items:stretch;bottom:var(--space-2);transform:none}}.toast{grid-column-gap:var(--space-3);grid-row-gap:var(--space-1);background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--color-text);-moz-column-gap:var(--space-3);column-gap:var(--space-3);display:grid;font-size:var(--text-sm);grid-template-areas:"icon body close" "progress progress progress";grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;line-height:var(--line-height-normal);opacity:0;padding:var(--toast-feedback-padding-md);pointer-events:auto;position:relative;row-gap:var(--space-1);transform:translateY(8px)}.toast__icon{align-items:center;display:flex;flex-shrink:0;grid-area:icon;height:var(--icon-sm);justify-content:center;margin-top:0;width:var(--icon-sm)}.toast__body{display:flex;flex-direction:column;gap:var(--space-1);grid-area:body;min-width:0}.toast__title{font-weight:var(--font-weight-semibold)}.toast__message{color:var(--color-text-muted);font-size:var(--text-xs)}.toast__close{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:var(--color-text-soft);cursor:pointer;display:inline-flex;justify-content:center;line-height:0;padding:var(--space-1);position:absolute;right:var(--space-2);top:var(--space-2)}.toast__close:hover{color:var(--color-text)}.toast__close:focus-visible{box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color);outline:none}.toast--in{animation:toast-slide-in .18s ease-out forwards;animation:toast-slide-in .18s var(--ease-out,ease-out) forwards}.toast--out{animation:toast-slide-out .15s ease-in forwards;animation:toast-slide-out .15s var(--ease-in,ease-in) forwards}.toast__progress{background-color:rgba(0,0,0,.08);border-radius:var(--radius-full);grid-area:progress;height:2px;margin-top:var(--space-1);overflow:hidden;position:relative}.toast__progress:before{animation:toast-progress var(--toast-duration) linear forwards;background-color:currentColor;bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:scaleX(1);transform-origin:left center}.toast--compact{grid-template-areas:"icon body close";grid-template-rows:auto}.toast--compact .toast__message{color:inherit;font-size:var(--text-sm)}.toast--compact .toast__progress,.toast--compact .toast__title{display:none}.toast--inline{box-shadow:none;margin-bottom:var(--space-2);margin-top:var(--space-2);position:static;width:100%}.toast--inline .toast__progress{display:none}.toast--neutral{background-color:var(--color-muted-bg);border-color:var(--color-muted-border);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--danger,.toast--error,.toast--info,.toast--success,.toast--warning{background-color:var(--toast-bg);border-left:var(--border-width-strong) solid var(--toast-border);color:var(--toast-text)}.toast--danger .toast__message,.toast--error .toast__message,.toast--info .toast__message,.toast--neutral .toast__message,.toast--success .toast__message,.toast--warning .toast__message{color:inherit}.toast--exiting{animation:toast-slide-out var(--transition-fast) var(--ease-in) forwards}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes toast-slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-slide-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}@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)}}