@24vlh/vds 0.1.0

package/dist/components/doc-block.min.css

@@ -0,0 +1 @@
+.vds-dock-block,[data-vds-dock-block]{--doc-block-border:var(--color-border-subtle);--doc-block-highlight-border-width:var(--border-width-strong);--doc-block-highlight-pad:var(--space-6)}.doc-block{border-bottom:1px solid var(--color-border-subtle);display:flex;flex-direction:column;gap:var(--space-12);padding-bottom:var(--space-14);padding-top:var(--space-14)}.doc-block:last-child{border-bottom:none}.doc-block--surface{background-color:var(--color-surface-subtle)}.doc-block--elevated,.doc-block--surface{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-12)}.doc-block--elevated{background-color:var(--color-surface);box-shadow:var(--shadow-1)}.doc-block--contrast{background-color:var(--color-bg-soft);border-left:var(--border-width-strong) solid var(--color-accent);border-radius:var(--radius-lg);padding:var(--space-14)}.doc-block__header{display:flex;flex-direction:column;gap:var(--space-3)}.doc-block__title{font-size:var(--text-xl)}.doc-block__subtitle,.doc-block__title{color:var(--color-text);font-weight:var(--font-weight-semibold);margin:0}.doc-block__subtitle{font-size:var(--text-md)}.doc-block__summary{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal)}.doc-block__section{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4);margin-top:var(--space-4)}.doc-block__subsection{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-2);margin-top:var(--space-2)}.doc-block__subsection--compact{gap:var(--space-1);margin-bottom:var(--space-1_5);margin-top:var(--space-1_5)}.doc-block__description{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal);margin:0}.doc-block__body{display:flex;flex-direction:column;gap:var(--space-6)}.doc-block__body--tight{gap:var(--space-3)}.doc-block__body--compact{gap:var(--space-2)}.doc-block__preview{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-8);position:relative}.doc-block__preview .card__body{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-3)}.doc-block__preview--transparent{background-color:transparent}.doc-block__preview--inline{align-items:center;display:inline-flex;gap:var(--space-4);padding:var(--space-4)}.doc-block__preview code:not(pre code){background:var(--code-inline-bg);border:1px solid var(--code-inline-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--text-sm);font-weight:500;padding:.04em .3em}.doc-block--split{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.doc-block--split-left{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:2fr 1fr}.doc-block--split-right{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 2fr}@media (max-width:1024px){.doc-block--split,.doc-block--split-left,.doc-block--split-right{grid-template-columns:1fr}}.doc-block__code{-webkit-overflow-scrolling:touch;background:var(--code-block-bg);border:1px solid var(--doc-block-border);border-radius:var(--radius-lg);color:var(--color-text);font-family:var(--font-family-mono),monospace;font-size:var(--text-sm);line-height:var(--line-height-relaxed);overflow-x:auto;overflow-y:visible;padding:var(--space-8);padding-top:calc(var(--space-12) + var(--space-4));position:relative}.doc-block__code code,.doc-block__code pre{background:none;border:none;padding:0}.doc-block__toolbar{align-items:center;display:flex;justify-content:space-between;left:0;padding-left:var(--space-4);padding-right:var(--space-4);pointer-events:none;position:absolute;right:0;top:var(--space-2)}.doc-block__lang{background-color:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:600;letter-spacing:.04em;padding:var(--space-1) var(--space-3);pointer-events:auto;text-transform:uppercase}.doc-block__actions{display:flex;gap:var(--space-2);pointer-events:auto}.doc-block__action{background-color:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-xxs);font-weight:600;line-height:1;padding:var(--space-1) var(--space-3);transition:background-color var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none}.doc-block__action:hover{background-color:var(--doc-block-action-hover-bg);border-color:var(--doc-block-action-hover-border);color:var(--doc-block-action-hover-text)}.doc-block__action--active{background-color:var(--color-accent-soft);border-color:var(--color-accent)}.doc-block--collapsed .doc-block__code{max-height:12rem;overflow:hidden}.doc-block--collapsed .doc-block__code:after{background:linear-gradient(to bottom,transparent 0,transparent 60%,var(--code-block-bg) 100%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.doc-block__meta{color:var(--color-text-muted);font-size:var(--text-xs);margin-top:var(--space-3)}.doc-block__note--danger{color:var(--color-danger-strong)}.doc-block__note--warning{color:var(--color-warning-strong)}.doc-block__note--info{color:var(--color-info-strong)}@media (max-width:768px){.doc-block{gap:var(--space-10);padding-bottom:var(--space-12);padding-top:var(--space-12)}.doc-block__title{font-size:var(--text-lg)}.doc-block__code,.doc-block__preview{padding:var(--space-6)}.doc-block__code{padding-top:calc(var(--space-10) + var(--space-2))}}.doc-block__code .token.keyword{color:var(--code-syntax-keyword)}.doc-block__code .token.string{color:var(--code-syntax-string)}.doc-block__code .token.number{color:var(--code-syntax-number)}.doc-block__code .token.operator{color:var(--code-syntax-operator)}.doc-block__code .token.comment{color:var(--code-syntax-comment);font-style:italic}.doc-block__code .token.constant{color:var(--code-syntax-constant)}.doc-block__code .token.func{color:var(--code-syntax-function)}.doc-block__code .token.var{color:var(--code-syntax-variable)}.doc-block__code--numbered{position:relative}.doc-block__code--numbered code{counter-reset:line;padding-left:calc(var(--space-2) + 2ch)}.doc-block__code--numbered code>*{counter-increment:line;padding-left:var(--space-2);position:relative}.doc-block__code--numbered code>:before{color:var(--color-text-soft,var(--color-text-muted));content:counter(line);font-size:var(--text-xxs,var(--text-xs));left:calc((var(--space-6) + 2ch)*-1);padding-right:var(--space-2);position:absolute;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(var(--space-6) + 2ch)}.doc-block--compact{gap:var(--space-6);padding-bottom:var(--space-8);padding-top:var(--space-8)}.doc-block--compact .doc-block__title{font-size:var(--text-lg)}.doc-block--compact .doc-block__summary{font-size:var(--text-xs)}.doc-block--compact .doc-block__code{font-size:var(--text-xs);line-height:var(--line-height-snug);padding:var(--space-5);padding-top:calc(var(--space-8) + var(--space-2))}.doc-block--diff{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}.doc-block--diff-added{background-color:var(--semantic-success-bg)}.doc-block--diff-removed{background-color:var(--semantic-danger-bg)}.doc-block--diff .doc-block__code{border-radius:var(--radius-lg);padding:var(--space-6)}.doc-block--diff-line-add{background-color:var(--semantic-success-bg);border-left:3px solid var(--semantic-success-border)}.doc-block--diff-line-remove{background-color:var(--semantic-danger-bg);border-left:3px solid var(--semantic-danger-border)}@media (max-width:1024px){.doc-block--diff{grid-template-columns:1fr}}.doc-block__code.is-copied{outline:2px solid var(--color-accent);outline-offset:2px;transition:outline var(--transition-fast)}.doc-block__eyebrow{color:var(--color-text-soft);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin-bottom:var(--space-2);text-transform:uppercase}.doc-block__pills{display:flex;gap:var(--space-2);margin-top:var(--space-2)}.doc-block__pill{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:var(--text-xxs);font-weight:var(--font-weight-semibold);line-height:var(--space-4);padding:0 var(--space-2)}.doc-block__stack-sm{display:flex;flex-direction:column;gap:var(--space-3)}.doc-block__stack-md{display:flex;flex-direction:column;gap:var(--space-6)}.doc-block__stack-lg{display:flex;flex-direction:column;gap:var(--space-10)}.doc-block__columns-2{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(2,1fr)}.doc-block__columns-3{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(3,1fr)}@media (max-width:1024px){.doc-block__columns-2,.doc-block__columns-3{grid-template-columns:1fr}}.doc-block__steps{counter-reset:step-counter;display:flex;flex-direction:column;gap:var(--space-6)}.doc-block__steps>li{counter-increment:step-counter;list-style:none;padding-left:var(--space-8);position:relative}.doc-block__steps>li:before{align-items:center;background:var(--color-accent-soft);border-radius:var(--radius-full);color:var(--color-on-accent);content:counter(step-counter);display:flex;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);height:var(--space-6);justify-content:center;left:0;position:absolute;top:.1em;width:var(--space-6)}.doc-block__highlight{background:var(--color-surface-subtle);border-left:var(--doc-block-highlight-border-width) solid var(--color-accent);border-radius:var(--radius-md);color:var(--color-text);margin-bottom:var(--space-3);margin-top:var(--space-3);padding:var(--doc-block-highlight-pad)}.doc-block__do-dont{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:1fr 1fr}.doc-block__do,.doc-block__dont{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-6)}.doc-block__do{background:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.doc-block__dont{background:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}@media (max-width:1024px){.doc-block__do-dont{grid-template-columns:1fr}}.doc-block--concept .doc-block__body{gap:var(--space-10)}.doc-block--pattern .doc-block__preview{border-left:var(--border-width-strong) solid var(--color-accent)}.doc-block--api .doc-block__body{gap:var(--space-8)}.doc-block--example{grid-gap:var(--space-12);display:grid;gap:var(--space-12);grid-template-columns:1fr 1fr}@media (max-width:1024px){.doc-block--example{grid-template-columns:1fr}}.doc-block__code--numbered-soft code{counter-reset:line;padding-left:calc(var(--space-2) + 1.5ch)}.doc-block__code--numbered-soft code>*{counter-increment:line;padding-left:var(--space-2);position:relative}.doc-block__code--numbered-soft code>:before{color:var(--color-text-soft);content:counter(line);font-size:var(--text-xxs);left:calc((var(--space-5) + 1.5ch)*-1);padding-right:var(--space-2);position:absolute;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:calc(var(--space-5) + 1.5ch)}.doc-block--expanded .doc-block__code{max-height:none}.doc-block--expanded .doc-block__code:after{display:none}.doc-block__code-toggle{color:var(--color-text-muted);cursor:pointer;font-size:var(--text-xs)}@media (prefers-reduced-motion:reduce){.doc-block__action,.doc-block__code.is-copied{transition:none!important}}

package/dist/components/feedback.css

@@ -0,0 +1,657 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Feedback System
+ *
+ *  Responsibilities:
+ *    - Define the full semantic feedback engine: alerts, banners, toasts,
+ *      inline form states, status labels, info/result blocks, and progress bars
+ *    - Provide variant mapping (info/success/warning/danger/error/neutral/accent)
+ *      via token-driven background, border, and text variables
+ *    - Support density modes, responsiveness, stacking logic, and animation
+ *    - Expose structural primitives and containers for feedback across app surfaces
+ *
+ *  System Notes:
+ *    - Pure CSS; animations (toast enter, striped progress, sheen) are CSS-based
+ *    - Fully token-driven: colour, spacing, radii, shadows, motion, semantic lanes
+ *    - Namespaced and internally consistent with VDS interaction & focus systems
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. FEEDBACK TOKEN DEFINITIONS
+--------------------------------------------------------- */
+
+[data-vds-feedback],
+.vds-feedback {
+    --feedback-padding-sm: var(--space-3);
+    --feedback-padding-md: var(--space-4);
+    --feedback-padding-lg: var(--space-6);
+
+    --feedback-gap: var(--space-3);
+
+    --feedback-info-block-border-width: var(--border-width-strong);
+}
+
+/* ---------------------------------------------------------
+   2. SEMANTIC FEEDBACK VARIABLE LAYER
+--------------------------------------------------------- */
+
+.feedback[data-variant="info"],
+[data-variant="info"] {
+    --feedback-bg: var(--semantic-info-bg-strong, var(--color-info-soft));
+    --feedback-border: var(--semantic-info-border-strong, var(--color-info));
+    --feedback-text: var(--semantic-info-text-strong, var(--color-info-strong));
+}
+
+.feedback[data-variant="success"],
+[data-variant="success"] {
+    --feedback-bg: var(--semantic-success-bg-strong, var(--color-success-soft));
+    --feedback-border: var(--semantic-success-border-strong, var(--color-success));
+    --feedback-text: var(--semantic-success-text-strong, var(--color-success-strong));
+}
+
+.feedback[data-variant="warning"],
+[data-variant="warning"] {
+    --feedback-bg: var(--semantic-warning-bg-strong, var(--color-warning-soft));
+    --feedback-border: var(--semantic-warning-border-strong, var(--color-warning));
+    --feedback-text: var(--semantic-warning-text-strong, var(--color-warning-strong));
+}
+
+[data-variant="danger"] {
+    --feedback-bg: var(--color-danger-soft);
+    --feedback-border: var(--color-danger);
+    --feedback-text: var(--color-danger-strong);
+}
+
+.feedback[data-variant="error"],
+[data-variant="error"] {
+    --feedback-bg: var(--semantic-error-bg-strong, var(--color-danger-soft));
+    --feedback-border: var(--semantic-error-border-strong, var(--color-danger));
+    --feedback-text: var(--semantic-error-text-strong, var(--color-danger-strong));
+}
+
+[data-variant="neutral"] {
+    --feedback-bg: var(--color-surface-subtle);
+    --feedback-border: var(--color-border-subtle);
+    --feedback-text: var(--color-text);
+}
+
+[data-variant="accent"] {
+    --feedback-bg: var(--color-accent-soft);
+    --feedback-border: var(--color-accent);
+    --feedback-text: var(--color-on-accent);
+}
+
+/* ---------------------------------------------------------
+   3. ALERTS
+--------------------------------------------------------- */
+
+.alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--feedback-gap);
+
+    padding: var(--feedback-padding-lg);
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+
+    background-color: var(--color-muted-bg);
+    color: var(--color-text);
+    font-size: var(--text-sm);
+}
+
+.alert[data-variant] {
+    background-color: var(--feedback-bg) !important;
+    border-color: var(--feedback-border) !important;
+    color: var(--feedback-text) !important;
+}
+
+.alert__icon {
+    width: var(--space-5);
+    height: var(--space-5);
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.alert__icon > * {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.alert__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.alert__title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+}
+
+.alert__message {
+    font-size: var(--text-sm);
+    opacity: 0.95;
+}
+
+.alert__close {
+    margin-left: auto;
+    font-size: var(--text-sm);
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.alert__close:hover {
+    opacity: 1;
+}
+
+.alert__close:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.alert--outline {
+    background-color: transparent !important;
+    border-color: var(--feedback-border) !important;
+    color: var(--feedback-border) !important;
+}
+
+/* ---------------------------------------------------------
+   4. BANNERS (SOLID + STICKY + CLOSEABLE)
+--------------------------------------------------------- */
+
+.banner {
+    width: 100%;
+    padding: var(--feedback-padding-md) 0;
+
+    border-bottom: var(--border-width) solid var(--color-border-subtle);
+    background-color: var(--color-surface-subtle);
+    color: var(--color-text);
+}
+
+.banner[data-variant] {
+    background-color: var(--feedback-bg) !important;
+    color: var(--feedback-text) !important;
+    border-color: var(--feedback-border) !important;
+}
+
+.banner__inner {
+    max-width: var(--layout-max-width);
+    margin: 0 auto;
+    padding: 0 var(--space-6);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--feedback-gap);
+}
+
+.banner__text {
+    font-size: var(--text-sm);
+}
+
+.banner__close {
+    font-size: var(--text-sm);
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.banner__close:hover {
+    opacity: 1;
+}
+
+.banner__close:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.banner--sticky {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-sticky);
+}
+
+/* ---------------------------------------------------------
+   5. TOASTS (ANIMATED + STACK)
+--------------------------------------------------------- */
+
+.feedback-toast {
+    display: flex;
+    align-items: center;
+    gap: var(--feedback-gap);
+
+    padding: var(--feedback-padding-md) var(--feedback-padding-lg);
+
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    border: var(--border-width) solid var(--color-border-subtle);
+    box-shadow: var(--shadow-2);
+
+    font-size: var(--text-sm);
+
+    opacity: 0;
+    transform: translateY(6px);
+    animation: toast-enter var(--transition-normal) forwards;
+}
+
+.feedback-toast[data-variant] {
+    background-color: var(--feedback-bg) !important;
+    border-color: var(--feedback-border) !important;
+    color: var(--feedback-text) !important;
+}
+
+.feedback-toast__icon {
+    flex-shrink: 0;
+    width: var(--space-5);
+    height: var(--space-5);
+    display: inline-block;
+    stroke: currentColor;
+    fill: none;
+}
+
+.feedback-toast__text {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.feedback-toast__close {
+    position: absolute;
+    top: var(--space-1);
+    right: var(--space-1);
+
+    width: var(--space-5);
+    height: var(--space-5);
+
+    cursor: pointer;
+    opacity: 0.6;
+    flex-shrink: 0;
+}
+
+.feedback-toast__close:hover {
+    opacity: 1;
+}
+
+.feedback-toast__close:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.feedback-toast__close::before {
+    content: "×";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: var(--text-md);
+    line-height: 1;
+    color: currentColor;
+}
+
+.feedback-toast-stack {
+    position: fixed;
+    top: var(--space-8);
+    right: var(--space-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    z-index: var(--z-toast);
+}
+
+.feedback-toast-stack.is-top-right {
+    top: var(--space-8);
+    right: var(--space-8);
+    bottom: auto;
+    left: auto;
+}
+
+.feedback-toast-stack.is-top-left {
+    top: var(--space-8);
+    left: var(--space-8);
+    bottom: auto;
+    right: auto;
+}
+
+.feedback-toast-stack.is-bottom-right {
+    bottom: var(--space-8);
+    right: var(--space-8);
+    top: auto;
+    left: auto;
+}
+
+.feedback-toast-stack.is-bottom-left {
+    bottom: var(--space-8);
+    left: var(--space-8);
+    top: auto;
+    right: auto;
+}
+
+@keyframes toast-enter {
+    from {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* ---------------------------------------------------------
+   6. INLINE FORM FEEDBACK
+--------------------------------------------------------- */
+
+.form-feedback {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.form-feedback--error {
+    color: var(--color-error);
+}
+
+.form-feedback--warning {
+    color: var(--color-warning);
+}
+
+.form-feedback--success {
+    color: var(--color-success);
+}
+
+.form-feedback--info {
+    color: var(--color-info);
+}
+
+.input-feedback--error {
+    border-color: var(--color-error) !important;
+}
+
+.input-feedback--warning {
+    border-color: var(--color-warning) !important;
+}
+
+.input-feedback--success {
+    border-color: var(--color-success) !important;
+}
+
+.input-feedback--info {
+    border-color: var(--color-info) !important;
+}
+
+/* ---------------------------------------------------------
+   7. STATUS LABELS (SOLID + OUTLINE + DOT MODE)
+--------------------------------------------------------- */
+
+.status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-xs);
+
+    border-radius: 999px;
+    white-space: nowrap;
+
+    background-color: var(--color-muted-bg);
+    color: var(--color-text);
+
+    align-self: flex-start;
+    width: -moz-max-content;
+    width: max-content;
+}
+
+.status[data-variant] {
+    background-color: var(--feedback-bg) !important;
+    color: var(--feedback-text) !important;
+}
+
+.status--outline {
+    background-color: transparent !important;
+    border: var(--border-width) solid var(--feedback-border) !important;
+    color: var(--feedback-border) !important;
+}
+
+.status--dot::before {
+    content: "";
+    width: var(--space-2);
+    height: var(--space-2);
+    border-radius: 999px;
+    background-color: var(--feedback-border);
+}
+
+/* ---------------------------------------------------------
+   8. PROGRESS (SOLID + STRIPED + ANIMATED)
+--------------------------------------------------------- */
+
+.progress {
+    width: 100%;
+    height: var(--space-2);
+    background-color: var(--color-muted-bg);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+}
+
+.progress__bar {
+    height: 100%;
+    width: 0;
+    background-color: var(--color-accent);
+    transition: width var(--transition-normal);
+}
+
+.progress--striped .progress__bar {
+    background-image: linear-gradient(
+            45deg,
+            var(--color-accent-soft) 25%,
+            var(--color-accent) 25%,
+            var(--color-accent) 50%,
+            var(--color-accent-soft) 50%,
+            var(--color-accent-soft) 75%,
+            var(--color-accent) 75%,
+            var(--color-accent)
+    );
+    background-size: 16px 16px;
+}
+
+.progress--striped.progress--striped__relaxed .progress__bar {
+    background-size: 24px 24px;
+}
+
+.progress--animated.progress--striped .progress__bar {
+    animation: progress-stripes 0.3s linear infinite;
+    will-change: background-position;
+}
+
+.progress--animated.progress--striped__relaxed .progress__bar {
+    animation: progress-stripes-relaxed 0.3s linear infinite;
+    will-change: background-position;
+}
+
+@keyframes progress-stripes {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 16px 0;
+    }
+}
+
+@keyframes progress-stripes-relaxed {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 24px 0;
+    }
+}
+
+.progress--animated:not(.progress--striped) .progress__bar {
+    position: relative;
+    overflow: hidden;
+}
+
+.progress--animated:not(.progress--striped) .progress__bar::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -40%;
+    width: 40%;
+    height: 100%;
+    background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0.4) 50%,
+            rgba(255, 255, 255, 0) 100%
+    );
+    animation: progress-sheen 1.2s linear infinite;
+    pointer-events: none;
+}
+
+@keyframes progress-sheen {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(250%);
+    }
+}
+
+/* ---------------------------------------------------------
+   9. INFO BLOCK (SEMANTIC SUPPORT)
+--------------------------------------------------------- */
+
+.info-block {
+    padding: var(--feedback-padding-md) var(--feedback-padding-lg);
+    border-left: var(--feedback-info-block-border-width) solid var(--color-accent);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-sm);
+
+    background-color: var(--color-surface-subtle);
+    color: var(--color-text);
+}
+
+.info-block[data-variant] {
+    background-color: var(--feedback-bg) !important;
+    border-color: var(--feedback-border) !important;
+    color: var(--feedback-text) !important;
+}
+
+/* ---------------------------------------------------------
+   10. RESULT BLOCK (SEMANTIC SUPPORT)
+--------------------------------------------------------- */
+
+.result {
+    padding: var(--feedback-padding-lg);
+    border-radius: var(--radius-md);
+    border: var(--border-width) solid var(--color-border-subtle);
+    text-align: center;
+
+    background-color: var(--color-surface);
+}
+
+.result__icon {
+    width: var(--space-12);
+    height: var(--space-12);
+    margin: 0 auto var(--space-4);
+    stroke: currentColor;
+    fill: none;
+}
+
+.result__title {
+    font-size: var(--text-xl);
+    font-weight: 600;
+}
+
+.result__subtitle {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    margin-top: var(--space-2);
+}
+
+.result__actions {
+    margin-top: var(--space-6);
+    display: flex;
+    justify-content: center;
+    gap: var(--space-4);
+}
+
+.result[data-variant] {
+    border-color: var(--feedback-border) !important;
+    color: var(--feedback-text) !important;
+}
+
+/* ---------------------------------------------------------
+   11. DENSITY MODES
+--------------------------------------------------------- */
+
+[data-density="compact"] .alert,
+[data-density="compact"] .feedback-toast,
+[data-density="compact"] .banner,
+[data-density="compact"] .result,
+[data-density="compact"] .info-block {
+    padding: var(--feedback-padding-md) !important;
+}
+
+[data-density="compact"] .status {
+    padding: 0 var(--space-2);
+}
+
+[data-density="compact"] .progress {
+    height: var(--space-1);
+}
+
+[data-density="compact"] .form-feedback {
+    gap: var(--space-1);
+}
+
+/* ---------------------------------------------------------
+   12. RESPONSIVE TIGHTENING
+--------------------------------------------------------- */
+
+@media (max-width: 640px) {
+    .alert,
+    .feedback-toast,
+    .banner,
+    .result,
+    .info-block {
+        padding: var(--feedback-padding-md);
+    }
+
+    .feedback-toast-stack {
+        right: var(--space-4);
+        top: var(--space-4);
+    }
+}
+
+/* ---------------------------------------------------------
+   13. STATIC TOAST (Documentation / In-Flow Demo Only)
+   Does not float to viewport. Does not autohide.
+--------------------------------------------------------- */
+
+.feedback-toast--static {
+    position: relative !important;
+    transform: none !important;
+    top: auto !important;
+    right: auto !important;
+    bottom: auto !important;
+    left: auto !important;
+    opacity: 1 !important;
+    animation: none !important;
+}
+
+.feedback-toast--static {
+    width: -moz-max-content;
+    width: max-content;
+    max-width: 100%;
+}

