@24vlh/vds 0.1.10 → 0.2.1

package/dist/components/toasts.css

@@ -22,7 +22,13 @@
 [data-vds-toast],
 .vds-toast {
     --toast-duration: 5000ms;
+    --toast-stack-width: 20rem;
+    --toast-stack-gap: var(--space-2);
     --toast-feedback-padding-md: var(--space-4);
+    --toast-padding: var(--toast-feedback-padding-md);
+    --toast-padding-compact: var(--space-3);
+    --toast-progress-track: color-mix(in srgb, currentColor 20%, transparent);
+    --toast-progress-fill: currentColor;
 }
 
 /* ---------------------------------------------------------
@@ -38,10 +44,10 @@
     z-index: var(--z-toast);
     display: flex;
     flex-direction: column;
-    gap: var(--space-2);
+    gap: var(--toast-stack-gap);
     pointer-events: none;
     align-items: stretch;
-    width: 20rem;
+    width: var(--toast-stack-width);
     max-width: 100%;
 }
 
@@ -127,6 +133,11 @@
 --------------------------------------------------------- */
 
 .toast {
+    --toast-bg: var(--color-surface);
+    --toast-border: var(--color-border-subtle);
+    --toast-accent: var(--toast-border);
+    --toast-text: var(--color-text);
+
     pointer-events: auto;
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -140,11 +151,11 @@
     grid-row-gap: var(--space-1);
     row-gap: var(--space-1);
 
-    padding: var(--toast-feedback-padding-md);
+    padding: var(--toast-padding);
     border-radius: var(--radius-md);
-    border: var(--border-width) solid var(--color-border-subtle);
-    background-color: var(--color-surface);
-    color: var(--color-text);
+    border: var(--border-width) solid var(--toast-border);
+    background-color: var(--toast-bg);
+    color: var(--toast-text);
     box-shadow: var(--shadow-md);
 
     font-size: var(--text-sm);
@@ -184,9 +195,9 @@
 }
 
 .toast__close {
-    position: absolute;
-    top: var(--space-2);
-    right: var(--space-2);
+    grid-area: close;
+    justify-self: end;
+    align-self: start;
 
     -webkit-appearance: none;
 
@@ -230,7 +241,7 @@
     margin-top: var(--space-1);
     height: 2px;
     border-radius: var(--radius-full);
-    background-color: rgba(0, 0, 0, 0.08);
+    background-color: var(--toast-progress-track);
     overflow: hidden;
 }
 
@@ -243,11 +254,12 @@
     left: 0;
     transform-origin: left center;
     transform: scaleX(1);
-    background-color: currentColor;
+    background-color: var(--toast-progress-fill);
     animation: toast-progress var(--toast-duration) linear forwards;
 }
 
 .toast--compact {
+    --toast-padding: var(--toast-padding-compact);
     grid-template-rows: auto;
     grid-template-areas: "icon body close";
 }
@@ -265,6 +277,87 @@
     display: none;
 }
 
+/* Optional layout helpers */
+
+.toast--no-progress {
+    grid-template-rows: auto;
+    grid-template-areas: "icon body close";
+}
+
+.toast--no-progress .toast__progress {
+    display: none;
+}
+
+.toast--no-icon {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+        "body close"
+        "progress progress";
+}
+
+.toast--no-icon .toast__icon {
+    display: none;
+}
+
+.toast--no-close {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+        "icon body"
+        "progress progress";
+}
+
+.toast--no-close .toast__close {
+    display: none;
+}
+
+.toast--no-icon.toast--no-close {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+        "body"
+        "progress";
+}
+
+.toast--no-progress.toast--no-icon {
+    grid-template-columns: 1fr auto;
+    grid-template-areas: "body close";
+}
+
+.toast--no-progress.toast--no-close {
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "icon body";
+}
+
+.toast--no-progress.toast--no-icon.toast--no-close {
+    grid-template-columns: 1fr;
+    grid-template-areas: "body";
+}
+
+.toast--compact.toast--no-icon {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto;
+    grid-template-areas: "body close";
+}
+
+.toast--compact.toast--no-close {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "icon body";
+}
+
+.toast--compact.toast--no-icon.toast--no-close {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: "body";
+}
+
+.toast__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-top: var(--space-2);
+    align-items: center;
+}
+
 /* ---------------------------------------------------------
    4. INLINE VARIANT (NON-FLOATING)
    Usage:
@@ -277,6 +370,9 @@
     width: 100%;
     margin-top: var(--space-2);
     margin-bottom: var(--space-2);
+    opacity: 1;
+    transform: none;
+    animation: none;
 }
 
 .toast--inline .toast__progress {
@@ -288,33 +384,33 @@
 --------------------------------------------------------- */
 
 .toast--neutral {
-    border-color: var(--color-muted-border);
-    background-color: var(--color-muted-bg);
-    color: var(--color-text);
+    --toast-bg: var(--color-muted-bg);
+    --toast-border: var(--color-muted-border);
+    --toast-text: 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-accent: 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-accent: 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-accent: 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-accent: var(--semantic-error-border-strong, var(--color-danger));
     --toast-text: var(--semantic-error-text-strong, var(--color-danger-strong));
 }
 
