@blukavantui/community 0.0.0-stage → 1.0.1

package/dist/core.css

@@ -0,0 +1,1070 @@
+/* BluKavantUi_Community_Core → Button → Style Sheet.
+   Extracted from the published BluUITheme on 2026-10-09.
+   Size selectors are strengthened for later OutSystems phone/tablet Theme rules;
+   Default and Secondary use neutral surfaces matching Chip's palette.
+   Keep the shared --blu-* DESIGN TOKENS in BluUITheme.
+   Includes existing variants, sizes, loading spinner, focus, and preview. */
+
+/* ============================================================
+   BUTTON — BASE
+   ============================================================ */
+
+.blu-button.blu-button {
+    appearance: none;
+    -webkit-appearance: none;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--blu-space-2);
+
+    box-sizing: border-box;
+
+    margin: 0;
+    padding: 0;
+
+    border: 1px solid transparent;
+    border-radius: var(--blu-radius-md);
+
+    font-family: var(--blu-font-family);
+    font-weight: var(--blu-font-weight-semibold);
+    line-height: 1;
+
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+
+    cursor: pointer;
+    user-select: none;
+
+    box-shadow: none;
+
+    transition:
+        background-color var(--blu-transition-fast),
+        border-color var(--blu-transition-fast),
+        color var(--blu-transition-fast),
+        box-shadow var(--blu-transition-fast),
+        transform var(--blu-transition-fast);
+}
+
+
+/* ============================================================
+   BUTTON — COLORS
+   These only define variables.
+   Variant rules below decide how they're displayed.
+   ============================================================ */
+
+
+/* Shared palette. Existing Button variants remain Filled, Outlined, Ghost.
+   Named presets have a soft filled surface; status buttons have solid fills.
+   Default and Secondary keep their neutral button appearance. */
+.blu-button.blu-button--default {
+    --blu-button-color: var(--bluui-color-default-text);
+    --blu-button-hover: var(--bluui-color-default-text);
+    --blu-button-active: var(--bluui-color-default-text);
+    --blu-button-soft: var(--bluui-color-default-soft);
+    --blu-button-soft-active: var(--bluui-color-default-border);
+    --blu-button-fill: var(--bluui-color-default-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-default-text);
+}
+
+.blu-button.blu-button--primary {
+    --blu-button-color: var(--bluui-color-primary-text);
+    --blu-button-hover: var(--bluui-color-primary-text);
+    --blu-button-active: var(--bluui-color-primary-text);
+    --blu-button-soft: var(--bluui-color-primary-soft);
+    --blu-button-soft-active: var(--bluui-color-primary-border);
+    --blu-button-fill: var(--bluui-color-primary-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-primary-contrast);
+}
+
+.blu-button.blu-button--secondary {
+    --blu-button-color: var(--bluui-color-secondary-text);
+    --blu-button-hover: var(--bluui-color-secondary-text);
+    --blu-button-active: var(--bluui-color-secondary-text);
+    --blu-button-soft: var(--bluui-color-secondary-soft);
+    --blu-button-soft-active: var(--bluui-color-secondary-border);
+    --blu-button-fill: var(--bluui-color-secondary-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-secondary-text);
+}
+
+.blu-button.blu-button--success {
+    --blu-button-color: var(--bluui-color-success-text);
+    --blu-button-hover: var(--bluui-color-success-text);
+    --blu-button-active: var(--bluui-color-success-text);
+    --blu-button-soft: var(--bluui-color-success-soft);
+    --blu-button-soft-active: var(--bluui-color-success-border);
+    --blu-button-fill: var(--bluui-color-success-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-success-contrast);
+}
+
+.blu-button.blu-button--processing {
+    --blu-button-color: var(--bluui-color-processing-text);
+    --blu-button-hover: var(--bluui-color-processing-text);
+    --blu-button-active: var(--bluui-color-processing-text);
+    --blu-button-soft: var(--bluui-color-processing-soft);
+    --blu-button-soft-active: var(--bluui-color-processing-border);
+    --blu-button-fill: var(--bluui-color-processing-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-processing-contrast);
+}
+
+.blu-button.blu-button--warning {
+    --blu-button-color: var(--bluui-color-warning-text);
+    --blu-button-hover: var(--bluui-color-warning-text);
+    --blu-button-active: var(--bluui-color-warning-text);
+    --blu-button-soft: var(--bluui-color-warning-soft);
+    --blu-button-soft-active: var(--bluui-color-warning-border);
+    --blu-button-fill: var(--bluui-color-warning-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-warning-contrast);
+}
+
+.blu-button.blu-button--error {
+    --blu-button-color: var(--bluui-color-error-text);
+    --blu-button-hover: var(--bluui-color-error-text);
+    --blu-button-active: var(--bluui-color-error-text);
+    --blu-button-soft: var(--bluui-color-error-soft);
+    --blu-button-soft-active: var(--bluui-color-error-border);
+    --blu-button-fill: var(--bluui-color-error-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-error-contrast);
+}
+
+.blu-button.blu-button--danger {
+    --blu-button-color: var(--bluui-color-danger-text);
+    --blu-button-hover: var(--bluui-color-danger-text);
+    --blu-button-active: var(--bluui-color-danger-text);
+    --blu-button-soft: var(--bluui-color-danger-soft);
+    --blu-button-soft-active: var(--bluui-color-danger-border);
+    --blu-button-fill: var(--bluui-color-danger-solid);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-danger-contrast);
+}
+
+.blu-button.blu-button--magenta {
+    --blu-button-color: var(--bluui-color-magenta-text);
+    --blu-button-hover: var(--bluui-color-magenta-text);
+    --blu-button-active: var(--bluui-color-magenta-text);
+    --blu-button-soft: var(--bluui-color-magenta-soft);
+    --blu-button-soft-active: var(--bluui-color-magenta-border);
+    --blu-button-fill: var(--bluui-color-magenta-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-magenta-text);
+}
+
+.blu-button.blu-button--red {
+    --blu-button-color: var(--bluui-color-red-text);
+    --blu-button-hover: var(--bluui-color-red-text);
+    --blu-button-active: var(--bluui-color-red-text);
+    --blu-button-soft: var(--bluui-color-red-soft);
+    --blu-button-soft-active: var(--bluui-color-red-border);
+    --blu-button-fill: var(--bluui-color-red-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-red-text);
+}
+
+.blu-button.blu-button--volcano {
+    --blu-button-color: var(--bluui-color-volcano-text);
+    --blu-button-hover: var(--bluui-color-volcano-text);
+    --blu-button-active: var(--bluui-color-volcano-text);
+    --blu-button-soft: var(--bluui-color-volcano-soft);
+    --blu-button-soft-active: var(--bluui-color-volcano-border);
+    --blu-button-fill: var(--bluui-color-volcano-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-volcano-text);
+}
+
+.blu-button.blu-button--orange {
+    --blu-button-color: var(--bluui-color-orange-text);
+    --blu-button-hover: var(--bluui-color-orange-text);
+    --blu-button-active: var(--bluui-color-orange-text);
+    --blu-button-soft: var(--bluui-color-orange-soft);
+    --blu-button-soft-active: var(--bluui-color-orange-border);
+    --blu-button-fill: var(--bluui-color-orange-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-orange-text);
+}
+
+.blu-button.blu-button--gold {
+    --blu-button-color: var(--bluui-color-gold-text);
+    --blu-button-hover: var(--bluui-color-gold-text);
+    --blu-button-active: var(--bluui-color-gold-text);
+    --blu-button-soft: var(--bluui-color-gold-soft);
+    --blu-button-soft-active: var(--bluui-color-gold-border);
+    --blu-button-fill: var(--bluui-color-gold-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-gold-text);
+}
+
+.blu-button.blu-button--lime {
+    --blu-button-color: var(--bluui-color-lime-text);
+    --blu-button-hover: var(--bluui-color-lime-text);
+    --blu-button-active: var(--bluui-color-lime-text);
+    --blu-button-soft: var(--bluui-color-lime-soft);
+    --blu-button-soft-active: var(--bluui-color-lime-border);
+    --blu-button-fill: var(--bluui-color-lime-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-lime-text);
+}
+
+.blu-button.blu-button--green {
+    --blu-button-color: var(--bluui-color-green-text);
+    --blu-button-hover: var(--bluui-color-green-text);
+    --blu-button-active: var(--bluui-color-green-text);
+    --blu-button-soft: var(--bluui-color-green-soft);
+    --blu-button-soft-active: var(--bluui-color-green-border);
+    --blu-button-fill: var(--bluui-color-green-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-green-text);
+}
+
+.blu-button.blu-button--cyan {
+    --blu-button-color: var(--bluui-color-cyan-text);
+    --blu-button-hover: var(--bluui-color-cyan-text);
+    --blu-button-active: var(--bluui-color-cyan-text);
+    --blu-button-soft: var(--bluui-color-cyan-soft);
+    --blu-button-soft-active: var(--bluui-color-cyan-border);
+    --blu-button-fill: var(--bluui-color-cyan-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-cyan-text);
+}
+
+.blu-button.blu-button--blue {
+    --blu-button-color: var(--bluui-color-blue-text);
+    --blu-button-hover: var(--bluui-color-blue-text);
+    --blu-button-active: var(--bluui-color-blue-text);
+    --blu-button-soft: var(--bluui-color-blue-soft);
+    --blu-button-soft-active: var(--bluui-color-blue-border);
+    --blu-button-fill: var(--bluui-color-blue-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-blue-text);
+}
+
+.blu-button.blu-button--geekblue {
+    --blu-button-color: var(--bluui-color-geekblue-text);
+    --blu-button-hover: var(--bluui-color-geekblue-text);
+    --blu-button-active: var(--bluui-color-geekblue-text);
+    --blu-button-soft: var(--bluui-color-geekblue-soft);
+    --blu-button-soft-active: var(--bluui-color-geekblue-border);
+    --blu-button-fill: var(--bluui-color-geekblue-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-geekblue-text);
+}
+
+.blu-button.blu-button--purple {
+    --blu-button-color: var(--bluui-color-purple-text);
+    --blu-button-hover: var(--bluui-color-purple-text);
+    --blu-button-active: var(--bluui-color-purple-text);
+    --blu-button-soft: var(--bluui-color-purple-soft);
+    --blu-button-soft-active: var(--bluui-color-purple-border);
+    --blu-button-fill: var(--bluui-color-purple-soft);
+    --blu-button-fill-hover: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 8%);
+    --blu-button-fill-active: color-mix(in srgb, var(--blu-button-fill), var(--bluui-text) 15%);
+    --blu-button-fill-border: var(--blu-button-fill);
+    --blu-button-fill-border-hover: var(--blu-button-fill-hover);
+    --blu-button-fill-border-active: var(--blu-button-fill-active);
+    --blu-button-contrast: var(--bluui-color-purple-text);
+}
+
+/* ============================================================
+   BUTTON — FILLED
+   Default/Secondary supply neutral fills. Other colors use their original
+   solid color, hover, and pressed values through the fallbacks below.
+   ============================================================ */
+
+.blu-button.blu-button--filled {
+    background-color: var(--blu-button-fill, var(--blu-button-color));
+    border-color: var(--blu-button-fill-border, var(--blu-button-color));
+    color: var(--blu-button-contrast);
+
+    box-shadow: var(--blu-shadow-xs);
+}
+
+.blu-button.blu-button--filled:hover {
+    background-color: var(--blu-button-fill-hover, var(--blu-button-hover));
+    border-color: var(--blu-button-fill-border-hover, var(--blu-button-hover));
+    color: var(--blu-button-contrast);
+}
+
+.blu-button.blu-button--filled:active {
+    background-color: var(--blu-button-fill-active, var(--blu-button-active));
+    border-color: var(--blu-button-fill-border-active, var(--blu-button-active));
+    color: var(--blu-button-contrast);
+
+    transform: translateY(1px);
+}
+
+
+/* ============================================================
+   BUTTON — OUTLINED
+   ============================================================ */
+
+.blu-button.blu-button--outlined {
+    background-color: transparent;
+    border-color: var(--blu-button-color);
+    color: var(--blu-button-color);
+
+    box-shadow: none;
+}
+
+.blu-button.blu-button--outlined:hover {
+    background-color: var(--blu-button-soft);
+    border-color: var(--blu-button-hover);
+    color: var(--blu-button-hover);
+}
+
+.blu-button.blu-button--outlined:active {
+    background-color: var(--blu-button-soft-active);
+    border-color: var(--blu-button-active);
+    color: var(--blu-button-active);
+
+    transform: translateY(1px);
+}
+
+
+/* ============================================================
+   BUTTON — GHOST
+   ============================================================ */
+
+.blu-button.blu-button--ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--blu-button-color);
+
+    box-shadow: none;
+}
+
+.blu-button.blu-button--ghost:hover {
+    background-color: var(--blu-button-soft);
+    border-color: transparent;
+    color: var(--blu-button-hover);
+}
+
+.blu-button.blu-button--ghost:active {
+    background-color: var(--blu-button-soft-active);
+    border-color: transparent;
+    color: var(--blu-button-active);
+
+    transform: translateY(1px);
+}
+
+
+/* ============================================================
+   BUTTON — SIZES (specificity preserves sizes before Theme CSS)
+   ============================================================ */
+
+.blu-button.blu-button.blu-button--small {
+    min-height: 32px;
+
+    padding: 0 12px;
+
+    font-size: var(--blu-font-size-sm);
+}
+
+.blu-button.blu-button.blu-button--medium {
+    min-height: 40px;
+
+    padding: 0 16px;
+
+    font-size: var(--blu-font-size-md);
+}
+
+.blu-button.blu-button.blu-button--large {
+    min-height: 48px;
+
+    padding: 0 20px;
+
+    font-size: var(--blu-font-size-lg);
+}
+
+
+/* ============================================================
+   BUTTON — FULL WIDTH
+   ============================================================ */
+
+.blu-button.blu-button--full {
+    width: 100%;
+}
+
+
+/* ============================================================
+   BUTTON — FOCUS
+   ============================================================ */
+
+.blu-button.blu-button:focus {
+    outline: none;
+}
+
+.blu-button.blu-button:focus-visible {
+    outline: 2px solid var(--bluui-primary, #4f46e5);
+    outline-offset: 3px;
+
+    box-shadow: var(--blu-focus-ring);
+}
+
+
+/* ============================================================
+   BUTTON — DISABLED
+   ============================================================ */
+
+.blu-button.blu-button:disabled,
+.blu-button.blu-button--disabled {
+    opacity: 0.48;
+
+    cursor: not-allowed;
+    pointer-events: none;
+
+    box-shadow: none;
+    transform: none;
+}
+
+
+/* ============================================================
+   BUTTON — LOADING
+   ============================================================ */
+
+.blu-button.blu-button--loading {
+    cursor: wait;
+    pointer-events: none;
+}
+
+/*
+   OutSystems may render the native button as disabled while loading.
+   Don't fade the loading state.
+*/
+
+.blu-button.blu-button--loading:disabled {
+    opacity: 1;
+}
+
+
+/* ============================================================
+   BUTTON — SPINNER
+   ============================================================ */
+
+.blu-button__spinner {
+    display: inline-block;
+
+    width: 16px;
+    height: 16px;
+
+    box-sizing: border-box;
+
+    flex: 0 0 16px;
+
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+
+    opacity: 0.85;
+
+    animation: blu-spin 0.65s linear infinite;
+}
+
+.blu-button--small .blu-button__spinner {
+    width: 14px;
+    height: 14px;
+
+    flex-basis: 14px;
+}
+
+.blu-button--large .blu-button__spinner {
+    width: 18px;
+    height: 18px;
+
+    flex-basis: 18px;
+}
+
+@keyframes blu-spin {
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+/* ============================================================
+   BUTTON — CONTENT
+   ============================================================ */
+
+.blu-button__content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 0;
+}
+
+
+/* ============================================================
+   BUTTON — ICON
+   ============================================================ */
+
+.blu-button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    flex: 0 0 auto;
+
+    font-size: 1.1em;
+    line-height: 1;
+}
+
+/* ============================================================
+   BUTTON — PREVIEW
+   ============================================================ */
+
+.blu-preview-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-height: 40px;
+    min-width: 90px;
+
+    padding: 0 16px;
+
+    border-radius: 8px;
+
+    background-color: var(--bluui-color-primary-solid, #4f46e5);
+    color: var(--bluui-on-primary, #ffffff);
+
+    font-family:
+        Inter,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+
+    font-size: 14px;
+    font-weight: 600;
+}
+
+/* Respect motion preferences while preserving a static loading indicator. */
+@media (prefers-reduced-motion: reduce) {
+  .blu-button { transition: none !important; }
+  .blu-button .blu-button-spinner, .blu-button .blu-button__spinner { animation: none !important; }
+}
+
+/* BluKavantUi_Community_Core → Badge — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-badge {
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--bluui-text, #182230);
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+}
+/* Badge — display-only labels using the shared color Static Entity.
+Use Chip when a label needs selection or removal behavior. */
+.blu-badge {
+  --blu-badge-background: var(--bluui-surface, #fff);
+  --blu-badge-color: var(--bluui-text-muted, #64748b);
+  --blu-badge-border: var(--bluui-border, #e2e8f0);
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+  max-width: 100%;
+  border: 1px solid var(--blu-badge-border);
+  border-radius: 999px;
+  padding: 6px 10px;
+  background: var(--blu-badge-background);
+  color: var(--blu-badge-color);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+.blu-badge .blu-badge__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+/* Shared ComponentColor palette. Presets use Ant Design filled colors;
+   statuses use solid colors. Primary/Secondary retain their existing roles. */
+.blu-badge.blu-badge--default {
+  --blu-badge-background: var(--bluui-color-default-solid);
+  --blu-badge-color: var(--bluui-color-default-contrast);
+  --blu-badge-border: var(--bluui-color-default-solid);
+}
+.blu-badge.blu-badge--primary {
+  --blu-badge-background: var(--bluui-color-primary-solid);
+  --blu-badge-color: var(--bluui-color-primary-contrast);
+  --blu-badge-border: var(--bluui-color-primary-solid);
+}
+.blu-badge.blu-badge--secondary {
+  --blu-badge-background: var(--bluui-color-secondary-soft);
+  --blu-badge-color: var(--bluui-color-secondary-text);
+  --blu-badge-border: var(--bluui-color-secondary-soft);
+}
+.blu-badge.blu-badge--success {
+  --blu-badge-background: var(--bluui-color-success-solid);
+  --blu-badge-color: var(--bluui-color-success-contrast);
+  --blu-badge-border: var(--bluui-color-success-solid);
+}
+.blu-badge.blu-badge--processing {
+  --blu-badge-background: var(--bluui-color-processing-solid);
+  --blu-badge-color: var(--bluui-color-processing-contrast);
+  --blu-badge-border: var(--bluui-color-processing-solid);
+}
+.blu-badge.blu-badge--warning {
+  --blu-badge-background: var(--bluui-color-warning-solid);
+  --blu-badge-color: var(--bluui-color-warning-contrast);
+  --blu-badge-border: var(--bluui-color-warning-solid);
+}
+.blu-badge.blu-badge--error {
+  --blu-badge-background: var(--bluui-color-error-solid);
+  --blu-badge-color: var(--bluui-color-error-contrast);
+  --blu-badge-border: var(--bluui-color-error-solid);
+}
+.blu-badge.blu-badge--danger {
+  --blu-badge-background: var(--bluui-color-danger-solid);
+  --blu-badge-color: var(--bluui-color-danger-contrast);
+  --blu-badge-border: var(--bluui-color-danger-solid);
+}
+.blu-badge.blu-badge--magenta {
+  --blu-badge-background: var(--bluui-color-magenta-soft);
+  --blu-badge-color: var(--bluui-color-magenta-text);
+  --blu-badge-border: var(--bluui-color-magenta-soft);
+}
+.blu-badge.blu-badge--red {
+  --blu-badge-background: var(--bluui-color-red-soft);
+  --blu-badge-color: var(--bluui-color-red-text);
+  --blu-badge-border: var(--bluui-color-red-soft);
+}
+.blu-badge.blu-badge--volcano {
+  --blu-badge-background: var(--bluui-color-volcano-soft);
+  --blu-badge-color: var(--bluui-color-volcano-text);
+  --blu-badge-border: var(--bluui-color-volcano-soft);
+}
+.blu-badge.blu-badge--orange {
+  --blu-badge-background: var(--bluui-color-orange-soft);
+  --blu-badge-color: var(--bluui-color-orange-text);
+  --blu-badge-border: var(--bluui-color-orange-soft);
+}
+.blu-badge.blu-badge--gold {
+  --blu-badge-background: var(--bluui-color-gold-soft);
+  --blu-badge-color: var(--bluui-color-gold-text);
+  --blu-badge-border: var(--bluui-color-gold-soft);
+}
+.blu-badge.blu-badge--lime {
+  --blu-badge-background: var(--bluui-color-lime-soft);
+  --blu-badge-color: var(--bluui-color-lime-text);
+  --blu-badge-border: var(--bluui-color-lime-soft);
+}
+.blu-badge.blu-badge--green {
+  --blu-badge-background: var(--bluui-color-green-soft);
+  --blu-badge-color: var(--bluui-color-green-text);
+  --blu-badge-border: var(--bluui-color-green-soft);
+}
+.blu-badge.blu-badge--cyan {
+  --blu-badge-background: var(--bluui-color-cyan-soft);
+  --blu-badge-color: var(--bluui-color-cyan-text);
+  --blu-badge-border: var(--bluui-color-cyan-soft);
+}
+.blu-badge.blu-badge--blue {
+  --blu-badge-background: var(--bluui-color-blue-soft);
+  --blu-badge-color: var(--bluui-color-blue-text);
+  --blu-badge-border: var(--bluui-color-blue-soft);
+}
+.blu-badge.blu-badge--geekblue {
+  --blu-badge-background: var(--bluui-color-geekblue-soft);
+  --blu-badge-color: var(--bluui-color-geekblue-text);
+  --blu-badge-border: var(--bluui-color-geekblue-soft);
+}
+.blu-badge.blu-badge--purple {
+  --blu-badge-background: var(--bluui-color-purple-soft);
+  --blu-badge-color: var(--bluui-color-purple-text);
+  --blu-badge-border: var(--bluui-color-purple-soft);
+}
+
+
+/* BluKavantUi_Community_Core → Chip — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-chip {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* Chip — root and default color
+The root wraps two sibling controls: selectable label and optional remove.
+The default appearance is neutral; the modifier classes below map the
+shared ComponentColor records to theme tokens. */
+.blu-chip {
+  --chip-bg: var(--bluui-secondary-soft, #f1f5f9);
+  --chip-fg: var(--bluui-secondary-text, #334155);
+  --chip-border: var(--bluui-border, #cbd5e1);
+  display: inline-flex;
+  align-items: stretch;
+  width: auto;
+  max-width: 100%;
+  border: 1px solid var(--chip-border);
+  border-radius: 999px;
+  background: var(--chip-bg);
+  color: var(--chip-fg);
+  vertical-align: middle;
+}
+
+/* Shared ComponentColor palette. Presets use Ant Design filled colors;
+   statuses use solid colors. Primary/Secondary retain their existing roles. */
+.blu-chip.blu-chip--default {
+  --chip-bg: var(--bluui-color-default-solid);
+  --chip-fg: var(--bluui-color-default-contrast);
+  --chip-border: var(--bluui-color-default-solid);
+}
+.blu-chip.blu-chip--primary {
+  --chip-bg: var(--bluui-color-primary-solid);
+  --chip-fg: var(--bluui-color-primary-contrast);
+  --chip-border: var(--bluui-color-primary-solid);
+}
+.blu-chip.blu-chip--secondary {
+  --chip-bg: var(--bluui-color-secondary-soft);
+  --chip-fg: var(--bluui-color-secondary-text);
+  --chip-border: var(--bluui-color-secondary-soft);
+}
+.blu-chip.blu-chip--success {
+  --chip-bg: var(--bluui-color-success-solid);
+  --chip-fg: var(--bluui-color-success-contrast);
+  --chip-border: var(--bluui-color-success-solid);
+}
+.blu-chip.blu-chip--processing {
+  --chip-bg: var(--bluui-color-processing-solid);
+  --chip-fg: var(--bluui-color-processing-contrast);
+  --chip-border: var(--bluui-color-processing-solid);
+}
+.blu-chip.blu-chip--warning {
+  --chip-bg: var(--bluui-color-warning-solid);
+  --chip-fg: var(--bluui-color-warning-contrast);
+  --chip-border: var(--bluui-color-warning-solid);
+}
+.blu-chip.blu-chip--error {
+  --chip-bg: var(--bluui-color-error-solid);
+  --chip-fg: var(--bluui-color-error-contrast);
+  --chip-border: var(--bluui-color-error-solid);
+}
+.blu-chip.blu-chip--danger {
+  --chip-bg: var(--bluui-color-danger-solid);
+  --chip-fg: var(--bluui-color-danger-contrast);
+  --chip-border: var(--bluui-color-danger-solid);
+}
+.blu-chip.blu-chip--magenta {
+  --chip-bg: var(--bluui-color-magenta-soft);
+  --chip-fg: var(--bluui-color-magenta-text);
+  --chip-border: var(--bluui-color-magenta-soft);
+}
+.blu-chip.blu-chip--red {
+  --chip-bg: var(--bluui-color-red-soft);
+  --chip-fg: var(--bluui-color-red-text);
+  --chip-border: var(--bluui-color-red-soft);
+}
+.blu-chip.blu-chip--volcano {
+  --chip-bg: var(--bluui-color-volcano-soft);
+  --chip-fg: var(--bluui-color-volcano-text);
+  --chip-border: var(--bluui-color-volcano-soft);
+}
+.blu-chip.blu-chip--orange {
+  --chip-bg: var(--bluui-color-orange-soft);
+  --chip-fg: var(--bluui-color-orange-text);
+  --chip-border: var(--bluui-color-orange-soft);
+}
+.blu-chip.blu-chip--gold {
+  --chip-bg: var(--bluui-color-gold-soft);
+  --chip-fg: var(--bluui-color-gold-text);
+  --chip-border: var(--bluui-color-gold-soft);
+}
+.blu-chip.blu-chip--lime {
+  --chip-bg: var(--bluui-color-lime-soft);
+  --chip-fg: var(--bluui-color-lime-text);
+  --chip-border: var(--bluui-color-lime-soft);
+}
+.blu-chip.blu-chip--green {
+  --chip-bg: var(--bluui-color-green-soft);
+  --chip-fg: var(--bluui-color-green-text);
+  --chip-border: var(--bluui-color-green-soft);
+}
+.blu-chip.blu-chip--cyan {
+  --chip-bg: var(--bluui-color-cyan-soft);
+  --chip-fg: var(--bluui-color-cyan-text);
+  --chip-border: var(--bluui-color-cyan-soft);
+}
+.blu-chip.blu-chip--blue {
+  --chip-bg: var(--bluui-color-blue-soft);
+  --chip-fg: var(--bluui-color-blue-text);
+  --chip-border: var(--bluui-color-blue-soft);
+}
+.blu-chip.blu-chip--geekblue {
+  --chip-bg: var(--bluui-color-geekblue-soft);
+  --chip-fg: var(--bluui-color-geekblue-text);
+  --chip-border: var(--bluui-color-geekblue-soft);
+}
+.blu-chip.blu-chip--purple {
+  --chip-bg: var(--bluui-color-purple-soft);
+  --chip-fg: var(--bluui-color-purple-text);
+  --chip-border: var(--bluui-color-purple-soft);
+}
+
+/* State modifiers are independent of color. Selection adds an outline-like
+ring; disabled styling accompanies native disabled controls and action guards. */
+.blu-chip--selected {
+  box-shadow: 0 0 0 2px var(--bluui-primary, #4f46e5);
+}
+
+.blu-chip--disabled {
+  opacity: .55;
+}
+
+/* Internal native Buttons use chip sizing instead of the standard Button shape.
+The repeated root class keeps these rules above later .phone .btn Theme rules.
+Reset only these two scoped controls; preserve other BluUI Button styles. */
+.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove) {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-height: 36px;
+  height: auto;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  padding: 7px 12px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.4;
+  box-shadow: none;
+  cursor: pointer;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+/* The separate remove control retains a usable target even for a short label. */
+.blu-chip.blu-chip .blu-chip__remove {
+  min-width: 36px;
+  padding: 6px 10px;
+}
+
+/* Nonselectable chips display this plain label beside the optional remove button. */
+.blu-chip .blu-chip__label {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px 12px;
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):disabled {
+  cursor: default;
+}
+
+/* Keyboard focus stays visible on the specific control, independently of selection. */
+.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):focus-visible {
+  outline: 2px solid var(--bluui-primary, #4f46e5);
+  outline-offset: 3px;
+}
+
+.blu-chip.blu-chip :is(.blu-chip__select, .blu-chip__remove):hover:not(:disabled) {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+/* BluKavantUi_Community_Core → Skeleton — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-skeleton {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* Skeleton — decorative loading shapes
+The native Block supplies width/height through its style Attribute. For Circle,
+the Block uses HeightPixels for both dimensions to prevent an oval. */
+.blu-skeleton {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  -servicestudio-height: 16px;
+  -servicestudio-min-width: 120px;
+  -servicestudio-background-color: var(--bluui-skeleton-base, #e2e8f0);
+  -servicestudio-border-radius: 4px;
+  background: var(--bluui-skeleton-base, #e2e8f0);
+}
+
+.blu-skeleton--text {
+  border-radius: 4px;
+}
+
+.blu-skeleton--rectangle {
+  border-radius: 10px;
+}
+
+.blu-skeleton--circle {
+  border-radius: 50%;
+}
+
+/* Optional shimmer stops after 4.8 seconds. The static loading shape remains.
+This prevents indefinite nonessential movement alongside loaded content. */
+.blu-skeleton--animated::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, var(--bluui-skeleton-shine, rgb(255 255 255 / 65%)), transparent);
+  transform: translateX(-100%);
+  animation: blu-skeleton-wave 1.6s ease-in-out 3;
+}
+
+@keyframes blu-skeleton-wave {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Respect the user's motion preference even when IsAnimated is True.
+The base shape remains visible when the animated overlay is removed. */
+@media (prefers-reduced-motion: reduce) {
+  .blu-skeleton--animated::after {
+    animation: none;
+    display: none;
+  }
+}
+
+
+/* Visible default size only in the Service Studio canvas. */
+.blu-skeleton {
+  -servicestudio-width: 180px;
+  -servicestudio-height: 20px;
+}
+
+/* Font loading is headless; the scope supplies shared body and heading tokens. */
+.blu-font-provider-block .blu-component-preview {display:none;}
+[data-blu-font-scope] :is(h1,h2,h3,h4,h5,h6) {font-family:var(--blu-font-heading-family,var(--blu-font-family,inherit));}
+[data-blu-font-scope] :is(input,select,textarea,button) {font-family:var(--blu-font-family,inherit);}
+.blu-advanced-sr {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+
+/* BluKavantUi_Community_Core → ChipGroup — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-chip-group {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* ChipGroup — wrap related chips without stretching them to full width.
+Root padding leaves space for the selected/focus outlines. */
+.blu-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 3px;
+}
+
+/* Set this class on ChipGroup's Content Placeholder. That element contains
+the native Chip Block wrappers, so it must own the wrapping layout and gap.
+Inherit alignment so a centered playground group stays centered. */
+.blu-chip-group > .blu-chip-group__items {
+  display: flex;
+  flex-wrap: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  gap: inherit;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Each Chip's Block wrapper keeps its natural width. Scope these rules to
+item wrappers so the Content Placeholder itself can still fill the group. */
+.blu-chip-group > [data-block],
+.blu-chip-group > [data-container]:not(.blu-chip-group__items),
+.blu-chip-group > .blu-chip-group__items > :is([data-block], [data-container]) {
+  flex: 0 1 auto;
+  min-width: 0;
+  width: auto;
+  max-width: 100%;
+}