@ada-cx/lovelace 1.0.0-setup.0

package/dist/components/ToastNotification/ToastNotification.css.d.ts

@@ -0,0 +1,30 @@
+export declare const toastRoot: import("@vanilla-extract/recipes").RuntimeFn<{
+    status: {
+        success: {
+            backgroundColor: "var(--lovelace-color-neutral-0)" | "var(--lovelace-color-neutral-50)" | "var(--lovelace-color-neutral-100)" | "var(--lovelace-color-neutral-200)" | "var(--lovelace-color-neutral-300)" | "var(--lovelace-color-neutral-400)" | "var(--lovelace-color-neutral-500)" | "var(--lovelace-color-neutral-600)" | "var(--lovelace-color-neutral-700)" | "var(--lovelace-color-neutral-800)" | "var(--lovelace-color-neutral-900)" | "var(--lovelace-color-red-50)" | "var(--lovelace-color-orange-50)" | "var(--lovelace-color-green-50)" | "var(--lovelace-color-green-100)" | "var(--lovelace-color-green-200)" | "var(--lovelace-color-green-300)" | "var(--lovelace-color-green-400)" | "var(--lovelace-color-green-500)" | "var(--lovelace-color-green-600)" | "var(--lovelace-color-green-700)" | "var(--lovelace-color-green-800)" | "var(--lovelace-color-green-900)" | "var(--lovelace-color-orange-100)" | "var(--lovelace-color-orange-200)" | "var(--lovelace-color-orange-300)" | "var(--lovelace-color-orange-400)" | "var(--lovelace-color-orange-500)" | "var(--lovelace-color-orange-600)" | "var(--lovelace-color-orange-700)" | "var(--lovelace-color-orange-800)" | "var(--lovelace-color-orange-900)" | "var(--lovelace-color-red-100)" | "var(--lovelace-color-red-200)" | "var(--lovelace-color-red-300)" | "var(--lovelace-color-red-400)" | "var(--lovelace-color-red-500)" | "var(--lovelace-color-red-600)" | "var(--lovelace-color-red-700)" | "var(--lovelace-color-red-800)" | "var(--lovelace-color-red-900)" | "var(--lovelace-spacing-4)" | "var(--lovelace-spacing-8)" | "var(--lovelace-spacing-12)" | "var(--lovelace-spacing-16)" | "var(--lovelace-spacing-20)" | "var(--lovelace-spacing-24)" | "var(--lovelace-spacing-32)" | "var(--lovelace-spacing-40)" | "var(--lovelace-spacing-48)" | "var(--lovelace-font-weight-400)" | "var(--lovelace-font-weight-500)" | "var(--lovelace-font-weight-600)" | "var(--lovelace-color-blue-50)" | "var(--lovelace-color-blue-100)" | "var(--lovelace-color-blue-200)" | "var(--lovelace-color-blue-300)" | "var(--lovelace-color-blue-400)" | "var(--lovelace-color-blue-500)" | "var(--lovelace-color-blue-600)" | "var(--lovelace-color-blue-700)" | "var(--lovelace-color-blue-800)" | "var(--lovelace-color-blue-900)" | "var(--lovelace-font-size-12)" | "var(--lovelace-font-size-14)" | "var(--lovelace-font-size-16)" | "var(--lovelace-font-size-18)" | "var(--lovelace-font-size-20)" | "var(--lovelace-font-size-22)" | "var(--lovelace-font-size-24)" | "var(--lovelace-font-size-26)" | "var(--lovelace-font-size-28)" | "var(--lovelace-font-line-height-16)" | "var(--lovelace-font-line-height-18)" | "var(--lovelace-font-line-height-22)" | "var(--lovelace-font-line-height-24)" | "var(--lovelace-font-line-height-26)" | "var(--lovelace-font-line-height-28)" | "var(--lovelace-font-line-height-30)" | "var(--lovelace-font-line-height-32)" | "var(--lovelace-font-line-height-34)" | "var(--lovelace-border-radius-0)" | "var(--lovelace-p-border-radius-6)" | "var(--lovelace-p-border-radius-10)" | "var(--lovelace-p-border-radius-14)" | "var(--lovelace-p-border-radius-20)" | "var(--lovelace-p-border-radius-24)" | "var(--lovelace-border-radius-999)" | "var(--lovelace-font-paragraph-spacing-4)" | "var(--lovelace-font-paragraph-spacing-6)" | "var(--lovelace-font-paragraph-spacing-8)" | "var(--lovelace-font-paragraph-spacing-10)" | "var(--lovelace-font-paragraph-spacing-12)" | "var(--lovelace-color-accent-50)" | "var(--lovelace-color-accent-100)" | "var(--lovelace-color-accent-200)" | "var(--lovelace-color-accent-300)" | "var(--lovelace-color-accent-400)" | "var(--lovelace-color-accent-500)" | "var(--lovelace-color-accent-600)" | "var(--lovelace-color-accent-700)" | "var(--lovelace-color-accent-800)" | "var(--lovelace-color-accent-900)" | "var(--lovelace-font-family-sans-serif)" | "var(--lovelace-font-family-mono)" | "var(--lovelace-border-width-1)" | "var(--lovelace-border-width-2)" | "var(--lovelace-dimension-16)" | "var(--lovelace-dimension-20)" | "var(--lovelace-dimension-22)" | "var(--lovelace-dimension-24)" | "var(--lovelace-dimension-32)" | "var(--lovelace-dimension-36)" | "var(--lovelace-color-content-default)" | "var(--lovelace-color-content-secondary)" | "var(--lovelace-color-content-secondary-inverse)" | "var(--lovelace-color-content-disabled)" | "var(--lovelace-color-content-inverse)" | "var(--lovelace-color-background-default)" | "var(--lovelace-color-background-secondary)" | "var(--lovelace-color-background-tertiary)" | "var(--lovelace-color-background-quaternary)" | "var(--lovelace-color-background-disabled)" | "var(--lovelace-color-background-inverse)" | "var(--lovelace-color-background-neutral-overlay)" | "var(--lovelace-color-border-default)" | "var(--lovelace-color-border-medium)" | "var(--lovelace-color-border-strong)" | "var(--lovelace-color-content-link)" | "var(--lovelace-color-background-destructive)" | "var(--lovelace-color-content-destructive)" | "var(--lovelace-color-background-destructive-light)" | "var(--lovelace-color-border-destructive)" | "var(--lovelace-color-content-on-destructive)" | "var(--lovelace-color-content-warning)" | "var(--lovelace-color-background-warning)" | "var(--lovelace-color-background-warning-light)" | "var(--lovelace-color-border-warning)" | "var(--lovelace-color-content-success)" | "var(--lovelace-color-background-success)" | "var(--lovelace-color-background-success-light)" | "var(--lovelace-color-border-success)" | "var(--lovelace-color-content-accent)" | "var(--lovelace-color-content-on-accent)" | "var(--lovelace-color-content-on-scrim)" | "var(--lovelace-color-background-accent)" | "var(--lovelace-color-background-highlight-overlay)" | "var(--lovelace-color-border-focus)" | "var(--lovelace-color-border-accent)" | "var(--lovelace-color-border-highlight)" | "var(--lovelace-font-weight-regular)" | "var(--lovelace-font-size-caption)" | "var(--lovelace-line-height-caption)" | "var(--lovelace-paragraph-spacing-caption)" | "var(--lovelace-paragraph-spacing-body)" | "var(--lovelace-paragraph-spacing-title)" | "var(--lovelace-line-height-body)" | "var(--lovelace-line-height-title-small)" | "var(--lovelace-line-height-title-large)" | "var(--lovelace-font-size-body)" | "var(--lovelace-font-size-title-small)" | "var(--lovelace-font-size-title-large)" | "var(--lovelace-font-weight-medium)" | "var(--lovelace-font-weight-semi-bold)" | "var(--lovelace-font-family-body)" | "var(--lovelace-font-family-heading)" | "var(--lovelace-font-family-code)" | "var(--lovelace-border-radius-none)" | "var(--lovelace-border-radius-6)" | "var(--lovelace-border-radius-10)" | "var(--lovelace-border-radius-14)" | "var(--lovelace-border-radius-20)" | "var(--lovelace-border-radius-24)" | "var(--lovelace-border-radius-full)" | "var(--lovelace-padding-4)" | "var(--lovelace-padding-8)" | "var(--lovelace-padding-12)" | "var(--lovelace-gap-4)" | "var(--lovelace-padding-16)" | "var(--lovelace-gap-8)" | "var(--lovelace-gap-12)" | "var(--lovelace-gap-16)" | "var(--lovelace-gap-20)" | "var(--lovelace-padding-20)" | "var(--lovelace-border-width-default)" | "var(--lovelace-border-width-focus)" | "var(--lovelace-opacity-state-hover)" | "var(--lovelace-opacity-state-focus)" | "var(--lovelace-opacity-state-pressed)" | "var(--lovelace-icon-size-sm)" | "var(--lovelace-icon-size-md)" | "var(--lovelace-icon-size-control)" | "var(--lovelace-icon-size-lg)" | "var(--lovelace-easing-standard)" | "var(--lovelace-easing-emphasized)" | "var(--lovelace-easing-decelerate)" | "var(--lovelace-easing-accelerate)" | "var(--lovelace-duration-fast)" | "var(--lovelace-duration-medium)" | "var(--lovelace-duration-slow)" | "var(--lovelace-message-user-background)" | "var(--lovelace-message-user-content)" | "var(--lovelace-button-primary-background)" | "var(--lovelace-button-primary-content)" | "var(--lovelace-header-background)" | "var(--lovelace-pill-content-primary)" | "var(--lovelace-header-content)" | "var(--lovelace-chip-background-selected)" | "var(--lovelace-chatfab-background)" | "var(--lovelace-chatfab-content)" | "var(--lovelace-composer-background)" | "var(--lovelace-composer-border-default)" | "var(--lovelace-composer-content-default)" | "var(--lovelace-composer-content-secondary)" | "var(--lovelace-composer-border-focus)" | "var(--lovelace-composer-border-active)" | "var(--lovelace-avatar-background)" | "var(--lovelace-avatar-content)" | "var(--lovelace-scrollmarker-background)" | "var(--lovelace-scrollmarker-content)" | "var(--lovelace-send-button-background)" | "var(--lovelace-chat-background)" | "var(--lovelace-border-radius-button)" | "var(--lovelace-border-radius-message)" | "var(--lovelace-border-radius-input)" | "var(--lovelace-border-radius-composer)" | "var(--lovelace-border-radius-avatar)" | "var(--lovelace-border-radius-pill)" | "var(--lovelace-border-radius-media-preview)" | "var(--lovelace-border-radius-container)";
+            color: "var(--lovelace-color-neutral-0)" | "var(--lovelace-color-neutral-50)" | "var(--lovelace-color-neutral-100)" | "var(--lovelace-color-neutral-200)" | "var(--lovelace-color-neutral-300)" | "var(--lovelace-color-neutral-400)" | "var(--lovelace-color-neutral-500)" | "var(--lovelace-color-neutral-600)" | "var(--lovelace-color-neutral-700)" | "var(--lovelace-color-neutral-800)" | "var(--lovelace-color-neutral-900)" | "var(--lovelace-color-red-50)" | "var(--lovelace-color-orange-50)" | "var(--lovelace-color-green-50)" | "var(--lovelace-color-green-100)" | "var(--lovelace-color-green-200)" | "var(--lovelace-color-green-300)" | "var(--lovelace-color-green-400)" | "var(--lovelace-color-green-500)" | "var(--lovelace-color-green-600)" | "var(--lovelace-color-green-700)" | "var(--lovelace-color-green-800)" | "var(--lovelace-color-green-900)" | "var(--lovelace-color-orange-100)" | "var(--lovelace-color-orange-200)" | "var(--lovelace-color-orange-300)" | "var(--lovelace-color-orange-400)" | "var(--lovelace-color-orange-500)" | "var(--lovelace-color-orange-600)" | "var(--lovelace-color-orange-700)" | "var(--lovelace-color-orange-800)" | "var(--lovelace-color-orange-900)" | "var(--lovelace-color-red-100)" | "var(--lovelace-color-red-200)" | "var(--lovelace-color-red-300)" | "var(--lovelace-color-red-400)" | "var(--lovelace-color-red-500)" | "var(--lovelace-color-red-600)" | "var(--lovelace-color-red-700)" | "var(--lovelace-color-red-800)" | "var(--lovelace-color-red-900)" | "var(--lovelace-spacing-4)" | "var(--lovelace-spacing-8)" | "var(--lovelace-spacing-12)" | "var(--lovelace-spacing-16)" | "var(--lovelace-spacing-20)" | "var(--lovelace-spacing-24)" | "var(--lovelace-spacing-32)" | "var(--lovelace-spacing-40)" | "var(--lovelace-spacing-48)" | "var(--lovelace-font-weight-400)" | "var(--lovelace-font-weight-500)" | "var(--lovelace-font-weight-600)" | "var(--lovelace-color-blue-50)" | "var(--lovelace-color-blue-100)" | "var(--lovelace-color-blue-200)" | "var(--lovelace-color-blue-300)" | "var(--lovelace-color-blue-400)" | "var(--lovelace-color-blue-500)" | "var(--lovelace-color-blue-600)" | "var(--lovelace-color-blue-700)" | "var(--lovelace-color-blue-800)" | "var(--lovelace-color-blue-900)" | "var(--lovelace-font-size-12)" | "var(--lovelace-font-size-14)" | "var(--lovelace-font-size-16)" | "var(--lovelace-font-size-18)" | "var(--lovelace-font-size-20)" | "var(--lovelace-font-size-22)" | "var(--lovelace-font-size-24)" | "var(--lovelace-font-size-26)" | "var(--lovelace-font-size-28)" | "var(--lovelace-font-line-height-16)" | "var(--lovelace-font-line-height-18)" | "var(--lovelace-font-line-height-22)" | "var(--lovelace-font-line-height-24)" | "var(--lovelace-font-line-height-26)" | "var(--lovelace-font-line-height-28)" | "var(--lovelace-font-line-height-30)" | "var(--lovelace-font-line-height-32)" | "var(--lovelace-font-line-height-34)" | "var(--lovelace-border-radius-0)" | "var(--lovelace-p-border-radius-6)" | "var(--lovelace-p-border-radius-10)" | "var(--lovelace-p-border-radius-14)" | "var(--lovelace-p-border-radius-20)" | "var(--lovelace-p-border-radius-24)" | "var(--lovelace-border-radius-999)" | "var(--lovelace-font-paragraph-spacing-4)" | "var(--lovelace-font-paragraph-spacing-6)" | "var(--lovelace-font-paragraph-spacing-8)" | "var(--lovelace-font-paragraph-spacing-10)" | "var(--lovelace-font-paragraph-spacing-12)" | "var(--lovelace-color-accent-50)" | "var(--lovelace-color-accent-100)" | "var(--lovelace-color-accent-200)" | "var(--lovelace-color-accent-300)" | "var(--lovelace-color-accent-400)" | "var(--lovelace-color-accent-500)" | "var(--lovelace-color-accent-600)" | "var(--lovelace-color-accent-700)" | "var(--lovelace-color-accent-800)" | "var(--lovelace-color-accent-900)" | "var(--lovelace-font-family-sans-serif)" | "var(--lovelace-font-family-mono)" | "var(--lovelace-border-width-1)" | "var(--lovelace-border-width-2)" | "var(--lovelace-dimension-16)" | "var(--lovelace-dimension-20)" | "var(--lovelace-dimension-22)" | "var(--lovelace-dimension-24)" | "var(--lovelace-dimension-32)" | "var(--lovelace-dimension-36)" | "var(--lovelace-color-content-default)" | "var(--lovelace-color-content-secondary)" | "var(--lovelace-color-content-secondary-inverse)" | "var(--lovelace-color-content-disabled)" | "var(--lovelace-color-content-inverse)" | "var(--lovelace-color-background-default)" | "var(--lovelace-color-background-secondary)" | "var(--lovelace-color-background-tertiary)" | "var(--lovelace-color-background-quaternary)" | "var(--lovelace-color-background-disabled)" | "var(--lovelace-color-background-inverse)" | "var(--lovelace-color-background-neutral-overlay)" | "var(--lovelace-color-border-default)" | "var(--lovelace-color-border-medium)" | "var(--lovelace-color-border-strong)" | "var(--lovelace-color-content-link)" | "var(--lovelace-color-background-destructive)" | "var(--lovelace-color-content-destructive)" | "var(--lovelace-color-background-destructive-light)" | "var(--lovelace-color-border-destructive)" | "var(--lovelace-color-content-on-destructive)" | "var(--lovelace-color-content-warning)" | "var(--lovelace-color-background-warning)" | "var(--lovelace-color-background-warning-light)" | "var(--lovelace-color-border-warning)" | "var(--lovelace-color-content-success)" | "var(--lovelace-color-background-success)" | "var(--lovelace-color-background-success-light)" | "var(--lovelace-color-border-success)" | "var(--lovelace-color-content-accent)" | "var(--lovelace-color-content-on-accent)" | "var(--lovelace-color-content-on-scrim)" | "var(--lovelace-color-background-accent)" | "var(--lovelace-color-background-highlight-overlay)" | "var(--lovelace-color-border-focus)" | "var(--lovelace-color-border-accent)" | "var(--lovelace-color-border-highlight)" | "var(--lovelace-font-weight-regular)" | "var(--lovelace-font-size-caption)" | "var(--lovelace-line-height-caption)" | "var(--lovelace-paragraph-spacing-caption)" | "var(--lovelace-paragraph-spacing-body)" | "var(--lovelace-paragraph-spacing-title)" | "var(--lovelace-line-height-body)" | "var(--lovelace-line-height-title-small)" | "var(--lovelace-line-height-title-large)" | "var(--lovelace-font-size-body)" | "var(--lovelace-font-size-title-small)" | "var(--lovelace-font-size-title-large)" | "var(--lovelace-font-weight-medium)" | "var(--lovelace-font-weight-semi-bold)" | "var(--lovelace-font-family-body)" | "var(--lovelace-font-family-heading)" | "var(--lovelace-font-family-code)" | "var(--lovelace-border-radius-none)" | "var(--lovelace-border-radius-6)" | "var(--lovelace-border-radius-10)" | "var(--lovelace-border-radius-14)" | "var(--lovelace-border-radius-20)" | "var(--lovelace-border-radius-24)" | "var(--lovelace-border-radius-full)" | "var(--lovelace-padding-4)" | "var(--lovelace-padding-8)" | "var(--lovelace-padding-12)" | "var(--lovelace-gap-4)" | "var(--lovelace-padding-16)" | "var(--lovelace-gap-8)" | "var(--lovelace-gap-12)" | "var(--lovelace-gap-16)" | "var(--lovelace-gap-20)" | "var(--lovelace-padding-20)" | "var(--lovelace-border-width-default)" | "var(--lovelace-border-width-focus)" | "var(--lovelace-opacity-state-hover)" | "var(--lovelace-opacity-state-focus)" | "var(--lovelace-opacity-state-pressed)" | "var(--lovelace-icon-size-sm)" | "var(--lovelace-icon-size-md)" | "var(--lovelace-icon-size-control)" | "var(--lovelace-icon-size-lg)" | "var(--lovelace-easing-standard)" | "var(--lovelace-easing-emphasized)" | "var(--lovelace-easing-decelerate)" | "var(--lovelace-easing-accelerate)" | "var(--lovelace-duration-fast)" | "var(--lovelace-duration-medium)" | "var(--lovelace-duration-slow)" | "var(--lovelace-message-user-background)" | "var(--lovelace-message-user-content)" | "var(--lovelace-button-primary-background)" | "var(--lovelace-button-primary-content)" | "var(--lovelace-header-background)" | "var(--lovelace-pill-content-primary)" | "var(--lovelace-header-content)" | "var(--lovelace-chip-background-selected)" | "var(--lovelace-chatfab-background)" | "var(--lovelace-chatfab-content)" | "var(--lovelace-composer-background)" | "var(--lovelace-composer-border-default)" | "var(--lovelace-composer-content-default)" | "var(--lovelace-composer-content-secondary)" | "var(--lovelace-composer-border-focus)" | "var(--lovelace-composer-border-active)" | "var(--lovelace-avatar-background)" | "var(--lovelace-avatar-content)" | "var(--lovelace-scrollmarker-background)" | "var(--lovelace-scrollmarker-content)" | "var(--lovelace-send-button-background)" | "var(--lovelace-chat-background)" | "var(--lovelace-border-radius-button)" | "var(--lovelace-border-radius-message)" | "var(--lovelace-border-radius-input)" | "var(--lovelace-border-radius-composer)" | "var(--lovelace-border-radius-avatar)" | "var(--lovelace-border-radius-pill)" | "var(--lovelace-border-radius-media-preview)" | "var(--lovelace-border-radius-container)";
+        };
+        warning: {
+            backgroundColor: "var(--lovelace-color-neutral-0)" | "var(--lovelace-color-neutral-50)" | "var(--lovelace-color-neutral-100)" | "var(--lovelace-color-neutral-200)" | "var(--lovelace-color-neutral-300)" | "var(--lovelace-color-neutral-400)" | "var(--lovelace-color-neutral-500)" | "var(--lovelace-color-neutral-600)" | "var(--lovelace-color-neutral-700)" | "var(--lovelace-color-neutral-800)" | "var(--lovelace-color-neutral-900)" | "var(--lovelace-color-red-50)" | "var(--lovelace-color-orange-50)" | "var(--lovelace-color-green-50)" | "var(--lovelace-color-green-100)" | "var(--lovelace-color-green-200)" | "var(--lovelace-color-green-300)" | "var(--lovelace-color-green-400)" | "var(--lovelace-color-green-500)" | "var(--lovelace-color-green-600)" | "var(--lovelace-color-green-700)" | "var(--lovelace-color-green-800)" | "var(--lovelace-color-green-900)" | "var(--lovelace-color-orange-100)" | "var(--lovelace-color-orange-200)" | "var(--lovelace-color-orange-300)" | "var(--lovelace-color-orange-400)" | "var(--lovelace-color-orange-500)" | "var(--lovelace-color-orange-600)" | "var(--lovelace-color-orange-700)" | "var(--lovelace-color-orange-800)" | "var(--lovelace-color-orange-900)" | "var(--lovelace-color-red-100)" | "var(--lovelace-color-red-200)" | "var(--lovelace-color-red-300)" | "var(--lovelace-color-red-400)" | "var(--lovelace-color-red-500)" | "var(--lovelace-color-red-600)" | "var(--lovelace-color-red-700)" | "var(--lovelace-color-red-800)" | "var(--lovelace-color-red-900)" | "var(--lovelace-spacing-4)" | "var(--lovelace-spacing-8)" | "var(--lovelace-spacing-12)" | "var(--lovelace-spacing-16)" | "var(--lovelace-spacing-20)" | "var(--lovelace-spacing-24)" | "var(--lovelace-spacing-32)" | "var(--lovelace-spacing-40)" | "var(--lovelace-spacing-48)" | "var(--lovelace-font-weight-400)" | "var(--lovelace-font-weight-500)" | "var(--lovelace-font-weight-600)" | "var(--lovelace-color-blue-50)" | "var(--lovelace-color-blue-100)" | "var(--lovelace-color-blue-200)" | "var(--lovelace-color-blue-300)" | "var(--lovelace-color-blue-400)" | "var(--lovelace-color-blue-500)" | "var(--lovelace-color-blue-600)" | "var(--lovelace-color-blue-700)" | "var(--lovelace-color-blue-800)" | "var(--lovelace-color-blue-900)" | "var(--lovelace-font-size-12)" | "var(--lovelace-font-size-14)" | "var(--lovelace-font-size-16)" | "var(--lovelace-font-size-18)" | "var(--lovelace-font-size-20)" | "var(--lovelace-font-size-22)" | "var(--lovelace-font-size-24)" | "var(--lovelace-font-size-26)" | "var(--lovelace-font-size-28)" | "var(--lovelace-font-line-height-16)" | "var(--lovelace-font-line-height-18)" | "var(--lovelace-font-line-height-22)" | "var(--lovelace-font-line-height-24)" | "var(--lovelace-font-line-height-26)" | "var(--lovelace-font-line-height-28)" | "var(--lovelace-font-line-height-30)" | "var(--lovelace-font-line-height-32)" | "var(--lovelace-font-line-height-34)" | "var(--lovelace-border-radius-0)" | "var(--lovelace-p-border-radius-6)" | "var(--lovelace-p-border-radius-10)" | "var(--lovelace-p-border-radius-14)" | "var(--lovelace-p-border-radius-20)" | "var(--lovelace-p-border-radius-24)" | "var(--lovelace-border-radius-999)" | "var(--lovelace-font-paragraph-spacing-4)" | "var(--lovelace-font-paragraph-spacing-6)" | "var(--lovelace-font-paragraph-spacing-8)" | "var(--lovelace-font-paragraph-spacing-10)" | "var(--lovelace-font-paragraph-spacing-12)" | "var(--lovelace-color-accent-50)" | "var(--lovelace-color-accent-100)" | "var(--lovelace-color-accent-200)" | "var(--lovelace-color-accent-300)" | "var(--lovelace-color-accent-400)" | "var(--lovelace-color-accent-500)" | "var(--lovelace-color-accent-600)" | "var(--lovelace-color-accent-700)" | "var(--lovelace-color-accent-800)" | "var(--lovelace-color-accent-900)" | "var(--lovelace-font-family-sans-serif)" | "var(--lovelace-font-family-mono)" | "var(--lovelace-border-width-1)" | "var(--lovelace-border-width-2)" | "var(--lovelace-dimension-16)" | "var(--lovelace-dimension-20)" | "var(--lovelace-dimension-22)" | "var(--lovelace-dimension-24)" | "var(--lovelace-dimension-32)" | "var(--lovelace-dimension-36)" | "var(--lovelace-color-content-default)" | "var(--lovelace-color-content-secondary)" | "var(--lovelace-color-content-secondary-inverse)" | "var(--lovelace-color-content-disabled)" | "var(--lovelace-color-content-inverse)" | "var(--lovelace-color-background-default)" | "var(--lovelace-color-background-secondary)" | "var(--lovelace-color-background-tertiary)" | "var(--lovelace-color-background-quaternary)" | "var(--lovelace-color-background-disabled)" | "var(--lovelace-color-background-inverse)" | "var(--lovelace-color-background-neutral-overlay)" | "var(--lovelace-color-border-default)" | "var(--lovelace-color-border-medium)" | "var(--lovelace-color-border-strong)" | "var(--lovelace-color-content-link)" | "var(--lovelace-color-background-destructive)" | "var(--lovelace-color-content-destructive)" | "var(--lovelace-color-background-destructive-light)" | "var(--lovelace-color-border-destructive)" | "var(--lovelace-color-content-on-destructive)" | "var(--lovelace-color-content-warning)" | "var(--lovelace-color-background-warning)" | "var(--lovelace-color-background-warning-light)" | "var(--lovelace-color-border-warning)" | "var(--lovelace-color-content-success)" | "var(--lovelace-color-background-success)" | "var(--lovelace-color-background-success-light)" | "var(--lovelace-color-border-success)" | "var(--lovelace-color-content-accent)" | "var(--lovelace-color-content-on-accent)" | "var(--lovelace-color-content-on-scrim)" | "var(--lovelace-color-background-accent)" | "var(--lovelace-color-background-highlight-overlay)" | "var(--lovelace-color-border-focus)" | "var(--lovelace-color-border-accent)" | "var(--lovelace-color-border-highlight)" | "var(--lovelace-font-weight-regular)" | "var(--lovelace-font-size-caption)" | "var(--lovelace-line-height-caption)" | "var(--lovelace-paragraph-spacing-caption)" | "var(--lovelace-paragraph-spacing-body)" | "var(--lovelace-paragraph-spacing-title)" | "var(--lovelace-line-height-body)" | "var(--lovelace-line-height-title-small)" | "var(--lovelace-line-height-title-large)" | "var(--lovelace-font-size-body)" | "var(--lovelace-font-size-title-small)" | "var(--lovelace-font-size-title-large)" | "var(--lovelace-font-weight-medium)" | "var(--lovelace-font-weight-semi-bold)" | "var(--lovelace-font-family-body)" | "var(--lovelace-font-family-heading)" | "var(--lovelace-font-family-code)" | "var(--lovelace-border-radius-none)" | "var(--lovelace-border-radius-6)" | "var(--lovelace-border-radius-10)" | "var(--lovelace-border-radius-14)" | "var(--lovelace-border-radius-20)" | "var(--lovelace-border-radius-24)" | "var(--lovelace-border-radius-full)" | "var(--lovelace-padding-4)" | "var(--lovelace-padding-8)" | "var(--lovelace-padding-12)" | "var(--lovelace-gap-4)" | "var(--lovelace-padding-16)" | "var(--lovelace-gap-8)" | "var(--lovelace-gap-12)" | "var(--lovelace-gap-16)" | "var(--lovelace-gap-20)" | "var(--lovelace-padding-20)" | "var(--lovelace-border-width-default)" | "var(--lovelace-border-width-focus)" | "var(--lovelace-opacity-state-hover)" | "var(--lovelace-opacity-state-focus)" | "var(--lovelace-opacity-state-pressed)" | "var(--lovelace-icon-size-sm)" | "var(--lovelace-icon-size-md)" | "var(--lovelace-icon-size-control)" | "var(--lovelace-icon-size-lg)" | "var(--lovelace-easing-standard)" | "var(--lovelace-easing-emphasized)" | "var(--lovelace-easing-decelerate)" | "var(--lovelace-easing-accelerate)" | "var(--lovelace-duration-fast)" | "var(--lovelace-duration-medium)" | "var(--lovelace-duration-slow)" | "var(--lovelace-message-user-background)" | "var(--lovelace-message-user-content)" | "var(--lovelace-button-primary-background)" | "var(--lovelace-button-primary-content)" | "var(--lovelace-header-background)" | "var(--lovelace-pill-content-primary)" | "var(--lovelace-header-content)" | "var(--lovelace-chip-background-selected)" | "var(--lovelace-chatfab-background)" | "var(--lovelace-chatfab-content)" | "var(--lovelace-composer-background)" | "var(--lovelace-composer-border-default)" | "var(--lovelace-composer-content-default)" | "var(--lovelace-composer-content-secondary)" | "var(--lovelace-composer-border-focus)" | "var(--lovelace-composer-border-active)" | "var(--lovelace-avatar-background)" | "var(--lovelace-avatar-content)" | "var(--lovelace-scrollmarker-background)" | "var(--lovelace-scrollmarker-content)" | "var(--lovelace-send-button-background)" | "var(--lovelace-chat-background)" | "var(--lovelace-border-radius-button)" | "var(--lovelace-border-radius-message)" | "var(--lovelace-border-radius-input)" | "var(--lovelace-border-radius-composer)" | "var(--lovelace-border-radius-avatar)" | "var(--lovelace-border-radius-pill)" | "var(--lovelace-border-radius-media-preview)" | "var(--lovelace-border-radius-container)";
+            color: "var(--lovelace-color-neutral-0)" | "var(--lovelace-color-neutral-50)" | "var(--lovelace-color-neutral-100)" | "var(--lovelace-color-neutral-200)" | "var(--lovelace-color-neutral-300)" | "var(--lovelace-color-neutral-400)" | "var(--lovelace-color-neutral-500)" | "var(--lovelace-color-neutral-600)" | "var(--lovelace-color-neutral-700)" | "var(--lovelace-color-neutral-800)" | "var(--lovelace-color-neutral-900)" | "var(--lovelace-color-red-50)" | "var(--lovelace-color-orange-50)" | "var(--lovelace-color-green-50)" | "var(--lovelace-color-green-100)" | "var(--lovelace-color-green-200)" | "var(--lovelace-color-green-300)" | "var(--lovelace-color-green-400)" | "var(--lovelace-color-green-500)" | "var(--lovelace-color-green-600)" | "var(--lovelace-color-green-700)" | "var(--lovelace-color-green-800)" | "var(--lovelace-color-green-900)" | "var(--lovelace-color-orange-100)" | "var(--lovelace-color-orange-200)" | "var(--lovelace-color-orange-300)" | "var(--lovelace-color-orange-400)" | "var(--lovelace-color-orange-500)" | "var(--lovelace-color-orange-600)" | "var(--lovelace-color-orange-700)" | "var(--lovelace-color-orange-800)" | "var(--lovelace-color-orange-900)" | "var(--lovelace-color-red-100)" | "var(--lovelace-color-red-200)" | "var(--lovelace-color-red-300)" | "var(--lovelace-color-red-400)" | "var(--lovelace-color-red-500)" | "var(--lovelace-color-red-600)" | "var(--lovelace-color-red-700)" | "var(--lovelace-color-red-800)" | "var(--lovelace-color-red-900)" | "var(--lovelace-spacing-4)" | "var(--lovelace-spacing-8)" | "var(--lovelace-spacing-12)" | "var(--lovelace-spacing-16)" | "var(--lovelace-spacing-20)" | "var(--lovelace-spacing-24)" | "var(--lovelace-spacing-32)" | "var(--lovelace-spacing-40)" | "var(--lovelace-spacing-48)" | "var(--lovelace-font-weight-400)" | "var(--lovelace-font-weight-500)" | "var(--lovelace-font-weight-600)" | "var(--lovelace-color-blue-50)" | "var(--lovelace-color-blue-100)" | "var(--lovelace-color-blue-200)" | "var(--lovelace-color-blue-300)" | "var(--lovelace-color-blue-400)" | "var(--lovelace-color-blue-500)" | "var(--lovelace-color-blue-600)" | "var(--lovelace-color-blue-700)" | "var(--lovelace-color-blue-800)" | "var(--lovelace-color-blue-900)" | "var(--lovelace-font-size-12)" | "var(--lovelace-font-size-14)" | "var(--lovelace-font-size-16)" | "var(--lovelace-font-size-18)" | "var(--lovelace-font-size-20)" | "var(--lovelace-font-size-22)" | "var(--lovelace-font-size-24)" | "var(--lovelace-font-size-26)" | "var(--lovelace-font-size-28)" | "var(--lovelace-font-line-height-16)" | "var(--lovelace-font-line-height-18)" | "var(--lovelace-font-line-height-22)" | "var(--lovelace-font-line-height-24)" | "var(--lovelace-font-line-height-26)" | "var(--lovelace-font-line-height-28)" | "var(--lovelace-font-line-height-30)" | "var(--lovelace-font-line-height-32)" | "var(--lovelace-font-line-height-34)" | "var(--lovelace-border-radius-0)" | "var(--lovelace-p-border-radius-6)" | "var(--lovelace-p-border-radius-10)" | "var(--lovelace-p-border-radius-14)" | "var(--lovelace-p-border-radius-20)" | "var(--lovelace-p-border-radius-24)" | "var(--lovelace-border-radius-999)" | "var(--lovelace-font-paragraph-spacing-4)" | "var(--lovelace-font-paragraph-spacing-6)" | "var(--lovelace-font-paragraph-spacing-8)" | "var(--lovelace-font-paragraph-spacing-10)" | "var(--lovelace-font-paragraph-spacing-12)" | "var(--lovelace-color-accent-50)" | "var(--lovelace-color-accent-100)" | "var(--lovelace-color-accent-200)" | "var(--lovelace-color-accent-300)" | "var(--lovelace-color-accent-400)" | "var(--lovelace-color-accent-500)" | "var(--lovelace-color-accent-600)" | "var(--lovelace-color-accent-700)" | "var(--lovelace-color-accent-800)" | "var(--lovelace-color-accent-900)" | "var(--lovelace-font-family-sans-serif)" | "var(--lovelace-font-family-mono)" | "var(--lovelace-border-width-1)" | "var(--lovelace-border-width-2)" | "var(--lovelace-dimension-16)" | "var(--lovelace-dimension-20)" | "var(--lovelace-dimension-22)" | "var(--lovelace-dimension-24)" | "var(--lovelace-dimension-32)" | "var(--lovelace-dimension-36)" | "var(--lovelace-color-content-default)" | "var(--lovelace-color-content-secondary)" | "var(--lovelace-color-content-secondary-inverse)" | "var(--lovelace-color-content-disabled)" | "var(--lovelace-color-content-inverse)" | "var(--lovelace-color-background-default)" | "var(--lovelace-color-background-secondary)" | "var(--lovelace-color-background-tertiary)" | "var(--lovelace-color-background-quaternary)" | "var(--lovelace-color-background-disabled)" | "var(--lovelace-color-background-inverse)" | "var(--lovelace-color-background-neutral-overlay)" | "var(--lovelace-color-border-default)" | "var(--lovelace-color-border-medium)" | "var(--lovelace-color-border-strong)" | "var(--lovelace-color-content-link)" | "var(--lovelace-color-background-destructive)" | "var(--lovelace-color-content-destructive)" | "var(--lovelace-color-background-destructive-light)" | "var(--lovelace-color-border-destructive)" | "var(--lovelace-color-content-on-destructive)" | "var(--lovelace-color-content-warning)" | "var(--lovelace-color-background-warning)" | "var(--lovelace-color-background-warning-light)" | "var(--lovelace-color-border-warning)" | "var(--lovelace-color-content-success)" | "var(--lovelace-color-background-success)" | "var(--lovelace-color-background-success-light)" | "var(--lovelace-color-border-success)" | "var(--lovelace-color-content-accent)" | "var(--lovelace-color-content-on-accent)" | "var(--lovelace-color-content-on-scrim)" | "var(--lovelace-color-background-accent)" | "var(--lovelace-color-background-highlight-overlay)" | "var(--lovelace-color-border-focus)" | "var(--lovelace-color-border-accent)" | "var(--lovelace-color-border-highlight)" | "var(--lovelace-font-weight-regular)" | "var(--lovelace-font-size-caption)" | "var(--lovelace-line-height-caption)" | "var(--lovelace-paragraph-spacing-caption)" | "var(--lovelace-paragraph-spacing-body)" | "var(--lovelace-paragraph-spacing-title)" | "var(--lovelace-line-height-body)" | "var(--lovelace-line-height-title-small)" | "var(--lovelace-line-height-title-large)" | "var(--lovelace-font-size-body)" | "var(--lovelace-font-size-title-small)" | "var(--lovelace-font-size-title-large)" | "var(--lovelace-font-weight-medium)" | "var(--lovelace-font-weight-semi-bold)" | "var(--lovelace-font-family-body)" | "var(--lovelace-font-family-heading)" | "var(--lovelace-font-family-code)" | "var(--lovelace-border-radius-none)" | "var(--lovelace-border-radius-6)" | "var(--lovelace-border-radius-10)" | "var(--lovelace-border-radius-14)" | "var(--lovelace-border-radius-20)" | "var(--lovelace-border-radius-24)" | "var(--lovelace-border-radius-full)" | "var(--lovelace-padding-4)" | "var(--lovelace-padding-8)" | "var(--lovelace-padding-12)" | "var(--lovelace-gap-4)" | "var(--lovelace-padding-16)" | "var(--lovelace-gap-8)" | "var(--lovelace-gap-12)" | "var(--lovelace-gap-16)" | "var(--lovelace-gap-20)" | "var(--lovelace-padding-20)" | "var(--lovelace-border-width-default)" | "var(--lovelace-border-width-focus)" | "var(--lovelace-opacity-state-hover)" | "var(--lovelace-opacity-state-focus)" | "var(--lovelace-opacity-state-pressed)" | "var(--lovelace-icon-size-sm)" | "var(--lovelace-icon-size-md)" | "var(--lovelace-icon-size-control)" | "var(--lovelace-icon-size-lg)" | "var(--lovelace-easing-standard)" | "var(--lovelace-easing-emphasized)" | "var(--lovelace-easing-decelerate)" | "var(--lovelace-easing-accelerate)" | "var(--lovelace-duration-fast)" | "var(--lovelace-duration-medium)" | "var(--lovelace-duration-slow)" | "var(--lovelace-message-user-background)" | "var(--lovelace-message-user-content)" | "var(--lovelace-button-primary-background)" | "var(--lovelace-button-primary-content)" | "var(--lovelace-header-background)" | "var(--lovelace-pill-content-primary)" | "var(--lovelace-header-content)" | "var(--lovelace-chip-background-selected)" | "var(--lovelace-chatfab-background)" | "var(--lovelace-chatfab-content)" | "var(--lovelace-composer-background)" | "var(--lovelace-composer-border-default)" | "var(--lovelace-composer-content-default)" | "var(--lovelace-composer-content-secondary)" | "var(--lovelace-composer-border-focus)" | "var(--lovelace-composer-border-active)" | "var(--lovelace-avatar-background)" | "var(--lovelace-avatar-content)" | "var(--lovelace-scrollmarker-background)" | "var(--lovelace-scrollmarker-content)" | "var(--lovelace-send-button-background)" | "var(--lovelace-chat-background)" | "var(--lovelace-border-radius-button)" | "var(--lovelace-border-radius-message)" | "var(--lovelace-border-radius-input)" | "var(--lovelace-border-radius-composer)" | "var(--lovelace-border-radius-avatar)" | "var(--lovelace-border-radius-pill)" | "var(--lovelace-border-radius-media-preview)" | "var(--lovelace-border-radius-container)";
+        };
+        error: {
+            backgroundColor: "var(--lovelace-color-neutral-0)" | "var(--lovelace-color-neutral-50)" | "var(--lovelace-color-neutral-100)" | "var(--lovelace-color-neutral-200)" | "var(--lovelace-color-neutral-300)" | "var(--lovelace-color-neutral-400)" | "var(--lovelace-color-neutral-500)" | "var(--lovelace-color-neutral-600)" | "var(--lovelace-color-neutral-700)" | "var(--lovelace-color-neutral-800)" | "var(--lovelace-color-neutral-900)" | "var(--lovelace-color-red-50)" | "var(--lovelace-color-orange-50)" | "var(--lovelace-color-green-50)" | "var(--lovelace-color-green-100)" | "var(--lovelace-color-green-200)" | "var(--lovelace-color-green-300)" | "var(--lovelace-color-green-400)" | "var(--lovelace-color-green-500)" | "var(--lovelace-color-green-600)" | "var(--lovelace-color-green-700)" | "var(--lovelace-color-green-800)" | "var(--lovelace-color-green-900)" | "var(--lovelace-color-orange-100)" | "var(--lovelace-color-orange-200)" | "var(--lovelace-color-orange-300)" | "var(--lovelace-color-orange-400)" | "var(--lovelace-color-orange-500)" | "var(--lovelace-color-orange-600)" | "var(--lovelace-color-orange-700)" | "var(--lovelace-color-orange-800)" | "var(--lovelace-color-orange-900)" | "var(--lovelace-color-red-100)" | "var(--lovelace-color-red-200)" | "var(--lovelace-color-red-300)" | "var(--lovelace-color-red-400)" | "var(--lovelace-color-red-500)" | "var(--lovelace-color-red-600)" | "var(--lovelace-color-red-700)" | "var(--lovelace-color-red-800)" | "var(--lovelace-color-red-900)" | "var(--lovelace-spacing-4)" | "var(--lovelace-spacing-8)" | "var(--lovelace-spacing-12)" | "var(--lovelace-spacing-16)" | "var(--lovelace-spacing-20)" | "var(--lovelace-spacing-24)" | "var(--lovelace-spacing-32)" | "var(--lovelace-spacing-40)" | "var(--lovelace-spacing-48)" | "var(--lovelace-font-weight-400)" | "var(--lovelace-font-weight-500)" | "var(--lovelace-font-weight-600)" | "var(--lovelace-color-blue-50)" | "var(--lovelace-color-blue-100)" | "var(--lovelace-color-blue-200)" | "var(--lovelace-color-blue-300)" | "var(--lovelace-color-blue-400)" | "var(--lovelace-color-blue-500)" | "var(--lovelace-color-blue-600)" | "var(--lovelace-color-blue-700)" | "var(--lovelace-color-blue-800)" | "var(--lovelace-color-blue-900)" | "var(--lovelace-font-size-12)" | "var(--lovelace-font-size-14)" | "var(--lovelace-font-size-16)" | "var(--lovelace-font-size-18)" | "var(--lovelace-font-size-20)" | "var(--lovelace-font-size-22)" | "var(--lovelace-font-size-24)" | "var(--lovelace-font-size-26)" | "var(--lovelace-font-size-28)" | "var(--lovelace-font-line-height-16)" | "var(--lovelace-font-line-height-18)" | "var(--lovelace-font-line-height-22)" | "var(--lovelace-font-line-height-24)" | "var(--lovelace-font-line-height-26)" | "var(--lovelace-font-line-height-28)" | "var(--lovelace-font-line-height-30)" | "var(--lovelace-font-line-height-32)" | "var(--lovelace-font-line-height-34)" | "var(--lovelace-border-radius-0)" | "var(--lovelace-p-border-radius-6)" | "var(--lovelace-p-border-radius-10)" | "var(--lovelace-p-border-radius-14)" | "var(--lovelace-p-border-radius-20)" | "var(--lovelace-p-border-radius-24)" | "var(--lovelace-border-radius-999)" | "var(--lovelace-font-paragraph-spacing-4)" | "var(--lovelace-font-paragraph-spacing-6)" | "var(--lovelace-font-paragraph-spacing-8)" | "var(--lovelace-font-paragraph-spacing-10)" | "var(--lovelace-font-paragraph-spacing-12)" | "var(--lovelace-color-accent-50)" | "var(--lovelace-color-accent-100)" | "var(--lovelace-color-accent-200)" | "var(--lovelace-color-accent-300)" | "var(--lovelace-color-accent-400)" | "var(--lovelace-color-accent-500)" | "var(--lovelace-color-accent-600)" | "var(--lovelace-color-accent-700)" | "var(--lovelace-color-accent-800)" | "var(--lovelace-color-accent-900)" | "var(--lovelace-font-family-sans-serif)" | "var(--lovelace-font-family-mono)" | "var(--lovelace-border-width-1)" | "var(--lovelace-border-width-2)" | "var(--lovelace-dimension-16)" | "var(--lovelace-dimension-20)" | "var(--lovelace-dimension-22)" | "var(--lovelace-dimension-24)" | "var(--lovelace-dimension-32)" | "var(--lovelace-dimension-36)" | "var(--lovelace-color-content-default)" | "var(--lovelace-color-content-secondary)" | "var(--lovelace-color-content-secondary-inverse)" | "var(--lovelace-color-content-disabled)" | "var(--lovelace-color-content-inverse)" | "var(--lovelace-color-background-default)" | "var(--lovelace-color-background-secondary)" | "var(--lovelace-color-background-tertiary)" | "var(--lovelace-color-background-quaternary)" | "var(--lovelace-color-background-disabled)" | "var(--lovelace-color-background-inverse)" | "var(--lovelace-color-background-neutral-overlay)" | "var(--lovelace-color-border-default)" | "var(--lovelace-color-border-medium)" | "var(--lovelace-color-border-strong)" | "var(--lovelace-color-content-link)" | "var(--lovelace-color-background-destructive)" | "var(--lovelace-color-content-destructive)" | "var(--lovelace-color-background-destructive-light)" | "var(--lovelace-color-border-destructive)" | "var(--lovelace-color-content-on-destructive)" | "var(--lovelace-color-content-warning)" | "var(--lovelace-color-background-warning)" | "var(--lovelace-color-background-warning-light)" | "var(--lovelace-color-border-warning)" | "var(--lovelace-color-content-success)" | "var(--lovelace-color-background-success)" | "var(--lovelace-color-background-success-light)" | "var(--lovelace-color-border-success)" | "var(--lovelace-color-content-accent)" | "var(--lovelace-color-content-on-accent)" | "var(--lovelace-color-content-on-scrim)" | "var(--lovelace-color-background-accent)" | "var(--lovelace-color-background-highlight-overlay)" | "var(--lovelace-color-border-focus)" | "var(--lovelace-color-border-accent)" | "var(--lovelace-color-border-highlight)" | "var(--lovelace-font-weight-regular)" | "var(--lovelace-font-size-caption)" | "var(--lovelace-line-height-caption)" | "var(--lovelace-paragraph-spacing-caption)" | "var(--lovelace-paragraph-spacing-body)" | "var(--lovelace-paragraph-spacing-title)" | "var(--lovelace-line-height-body)" | "var(--lovelace-line-height-title-small)" | "var(--lovelace-line-height-title-large)" | "var(--lovelace-font-size-body)" | "var(--lovelace-font-size-title-small)" | "var(--lovelace-font-size-title-large)" | "var(--lovelace-font-weight-medium)" | "var(--lovelace-font-weight-semi-bold)" | "var(--lovelace-font-family-body)" | "var(--lovelace-font-family-heading)" | "var(--lovelace-font-family-code)" | "var(--lovelace-border-radius-none)" | "var(--lovelace-border-radius-6)" | "var(--lovelace-border-radius-10)" | "var(--lovelace-border-radius-14)" | "var(--lovelace-border-radius-20)" | "var(--lovelace-border-radius-24)" | "var(--lovelace-border-radius-full)" | "var(--lovelace-padding-4)" | "var(--lovelace-padding-8)" | "var(--lovelace-padding-12)" | "var(--lovelace-gap-4)" | "var(--lovelace-padding-16)" | "var(--lovelace-gap-8)" | "var(--lovelace-gap-12)" | "var(--lovelace-gap-16)" | "var(--lovelace-gap-20)" | "var(--lovelace-padding-20)" | "var(--lovelace-border-width-default)" | "var(--lovelace-border-width-focus)" | "var(--lovelace-opacity-state-hover)" | "var(--lovelace-opacity-state-focus)" | "var(--lovelace-opacity-state-pressed)" | "var(--lovelace-icon-size-sm)" | "var(--lovelace-icon-size-md)" | "var(--lovelace-icon-size-control)" | "var(--lovelace-icon-size-lg)" | "var(--lovelace-easing-standard)" | "var(--lovelace-easing-emphasized)" | "var(--lovelace-easing-decelerate)" | "var(--lovelace-easing-accelerate)" | "var(--lovelace-duration-fast)" | "var(--lovelace-duration-medium)" | "var(--lovelace-duration-slow)" | "var(--lovelace-message-user-background)" | "var(--lovelace-message-user-content)" | "var(--lovelace-button-primary-background)" | "var(--lovelace-button-primary-content)" | "var(--lovelace-header-background)" | "var(--lovelace-pill-content-primary)" | "var(--lovelace-header-content)" | "var(--lovelace-chip-background-selected)" | "var(--lovelace-chatfab-background)" | "var(--lovelace-chatfab-content)" | "var(--lovelace-composer-background)" | "var(--lovelace-composer-border-default)" | "var(--lovelace-composer-content-default)" | "var(--lovelace-composer-content-secondary)" | "var(--lovelace-composer-border-focus)" | "var(--lovelace-composer-border-active)" | "var(--lovelace-avatar-background)" | "var(--lovelace-avatar-content)" | "var(--lovelace-scrollmarker-background)" | "var(--lovelace-scrollmarker-content)" | "var(--lovelace-send-button-background)" | "var(--lovelace-chat-background)" | "var(--lovelace-border-radius-button)" | "var(--lovelace-border-radius-message)" | "var(--lovelace-border-radius-input)" | "var(--lovelace-border-radius-composer)" | "var(--lovelace-border-radius-avatar)" | "var(--lovelace-border-radius-pill)" | "var(--lovelace-border-radius-media-preview)" | "var(--lovelace-border-radius-container)";
+            color: "var(--lovelace-color-neutral-0)" | "var(--lovelace-color-neutral-50)" | "var(--lovelace-color-neutral-100)" | "var(--lovelace-color-neutral-200)" | "var(--lovelace-color-neutral-300)" | "var(--lovelace-color-neutral-400)" | "var(--lovelace-color-neutral-500)" | "var(--lovelace-color-neutral-600)" | "var(--lovelace-color-neutral-700)" | "var(--lovelace-color-neutral-800)" | "var(--lovelace-color-neutral-900)" | "var(--lovelace-color-red-50)" | "var(--lovelace-color-orange-50)" | "var(--lovelace-color-green-50)" | "var(--lovelace-color-green-100)" | "var(--lovelace-color-green-200)" | "var(--lovelace-color-green-300)" | "var(--lovelace-color-green-400)" | "var(--lovelace-color-green-500)" | "var(--lovelace-color-green-600)" | "var(--lovelace-color-green-700)" | "var(--lovelace-color-green-800)" | "var(--lovelace-color-green-900)" | "var(--lovelace-color-orange-100)" | "var(--lovelace-color-orange-200)" | "var(--lovelace-color-orange-300)" | "var(--lovelace-color-orange-400)" | "var(--lovelace-color-orange-500)" | "var(--lovelace-color-orange-600)" | "var(--lovelace-color-orange-700)" | "var(--lovelace-color-orange-800)" | "var(--lovelace-color-orange-900)" | "var(--lovelace-color-red-100)" | "var(--lovelace-color-red-200)" | "var(--lovelace-color-red-300)" | "var(--lovelace-color-red-400)" | "var(--lovelace-color-red-500)" | "var(--lovelace-color-red-600)" | "var(--lovelace-color-red-700)" | "var(--lovelace-color-red-800)" | "var(--lovelace-color-red-900)" | "var(--lovelace-spacing-4)" | "var(--lovelace-spacing-8)" | "var(--lovelace-spacing-12)" | "var(--lovelace-spacing-16)" | "var(--lovelace-spacing-20)" | "var(--lovelace-spacing-24)" | "var(--lovelace-spacing-32)" | "var(--lovelace-spacing-40)" | "var(--lovelace-spacing-48)" | "var(--lovelace-font-weight-400)" | "var(--lovelace-font-weight-500)" | "var(--lovelace-font-weight-600)" | "var(--lovelace-color-blue-50)" | "var(--lovelace-color-blue-100)" | "var(--lovelace-color-blue-200)" | "var(--lovelace-color-blue-300)" | "var(--lovelace-color-blue-400)" | "var(--lovelace-color-blue-500)" | "var(--lovelace-color-blue-600)" | "var(--lovelace-color-blue-700)" | "var(--lovelace-color-blue-800)" | "var(--lovelace-color-blue-900)" | "var(--lovelace-font-size-12)" | "var(--lovelace-font-size-14)" | "var(--lovelace-font-size-16)" | "var(--lovelace-font-size-18)" | "var(--lovelace-font-size-20)" | "var(--lovelace-font-size-22)" | "var(--lovelace-font-size-24)" | "var(--lovelace-font-size-26)" | "var(--lovelace-font-size-28)" | "var(--lovelace-font-line-height-16)" | "var(--lovelace-font-line-height-18)" | "var(--lovelace-font-line-height-22)" | "var(--lovelace-font-line-height-24)" | "var(--lovelace-font-line-height-26)" | "var(--lovelace-font-line-height-28)" | "var(--lovelace-font-line-height-30)" | "var(--lovelace-font-line-height-32)" | "var(--lovelace-font-line-height-34)" | "var(--lovelace-border-radius-0)" | "var(--lovelace-p-border-radius-6)" | "var(--lovelace-p-border-radius-10)" | "var(--lovelace-p-border-radius-14)" | "var(--lovelace-p-border-radius-20)" | "var(--lovelace-p-border-radius-24)" | "var(--lovelace-border-radius-999)" | "var(--lovelace-font-paragraph-spacing-4)" | "var(--lovelace-font-paragraph-spacing-6)" | "var(--lovelace-font-paragraph-spacing-8)" | "var(--lovelace-font-paragraph-spacing-10)" | "var(--lovelace-font-paragraph-spacing-12)" | "var(--lovelace-color-accent-50)" | "var(--lovelace-color-accent-100)" | "var(--lovelace-color-accent-200)" | "var(--lovelace-color-accent-300)" | "var(--lovelace-color-accent-400)" | "var(--lovelace-color-accent-500)" | "var(--lovelace-color-accent-600)" | "var(--lovelace-color-accent-700)" | "var(--lovelace-color-accent-800)" | "var(--lovelace-color-accent-900)" | "var(--lovelace-font-family-sans-serif)" | "var(--lovelace-font-family-mono)" | "var(--lovelace-border-width-1)" | "var(--lovelace-border-width-2)" | "var(--lovelace-dimension-16)" | "var(--lovelace-dimension-20)" | "var(--lovelace-dimension-22)" | "var(--lovelace-dimension-24)" | "var(--lovelace-dimension-32)" | "var(--lovelace-dimension-36)" | "var(--lovelace-color-content-default)" | "var(--lovelace-color-content-secondary)" | "var(--lovelace-color-content-secondary-inverse)" | "var(--lovelace-color-content-disabled)" | "var(--lovelace-color-content-inverse)" | "var(--lovelace-color-background-default)" | "var(--lovelace-color-background-secondary)" | "var(--lovelace-color-background-tertiary)" | "var(--lovelace-color-background-quaternary)" | "var(--lovelace-color-background-disabled)" | "var(--lovelace-color-background-inverse)" | "var(--lovelace-color-background-neutral-overlay)" | "var(--lovelace-color-border-default)" | "var(--lovelace-color-border-medium)" | "var(--lovelace-color-border-strong)" | "var(--lovelace-color-content-link)" | "var(--lovelace-color-background-destructive)" | "var(--lovelace-color-content-destructive)" | "var(--lovelace-color-background-destructive-light)" | "var(--lovelace-color-border-destructive)" | "var(--lovelace-color-content-on-destructive)" | "var(--lovelace-color-content-warning)" | "var(--lovelace-color-background-warning)" | "var(--lovelace-color-background-warning-light)" | "var(--lovelace-color-border-warning)" | "var(--lovelace-color-content-success)" | "var(--lovelace-color-background-success)" | "var(--lovelace-color-background-success-light)" | "var(--lovelace-color-border-success)" | "var(--lovelace-color-content-accent)" | "var(--lovelace-color-content-on-accent)" | "var(--lovelace-color-content-on-scrim)" | "var(--lovelace-color-background-accent)" | "var(--lovelace-color-background-highlight-overlay)" | "var(--lovelace-color-border-focus)" | "var(--lovelace-color-border-accent)" | "var(--lovelace-color-border-highlight)" | "var(--lovelace-font-weight-regular)" | "var(--lovelace-font-size-caption)" | "var(--lovelace-line-height-caption)" | "var(--lovelace-paragraph-spacing-caption)" | "var(--lovelace-paragraph-spacing-body)" | "var(--lovelace-paragraph-spacing-title)" | "var(--lovelace-line-height-body)" | "var(--lovelace-line-height-title-small)" | "var(--lovelace-line-height-title-large)" | "var(--lovelace-font-size-body)" | "var(--lovelace-font-size-title-small)" | "var(--lovelace-font-size-title-large)" | "var(--lovelace-font-weight-medium)" | "var(--lovelace-font-weight-semi-bold)" | "var(--lovelace-font-family-body)" | "var(--lovelace-font-family-heading)" | "var(--lovelace-font-family-code)" | "var(--lovelace-border-radius-none)" | "var(--lovelace-border-radius-6)" | "var(--lovelace-border-radius-10)" | "var(--lovelace-border-radius-14)" | "var(--lovelace-border-radius-20)" | "var(--lovelace-border-radius-24)" | "var(--lovelace-border-radius-full)" | "var(--lovelace-padding-4)" | "var(--lovelace-padding-8)" | "var(--lovelace-padding-12)" | "var(--lovelace-gap-4)" | "var(--lovelace-padding-16)" | "var(--lovelace-gap-8)" | "var(--lovelace-gap-12)" | "var(--lovelace-gap-16)" | "var(--lovelace-gap-20)" | "var(--lovelace-padding-20)" | "var(--lovelace-border-width-default)" | "var(--lovelace-border-width-focus)" | "var(--lovelace-opacity-state-hover)" | "var(--lovelace-opacity-state-focus)" | "var(--lovelace-opacity-state-pressed)" | "var(--lovelace-icon-size-sm)" | "var(--lovelace-icon-size-md)" | "var(--lovelace-icon-size-control)" | "var(--lovelace-icon-size-lg)" | "var(--lovelace-easing-standard)" | "var(--lovelace-easing-emphasized)" | "var(--lovelace-easing-decelerate)" | "var(--lovelace-easing-accelerate)" | "var(--lovelace-duration-fast)" | "var(--lovelace-duration-medium)" | "var(--lovelace-duration-slow)" | "var(--lovelace-message-user-background)" | "var(--lovelace-message-user-content)" | "var(--lovelace-button-primary-background)" | "var(--lovelace-button-primary-content)" | "var(--lovelace-header-background)" | "var(--lovelace-pill-content-primary)" | "var(--lovelace-header-content)" | "var(--lovelace-chip-background-selected)" | "var(--lovelace-chatfab-background)" | "var(--lovelace-chatfab-content)" | "var(--lovelace-composer-background)" | "var(--lovelace-composer-border-default)" | "var(--lovelace-composer-content-default)" | "var(--lovelace-composer-content-secondary)" | "var(--lovelace-composer-border-focus)" | "var(--lovelace-composer-border-active)" | "var(--lovelace-avatar-background)" | "var(--lovelace-avatar-content)" | "var(--lovelace-scrollmarker-background)" | "var(--lovelace-scrollmarker-content)" | "var(--lovelace-send-button-background)" | "var(--lovelace-chat-background)" | "var(--lovelace-border-radius-button)" | "var(--lovelace-border-radius-message)" | "var(--lovelace-border-radius-input)" | "var(--lovelace-border-radius-composer)" | "var(--lovelace-border-radius-avatar)" | "var(--lovelace-border-radius-pill)" | "var(--lovelace-border-radius-media-preview)" | "var(--lovelace-border-radius-container)";
+        };
+    };
+}>;
+export declare const toastMessage: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        "single-line": {
+            flexShrink: number;
+            whiteSpace: "nowrap";
+            textAlign: "center";
+        };
+        "multi-line": {
+            flex: "1 0 0";
+            minWidth: number;
+            textAlign: "left";
+        };
+    };
+}>;