@@ -325,7 +421,7 @@
 .toast--error {
     background-color: var(--toast-bg);
     color: var(--toast-text);
-    border-left: var(--border-width-strong) solid var(--toast-border);
+    border-left: var(--border-width-strong) solid var(--toast-accent);
 }
 
 .toast--info .toast__message,
@@ -376,28 +472,6 @@
     }
 }
 
-@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
 --------------------------------------------------------- */

package/dist/components/toasts.min.css

@@ -1 +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)}}
+.vds-toast,[data-vds-toast]{--toast-duration:5000ms;--toast-stack-width:20rem;--toast-stack-gap:var(--space-2);--toast-feedback-padding-md:var(--space-4);--toast-padding:var(--toast-feedback-padding-md);--toast-padding-compact:var(--space-3);--toast-progress-track:color-mix(in srgb,currentColor 20%,transparent);--toast-progress-fill:currentColor}.toast-stack{align-items:stretch;display:flex;flex-direction:column;gap:var(--toast-stack-gap);max-width:100%;pointer-events:none;position:fixed;width:var(--toast-stack-width);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{--toast-bg:var(--color-surface);--toast-border:var(--color-border-subtle);--toast-accent:var(--toast-border);--toast-text:var(--color-text);grid-column-gap:var(--space-3);grid-row-gap:var(--space-1);background-color:var(--toast-bg);border:var(--border-width) solid var(--toast-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:var(--toast-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-padding);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;align-self:start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:var(--color-text-soft);cursor:pointer;display:inline-flex;grid-area:close;justify-content:center;justify-self:end;line-height:0;padding:var(--space-1)}.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:var(--toast-progress-track);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:var(--toast-progress-fill);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:scaleX(1);transform-origin:left center}.toast--compact{--toast-padding:var(--toast-padding-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--no-progress{grid-template-areas:"icon body close";grid-template-rows:auto}.toast--no-progress .toast__progress{display:none}.toast--no-icon{grid-template-areas:"body close" "progress progress";grid-template-columns:1fr auto}.toast--no-icon .toast__icon{display:none}.toast--no-close{grid-template-areas:"icon body" "progress progress";grid-template-columns:auto 1fr}.toast--no-close .toast__close{display:none}.toast--no-icon.toast--no-close{grid-template-areas:"body" "progress";grid-template-columns:1fr}.toast--no-progress.toast--no-icon{grid-template-areas:"body close";grid-template-columns:1fr auto}.toast--no-progress.toast--no-close{grid-template-areas:"icon body";grid-template-columns:auto 1fr}.toast--no-progress.toast--no-icon.toast--no-close{grid-template-areas:"body";grid-template-columns:1fr}.toast--compact.toast--no-icon{grid-template-areas:"body close";grid-template-columns:1fr auto;grid-template-rows:auto}.toast--compact.toast--no-close{grid-template-areas:"icon body";grid-template-columns:auto 1fr;grid-template-rows:auto}.toast--compact.toast--no-icon.toast--no-close{grid-template-areas:"body";grid-template-columns:1fr;grid-template-rows:auto}.toast__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}.toast--inline{animation:none;box-shadow:none;margin-bottom:var(--space-2);margin-top:var(--space-2);opacity:1;position:static;transform:none;width:100%}.toast--inline .toast__progress{display:none}.toast--neutral{--toast-bg:var(--color-muted-bg);--toast-border:var(--color-muted-border);--toast-text:var(--color-text)}.toast--info{--toast-bg:var(--semantic-info-bg-strong,var(--color-info-soft));--toast-accent: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-accent: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-accent: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-accent: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-accent);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-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)}}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@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/tooltips-popovers.css