package/dist/components/feedback.min.css

@@ -0,0 +1 @@
+.vds-feedback,[data-vds-feedback]{--feedback-padding-sm:var(--space-3);--feedback-padding-md:var(--space-4);--feedback-padding-lg:var(--space-6);--feedback-gap:var(--space-3);--feedback-info-block-border-width:var(--border-width-strong)}.feedback[data-variant=info],[data-variant=info]{--feedback-bg:var(--semantic-info-bg-strong,var(--color-info-soft));--feedback-border:var(--semantic-info-border-strong,var(--color-info));--feedback-text:var(--semantic-info-text-strong,var(--color-info-strong))}.feedback[data-variant=success],[data-variant=success]{--feedback-bg:var(--semantic-success-bg-strong,var(--color-success-soft));--feedback-border:var(--semantic-success-border-strong,var(--color-success));--feedback-text:var(--semantic-success-text-strong,var(--color-success-strong))}.feedback[data-variant=warning],[data-variant=warning]{--feedback-bg:var(--semantic-warning-bg-strong,var(--color-warning-soft));--feedback-border:var(--semantic-warning-border-strong,var(--color-warning));--feedback-text:var(--semantic-warning-text-strong,var(--color-warning-strong))}[data-variant=danger]{--feedback-bg:var(--color-danger-soft);--feedback-border:var(--color-danger);--feedback-text:var(--color-danger-strong)}.feedback[data-variant=error],[data-variant=error]{--feedback-bg:var(--semantic-error-bg-strong,var(--color-danger-soft));--feedback-border:var(--semantic-error-border-strong,var(--color-danger));--feedback-text:var(--semantic-error-text-strong,var(--color-danger-strong))}[data-variant=neutral]{--feedback-bg:var(--color-surface-subtle);--feedback-border:var(--color-border-subtle);--feedback-text:var(--color-text)}[data-variant=accent]{--feedback-bg:var(--color-accent-soft);--feedback-border:var(--color-accent);--feedback-text:var(--color-on-accent)}.alert{align-items:flex-start;background-color:var(--color-muted-bg);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);padding:var(--feedback-padding-lg)}.alert[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.alert__icon{align-items:center;display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.alert__icon>*{display:block;height:100%;width:100%}.alert__content{display:flex;flex-direction:column;gap:var(--space-2)}.alert__title{font-size:var(--text-sm);font-weight:600}.alert__message{font-size:var(--text-sm);opacity:.95}.alert__close{cursor:pointer;font-size:var(--text-sm);margin-left:auto;opacity:.6}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.alert--outline{background-color:transparent!important;border-color:var(--feedback-border)!important;color:var(--feedback-border)!important}.banner{background-color:var(--color-surface-subtle);border-bottom:var(--border-width) solid var(--color-border-subtle);color:var(--color-text);padding:var(--feedback-padding-md) 0;width:100%}.banner[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.banner__inner{align-items:center;display:flex;gap:var(--feedback-gap);justify-content:space-between;margin:0 auto;max-width:var(--layout-max-width);padding:0 var(--space-6)}.banner__close,.banner__text{font-size:var(--text-sm)}.banner__close{cursor:pointer;opacity:.6}.banner__close:hover{opacity:1}.banner__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.banner--sticky{position:sticky;top:0;z-index:var(--z-sticky)}.feedback-toast{align-items:center;animation:toast-enter var(--transition-normal) forwards;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-2);display:flex;font-size:var(--text-sm);gap:var(--feedback-gap);opacity:0;padding:var(--feedback-padding-md) var(--feedback-padding-lg);transform:translateY(6px)}.feedback-toast[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.feedback-toast__icon{stroke:currentColor;fill:none;display:inline-block;flex-shrink:0;height:var(--space-5);width:var(--space-5)}.feedback-toast__text{flex:1 1 auto;min-width:0}.feedback-toast__close{cursor:pointer;flex-shrink:0;height:var(--space-5);opacity:.6;position:absolute;right:var(--space-1);top:var(--space-1);width:var(--space-5)}.feedback-toast__close:hover{opacity:1}.feedback-toast__close:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.feedback-toast__close:before{align-items:center;bottom:0;color:currentColor;content:"×";display:flex;font-size:var(--text-md);justify-content:center;left:0;line-height:1;position:absolute;right:0;top:0}.feedback-toast-stack{display:flex;flex-direction:column;gap:var(--space-4);position:fixed;right:var(--space-8);top:var(--space-8);z-index:var(--z-toast)}.feedback-toast-stack.is-top-right{bottom:auto;left:auto;right:var(--space-8);top:var(--space-8)}.feedback-toast-stack.is-top-left{bottom:auto;left:var(--space-8);right:auto;top:var(--space-8)}.feedback-toast-stack.is-bottom-right{bottom:var(--space-8);left:auto;right:var(--space-8);top:auto}.feedback-toast-stack.is-bottom-left{bottom:var(--space-8);left:var(--space-8);right:auto;top:auto}@keyframes toast-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.form-feedback{align-items:center;color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2)}.form-feedback--error{color:var(--color-error)}.form-feedback--warning{color:var(--color-warning)}.form-feedback--success{color:var(--color-success)}.form-feedback--info{color:var(--color-info)}.input-feedback--error{border-color:var(--color-error)!important}.input-feedback--warning{border-color:var(--color-warning)!important}.input-feedback--success{border-color:var(--color-success)!important}.input-feedback--info{border-color:var(--color-info)!important}.status{align-items:center;align-self:flex-start;background-color:var(--color-muted-bg);border-radius:999px;color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-3);white-space:nowrap;width:-moz-max-content;width:max-content}.status[data-variant]{background-color:var(--feedback-bg)!important;color:var(--feedback-text)!important}.status--outline{background-color:transparent!important;border:var(--border-width) solid var(--feedback-border)!important;color:var(--feedback-border)!important}.status--dot:before{background-color:var(--feedback-border);border-radius:999px;content:"";height:var(--space-2);width:var(--space-2)}.progress{background-color:var(--color-muted-bg);border-radius:var(--radius-sm);height:var(--space-2);overflow:hidden;width:100%}.progress__bar{background-color:var(--color-accent);height:100%;transition:width var(--transition-normal);width:0}.progress--striped .progress__bar{background-image:linear-gradient(45deg,var(--color-accent-soft) 25%,var(--color-accent) 25%,var(--color-accent) 50%,var(--color-accent-soft) 50%,var(--color-accent-soft) 75%,var(--color-accent) 75%,var(--color-accent));background-size:16px 16px}.progress--striped.progress--striped__relaxed .progress__bar{background-size:24px 24px}.progress--animated.progress--striped .progress__bar{animation:progress-stripes .3s linear infinite;will-change:background-position}.progress--animated.progress--striped__relaxed .progress__bar{animation:progress-stripes-relaxed .3s linear infinite;will-change:background-position}@keyframes progress-stripes{0%{background-position:0 0}to{background-position:16px 0}}@keyframes progress-stripes-relaxed{0%{background-position:0 0}to{background-position:24px 0}}.progress--animated:not(.progress--striped) .progress__bar{overflow:hidden;position:relative}.progress--animated:not(.progress--striped) .progress__bar:after{animation:progress-sheen 1.2s linear infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.4) 50%,hsla(0,0%,100%,0));content:"";height:100%;left:-40%;pointer-events:none;position:absolute;top:0;width:40%}@keyframes progress-sheen{0%{transform:translateX(0)}to{transform:translateX(250%)}}.info-block{background-color:var(--color-surface-subtle);border-left:var(--feedback-info-block-border-width) solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--text-sm);padding:var(--feedback-padding-md) var(--feedback-padding-lg)}.info-block[data-variant]{background-color:var(--feedback-bg)!important;border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}.result{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--feedback-padding-lg);text-align:center}.result__icon{stroke:currentColor;fill:none;height:var(--space-12);margin:0 auto var(--space-4);width:var(--space-12)}.result__title{font-size:var(--text-xl);font-weight:600}.result__subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2)}.result__actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)}.result[data-variant]{border-color:var(--feedback-border)!important;color:var(--feedback-text)!important}[data-density=compact] .alert,[data-density=compact] .banner,[data-density=compact] .feedback-toast,[data-density=compact] .info-block,[data-density=compact] .result{padding:var(--feedback-padding-md)!important}[data-density=compact] .status{padding:0 var(--space-2)}[data-density=compact] .progress{height:var(--space-1)}[data-density=compact] .form-feedback{gap:var(--space-1)}@media (max-width:640px){.alert,.banner,.feedback-toast,.info-block,.result{padding:var(--feedback-padding-md)}.feedback-toast-stack{right:var(--space-4);top:var(--space-4)}}.feedback-toast--static{animation:none!important;bottom:auto!important;left:auto!important;max-width:100%;opacity:1!important;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:-moz-max-content;width:max-content}