package/dist/components/ToastNotification/ToastNotification.css.js

@@ -0,0 +1,25 @@
+import { createRuntimeFn as e } from "../../vendor/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+/* empty css                                     */
+//#region src/components/ToastNotification/ToastNotification.css.ts
+var t = e({
+	defaultClassName: "k6tn091 k6tn090",
+	variantClassNames: { status: {
+		success: "k6tn092",
+		warning: "k6tn093",
+		error: "k6tn094"
+	} },
+	defaultVariants: { status: "success" },
+	compoundVariants: []
+}), n = e({
+	defaultClassName: "k6tn095",
+	variantClassNames: { variant: {
+		"single-line": "k6tn096",
+		"multi-line": "k6tn097"
+	} },
+	defaultVariants: { variant: "single-line" },
+	compoundVariants: []
+});
+//#endregion
+export { n as toastMessage, t as toastRoot };
+
+//# sourceMappingURL=ToastNotification.css.js.map

package/dist/components/ToastNotification/ToastNotification.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastNotification.css.js","names":[],"sources":["../../../src/components/ToastNotification/ToastNotification.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\nimport { recipe } from \"@vanilla-extract/recipes\";\nimport { t } from \"../../tokens/index.js\";\n\nconst toastBase = style({\n\tdisplay: \"flex\",\n\talignItems: \"center\",\n\tjustifyContent: \"center\",\n\tboxSizing: \"border-box\",\n\twidth: \"100%\",\n\tgap: t(\"gap-8\"),\n\tpaddingInline: t(\"padding-12\"),\n\tpaddingBlock: t(\"padding-8\"),\n});\n\nexport const toastRoot = recipe({\n\tbase: toastBase,\n\t// Each status pairs a light background with its matching content color; the\n\t// message inherits `color` from the root so it never has to restate it.\n\tvariants: {\n\t\tstatus: {\n\t\t\tsuccess: {\n\t\t\t\tbackgroundColor: t(\"color-background-success-light\"),\n\t\t\t\tcolor: t(\"color-content-success\"),\n\t\t\t},\n\t\t\twarning: {\n\t\t\t\tbackgroundColor: t(\"color-background-warning-light\"),\n\t\t\t\tcolor: t(\"color-content-warning\"),\n\t\t\t},\n\t\t\terror: {\n\t\t\t\tbackgroundColor: t(\"color-background-destructive-light\"),\n\t\t\t\tcolor: t(\"color-content-destructive\"),\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tstatus: \"success\",\n\t},\n});\n\nexport const toastMessage = recipe({\n\tbase: {\n\t\tmargin: 0,\n\t\tcolor: \"inherit\",\n\t\tfontFamily: t(\"font-family-body\"),\n\t\tfontWeight: t(\"font-weight-medium\"),\n\t\tfontSize: t(\"font-size-body\"),\n\t\tlineHeight: t(\"line-height-body\"),\n\t\toverflowWrap: \"break-word\",\n\t},\n\tvariants: {\n\t\t// single-line: icon + centered label sit as a cluster (justify-center on\n\t\t// the root does the centering); the label never wraps.\n\t\t// multi-line: the label fills the row and wraps left-aligned, with the\n\t\t// icon centered against the block.\n\t\tvariant: {\n\t\t\t\"single-line\": {\n\t\t\t\tflexShrink: 0,\n\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\ttextAlign: \"center\",\n\t\t\t},\n\t\t\t\"multi-line\": {\n\t\t\t\tflex: \"1 0 0\",\n\t\t\t\tminWidth: 0,\n\t\t\t\ttextAlign: \"left\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"single-line\",\n\t},\n});\n\nglobalStyle(`${toastBase} [data-slot='icon']`, {\n\tfontSize: t(\"icon-size-control\"),\n});\n"],"mappings":""}

