@ada-cx/lovelace 1.0.0-setup.0

package/README.md

@@ -0,0 +1,113 @@
+# @ada-cx/lovelace
+
+Ada's messaging design system primitives. Behavior comes from React Aria Components. Styling comes from vanilla-extract. Every design value comes from Figma-generated tokens.
+
+## Requirements
+
+- React 19 and React DOM 19 as peer dependencies. Earlier React versions are not supported.
+- A bundler or dev server that can import plain `.css` files.
+
+## Install
+
+```sh
+npm install @ada-cx/lovelace react react-dom
+```
+
+## Setup
+
+You must import both stylesheets once at your app entry. The library build extracts all component CSS to one file, so a JS-only import renders unstyled components.
+
+```ts
+import "@ada-cx/lovelace/tokens.css";
+import "@ada-cx/lovelace/style.css";
+```
+
+`tokens.css` defines the `--lovelace-*` custom properties inside `@layer lovelace.tokens`. `style.css` holds the component styles, which only reference those properties through `var()`. Both imports are required.
+
+Then wrap your app in `LovelaceProvider`. It is the prescribed entry point for consuming Lovelace.
+
+```tsx
+import { LovelaceProvider, Button } from "@ada-cx/lovelace";
+
+export function App() {
+  return (
+    <LovelaceProvider theme="auto">
+      <Button variant="primary">Send</Button>
+    </LovelaceProvider>
+  );
+}
+```
+
+`LovelaceProvider` resolves the color scheme (`light`, `dark`, or `auto`), stamps `data-theme` on its wrapper, applies token overrides, and keeps React Aria overlay portals (Dialog, Sheet, Tooltip) inside the theme boundary. Components render without the provider — `data-theme` defaults to light — but then you own theme switching and portal scoping yourself.
+
+## Theming with token overrides
+
+Re-point tokens per brand through the `override` prop. Keys are the overridable semantic and component tokens. Values are CSS values, typically built with the typed `t()` helper from `@ada-cx/lovelace/tokens`.
+
+```tsx
+import { LovelaceProvider } from "@ada-cx/lovelace";
+import { t } from "@ada-cx/lovelace/tokens";
+
+<LovelaceProvider
+  override={{
+    "color-background-accent": "#0f62fe",
+    "font-size-body": t("font-size-14"),
+  }}
+>
+  {children}
+</LovelaceProvider>;
+```
+
+Overrides ride above the token layer as inline CSS variables, so they always win over the shipped defaults. Any unlayered `--lovelace-*` rule you write yourself wins the same way. If you need tokens without component styles, for example to build a custom theme, import `@ada-cx/lovelace/tokens.css` alone.
+
+## Brand overrides
+
+`createBrandOverrides(settings, scheme)` maps Ada dashboard brand settings to a token override map. It is the same function the Ada widget runs, so a custom UI that calls it applies a brand exactly the way the widget does. The `scheme` argument is the resolved `"light"` or `"dark"` scheme; resolve `"auto"` through `useResolvedTheme` first.
+
+```tsx
+import {
+  createBrandOverrides,
+  LovelaceProvider,
+  useResolvedTheme,
+} from "@ada-cx/lovelace";
+
+function BrandedChat({ children }) {
+  const scheme = useResolvedTheme("auto");
+
+  return (
+    <LovelaceProvider
+      theme="auto"
+      override={createBrandOverrides({ tintColor: "#0f62fe" }, scheme)}
+    >
+      {children}
+    </LovelaceProvider>
+  );
+}
+```
+
+The mapping paints the accent fill, picks a readable black or white for text on the accent, uses the tint as accent text only when it reads on the rendered surface, and repairs a header text color that falls below the WCAG AA 4.5:1 contrast floor against its background. Corner style and text size presets re-point the radius and type-scale tokens. Every `BrandSettings` field is optional, and `createBrandOverrides({}, scheme)` returns `{}`. Legibility guards measure hex colors only; other values pass through unrepaired.
+
+The colorimetry behind the mapping is also exported: `contrastRatioBetween`, `isLegibleAgainst`, `isLegibleOnSurface`, `LOVELACE_SURFACES`, and `readableTextOnAccent`.
+
+## Entry points
+
+| Import | Contents |
+| --- | --- |
+| `@ada-cx/lovelace` | Components, hooks, `LovelaceProvider` (ESM + types) |
+| `@ada-cx/lovelace/tokens` | `t()`, `tokenName()`, token types (ESM + types) |
+| `@ada-cx/lovelace/tokens.css` | Token definitions (required stylesheet) |
+| `@ada-cx/lovelace/style.css` | Component styles (required stylesheet) |
+
+## Scope of this release
+
+- **Primitives only.** This package ships design system primitives: buttons, inputs, chips, dialogs, sheets, survey controls, icons, and similar building blocks. Domain composites from the Ada product, such as the CSAT survey form and the file-upload flow, are not included.
+- **React 19 is a hard requirement.** The peer range is `^19.0.0` by design and will not be widened.
+- **Pixel parity with the Ada widget is not guaranteed.** The shipped Ada messaging app blends Lovelace with a legacy component system during an incremental migration. A UI you build from these primitives can differ visually from the hosted Ada widget.
+
+## Accessibility
+
+Components target WCAG 2.2 Level AA. React Aria Components provide keyboard operability, roles, and focus management. Interactive states are styled through `data-*` attributes (`data-hovered`, `data-pressed`, `data-focus-visible`, `data-disabled`), so you can extend styling the same way.
+
+## Versioning
+
+This package is fully versioned: the implementation you install is the implementation you run. Pin a version and upgrade deliberately. This differs from Ada's web messaging runtime, which resolves from the CDN at load time.

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

