@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/feedback.css

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