package/dist/components/ToastNotification/ToastNotification.d.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+export type ToastStatus = "success" | "warning" | "error";
+export type ToastVariant = "single-line" | "multi-line";
+export interface ToastNotificationProps {
+    /**
+     * The outcome being reported — selects the background/content color pair.
+     * Bind it to the result of the action, not the UI.
+     */
+    status?: ToastStatus;
+    /**
+     * `single-line` keeps the icon + label as a centered, non-wrapping cluster;
+     * `multi-line` lets the label fill the row and wrap left-aligned.
+     */
+    variant?: ToastVariant;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The message to announce. A status icon is rendered automatically, so the
+     * status is conveyed without color perception; for screen-reader users the
+     * icon is decorative, so include the status in the copy when the message
+     * alone wouldn't make the outcome clear.
+     */
+    children?: ReactNode;
+}
+/**
+ * Transient inline status message on a status-colored background. Use for brief,
+ * auto-dismissing feedback after an action — not for blocking errors or anything
+ * needing a decision (use a dialog).
+ *
+ * Rendered in a live region so assistive tech announces it: Success and Warning
+ * as a polite `status`, Error as an assertive `alert`. The consumer owns
+ * dismissal timing — keep it on screen long enough to read or pair it with a
+ * manual dismiss.
+ */
+export declare function ToastNotification({ status, variant, className, children, ...rest }: ToastNotificationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ToastNotification/ToastNotification.js

@@ -0,0 +1,31 @@
+import { cx as e } from "../../utils/cx.js";
+import { Checkmark as t } from "../Icon/icons/Checkmark.js";
+import { ExclamationTriangle as n } from "../Icon/icons/ExclamationTriangle.js";
+import { XmarkCircle as r } from "../Icon/icons/XmarkCircle.js";
+import { toastMessage as i, toastRoot as a } from "./ToastNotification.css.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/ToastNotification/ToastNotification.tsx
+var c = {
+	success: t,
+	warning: n,
+	error: r
+};
+function l({ status: t = "success", variant: n = "single-line", className: r, children: l, ...u }) {
+	let d = t === "error", f = c[t];
+	return /* @__PURE__ */ s("div", {
+		...u,
+		role: d ? "alert" : "status",
+		"aria-live": d ? "assertive" : "polite",
+		"data-status": t,
+		"data-variant": n,
+		className: e(a({ status: t }), r),
+		children: [/* @__PURE__ */ o(f, {}), /* @__PURE__ */ o("p", {
+			className: i({ variant: n }),
+			children: l
+		})]
+	});
+}
+//#endregion
+export { l as ToastNotification };
+
+//# sourceMappingURL=ToastNotification.js.map

package/dist/components/ToastNotification/ToastNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastNotification.js","names":[],"sources":["../../../src/components/ToastNotification/ToastNotification.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport {\n\tCheckmark,\n\tExclamationTriangle,\n\tXmarkCircle,\n} from \"../Icon/icons/index.js\";\nimport { toastMessage, toastRoot } from \"./ToastNotification.css.js\";\n\nexport type ToastStatus = \"success\" | \"warning\" | \"error\";\nexport type ToastVariant = \"single-line\" | \"multi-line\";\n\nconst STATUS_ICON = {\n\tsuccess: Checkmark,\n\twarning: ExclamationTriangle,\n\terror: XmarkCircle,\n} as const;\n\nexport interface ToastNotificationProps {\n\t/**\n\t * The outcome being reported — selects the background/content color pair.\n\t * Bind it to the result of the action, not the UI.\n\t */\n\tstatus?: ToastStatus;\n\t/**\n\t * `single-line` keeps the icon + label as a centered, non-wrapping cluster;\n\t * `multi-line` lets the label fill the row and wrap left-aligned.\n\t */\n\tvariant?: ToastVariant;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLDivElement>;\n\t/**\n\t * The message to announce. A status icon is rendered automatically, so the\n\t * status is conveyed without color perception; for screen-reader users the\n\t * icon is decorative, so include the status in the copy when the message\n\t * alone wouldn't make the outcome clear.\n\t */\n\tchildren?: ReactNode;\n}\n\n/**\n * Transient inline status message on a status-colored background. Use for brief,\n * auto-dismissing feedback after an action — not for blocking errors or anything\n * needing a decision (use a dialog).\n *\n * Rendered in a live region so assistive tech announces it: Success and Warning\n * as a polite `status`, Error as an assertive `alert`. The consumer owns\n * dismissal timing — keep it on screen long enough to read or pair it with a\n * manual dismiss.\n */\nexport function ToastNotification({\n\tstatus = \"success\",\n\tvariant = \"single-line\",\n\tclassName,\n\tchildren,\n\t...rest\n}: ToastNotificationProps) {\n\tconst isError = status === \"error\";\n\tconst StatusIcon = STATUS_ICON[status];\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\trole={isError ? \"alert\" : \"status\"}\n\t\t\taria-live={isError ? \"assertive\" : \"polite\"}\n\t\t\tdata-status={status}\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cx(toastRoot({ status }), className)}\n\t\t>\n\t\t\t<StatusIcon />\n\t\t\t<p className={toastMessage({ variant })}>{children}</p>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAYA,IAAM,IAAc;CACnB,SAAS;CACT,SAAS;CACT,OAAO;CACP;AAmCD,SAAgB,EAAkB,EACjC,YAAS,WACT,aAAU,eACV,cACA,aACA,GAAG,KACuB;CAC1B,IAAM,IAAU,MAAW,SACrB,IAAa,EAAY;AAC/B,QACC,kBAAC,OAAD;EACC,GAAI;EACJ,MAAM,IAAU,UAAU;EAC1B,aAAW,IAAU,cAAc;EACnC,eAAa;EACb,gBAAc;EACd,WAAW,EAAG,EAAU,EAAE,WAAQ,CAAC,EAAE,EAAU;YANhD,CAQC,kBAAC,GAAD,EAAc,CAAA,EACd,kBAAC,KAAD;GAAG,WAAW,EAAa,EAAE,YAAS,CAAC;GAAG;GAAa,CAAA,CAClD"}