@@ -0,0 +1,2 @@
+export declare const agentMessageRoot: string;
+export declare const agentMessageBody: string;

package/dist/components/AgentMessage/AgentMessage.css.js

@@ -0,0 +1,7 @@
+/* empty css                                */
+//#region src/components/AgentMessage/AgentMessage.css.ts
+var e = "_1xn6t060", t = "_1xn6t061";
+//#endregion
+export { t as agentMessageBody, e as agentMessageRoot };
+
+//# sourceMappingURL=AgentMessage.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentMessage.css.js","names":[],"sources":["../../../src/components/AgentMessage/AgentMessage.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\nimport { t } from \"../../tokens/index.js\";\n\n// `row` follows the ambient inline direction, so the avatar leads on the left\n// in LTR and trails on the right under `[dir=\"rtl\"]` — no per-direction variant.\nexport const agentMessageRoot = style({\n\tdisplay: \"flex\",\n\talignItems: \"flex-start\",\n\tgap: t(\"gap-12\"),\n});\n\nexport const agentMessageBody = style({\n\tmargin: 0,\n\tflex: \"1 0 0\",\n\tminWidth: 0,\n\t// Match the Figma message frame: a 24px minimum row, single lines centered\n\t// against it so short text aligns with the avatar. Keep in sync with the\n\t// Avatar `sm` size (`Avatar.css.ts`); there is no shared `avatar-size-*`\n\t// token yet.\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tjustifyContent: \"center\",\n\tminHeight: \"24px\",\n\t// `start` follows the text's resolved direction (see `dir=\"auto\"` on the\n\t// element), keeping mixed-direction content aligned to its own edge.\n\ttextAlign: \"start\",\n\tcolor: t(\"color-content-default\"),\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"],"mappings":""}

