@24vlh/vds 0.1.0

package/dist/components/toasts.css

@@ -0,0 +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);
+    }
+}

package/dist/components/toasts.min.css

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