package/dist/components/ToastNotification/index.d.ts

@@ -0,0 +1,2 @@
+export type { ToastNotificationProps, ToastStatus, ToastVariant, } from "./ToastNotification.js";
+export { ToastNotification } from "./ToastNotification.js";

package/dist/components/Toggle/Toggle.css.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The RAC `Switch` label, styled as the pill track. It is the interactive element,
+ * so it carries the state `data-*` and hosts the shared state-layer `::after`
+ * directly (self-selector form, like Button/Chip). `color` is the inverse content
+ * color, so the `currentColor` overlay reads as a white veil over the green / neutral
+ * track — matching Figma's white state overlays — with no per-state plumbing.
+ */
+export declare const toggleRoot: string;
+/**
+ * The 22px thumb. Absolutely positioned and slid by `inset-inline-start` — a
+ * logical property, so it mirrors leading↔trailing under `dir="rtl"` on its own,
+ * with no direction prop or selector.
+ */
+export declare const toggleThumb: string;

package/dist/components/Toggle/Toggle.css.js

@@ -0,0 +1,7 @@
+/* empty css                          */
+//#region src/components/Toggle/Toggle.css.ts
+var e = "_1s0itzy0", t = "_1s0itzy1";
+//#endregion
+export { e as toggleRoot, t as toggleThumb };
+
+//# sourceMappingURL=Toggle.css.js.map