@@ -31,16 +31,27 @@
 --------------------------------------------------------- */
 
 .tooltip {
+    --tooltip-offset: var(--space-2);
+    --tooltip-motion: 0.25rem;
+    --tooltip-max-width: 24rem;
+    --tooltip-arrow-size: var(--space-3);
+    --tooltip-arrow-inset: var(--space-4);
+    --tooltip-bg: var(--color-surface);
+    --tooltip-border: var(--color-border-subtle);
+    --tooltip-text: var(--color-text);
+
     position: absolute;
     z-index: var(--z-tooltip);
 
     max-width: 24rem;
+
+    max-width: var(--tooltip-max-width);
     padding: var(--space-2) var(--space-3);
 
-    background-color: var(--color-surface);
-    color: var(--color-text);
+    background-color: var(--tooltip-bg);
+    color: var(--tooltip-text);
     border-radius: var(--radius-sm);
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid var(--tooltip-border);
     box-shadow: var(--shadow-2);
 
     font-size: var(--text-xs);
@@ -48,7 +59,6 @@
     white-space: normal;
 
     opacity: 0;
-    transform: translateY(0.25rem);
     pointer-events: none;
 
     transition: opacity var(--transition-fast) var(--ease-out), transform var(--transition-fast) var(--ease-out);
@@ -57,8 +67,7 @@
 .tooltip--visible,
 .tooltip[data-state="open"] {
     opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
+    --tooltip-motion: 0rem;
 }
 
 /* ---------------------------------------------------------
@@ -68,45 +77,49 @@
 .tooltip--top {
     bottom: 100%;
     left: 50%;
-    transform: translate(-50%, -0.25rem);
-}
-
-.tooltip--top.tooltip--visible,
-.tooltip--top[data-state="open"] {
-    transform: translate(-50%, 0);
+    transform: translate(-50%, calc(-1 * var(--tooltip-offset) - var(--tooltip-motion)));
 }
 
 .tooltip--bottom {
     top: 100%;
     left: 50%;
-    transform: translate(-50%, 0.25rem);
-}
-
-.tooltip--bottom.tooltip--visible,
-.tooltip--bottom[data-state="open"] {
-    transform: translate(-50%, 0);
+    transform: translate(-50%, calc(var(--tooltip-offset) + var(--tooltip-motion)));
 }
 
 .tooltip--left {
     right: 100%;
     top: 50%;
-    transform: translate(-0.25rem, -50%);
-}
-
-.tooltip--left.tooltip--visible,
-.tooltip--left[data-state="open"] {
-    transform: translate(0, -50%);
+    transform: translate(calc(-1 * var(--tooltip-offset) - var(--tooltip-motion)), -50%);
 }
 
 .tooltip--right {
     left: 100%;
     top: 50%;
-    transform: translate(0.25rem, -50%);
+    transform: translate(calc(var(--tooltip-offset) + var(--tooltip-motion)), -50%);
+}
+
+.tooltip--top-left {
+    bottom: 100%;
+    left: 0;
+    transform: translate(0, calc(-1 * var(--tooltip-offset) - var(--tooltip-motion)));
+}
+
+.tooltip--top-right {
+    bottom: 100%;
+    right: 0;
+    transform: translate(0, calc(-1 * var(--tooltip-offset) - var(--tooltip-motion)));
+}
+
+.tooltip--bottom-left {
+    top: 100%;
+    left: 0;
+    transform: translate(0, calc(var(--tooltip-offset) + var(--tooltip-motion)));
 }
 
-.tooltip--right.tooltip--visible,
-.tooltip--right[data-state="open"] {
-    transform: translate(0, -50%);
+.tooltip--bottom-right {
+    top: 100%;
+    right: 0;
+    transform: translate(0, calc(var(--tooltip-offset) + var(--tooltip-motion)));
 }
 
 /* ---------------------------------------------------------
@@ -115,8 +128,8 @@
 
 .tooltip__arrow {
     position: absolute;
-    width: var(--space-3);
-    height: var(--space-3);
+    width: var(--tooltip-arrow-size);
+    height: var(--tooltip-arrow-size);
 
     background-color: inherit;
     border: inherit;
@@ -132,12 +145,36 @@
     transform: translate(-50%, -50%) rotate(45deg);
 }
 
+.tooltip--top-left .tooltip__arrow {
+    top: 100%;
+    left: var(--tooltip-arrow-inset);
+    transform: translate(0, -50%) rotate(45deg);
+}
+
+.tooltip--top-right .tooltip__arrow {
+    top: 100%;
+    right: var(--tooltip-arrow-inset);
+    transform: translate(0, -50%) rotate(45deg);
+}
+
 .tooltip--bottom .tooltip__arrow {
     bottom: 100%;
     left: 50%;
     transform: translate(-50%, 50%) rotate(45deg);
 }
 
+.tooltip--bottom-left .tooltip__arrow {
+    bottom: 100%;
+    left: var(--tooltip-arrow-inset);
+    transform: translate(0, 50%) rotate(45deg);
+}
+
+.tooltip--bottom-right .tooltip__arrow {
+    bottom: 100%;
+    right: var(--tooltip-arrow-inset);
+    transform: translate(0, 50%) rotate(45deg);
+}
+
 .tooltip--left .tooltip__arrow {
     left: 100%;
     top: 50%;
@@ -150,6 +187,15 @@
     transform: translate(-50%, -50%) rotate(45deg);
 }
 
+.tooltip--no-arrow .tooltip__arrow {
+    display: none;
+}
+
+.tooltip--interactive.tooltip--visible,
+.tooltip--interactive[data-state="open"] {
+    pointer-events: auto;
+}
+
 /* ---------------------------------------------------------
    5. TOOLTIP DENSITY
 --------------------------------------------------------- */
@@ -206,23 +252,35 @@
 --------------------------------------------------------- */
 
 .popover {
+    --popover-offset: var(--space-2);
+    --popover-motion: 0.25rem;
+    --popover-min-width: 12rem;
+    --popover-max-width: 28rem;
+    --popover-arrow-size: var(--space-3);
+    --popover-arrow-inset: var(--space-6);
+    --popover-bg: var(--color-surface);
+    --popover-border: var(--color-border-subtle);
+    --popover-text: var(--color-text);
+
     position: absolute;
     z-index: var(--z-tooltip);
 
     min-width: 12rem;
+
+    min-width: var(--popover-min-width);
     max-width: 28rem;
+    max-width: var(--popover-max-width);
 
-    background-color: var(--color-surface);
-    color: var(--color-text);
+    background-color: var(--popover-bg);
+    color: var(--popover-text);
     border-radius: var(--radius-md);
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid var(--popover-border);
     box-shadow: var(--shadow-3);
 
     display: flex;
     flex-direction: column;
 
     opacity: 0;
-    transform: translateY(0.25rem);
     pointer-events: none;
 
     transition: opacity var(--transition-fast) var(--ease-out), transform var(--transition-fast) var(--ease-out);
@@ -231,8 +289,8 @@
 .popover--open,
 .popover[data-state="open"] {
     opacity: 1;
-    transform: translateY(0);
     pointer-events: auto;
+    --popover-motion: 0rem;
 }
 
 /* ---------------------------------------------------------
@@ -242,89 +300,49 @@
 .popover--top {
     bottom: 100%;
     left: 50%;
-    transform: translate(-50%, -0.25rem);
-}
-
-.popover--top.popover--open,
-.popover--top[data-state="open"] {
-    transform: translate(-50%, 0);
+    transform: translate(-50%, calc(-1 * var(--popover-offset) - var(--popover-motion)));
 }
 
 .popover--bottom {
     top: 100%;
     left: 50%;
-    transform: translate(-50%, 0.25rem);
-}
-
-.popover--bottom.popover--open,
-.popover--bottom[data-state="open"] {
-    transform: translate(-50%, 0);
+    transform: translate(-50%, calc(var(--popover-offset) + var(--popover-motion)));
 }
 
 .popover--left {
     right: 100%;
     top: 50%;
-    transform: translate(-0.25rem, -50%);
-}
-
-.popover--left.popover--open,
-.popover--left[data-state="open"] {
-    transform: translate(0, -50%);
+    transform: translate(calc(-1 * var(--popover-offset) - var(--popover-motion)), -50%);
 }
 
 .popover--right {
     left: 100%;
     top: 50%;
-    transform: translate(0.25rem, -50%);
-}
-
-.popover--right.popover--open,
-.popover--right[data-state="open"] {
-    transform: translate(0, -50%);
+    transform: translate(calc(var(--popover-offset) + var(--popover-motion)), -50%);
 }
 
 .popover--bottom-right {
     top: 100%;
     right: 0;
-    transform: translateY(0.25rem);
-}
-
-.popover--bottom-right.popover--open,
-.popover--bottom-right[data-state="open"] {
-    transform: translateY(0);
+    transform: translate(0, calc(var(--popover-offset) + var(--popover-motion)));
 }
 
 .popover--bottom-left {
     top: 100%;
     left: 0;
-    transform: translateY(0.25rem);
-}
-
-.popover--bottom-left.popover--open,
-.popover--bottom-left[data-state="open"] {
-    transform: translateY(0);
+    transform: translate(0, calc(var(--popover-offset) + var(--popover-motion)));
 }
 
 .popover--top-right {
     bottom: 100%;
     right: 0;
-    transform: translateY(-0.25rem);
-}
-
-.popover--top-right.popover--open,
-.popover--top-right[data-state="open"] {
-    transform: translateY(0);
+    transform: translate(0, calc(-1 * var(--popover-offset) - var(--popover-motion)));
 }
 
 .popover--top-left {
     bottom: 100%;
     left: 0;
-    transform: translateY(-0.25rem);
-}
-
-.popover--top-left.popover--open,
-.popover--top-left[data-state="open"] {
-    transform: translateY(0);
+    transform: translate(0, calc(-1 * var(--popover-offset) - var(--popover-motion)));
 }
 
 /* ---------------------------------------------------------
@@ -333,8 +351,8 @@
 
 .popover__arrow {
     position: absolute;
-    width: var(--space-3);
-    height: var(--space-3);
+    width: var(--popover-arrow-size);
+    height: var(--popover-arrow-size);
 
     background-color: inherit;
     border: inherit;
@@ -344,20 +362,40 @@
     transform: rotate(45deg);
 }
 
-.popover--bottom .popover__arrow,
-.popover--bottom-right .popover__arrow,
+.popover--bottom .popover__arrow {
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, 50%) rotate(45deg);
+}
+
 .popover--bottom-left .popover__arrow {
     bottom: 100%;
-    left: var(--space-6);
-    transform: translateY(50%) rotate(45deg);
+    left: var(--popover-arrow-inset);
+    transform: translate(0, 50%) rotate(45deg);
+}
+
+.popover--bottom-right .popover__arrow {
+    bottom: 100%;
+    right: var(--popover-arrow-inset);
+    transform: translate(0, 50%) rotate(45deg);
+}
+
+.popover--top .popover__arrow {
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
 }
 
-.popover--top .popover__arrow,
-.popover--top-right .popover__arrow,
 .popover--top-left .popover__arrow {
     top: 100%;
-    left: var(--space-6);
-    transform: translateY(-50%) rotate(45deg);
+    left: var(--popover-arrow-inset);
+    transform: translate(0, -50%) rotate(45deg);
+}
+
+.popover--top-right .popover__arrow {
+    top: 100%;
+    right: var(--popover-arrow-inset);
+    transform: translate(0, -50%) rotate(45deg);
 }
 
 .popover--left .popover__arrow {
@@ -372,6 +410,10 @@
     transform: translate(-50%, -50%) rotate(45deg);
 }
 
+.popover--no-arrow .popover__arrow {
+    display: none;
+}
+
 /* ---------------------------------------------------------
    11. POPOVER LAYOUT
 --------------------------------------------------------- */