@webority/theme 0.7.4 → 0.7.5

package/scss/wui/_utilities.scss

@@ -261,6 +261,118 @@
     display: inline-block;
 }
 
+// Page/system-level announcement bar (AppBanner / <app-banner>). Full-width and persistent —
+// distinct from an inline .alert or a transient toast. Tones reuse the shared soft/text ramp.
+.wui-banner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 12px 20px;
+    font-size: 14px;
+    line-height: 1.4;
+}
+.wui-banner-icon {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+}
+.wui-banner-body {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.wui-banner-dismiss {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.7;
+    border-radius: var(--radius-sm);
+}
+.wui-banner-dismiss:hover {
+    opacity: 1;
+}
+.wui-banner-dismiss:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+}
+.wui-banner-info {
+    background: var(--color-info-soft);
+    color: var(--color-info-text);
+}
+.wui-banner-success {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.wui-banner-warning {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.wui-banner-danger {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.wui-banner-neutral {
+    background: var(--color-bg-subtle);
+    color: var(--color-text);
+    border-bottom: 1px solid var(--color-border);
+}
+
+// Determinate progress-bar fill tones (AppProgress / AppMeter / <app-progress>) — the fill sits
+// in Bootstrap's .progress track; only the bar colour is brand-toned.
+//
+// success + danger use the DEEPENED -strong fills, not the mid tones: when showLabel is set the
+// bar carries Bootstrap's WHITE label text, and white on the mid --wui-success (#17C653) /
+// --wui-danger (#F8285A) fails AA (2.78:1 / 3.86:1). The -strong fills clear it (both ~5.8:1),
+// the same trick btn-danger uses. info/warning/neutral stay on their mid tones (info/neutral
+// pass with white; warning is not shown with a white label).
+.wui-progress-info {
+    background-color: var(--color-info);
+}
+.wui-progress-success {
+    background-color: var(--wui-success-strong);
+}
+.wui-progress-warning {
+    background-color: var(--color-warning);
+}
+.wui-progress-danger {
+    background-color: var(--wui-danger-strong);
+}
+.wui-progress-neutral {
+    background-color: var(--color-text-subtle);
+}
+// Thin bar for inline / table use.
+.progress.progress-sm {
+    height: 4px;
+}
+// Indeterminate "working…" sweep — a partial segment that travels the track (the bar carries
+// no width style in this mode, so the width + motion come from here).
+.wui-progress-indeterminate {
+    width: 40%;
+    animation: wui-progress-indeterminate 1.1s ease-in-out infinite;
+}
+@keyframes wui-progress-indeterminate {
+    0% {
+        margin-left: -40%;
+    }
+    100% {
+        margin-left: 100%;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    // No sweep for reduced-motion users — settle to a static full bar.
+    .wui-progress-indeterminate {
+        margin-left: 0;
+        width: 100%;
+        animation: none;
+    }
+}
+
 // ── Spinner / shimmer ──
 .wui-spinner {
     width: 18px;