package/dist/components/Toggle/Toggle.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.css.js","names":[],"sources":["../../../src/components/Toggle/Toggle.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\nimport { t } from \"../../tokens/index.js\";\n\n// Figma pins the track at a fixed 44×24 frame and the thumb at 22px with a 1px\n// inset — control-size tiers the token set doesn't expose yet (same treatment as\n// Checkbox's 24px box and Radio's indicator inset).\nconst TRACK_WIDTH = \"44px\";\nconst TRACK_HEIGHT = \"24px\";\nconst THUMB_SIZE = \"22px\";\nconst THUMB_INSET = \"1px\";\n// Trailing rest position: full track − thumb − the trailing inset.\nconst THUMB_TRAVEL_END = `calc(100% - ${THUMB_SIZE} - ${THUMB_INSET})`;\n\n// Elevation shadows Figma draws on the resting off-track and the thumb; no\n// elevation-* token tier exists yet, so these stay literal (contract rule 2).\nconst OFF_TRACK_ELEVATION = \"0 1px 1px rgba(0, 0, 0, 0.08)\";\nconst THUMB_ELEVATION = \"0 1px 2px rgba(0, 0, 0, 0.08)\";\n\nconst FOCUS_RING = `0 0 0 ${t(\"border-width-focus\")} ${t(\"color-border-focus\")}`;\n\n// TOKEN GAP: disabled-on is Figma's success green under a 30% white veil, which\n// no opacity-state-* member covers (hover .08 / focus .1 / pressed .1). The shared\n// currentColor overlay is raised to a literal 0.3 here until an\n// `opacity-state-disabled` token exists (surfaced per contract rule 3).\nconst DISABLED_OVERLAY_OPACITY = 0.3;\n\n/**\n * The RAC `Switch` label, styled as the pill track. It is the interactive element,\n * so it carries the state `data-*` and hosts the shared state-layer `::after`\n * directly (self-selector form, like Button/Chip). `color` is the inverse content\n * color, so the `currentColor` overlay reads as a white veil over the green / neutral\n * track — matching Figma's white state overlays — with no per-state plumbing.\n */\nexport const toggleRoot = style({\n\tposition: \"relative\",\n\tisolation: \"isolate\",\n\tboxSizing: \"border-box\",\n\tdisplay: \"inline-block\",\n\tflexShrink: 0,\n\twidth: TRACK_WIDTH,\n\theight: TRACK_HEIGHT,\n\tborderRadius: t(\"border-radius-full\"),\n\tbackgroundColor: t(\"color-background-quaternary\"),\n\tcolor: t(\"color-content-inverse\"),\n\tcursor: \"pointer\",\n\toutline: \"none\",\n\tboxShadow: OFF_TRACK_ELEVATION,\n\t\"::after\": {\n\t\tcontent: '\"\"',\n\t\tposition: \"absolute\",\n\t\tinset: 0,\n\t\tborderRadius: \"inherit\",\n\t\tbackgroundColor: \"currentColor\",\n\t\topacity: 0,\n\t\tpointerEvents: \"none\",\n\t\tzIndex: -1,\n\t},\n\tselectors: {\n\t\t// On — success-green track; the resting off-track elevation is dropped.\n\t\t\"&[data-selected]\": {\n\t\t\tbackgroundColor: t(\"color-background-success\"),\n\t\t\tboxShadow: \"none\",\n\t\t},\n\t\t// State layer — currentColor (white) veil at per-state opacity, off & on.\n\t\t\"&[data-hovered]:not([data-disabled])::after\": {\n\t\t\topacity: t(\"opacity-state-hover\"),\n\t\t},\n\t\t\"&[data-focus-visible]:not([data-disabled])::after\": {\n\t\t\topacity: t(\"opacity-state-focus\"),\n\t\t},\n\t\t\"&[data-pressed]:not([data-disabled])::after\": {\n\t\t\topacity: t(\"opacity-state-pressed\"),\n\t\t},\n\t\t// Focus ring — outset box-shadow so it never resizes the pill (matches\n\t\t// Checkbox/Radio); pairs with the focus veil above.\n\t\t\"&[data-focus-visible]:not([data-disabled])\": {\n\t\t\tboxShadow: FOCUS_RING,\n\t\t},\n\t\t// Disabled — off track fades to the disabled surface; pointer blocked.\n\t\t\"&[data-disabled]\": {\n\t\t\tcursor: \"not-allowed\",\n\t\t\tbackgroundColor: t(\"color-background-disabled\"),\n\t\t\tboxShadow: \"none\",\n\t\t},\n\t\t// Disabled — on track stays green under the 30% white veil (see const above).\n\t\t\"&[data-disabled][data-selected]\": {\n\t\t\tbackgroundColor: t(\"color-background-success\"),\n\t\t},\n\t\t\"&[data-disabled][data-selected]::after\": {\n\t\t\topacity: DISABLED_OVERLAY_OPACITY,\n\t\t},\n\t},\n\t\"@media\": {\n\t\t\"(prefers-reduced-motion: no-preference)\": {\n\t\t\ttransitionProperty: \"background-color, box-shadow\",\n\t\t\ttransitionDuration: t(\"duration-fast\"),\n\t\t\ttransitionTimingFunction: t(\"easing-standard\"),\n\t\t\tselectors: {\n\t\t\t\t\"&::after\": {\n\t\t\t\t\ttransition: `opacity ${t(\"duration-fast\")} ${t(\"easing-standard\")}`,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t// Token-based focus rings vanish under forced colors — redraw in a system color.\n\t\t\"(forced-colors: active)\": {\n\t\t\tselectors: {\n\t\t\t\t\"&[data-focus-visible]:not([data-disabled])\": {\n\t\t\t\t\toutline: \"2px solid Highlight\",\n\t\t\t\t\toutlineOffset: \"2px\",\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n});\n\n/**\n * The 22px thumb. Absolutely positioned and slid by `inset-inline-start` — a\n * logical property, so it mirrors leading↔trailing under `dir=\"rtl\"` on its own,\n * with no direction prop or selector.\n */\nexport const toggleThumb = style({\n\tposition: \"absolute\",\n\tinsetBlockStart: THUMB_INSET,\n\tinsetInlineStart: THUMB_INSET,\n\twidth: THUMB_SIZE,\n\theight: THUMB_SIZE,\n\tborderRadius: t(\"border-radius-full\"),\n\tbackgroundColor: t(\"color-background-default\"),\n\tboxShadow: THUMB_ELEVATION,\n\tpointerEvents: \"none\",\n\tselectors: {\n\t\t[`${toggleRoot}[data-selected] &`]: {\n\t\t\tinsetInlineStart: THUMB_TRAVEL_END,\n\t\t},\n\t},\n\t\"@media\": {\n\t\t\"(prefers-reduced-motion: no-preference)\": {\n\t\t\ttransition: `inset-inline-start ${t(\"duration-fast\")} ${t(\"easing-standard\")}`,\n\t\t},\n\t},\n});\n"],"mappings":""}

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, Ref } from "react";
+import type { SwitchProps as AriaSwitchProps } from "react-aria-components";
+export interface ToggleProps extends Omit<AriaSwitchProps, "children" | "className" | "style"> {
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLLabelElement>;
+}
+/**
+ * A binary on/off switch that applies instantly (RAC `Switch`, `role="switch"`).
+ * On renders the success-green track with the thumb at the trailing edge; off
+ * renders the neutral track with the thumb leading. Track-only — give it an
+ * accessible name with `aria-label` / `aria-labelledby`.
+ *
+ * Value is `isSelected` / `defaultSelected` / `onChange`; disabled is `isDisabled`.
+ * Interaction states (hover/focus/pressed) and RTL mirroring come from RAC `data-*`
+ * and the ambient `dir` — not props.
+ */
+export declare function Toggle({ className, ...rest }: ToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,19 @@
+import { cx as e } from "../../utils/cx.js";
+import { toggleRoot as t, toggleThumb as n } from "./Toggle.css.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Switch as i } from "react-aria-components";
+//#region src/components/Toggle/Toggle.tsx
+function a({ className: a, ...o }) {
+	return /* @__PURE__ */ r(i, {
+		...o,
+		className: e(t, a),
+		children: /* @__PURE__ */ r("span", {
+			className: n,
+			"aria-hidden": "true"
+		})
+	});
+}
+//#endregion
+export { a as Toggle };
+
+//# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import type { CSSProperties, Ref } from \"react\";\nimport type { SwitchProps as AriaSwitchProps } from \"react-aria-components\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { toggleRoot, toggleThumb } from \"./Toggle.css.js\";\n\nexport interface ToggleProps\n\textends Omit<AriaSwitchProps, \"children\" | \"className\" | \"style\"> {\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLLabelElement>;\n}\n\n/**\n * A binary on/off switch that applies instantly (RAC `Switch`, `role=\"switch\"`).\n * On renders the success-green track with the thumb at the trailing edge; off\n * renders the neutral track with the thumb leading. Track-only — give it an\n * accessible name with `aria-label` / `aria-labelledby`.\n *\n * Value is `isSelected` / `defaultSelected` / `onChange`; disabled is `isDisabled`.\n * Interaction states (hover/focus/pressed) and RTL mirroring come from RAC `data-*`\n * and the ambient `dir` — not props.\n */\nexport function Toggle({ className, ...rest }: ToggleProps) {\n\treturn (\n\t\t<AriaSwitch {...rest} className={cx(toggleRoot, className)}>\n\t\t\t<span className={toggleThumb} aria-hidden=\"true\" />\n\t\t</AriaSwitch>\n\t);\n}\n"],"mappings":";;;;;AAuBA,SAAgB,EAAO,EAAE,cAAW,GAAG,KAAqB;AAC3D,QACC,kBAAC,GAAD;EAAY,GAAI;EAAM,WAAW,EAAG,GAAY,EAAU;YACzD,kBAAC,QAAD;GAAM,WAAW;GAAa,eAAY;GAAS,CAAA;EACvC,CAAA"}

package/dist/components/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+export type { ToggleProps } from "./Toggle.js";
+export { Toggle } from "./Toggle.js";

package/dist/components/Tooltip/Tooltip.css.d.ts

@@ -0,0 +1,3 @@
+export declare const tooltip: string;
+export declare const arrow: string;
+export declare const arrowSvg: string;

package/dist/components/Tooltip/Tooltip.css.js

@@ -0,0 +1,7 @@
+/* empty css                           */
+//#region src/components/Tooltip/Tooltip.css.ts
+var e = "s6807p0", t = "s6807p1", n = "s6807p2";
+//#endregion
+export { t as arrow, n as arrowSvg, e as tooltip };
+
+//# sourceMappingURL=Tooltip.css.js.map

package/dist/components/Tooltip/Tooltip.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.css.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\nimport { t } from \"../../tokens/index.js\";\n\n// Figma \"+2\" effect (DROP_SHADOW, color #0000000F, offset 0/4, blur 14).\n// Hardcoded because no elevation token exists in LovelaceToken yet; route\n// through t() once one is added. Applied as a filter so the shadow wraps the\n// arrow silhouette, not just the rectangular bubble.\nconst TOOLTIP_SHADOW = \"drop-shadow(0 4px 14px rgba(0, 0, 0, 0.06))\";\n\nexport const tooltip = style({\n\tboxSizing: \"border-box\",\n\tmaxWidth: \"184px\",\n\tpadding: t(\"spacing-8\"),\n\tborderRadius: t(\"border-radius-6\"),\n\tbackgroundColor: t(\"color-background-inverse\"),\n\tcolor: t(\"color-content-inverse\"),\n\tfontFamily: t(\"font-family-body\"),\n\tfontWeight: t(\"font-weight-regular\"),\n\tfontSize: t(\"font-size-caption\"),\n\tlineHeight: t(\"line-height-caption\"),\n\ttextAlign: \"center\",\n\twordBreak: \"break-word\",\n\tfilter: TOOLTIP_SHADOW,\n\tselectors: {\n\t\t\"&[data-entering]\": { opacity: 0 },\n\t\t\"&[data-exiting]\": { opacity: 0 },\n\t},\n\t\"@media\": {\n\t\t\"(prefers-reduced-motion: no-preference)\": {\n\t\t\ttransition: `opacity ${t(\"duration-fast\")} ${t(\"easing-standard\")}`,\n\t\t},\n\t},\n});\n\nexport const arrow = style({\n\tdisplay: \"block\",\n});\n\n// The triangle's apex points down (correct for a tooltip above its trigger);\n// each placement rotates it to point back at the trigger.\nexport const arrowSvg = style({\n\tdisplay: \"block\",\n\tfill: t(\"color-background-inverse\"),\n});\n\nglobalStyle(`${tooltip}[data-placement^=\"top\"] ${arrowSvg}`, {\n\ttransform: \"rotate(0deg)\",\n});\nglobalStyle(`${tooltip}[data-placement^=\"bottom\"] ${arrowSvg}`, {\n\ttransform: \"rotate(180deg)\",\n});\nglobalStyle(`${tooltip}[data-placement^=\"left\"] ${arrowSvg}`, {\n\ttransform: \"rotate(-90deg)\",\n});\nglobalStyle(`${tooltip}[data-placement^=\"right\"] ${arrowSvg}`, {\n\ttransform: \"rotate(90deg)\",\n});\n"],"mappings":""}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { TooltipProps as AriaTooltipProps } from "react-aria-components";
+import { TooltipTrigger } from "react-aria-components";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+export interface TooltipProps extends Omit<AriaTooltipProps, "children" | "className" | "style" | "placement"> {
+    /** Which side of the trigger the tooltip sits on. The arrow points back at the trigger. */
+    placement?: TooltipPlacement;
+    className?: string;
+    style?: CSSProperties;
+    /** Tooltip text. */
+    children: ReactNode;
+}
+/**
+ * Inverse-surface tooltip with a directional arrow, revealed on hover/focus of
+ * its trigger. Render inside `TooltipTrigger` next to the focusable trigger:
+ * `<TooltipTrigger><Button>…</Button><Tooltip>Help</Tooltip></TooltipTrigger>`.
+ */
+export declare function Tooltip({ placement, offset, className, style, children, ...rest }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export { TooltipTrigger };

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,32 @@
+import { cx as e } from "../../utils/cx.js";
+import { arrow as t, arrowSvg as n, tooltip as r } from "./Tooltip.css.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useLocale as o } from "react-aria";
+import { OverlayArrow as s, Tooltip as c, TooltipTrigger as l } from "react-aria-components";
+//#region src/components/Tooltip/Tooltip.tsx
+function u({ placement: l = "top", offset: u = 6, className: d, style: f, children: p, ...m }) {
+	let { direction: h } = o();
+	return /* @__PURE__ */ a(c, {
+		...m,
+		placement: l,
+		offset: u,
+		className: e(r, d),
+		style: f,
+		dir: h,
+		children: [/* @__PURE__ */ i(s, {
+			className: t,
+			children: /* @__PURE__ */ i("svg", {
+				className: n,
+				width: 12,
+				height: 12,
+				viewBox: "0 0 12 12",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ i("path", { d: "M0 0 L6 6 L12 0 Z" })
+			})
+		}), p]
+	});
+}
+//#endregion
+export { u as Tooltip, l as TooltipTrigger };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { useLocale } from \"react-aria\";\nimport type { TooltipProps as AriaTooltipProps } from \"react-aria-components\";\nimport {\n\tTooltip as AriaTooltip,\n\tOverlayArrow,\n\tTooltipTrigger,\n} from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { arrow, arrowSvg, tooltip } from \"./Tooltip.css.js\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps\n\textends Omit<\n\t\tAriaTooltipProps,\n\t\t\"children\" | \"className\" | \"style\" | \"placement\"\n\t> {\n\t/** Which side of the trigger the tooltip sits on. The arrow points back at the trigger. */\n\tplacement?: TooltipPlacement;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\t/** Tooltip text. */\n\tchildren: ReactNode;\n}\n\n/**\n * Inverse-surface tooltip with a directional arrow, revealed on hover/focus of\n * its trigger. Render inside `TooltipTrigger` next to the focusable trigger:\n * `<TooltipTrigger><Button>…</Button><Tooltip>Help</Tooltip></TooltipTrigger>`.\n */\nexport function Tooltip({\n\tplacement = \"top\",\n\toffset = 6,\n\tclassName,\n\tstyle,\n\tchildren,\n\t...rest\n}: TooltipProps) {\n\t// Stated, not inherited: this renders through a portal, so its direction must\n\t// not depend on where the portal lands. See the portalled-surface scenario\n\t// under the RTL requirement in openspec/specs/accessibility/spec.md.\n\tconst { direction } = useLocale();\n\n\treturn (\n\t\t<AriaTooltip\n\t\t\t{...rest}\n\t\t\tplacement={placement}\n\t\t\toffset={offset}\n\t\t\tclassName={cx(tooltip, className)}\n\t\t\tstyle={style}\n\t\t\tdir={direction}\n\t\t>\n\t\t\t<OverlayArrow className={arrow}>\n\t\t\t\t{/* Square box so RAC's arrow centering keeps the same footprint under\n\t\t\t\t    the ±90° left/right rotations; the triangle sits in the top half. */}\n\t\t\t\t<svg\n\t\t\t\t\tclassName={arrowSvg}\n\t\t\t\t\twidth={12}\n\t\t\t\t\theight={12}\n\t\t\t\t\tviewBox=\"0 0 12 12\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M0 0 L6 6 L12 0 Z\" />\n\t\t\t\t</svg>\n\t\t\t</OverlayArrow>\n\t\t\t{children}\n\t\t</AriaTooltip>\n\t);\n}\n\nexport { TooltipTrigger };\n"],"mappings":";;;;;;AA+BA,SAAgB,EAAQ,EACvB,eAAY,OACZ,YAAS,GACT,cACA,UACA,aACA,GAAG,KACa;CAIhB,IAAM,EAAE,iBAAc,GAAW;AAEjC,QACC,kBAAC,GAAD;EACC,GAAI;EACO;EACH;EACR,WAAW,EAAG,GAAS,EAAU;EAC1B;EACP,KAAK;YANN,CAQC,kBAAC,GAAD;GAAc,WAAW;aAGxB,kBAAC,OAAD;IACC,WAAW;IACX,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,eAAY;cAEZ,kBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IACzB,CAAA;GACQ,CAAA,EACd,EACY"}

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export type { TooltipPlacement, TooltipProps } from "./Tooltip.js";
+export { Tooltip, TooltipTrigger } from "./Tooltip.js";