package/dist/components/AgentMessage/AgentMessage.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+export interface AgentMessageProps {
+    /** Monogram shown in the agent avatar bubble. */
+    initials?: string;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+    /** The agent's message text. */
+    children?: ReactNode;
+}
+/**
+ * A single chat message from the agent: a decorative avatar bubble beside the
+ * message text. The avatar conveys nothing beyond the text, so it is hidden
+ * from assistive tech. Announcing new messages is the consuming transcript's
+ * responsibility — wrap the message list in a single persistent live region
+ * (e.g. `role="log"`) rather than giving each message its own, since a
+ * per-message live region mounted already-populated is not reliably announced.
+ * The row mirrors under an ambient `[dir="rtl"]` and the text direction is
+ * detected from its own content.
+ */
+export declare function AgentMessage({ initials, className, children, ...rest }: AgentMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AgentMessage/AgentMessage.js

@@ -0,0 +1,24 @@
+import { cx as e } from "../../utils/cx.js";
+import { Avatar as t } from "../Avatar/Avatar.js";
+import { agentMessageBody as n, agentMessageRoot as r } from "./AgentMessage.css.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AgentMessage/AgentMessage.tsx
+function o({ initials: o = "C", className: s, children: c, ...l }) {
+	return /* @__PURE__ */ a("div", {
+		...l,
+		className: e(r, s),
+		children: [/* @__PURE__ */ i(t, {
+			"aria-hidden": !0,
+			size: "sm",
+			children: o
+		}), /* @__PURE__ */ i("p", {
+			dir: "auto",
+			className: n,
+			children: c
+		})]
+	});
+}
+//#endregion
+export { o as AgentMessage };
+
+//# sourceMappingURL=AgentMessage.js.map

package/dist/components/AgentMessage/AgentMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentMessage.js","names":[],"sources":["../../../src/components/AgentMessage/AgentMessage.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { Avatar } from \"../Avatar/index.js\";\nimport { agentMessageBody, agentMessageRoot } from \"./AgentMessage.css.js\";\n\nexport interface AgentMessageProps {\n\t/** Monogram shown in the agent avatar bubble. */\n\tinitials?: string;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLDivElement>;\n\t/** The agent's message text. */\n\tchildren?: ReactNode;\n}\n\n/**\n * A single chat message from the agent: a decorative avatar bubble beside the\n * message text. The avatar conveys nothing beyond the text, so it is hidden\n * from assistive tech. Announcing new messages is the consuming transcript's\n * responsibility — wrap the message list in a single persistent live region\n * (e.g. `role=\"log\"`) rather than giving each message its own, since a\n * per-message live region mounted already-populated is not reliably announced.\n * The row mirrors under an ambient `[dir=\"rtl\"]` and the text direction is\n * detected from its own content.\n */\nexport function AgentMessage({\n\tinitials = \"C\",\n\tclassName,\n\tchildren,\n\t...rest\n}: AgentMessageProps) {\n\treturn (\n\t\t<div {...rest} className={cx(agentMessageRoot, className)}>\n\t\t\t<Avatar aria-hidden size=\"sm\">\n\t\t\t\t{initials}\n\t\t\t</Avatar>\n\t\t\t<p dir=\"auto\" className={agentMessageBody}>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAyBA,SAAgB,EAAa,EAC5B,cAAW,KACX,cACA,aACA,GAAG,KACkB;AACrB,QACC,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,EAAG,GAAkB,EAAU;YAAzD,CACC,kBAAC,GAAD;GAAQ,eAAA;GAAY,MAAK;aACvB;GACO,CAAA,EACT,kBAAC,KAAD;GAAG,KAAI;GAAO,WAAW;GACvB;GACE,CAAA,CACC"}

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

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

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

@@ -0,0 +1,48 @@
+export declare const avatarRoot: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            width: "24px";
+            height: "24px";
+            fontSize: "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)";
+            lineHeight: "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)";
+        };
+        md: {
+            width: "36px";
+            height: "36px";
+            fontSize: "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)";
+            lineHeight: "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)";
+        };
+        lg: {
+            width: "48px";
+            height: "48px";
+            fontSize: "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)";
+            lineHeight: "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)";
+        };
+        xl: {
+            width: "72px";
+            height: "72px";
+            fontSize: "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)";
+            lineHeight: "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 avatarPlaceholder: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            width: "24px";
+            height: "24px";
+        };
+        md: {
+            width: "36px";
+            height: "36px";
+        };
+        lg: {
+            width: "48px";
+            height: "48px";
+        };
+        xl: {
+            width: "72px";
+            height: "72px";
+        };
+    };
+}>;

package/dist/components/Avatar/Avatar.css.js

