@24vlh/vds 0.1.2 → 0.1.4

package/dist/components/feedback.css

@@ -1,657 +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%;
-}
+/************************************************************
+ * 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%;
+}