package/dist/components/TypingIndicator/TypingIndicator.css.d.ts

@@ -0,0 +1,3 @@
+export declare const bubble: string;
+export declare const visuallyHidden: string;
+export declare const dot: string;

package/dist/components/TypingIndicator/TypingIndicator.css.js

@@ -0,0 +1,7 @@
+/* empty css                                   */
+//#region src/components/TypingIndicator/TypingIndicator.css.ts
+var e = "bwq5ac1", t = "bwq5ac2", n = "bwq5ac3";
+//#endregion
+export { e as bubble, n as dot, t as visuallyHidden };
+
+//# sourceMappingURL=TypingIndicator.css.js.map

package/dist/components/TypingIndicator/TypingIndicator.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.css.js","names":[],"sources":["../../../src/components/TypingIndicator/TypingIndicator.css.ts"],"sourcesContent":["import { keyframes, style } from \"@vanilla-extract/css\";\nimport { t } from \"../../tokens/index.js\";\n\n// Staggered vertical bounce for the three dots. Unlike the ThinkingShimmer\n// ellipsis (which must stay inside the text-clip run), these are independent\n// elements, so a `transform` offset — and the compositing layer it promotes — is\n// fine here.\nconst bounce = keyframes({\n\t\"0%, 60%, 100%\": { transform: \"translateY(0)\" },\n\t\"30%\": { transform: \"translateY(-4px)\" },\n});\n\n// 38px is the fixed frame height from Figma; there's no matching size token, so\n// the dots are centered within it.\nexport const bubble = style({\n\tdisplay: \"inline-flex\",\n\talignItems: \"center\",\n\tgap: t(\"gap-4\"),\n\theight: \"38px\",\n\tpaddingInline: t(\"padding-20\"),\n\tbackgroundColor: t(\"color-background-quaternary\"),\n\t// Square the bottom corner nearest the avatar (the speech-bubble tail); the\n\t// bubble is bottom-aligned with the avatar, and logical properties keep the\n\t// squared corner on the leading side in both LTR and RTL.\n\tborderStartStartRadius: t(\"border-radius-20\"),\n\tborderStartEndRadius: t(\"border-radius-20\"),\n\tborderEndStartRadius: 0,\n\tborderEndEndRadius: t(\"border-radius-20\"),\n});\n\n// Carries the announced status string as real text (live regions announce\n// rendered text, not `aria-label`), while staying out of the visual layout.\nexport const visuallyHidden = style({\n\tposition: \"absolute\",\n\twidth: 1,\n\theight: 1,\n\tpadding: 0,\n\tmargin: -1,\n\toverflow: \"hidden\",\n\tclip: \"rect(0, 0, 0, 0)\",\n\twhiteSpace: \"nowrap\",\n\tborder: 0,\n});\n\nexport const dot = style({\n\twidth: t(\"spacing-8\"),\n\theight: t(\"spacing-8\"),\n\tflexShrink: 0,\n\tborderRadius: t(\"border-radius-full\"),\n\tbackgroundColor: t(\"color-content-default\"),\n\tanimation: `${bounce} 0.9s ease-in-out infinite`,\n\tselectors: {\n\t\t\"&:nth-child(2)\": { animationDelay: \"0.15s\" },\n\t\t\"&:nth-child(3)\": { animationDelay: \"0.3s\" },\n\t},\n\t\"@media\": {\n\t\t// Reduced motion: hold the dots static — never signal typing with motion\n\t\t// alone (the live region carries the state).\n\t\t\"(prefers-reduced-motion: reduce)\": {\n\t\t\tanimation: \"none\",\n\t\t},\n\t},\n});\n"],"mappings":""}