@@ -0,0 +1,28 @@
+/* empty css                          */
+import { createRuntimeFn as e } from "../../vendor/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+//#region src/components/Avatar/Avatar.css.ts
+var t = e({
+	defaultClassName: "kmbju21 kmbju20",
+	variantClassNames: { size: {
+		sm: "kmbju22",
+		md: "kmbju23",
+		lg: "kmbju24",
+		xl: "kmbju25"
+	} },
+	defaultVariants: { size: "sm" },
+	compoundVariants: []
+}), n = e({
+	defaultClassName: "kmbju26",
+	variantClassNames: { size: {
+		sm: "kmbju27",
+		md: "kmbju28",
+		lg: "kmbju29",
+		xl: "kmbju2a"
+	} },
+	defaultVariants: { size: "sm" },
+	compoundVariants: []
+});
+//#endregion
+export { n as avatarPlaceholder, t as avatarRoot };
+
+//# sourceMappingURL=Avatar.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.css.js","names":[],"sources":["../../../src/components/Avatar/Avatar.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\nimport { recipe } from \"@vanilla-extract/recipes\";\nimport { t } from \"../../tokens/index.js\";\n\nconst avatarBase = style({});\n\n// Icon frame sizes per Figma (drive the composed <Icon>'s 1em sizing). sm/md map\n// to the icon-size token family; lg/xl are Figma-pinned literals with no token.\nconst ICON_SIZE = {\n\tsm: t(\"icon-size-sm\"),\n\tmd: t(\"icon-size-md\"),\n\tlg: \"32px\",\n\txl: \"36px\",\n} as const;\n\n// Bubble frame sizes per Figma. Shared by the avatar bubble and the\n// same-footprint placeholder so a reserved spacer can never drift from the\n// avatar's real dimensions.\nconst BUBBLE_SIZE = { sm: \"24px\", md: \"36px\", lg: \"48px\", xl: \"72px\" } as const;\n\nexport const avatarRoot = recipe({\n\tbase: [\n\t\tavatarBase,\n\t\t{\n\t\t\tposition: \"relative\",\n\t\t\tisolation: \"isolate\",\n\t\t\tdisplay: \"inline-flex\",\n\t\t\talignItems: \"center\",\n\t\t\tjustifyContent: \"center\",\n\t\t\tflexShrink: 0,\n\t\t\toverflow: \"hidden\",\n\t\t\tboxSizing: \"border-box\",\n\t\t\tborderRadius: t(\"border-radius-avatar\"),\n\t\t\tbackgroundColor: t(\"avatar-background\"),\n\t\t\tcolor: t(\"avatar-content\"),\n\t\t\tfontFamily: t(\"font-family-body\"),\n\t\t\tfontWeight: t(\"font-weight-semi-bold\"),\n\t\t\ttextAlign: \"center\",\n\t\t\tuserSelect: \"none\",\n\t\t},\n\t],\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: {\n\t\t\t\twidth: BUBBLE_SIZE.sm,\n\t\t\t\theight: BUBBLE_SIZE.sm,\n\t\t\t\tfontSize: t(\"font-size-body\"),\n\t\t\t\tlineHeight: t(\"line-height-body\"),\n\t\t\t},\n\t\t\tmd: {\n\t\t\t\twidth: BUBBLE_SIZE.md,\n\t\t\t\theight: BUBBLE_SIZE.md,\n\t\t\t\tfontSize: t(\"font-size-body\"),\n\t\t\t\tlineHeight: t(\"line-height-body\"),\n\t\t\t},\n\t\t\tlg: {\n\t\t\t\twidth: BUBBLE_SIZE.lg,\n\t\t\t\theight: BUBBLE_SIZE.lg,\n\t\t\t\tfontSize: t(\"font-size-body\"),\n\t\t\t\tlineHeight: t(\"line-height-body\"),\n\t\t\t},\n\t\t\txl: {\n\t\t\t\twidth: BUBBLE_SIZE.xl,\n\t\t\t\theight: BUBBLE_SIZE.xl,\n\t\t\t\tfontSize: t(\"font-size-title-large\"),\n\t\t\t\tlineHeight: t(\"line-height-title-large\"),\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"sm\",\n\t},\n});\n\n// An invisible box with the exact footprint of an avatar bubble, for reserving\n// an avatar's space in a layout (e.g. aligning grouped rows). Same size source\n// as `avatarRoot`, so the two can never drift.\nexport const avatarPlaceholder = recipe({\n\tbase: { flexShrink: 0 },\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: { width: BUBBLE_SIZE.sm, height: BUBBLE_SIZE.sm },\n\t\t\tmd: { width: BUBBLE_SIZE.md, height: BUBBLE_SIZE.md },\n\t\t\tlg: { width: BUBBLE_SIZE.lg, height: BUBBLE_SIZE.lg },\n\t\t\txl: { width: BUBBLE_SIZE.xl, height: BUBBLE_SIZE.xl },\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"sm\",\n\t},\n});\n\n// A composed <Image> covers the bubble; the always-painted accent background\n// then only shows for the initial/icon cases (or when an image errors out).\nglobalStyle(`${avatarBase} [data-slot='image']`, {\n\tposition: \"absolute\",\n\tinset: 0,\n\twidth: \"100%\",\n\theight: \"100%\",\n\tobjectFit: \"cover\",\n\tborderRadius: \"inherit\",\n});\n\nglobalStyle(`${avatarBase} [data-slot='icon']`, {\n\tflexShrink: 0,\n});\n\n// Icon size is independent of the initials font-size, so set it per bubble size.\nfor (const [size, fontSize] of Object.entries(ICON_SIZE)) {\n\tglobalStyle(`${avatarBase}[data-size='${size}'] [data-slot='icon']`, {\n\t\tfontSize,\n\t});\n}\n"],"mappings":""}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+interface AvatarBaseProps extends Omit<HTMLAttributes<HTMLSpanElement>, "aria-hidden"> {
+    size?: AvatarSize;
+    /**
+     * When false, render a same-footprint, `aria-hidden` spacer instead of the
+     * bubble — e.g. to align grouped rows under the first row's avatar. The
+     * reserved gap shares the bubble's size source, so it can never drift.
+     */
+    showAvatar?: boolean;
+    /** Initials text, an `<Icon>`, or an `<Image>`. */
+    children?: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * The accessible name is the consumer's to supply: pass `label` to name the
+ * avatar, or `aria-hidden` to mark it decorative. The design system does not
+ * assume a default name — an avatar's meaning (which bot, which agent) lives
+ * with the consumer, not here.
+ */
+export type AvatarProps = AvatarBaseProps & ({
+    label: string;
+    "aria-hidden"?: never;
+} | {
+    label?: never;
+    "aria-hidden": true;
+});
+/**
+ * A circular avatar bubble. The content — initials, icon, or image — is
+ * composed as children; Avatar styles each by its `data-slot`. It is bubble
+ * only: the name layout is composed by the consumer. With `showAvatar={false}`
+ * it collapses to an invisible, same-footprint spacer.
+ */
+export declare function Avatar({ label, size, showAvatar, className, children, ref, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,26 @@
+import { cx as e } from "../../utils/cx.js";
+import { avatarRoot as t } from "./Avatar.css.js";
+import { AvatarPlaceholder as n } from "./AvatarPlaceholder.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+function i({ label: i, size: a = "sm", showAvatar: o = !0, className: s, children: c, ref: l, ...u }) {
+	return o ? /* @__PURE__ */ r("span", {
+		...u,
+		ref: l,
+		"data-slot": "avatar",
+		"data-size": a,
+		role: "img",
+		"aria-label": i,
+		className: e(t({ size: a }), s),
+		children: c
+	}) : /* @__PURE__ */ r(n, {
+		...u,
+		ref: l,
+		size: a,
+		className: s
+	});
+}
+//#endregion
+export { i as Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { avatarRoot } from \"./Avatar.css.js\";\nimport { AvatarPlaceholder } from \"./AvatarPlaceholder.js\";\n\nexport type AvatarSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\ninterface AvatarBaseProps\n\textends Omit<HTMLAttributes<HTMLSpanElement>, \"aria-hidden\"> {\n\tsize?: AvatarSize;\n\t/**\n\t * When false, render a same-footprint, `aria-hidden` spacer instead of the\n\t * bubble — e.g. to align grouped rows under the first row's avatar. The\n\t * reserved gap shares the bubble's size source, so it can never drift.\n\t */\n\tshowAvatar?: boolean;\n\t/** Initials text, an `<Icon>`, or an `<Image>`. */\n\tchildren?: ReactNode;\n\tref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * The accessible name is the consumer's to supply: pass `label` to name the\n * avatar, or `aria-hidden` to mark it decorative. The design system does not\n * assume a default name — an avatar's meaning (which bot, which agent) lives\n * with the consumer, not here.\n */\nexport type AvatarProps = AvatarBaseProps &\n\t(\n\t\t| { label: string; \"aria-hidden\"?: never }\n\t\t| { label?: never; \"aria-hidden\": true }\n\t);\n\n/**\n * A circular avatar bubble. The content — initials, icon, or image — is\n * composed as children; Avatar styles each by its `data-slot`. It is bubble\n * only: the name layout is composed by the consumer. With `showAvatar={false}`\n * it collapses to an invisible, same-footprint spacer.\n */\nexport function Avatar({\n\tlabel,\n\tsize = \"sm\",\n\tshowAvatar = true,\n\tclassName,\n\tchildren,\n\tref,\n\t...rest\n}: AvatarProps) {\n\tif (!showAvatar) {\n\t\treturn (\n\t\t\t<AvatarPlaceholder\n\t\t\t\t{...rest}\n\t\t\t\tref={ref}\n\t\t\t\tsize={size}\n\t\t\t\tclassName={className}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span\n\t\t\t{...rest}\n\t\t\tref={ref}\n\t\t\tdata-slot=\"avatar\"\n\t\t\tdata-size={size}\n\t\t\trole=\"img\"\n\t\t\taria-label={label}\n\t\t\tclassName={cx(avatarRoot({ size }), className)}\n\t\t>\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;AAuCA,SAAgB,EAAO,EACtB,UACA,UAAO,MACP,gBAAa,IACb,cACA,aACA,QACA,GAAG,KACY;AAYf,QAXK,IAYJ,kBAAC,QAAD;EACC,GAAI;EACC;EACL,aAAU;EACV,aAAW;EACX,MAAK;EACL,cAAY;EACZ,WAAW,EAAG,EAAW,EAAE,SAAM,CAAC,EAAE,EAAU;EAE7C;EACK,CAAA,GApBN,kBAAC,GAAD;EACC,GAAI;EACC;EACC;EACK;EACV,CAAA"}

package/dist/components/Avatar/AvatarPlaceholder.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, Ref } from "react";
+import type { AvatarSize } from "./Avatar.js";
+export interface AvatarPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: AvatarSize;
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * An empty, `aria-hidden` box with the exact footprint of an `Avatar` of the
+ * same `size`. Reserves an avatar's space where one is never shown — e.g.
+ * aligning a row under sibling rows' avatars — so the gap can never drift from
+ * the avatar's real dimensions. For the conditional case, prefer
+ * `<Avatar showAvatar={false}>`, which delegates here.
+ */
+export declare function AvatarPlaceholder({ size, className, ref, ...rest }: AvatarPlaceholderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/AvatarPlaceholder.js

@@ -0,0 +1,18 @@
+import { cx as e } from "../../utils/cx.js";
+import { avatarPlaceholder as t } from "./Avatar.css.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Avatar/AvatarPlaceholder.tsx
+function r({ size: r = "sm", className: i, ref: a, ...o }) {
+	return /* @__PURE__ */ n("span", {
+		...o,
+		ref: a,
+		"aria-hidden": "true",
+		"data-slot": "avatar-placeholder",
+		"data-size": r,
+		className: e(t({ size: r }), i)
+	});
+}
+//#endregion
+export { r as AvatarPlaceholder };
+
+//# sourceMappingURL=AvatarPlaceholder.js.map

package/dist/components/Avatar/AvatarPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarPlaceholder.js","names":[],"sources":["../../../src/components/Avatar/AvatarPlaceholder.tsx"],"sourcesContent":["import type { HTMLAttributes, Ref } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { avatarPlaceholder } from \"./Avatar.css.js\";\nimport type { AvatarSize } from \"./Avatar.js\";\n\nexport interface AvatarPlaceholderProps\n\textends HTMLAttributes<HTMLSpanElement> {\n\tsize?: AvatarSize;\n\tref?: Ref<HTMLSpanElement>;\n}\n\n/**\n * An empty, `aria-hidden` box with the exact footprint of an `Avatar` of the\n * same `size`. Reserves an avatar's space where one is never shown — e.g.\n * aligning a row under sibling rows' avatars — so the gap can never drift from\n * the avatar's real dimensions. For the conditional case, prefer\n * `<Avatar showAvatar={false}>`, which delegates here.\n */\nexport function AvatarPlaceholder({\n\tsize = \"sm\",\n\tclassName,\n\tref,\n\t...rest\n}: AvatarPlaceholderProps) {\n\treturn (\n\t\t<span\n\t\t\t{...rest}\n\t\t\tref={ref}\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-slot=\"avatar-placeholder\"\n\t\t\tdata-size={size}\n\t\t\tclassName={cx(avatarPlaceholder({ size }), className)}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAkBA,SAAgB,EAAkB,EACjC,UAAO,MACP,cACA,QACA,GAAG,KACuB;AAC1B,QACC,kBAAC,QAAD;EACC,GAAI;EACC;EACL,eAAY;EACZ,aAAU;EACV,aAAW;EACX,WAAW,EAAG,EAAkB,EAAE,SAAM,CAAC,EAAE,EAAU;EACpD,CAAA"}

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

@@ -0,0 +1,4 @@
+export type { AvatarProps, AvatarSize } from "./Avatar.js";
+export { Avatar } from "./Avatar.js";
+export type { AvatarPlaceholderProps } from "./AvatarPlaceholder.js";
+export { AvatarPlaceholder } from "./AvatarPlaceholder.js";

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

@@ -0,0 +1,3 @@
+export declare const bubbleScrim: string;
+export declare const bubbleModal: string;
+export declare const bubbleDialog: string;

package/dist/components/BubbleOverlay/BubbleOverlay.css.js

@@ -0,0 +1,8 @@
+/* empty css                                    */
+/* empty css                                 */
+//#region src/components/BubbleOverlay/BubbleOverlay.css.ts
+var e = "xywi8y0 _1r1codi0", t = "xywi8y1", n = "xywi8y2";
+//#endregion
+export { n as bubbleDialog, t as bubbleModal, e as bubbleScrim };
+
+//# sourceMappingURL=BubbleOverlay.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleOverlay.css.js","names":[],"sources":["../../../src/components/BubbleOverlay/BubbleOverlay.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\nimport { t } from \"../../tokens/index.js\";\nimport { overlayScrimBase, SURFACE_SHADOW } from \"../Overlay/overlay.css.js\";\n\n// Transparent backdrop: no dimming, but the RAC ModalOverlay still traps focus\n// and dismisses on outside tap / Escape. Anchors the bubble horizontally\n// centered, near the bottom edge (padding offsets it off the edges).\nexport const bubbleScrim = style([\n\toverlayScrimBase,\n\t{\n\t\talignItems: \"center\",\n\t\tjustifyContent: \"flex-end\",\n\t\tpadding: t(\"padding-16\"),\n\t},\n]);\n\n// Compact floating card that hugs its content, capped so it can't fill the\n// window. overflow:hidden clips the child's corners; the box's own shadow\n// survives its own overflow.\nexport const bubbleModal = style({\n\tposition: \"relative\",\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tminHeight: 0,\n\twidth: \"fit-content\",\n\tmaxWidth: \"min(320px, 100%)\",\n\tmaxHeight: \"100%\",\n\tbackgroundColor: t(\"color-background-default\"),\n\tborderRadius: t(\"border-radius-container\"),\n\toverflow: \"hidden\",\n\tboxShadow: SURFACE_SHADOW,\n\tselectors: {\n\t\t\"&[data-entering]\": { transform: \"translateY(8px)\" },\n\t\t\"&[data-exiting]\": { transform: \"translateY(8px)\" },\n\t},\n\t\"@media\": {\n\t\t\"(prefers-reduced-motion: no-preference)\": {\n\t\t\ttransition: `transform ${t(\"duration-medium\")} ${t(\"easing-standard\")}`,\n\t\t},\n\t},\n});\n\nexport const bubbleDialog = style({\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tflex: \"1 1 auto\",\n\tminHeight: 0,\n\tmaxHeight: \"100%\",\n\toutline: \"none\",\n});\n"],"mappings":""}