package/dist/components/TypingIndicator/TypingIndicator.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, HTMLAttributes, Ref } from "react";
+export interface TypingIndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Human-agent typing indicator — an animated three-dot bubble shown while a live
+ * agent is composing a reply. Render it as a transient status in the message list
+ * driven by the agent's live typing/presence signal, and remove it when the
+ * message arrives or typing stops.
+ *
+ * Use only for a human agent typing — not for AI generation (use the
+ * `ThinkingShimmer` for that).
+ *
+ * Exposed as a polite live region. The dots are hidden from assistive tech and
+ * the announced string is carried as visually-hidden text (live regions announce
+ * rendered text, not `aria-label`); pass `aria-label` to override it. Reliable
+ * on-appearance announcement additionally depends on the consuming surface
+ * keeping a persistent live region present before this mounts; validate with a
+ * real screen reader when a surface adopts this component.
+ *
+ * A surface that already wraps this in its own live region should pass
+ * `aria-live="off"`: two nested regions announce the same text twice, in an order
+ * neither controls.
+ */
+export declare function TypingIndicator({ className, "aria-label": ariaLabel, "aria-live": ariaLive, ...rest }: TypingIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TypingIndicator/TypingIndicator.js

@@ -0,0 +1,34 @@
+import { cx as e } from "../../utils/cx.js";
+import { bubble as t, dot as n, visuallyHidden as r } from "./TypingIndicator.css.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/TypingIndicator/TypingIndicator.tsx
+function o({ className: o, "aria-label": s = "Agent is typing", "aria-live": c = "polite", ...l }) {
+	return /* @__PURE__ */ a("div", {
+		...l,
+		role: "status",
+		"aria-live": c,
+		className: e(t, o),
+		children: [
+			/* @__PURE__ */ i("span", {
+				className: n,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ i("span", {
+				className: n,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ i("span", {
+				className: n,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ i("span", {
+				className: r,
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { o as TypingIndicator };
+
+//# sourceMappingURL=TypingIndicator.js.map

package/dist/components/TypingIndicator/TypingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.js","names":[],"sources":["../../../src/components/TypingIndicator/TypingIndicator.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, Ref } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { bubble, dot, visuallyHidden } from \"./TypingIndicator.css.js\";\n\nexport interface TypingIndicatorProps\n\textends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Human-agent typing indicator — an animated three-dot bubble shown while a live\n * agent is composing a reply. Render it as a transient status in the message list\n * driven by the agent's live typing/presence signal, and remove it when the\n * message arrives or typing stops.\n *\n * Use only for a human agent typing — not for AI generation (use the\n * `ThinkingShimmer` for that).\n *\n * Exposed as a polite live region. The dots are hidden from assistive tech and\n * the announced string is carried as visually-hidden text (live regions announce\n * rendered text, not `aria-label`); pass `aria-label` to override it. Reliable\n * on-appearance announcement additionally depends on the consuming surface\n * keeping a persistent live region present before this mounts; validate with a\n * real screen reader when a surface adopts this component.\n *\n * A surface that already wraps this in its own live region should pass\n * `aria-live=\"off\"`: two nested regions announce the same text twice, in an order\n * neither controls.\n */\nexport function TypingIndicator({\n\tclassName,\n\t\"aria-label\": ariaLabel = \"Agent is typing\",\n\t\"aria-live\": ariaLive = \"polite\",\n\t...rest\n}: TypingIndicatorProps) {\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\trole=\"status\"\n\t\t\taria-live={ariaLive}\n\t\t\tclassName={cx(bubble, className)}\n\t\t>\n\t\t\t<span className={dot} aria-hidden=\"true\" />\n\t\t\t<span className={dot} aria-hidden=\"true\" />\n\t\t\t<span className={dot} aria-hidden=\"true\" />\n\t\t\t<span className={visuallyHidden}>{ariaLabel}</span>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AA+BA,SAAgB,EAAgB,EAC/B,cACA,cAAc,IAAY,mBAC1B,aAAa,IAAW,UACxB,GAAG,KACqB;AACxB,QACC,kBAAC,OAAD;EACC,GAAI;EACJ,MAAK;EACL,aAAW;EACX,WAAW,EAAG,GAAQ,EAAU;YAJjC;GAMC,kBAAC,QAAD;IAAM,WAAW;IAAK,eAAY;IAAS,CAAA;GAC3C,kBAAC,QAAD;IAAM,WAAW;IAAK,eAAY;IAAS,CAAA;GAC3C,kBAAC,QAAD;IAAM,WAAW;IAAK,eAAY;IAAS,CAAA;GAC3C,kBAAC,QAAD;IAAM,WAAW;cAAiB;IAAiB,CAAA;GAC9C"}

package/dist/components/TypingIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export type { TypingIndicatorProps } from "./TypingIndicator.js";
+export { TypingIndicator } from "./TypingIndicator.js";

package/dist/components/UserMessage/UserMessage.css.d.ts

@@ -0,0 +1,7 @@
+export declare const userMessageRoot: string;
+export declare const userMessageBubble: string;
+export declare const userMessageText: string;
+export declare const userMessageError: string;
+export declare const userMessageErrorContent: string;
+export declare const userMessageRetry: string;
+export declare const userMessageErrorText: string;

package/dist/components/UserMessage/UserMessage.css.js

@@ -0,0 +1,7 @@
+/* empty css                               */
+//#region src/components/UserMessage/UserMessage.css.ts
+var e = "jxp4or0", t = "jxp4or1", n = "jxp4or2", r = "jxp4or3", i = "jxp4or4", a = "jxp4or5 jxp4or4", o = "jxp4or6";
+//#endregion
+export { t as userMessageBubble, r as userMessageError, i as userMessageErrorContent, o as userMessageErrorText, a as userMessageRetry, e as userMessageRoot, n as userMessageText };
+
+//# sourceMappingURL=UserMessage.css.js.map

package/dist/components/UserMessage/UserMessage.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMessage.css.js","names":[],"sources":["../../../src/components/UserMessage/UserMessage.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\nimport { t } from \"../../tokens/index.js\";\n\nexport const userMessageRoot = style({\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\t// Align the bubble (and the error row) to the inline-end edge; a leading-side\n\t// gutter keeps it off the far edge. Both are logical, so dir=\"rtl\" mirrors\n\t// the whole component with no isRtl prop.\n\talignItems: \"flex-end\",\n\tgap: t(\"gap-4\"),\n\tpaddingInlineStart: t(\"padding-20\"),\n\tboxSizing: \"border-box\",\n\twidth: \"100%\",\n});\n\nexport const userMessageBubble = style({\n\tdisplay: \"flex\",\n\talignItems: \"center\",\n\tboxSizing: \"border-box\",\n\t// Capped by the root's leading gutter rather than a fixed width, so the\n\t// bubble grows with its content up to the message column edge.\n\tmaxWidth: \"100%\",\n\tpaddingInline: t(\"padding-12\"),\n\tpaddingBlock: t(\"padding-8\"),\n\tborderRadius: t(\"border-radius-message\"),\n\tbackgroundColor: t(\"message-user-background\"),\n});\n\nexport const userMessageText = style({\n\tmargin: 0,\n\tcolor: t(\"message-user-content\"),\n\tfontFamily: t(\"font-family-body\"),\n\tfontWeight: t(\"font-weight-regular\"),\n\tfontSize: t(\"font-size-body\"),\n\tlineHeight: t(\"line-height-body\"),\n\toverflowWrap: \"anywhere\",\n\twordBreak: \"break-word\",\n});\n\nexport const userMessageError = style({\n\tdisplay: \"flex\",\n\tjustifyContent: \"flex-end\",\n\twidth: \"100%\",\n});\n\n// Shared layout for the failed-to-send row — icon + destructive-colored caption.\n// Used both interactively (the retry Button) and statically (no `onRetry`).\nexport const userMessageErrorContent = style({\n\tdisplay: \"inline-flex\",\n\talignItems: \"center\",\n\t// The row is sized to the error icon; reserve that height even when the icon\n\t// is absent (the static, no-retry variant) so both states stay the same 24px.\n\tminHeight: t(\"icon-size-lg\"),\n\tgap: t(\"gap-4\"),\n\tmargin: 0,\n\tcolor: t(\"color-content-destructive\"),\n});\n\n// The interactive retry control layers button affordances over the shared row.\nexport const userMessageRetry = style([\n\tuserMessageErrorContent,\n\t{\n\t\tpadding: 0,\n\t\tborder: \"none\",\n\t\tbackground: \"none\",\n\t\tborderRadius: t(\"border-radius-6\"),\n\t\tcursor: \"pointer\",\n\t\toutline: \"none\",\n\t\tselectors: {\n\t\t\t\"&[data-focus-visible]\": {\n\t\t\t\tboxShadow: `0 0 0 ${t(\"border-width-focus\")} ${t(\"color-border-focus\")}`,\n\t\t\t},\n\t\t},\n\t\t\"@media\": {\n\t\t\t\"(forced-colors: active)\": {\n\t\t\t\tselectors: {\n\t\t\t\t\t\"&[data-focus-visible]\": {\n\t\t\t\t\t\toutline: \"2px solid Highlight\",\n\t\t\t\t\t\toutlineOffset: \"2px\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t},\n]);\n\nexport const userMessageErrorText = style({\n\tmargin: 0,\n\tcolor: \"inherit\",\n\tfontFamily: t(\"font-family-body\"),\n\tfontWeight: t(\"font-weight-regular\"),\n\tfontSize: t(\"font-size-caption\"),\n\tlineHeight: t(\"line-height-caption\"),\n});\n\n// The exclamation.sync glyph renders at icon-size-lg (24px, Figma), driving\n// `<Icon>`'s 1em box — the same value that sets the row's reserved min-height.\nglobalStyle(`${userMessageErrorContent} [data-slot='icon']`, {\n\tfontSize: t(\"icon-size-lg\"),\n});\n"],"mappings":""}