@ada-cx/lovelace 1.0.0-setup.0

package/dist/components/Radio/RadioGroup.js

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

package/dist/components/Radio/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/components/Radio/RadioGroup.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport type { RadioGroupProps as AriaRadioGroupProps } from \"react-aria-components\";\nimport { RadioGroup as AriaRadioGroup } from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { radioGroup } from \"./Radio.css.js\";\n\nexport interface RadioGroupProps\n\textends Omit<AriaRadioGroupProps, \"className\" | \"style\" | \"children\"> {\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLDivElement>;\n\t/** The `Radio` options for this group. */\n\tchildren: ReactNode;\n}\n\n/**\n * Single-select group: exactly one child `Radio` may be selected at a time.\n * Owns the selected value (`value`/`onChange`), keyboard navigation, and the\n * group's accessible name — supply `aria-label` or `aria-labelledby`.\n */\nexport function RadioGroup({ className, children, ...rest }: RadioGroupProps) {\n\treturn (\n\t\t<AriaRadioGroup {...rest} className={cx(radioGroup, className)}>\n\t\t\t{children}\n\t\t</AriaRadioGroup>\n\t);\n}\n"],"mappings":";;;;;AAoBA,SAAgB,EAAW,EAAE,cAAW,aAAU,GAAG,KAAyB;AAC7E,QACC,kBAAC,GAAD;EAAgB,GAAI;EAAM,WAAW,EAAG,GAAY,EAAU;EAC5D;EACe,CAAA"}

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

@@ -0,0 +1,4 @@
+export type { RadioProps } from "./Radio.js";
+export { Radio } from "./Radio.js";
+export type { RadioGroupProps } from "./RadioGroup.js";
+export { RadioGroup } from "./RadioGroup.js";

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

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

package/dist/components/ScrollMarker/ScrollMarker.css.js

@@ -0,0 +1,25 @@
+import { createRuntimeFn as e } from "../../vendor/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+/* empty css                                */
+//#region src/components/ScrollMarker/ScrollMarker.css.ts
+var t = e({
+	defaultClassName: "_19x8abf1 _19x8abf0",
+	variantClassNames: {
+		color: {
+			default: "_19x8abf2",
+			brand: "_19x8abf3"
+		},
+		type: {
+			iconOnly: "_19x8abf4",
+			withText: "_19x8abf5"
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		type: "iconOnly"
+	},
+	compoundVariants: []
+});
+//#endregion
+export { t as scrollMarkerRoot };
+
+//# sourceMappingURL=ScrollMarker.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollMarker.css.js","names":[],"sources":["../../../src/components/ScrollMarker/ScrollMarker.css.ts"],"sourcesContent":["import { globalStyle, style } from \"@vanilla-extract/css\";\nimport { recipe } from \"@vanilla-extract/recipes\";\nimport { t } from \"../../tokens/index.js\";\n\n// Figma \"+2\" elevation effect. The token set exposes no shadow/elevation token yet,\n// so the value is hardcoded verbatim from the design pending a token refresh.\nconst DROP_SHADOW = \"0 4px 14px 0 rgba(0, 0, 0, 0.06)\";\n\nconst scrollMarkerBase = style({});\n\nexport const scrollMarkerRoot = recipe({\n\tbase: [\n\t\tscrollMarkerBase,\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\tboxSizing: \"border-box\",\n\t\t\tborder: \"none\",\n\t\t\tborderRadius: t(\"border-radius-full\"),\n\t\t\tboxShadow: DROP_SHADOW,\n\t\t\tfontFamily: t(\"font-family-body\"),\n\t\t\tfontWeight: t(\"font-weight-medium\"),\n\t\t\tfontSize: t(\"font-size-body\"),\n\t\t\tlineHeight: t(\"line-height-body\"),\n\t\t\twhiteSpace: \"nowrap\",\n\t\t\tcursor: \"pointer\",\n\t\t\tuserSelect: \"none\",\n\t\t\tappearance: \"none\",\n\t\t\toutline: \"none\",\n\t\t\ttransitionProperty: \"background-color, box-shadow\",\n\t\t\ttransitionDuration: t(\"duration-fast\"),\n\t\t\ttransitionTimingFunction: t(\"easing-standard\"),\n\t\t\t\"::after\": {\n\t\t\t\tcontent: '\"\"',\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tinset: 0,\n\t\t\t\tborderRadius: \"inherit\",\n\t\t\t\tbackgroundColor: \"currentColor\",\n\t\t\t\topacity: 0,\n\t\t\t\tpointerEvents: \"none\",\n\t\t\t\tzIndex: -1,\n\t\t\t\ttransition: `opacity ${t(\"duration-fast\")} ${t(\"easing-standard\")}`,\n\t\t\t},\n\t\t\tselectors: {\n\t\t\t\t\"&[data-hovered]:not([data-disabled])::after\": {\n\t\t\t\t\topacity: t(\"opacity-state-hover\"),\n\t\t\t\t},\n\t\t\t\t\"&[data-focus-visible]:not([data-disabled])::after\": {\n\t\t\t\t\topacity: t(\"opacity-state-focus\"),\n\t\t\t\t},\n\t\t\t\t\"&[data-pressed]:not([data-disabled])::after\": {\n\t\t\t\t\topacity: t(\"opacity-state-pressed\"),\n\t\t\t\t},\n\t\t\t\t// Focus ring layers on top of the persistent drop shadow.\n\t\t\t\t\"&[data-focus-visible]:not([data-disabled])\": {\n\t\t\t\t\tboxShadow: `${DROP_SHADOW}, 0 0 0 ${t(\"border-width-focus\")} ${t(\"color-border-focus\")}`,\n\t\t\t\t},\n\t\t\t},\n\t\t\t\"@media\": {\n\t\t\t\t\"(forced-colors: active)\": {\n\t\t\t\t\tselectors: {\n\t\t\t\t\t\t\"&[data-focus-visible]:not([data-disabled])\": {\n\t\t\t\t\t\t\toutline: \"2px solid Highlight\",\n\t\t\t\t\t\t\toutlineOffset: \"2px\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t],\n\tvariants: {\n\t\tcolor: {\n\t\t\tdefault: {\n\t\t\t\tbackgroundColor: t(\"scrollmarker-background\"),\n\t\t\t\tcolor: t(\"scrollmarker-content\"),\n\t\t\t},\n\t\t\tbrand: {\n\t\t\t\tbackgroundColor: t(\"color-background-accent\"),\n\t\t\t\tcolor: t(\"color-content-on-accent\"),\n\t\t\t},\n\t\t},\n\t\t// Hardcoded frame dimensions mirror Figma's fixed sizes (icon-only 40px circle,\n\t\t// with-text 38px pill row), which the token set does not expose as spacing values.\n\t\ttype: {\n\t\t\ticonOnly: { width: \"40px\", height: \"40px\", padding: 0 },\n\t\t\twithText: {\n\t\t\t\theight: \"38px\",\n\t\t\t\tpaddingInline: t(\"padding-12\"),\n\t\t\t\tgap: t(\"gap-8\"),\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolor: \"default\",\n\t\ttype: \"iconOnly\",\n\t},\n});\n\n// Descendant target must be a global rule; vanilla-extract disallows it inside `selectors`.\nglobalStyle(`${scrollMarkerBase} [data-slot='icon']`, {\n\tflexShrink: 0,\n\tfontSize: t(\"icon-size-control\"),\n});\n"],"mappings":""}

package/dist/components/ScrollMarker/ScrollMarker.d.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+import type { ButtonProps as AriaButtonProps } from "react-aria-components";
+export type ScrollMarkerColor = "default" | "brand";
+export interface ScrollMarkerProps extends Omit<AriaButtonProps, "children" | "className" | "style"> {
+    /** `default` sits on the inverse surface; `brand` on the accent surface. */
+    color?: ScrollMarkerColor;
+    /**
+     * Unread messages waiting below the fold. `0`/undefined renders the compact
+     * icon-only marker; `≥1` renders the labelled "unread" pill.
+     */
+    unreadCount?: number;
+    /**
+     * Overrides the with-text label (e.g. a localized "2 unread"). When omitted, the
+     * label defaults to `"{unreadCount} unread"`. Rendered only when `unreadCount ≥ 1`.
+     */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * The chat "jump to latest" marker, shown when the user has scrolled up. Renders a
+ * compact down-arrow button, or — once messages arrive below the fold — an unread-count
+ * pill. Selection of icon-only vs with-text is derived from `unreadCount`.
+ */
+export declare function ScrollMarker({ color, unreadCount, children, className, "aria-label": ariaLabel, ...rest }: ScrollMarkerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ScrollMarker/ScrollMarker.js

@@ -0,0 +1,29 @@
+import { cx as e } from "../../utils/cx.js";
+import { ArrowDown as t } from "../Icon/icons/ArrowDown.js";
+import { scrollMarkerRoot as n } from "./ScrollMarker.css.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Button as a } from "react-aria-components";
+//#region src/components/ScrollMarker/ScrollMarker.tsx
+var o = "Scroll to latest message";
+function s({ color: s = "default", unreadCount: c, children: l, className: u, "aria-label": d, ...f }) {
+	let p = (c ?? 0) >= 1;
+	return /* @__PURE__ */ i(a, {
+		...f,
+		"aria-label": d ?? o,
+		"data-color": s,
+		"data-type": p ? "with-text" : "icon-only",
+		className: e(n({
+			color: s,
+			type: p ? "withText" : "iconOnly"
+		}), u),
+		children: [/* @__PURE__ */ r("span", {
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: p ? l ?? `${c} unread` : ""
+		}), /* @__PURE__ */ r(t, {})]
+	});
+}
+//#endregion
+export { s as ScrollMarker };
+
+//# sourceMappingURL=ScrollMarker.js.map

package/dist/components/ScrollMarker/ScrollMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollMarker.js","names":[],"sources":["../../../src/components/ScrollMarker/ScrollMarker.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport type { ButtonProps as AriaButtonProps } from \"react-aria-components\";\nimport { Button as AriaButton } from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { ArrowDown } from \"../Icon/icons/ArrowDown.js\";\nimport { scrollMarkerRoot } from \"./ScrollMarker.css.js\";\n\nexport type ScrollMarkerColor = \"default\" | \"brand\";\n\nexport interface ScrollMarkerProps\n\textends Omit<AriaButtonProps, \"children\" | \"className\" | \"style\"> {\n\t/** `default` sits on the inverse surface; `brand` on the accent surface. */\n\tcolor?: ScrollMarkerColor;\n\t/**\n\t * Unread messages waiting below the fold. `0`/undefined renders the compact\n\t * icon-only marker; `≥1` renders the labelled \"unread\" pill.\n\t */\n\tunreadCount?: number;\n\t/**\n\t * Overrides the with-text label (e.g. a localized \"2 unread\"). When omitted, the\n\t * label defaults to `\"{unreadCount} unread\"`. Rendered only when `unreadCount ≥ 1`.\n\t */\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLButtonElement>;\n}\n\nconst DEFAULT_ARIA_LABEL = \"Scroll to latest message\";\n\n/**\n * The chat \"jump to latest\" marker, shown when the user has scrolled up. Renders a\n * compact down-arrow button, or — once messages arrive below the fold — an unread-count\n * pill. Selection of icon-only vs with-text is derived from `unreadCount`.\n */\nexport function ScrollMarker({\n\tcolor = \"default\",\n\tunreadCount,\n\tchildren,\n\tclassName,\n\t\"aria-label\": ariaLabel,\n\t...rest\n}: ScrollMarkerProps) {\n\tconst withText = (unreadCount ?? 0) >= 1;\n\treturn (\n\t\t<AriaButton\n\t\t\t{...rest}\n\t\t\taria-label={ariaLabel ?? DEFAULT_ARIA_LABEL}\n\t\t\tdata-color={color}\n\t\t\tdata-type={withText ? \"with-text\" : \"icon-only\"}\n\t\t\tclassName={cx(\n\t\t\t\tscrollMarkerRoot({ color, type: withText ? \"withText\" : \"iconOnly\" }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<span aria-live=\"polite\" aria-atomic=\"true\">\n\t\t\t\t{withText ? (children ?? `${unreadCount} unread`) : \"\"}\n\t\t\t</span>\n\t\t\t<ArrowDown />\n\t\t</AriaButton>\n\t);\n}\n"],"mappings":";;;;;;AA4BA,IAAM,IAAqB;AAO3B,SAAgB,EAAa,EAC5B,WAAQ,WACR,gBACA,aACA,cACA,cAAc,GACd,GAAG,KACkB;CACrB,IAAM,KAAY,KAAe,MAAM;AACvC,QACC,kBAAC,GAAD;EACC,GAAI;EACJ,cAAY,KAAa;EACzB,cAAY;EACZ,aAAW,IAAW,cAAc;EACpC,WAAW,EACV,EAAiB;GAAE;GAAO,MAAM,IAAW,aAAa;GAAY,CAAC,EACrE,EACA;YARF,CAUC,kBAAC,QAAD;GAAM,aAAU;GAAS,eAAY;aACnC,IAAY,KAAY,GAAG,EAAY,WAAY;GAC9C,CAAA,EACP,kBAAC,GAAD,EAAa,CAAA,CACD"}

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

@@ -0,0 +1 @@
+export { ScrollMarker, type ScrollMarkerColor, type ScrollMarkerProps, } from "./ScrollMarker.js";

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

@@ -0,0 +1,8 @@
+export declare const sheetRoot: string;
+export declare const sheetHeader: string;
+export declare const sheetHeaderTitle: string;
+export declare const sheetHeaderStart: string;
+export declare const sheetHeaderEnd: string;
+export declare const sheetBackIcon: string;
+export declare const sheetBody: string;
+export declare const sheetActions: string;

package/dist/components/Sheet/Sheet.css.js

@@ -0,0 +1,7 @@
+/* empty css                         */
+//#region src/components/Sheet/Sheet.css.ts
+var e = "mf01c90", t = "mf01c91", n = "mf01c92", r = "mf01c93", i = "mf01c94", a = "mf01c95", o = "mf01c96", s = "mf01c97";
+//#endregion
+export { s as sheetActions, a as sheetBackIcon, o as sheetBody, t as sheetHeader, i as sheetHeaderEnd, r as sheetHeaderStart, n as sheetHeaderTitle, e as sheetRoot };
+
+//# sourceMappingURL=Sheet.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.css.js","names":[],"sources":["../../../src/components/Sheet/Sheet.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\nimport { t } from \"../../tokens/index.js\";\n\n/* ── Sheet (bare content surface) ─────────────────────────────────────── */\n\nexport const sheetRoot = style({\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tflex: \"1 1 auto\",\n\tminHeight: 0,\n\tmaxHeight: \"100%\",\n\twidth: \"100%\",\n\tboxSizing: \"border-box\",\n\tbackgroundColor: t(\"color-background-default\"),\n\tcolor: t(\"color-content-default\"),\n\tfontFamily: t(\"font-family-body\"),\n\tfontSize: t(\"font-size-body\"),\n\tlineHeight: t(\"line-height-body\"),\n});\n\n/* ── Sheet.Header ─────────────────────────────────────────────────────── */\n\nexport const sheetHeader = style({\n\tposition: \"relative\",\n\tflexShrink: 0,\n\tdisplay: \"flex\",\n\talignItems: \"center\",\n\tjustifyContent: \"center\",\n\t// Figma: fixed 56px header height.\n\theight: \"56px\",\n\tpaddingInline: t(\"padding-12\"),\n\tboxSizing: \"border-box\",\n});\n\nexport const sheetHeaderTitle = style({\n\tmargin: 0,\n\tcolor: t(\"color-content-default\"),\n\tfontFamily: t(\"font-family-body\"),\n\tfontWeight: t(\"font-weight-medium\"),\n\tfontSize: t(\"font-size-body\"),\n\tlineHeight: t(\"line-height-body\"),\n\ttextAlign: \"center\",\n});\n\n// Edge buttons are pinned (absolute) so the title stays centered even with a\n// single button present. Logical insets mirror correctly under RTL.\nexport const sheetHeaderStart = style({\n\tposition: \"absolute\",\n\tinsetInlineStart: t(\"padding-12\"),\n\ttop: 0,\n\tbottom: 0,\n\tdisplay: \"flex\",\n\talignItems: \"center\",\n});\n\nexport const sheetHeaderEnd = style({\n\tposition: \"absolute\",\n\tinsetInlineEnd: t(\"padding-12\"),\n\ttop: 0,\n\tbottom: 0,\n\tdisplay: \"flex\",\n\talignItems: \"center\",\n});\n\n// Back is a reading-direction affordance: the chevron mirrors under RTL.\nexport const sheetBackIcon = style({\n\tselectors: {\n\t\t'[dir=\"rtl\"] &': { transform: \"scaleX(-1)\" },\n\t},\n});\n\n/* ── Sheet.Body ───────────────────────────────────────────────────────── */\n\n// flex:0 1 auto + min-height:0 + overflow:auto is the single rule that makes\n// the body scroll when a parent caps the height (floating) and hug content\n// when uncapped (inline) — with no mode flag.\nexport const sheetBody = style({\n\tflex: \"0 1 auto\",\n\tminHeight: 0,\n\toverflowY: \"auto\",\n\tpadding: t(\"padding-12\"),\n\tboxSizing: \"border-box\",\n\tscrollbarWidth: \"thin\",\n\tscrollbarColor: `${t(\"color-border-default\")} transparent`,\n});\n\n/* ── Sheet.Actions ────────────────────────────────────────────────────── */\n\nexport const sheetActions = style({\n\tflexShrink: 0,\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\talignItems: \"stretch\",\n\tgap: t(\"gap-12\"),\n\tpadding: t(\"padding-12\"),\n\tboxSizing: \"border-box\",\n});\n"],"mappings":""}

package/dist/components/Sheet/Sheet.d.ts

@@ -0,0 +1,14 @@
+import { SheetActions } from "./SheetActions.js";
+import { SheetBody } from "./SheetBody.js";
+import { SheetHeader } from "./SheetHeader.js";
+import { SheetRoot } from "./SheetRoot.js";
+export type { SheetProps } from "./SheetRoot.js";
+/**
+ * Bare bottom-sheet content surface. Renders inline as-is; wrap it in
+ * `SheetOverlay` for the modal, scrim-backed, slide-up presentation.
+ */
+export declare const Sheet: typeof SheetRoot & {
+    Header: typeof SheetHeader;
+    Body: typeof SheetBody;
+    Actions: typeof SheetActions;
+};

package/dist/components/Sheet/Sheet.js

@@ -0,0 +1,14 @@
+import { SheetActions as e } from "./SheetActions.js";
+import { SheetBody as t } from "./SheetBody.js";
+import { SheetHeader as n } from "./SheetHeader.js";
+import { SheetRoot as r } from "./SheetRoot.js";
+//#region src/components/Sheet/Sheet.tsx
+var i = Object.assign(r, {
+	Header: n,
+	Body: t,
+	Actions: e
+});
+//#endregion
+export { i as Sheet };
+
+//# sourceMappingURL=Sheet.js.map

package/dist/components/Sheet/Sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.js","names":[],"sources":["../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import { SheetActions } from \"./SheetActions.js\";\nimport { SheetBody } from \"./SheetBody.js\";\nimport { SheetHeader } from \"./SheetHeader.js\";\nimport { SheetRoot } from \"./SheetRoot.js\";\n\nexport type { SheetProps } from \"./SheetRoot.js\";\n\n/**\n * Bare bottom-sheet content surface. Renders inline as-is; wrap it in\n * `SheetOverlay` for the modal, scrim-backed, slide-up presentation.\n */\nexport const Sheet = Object.assign(SheetRoot, {\n\tHeader: SheetHeader,\n\tBody: SheetBody,\n\tActions: SheetActions,\n});\n"],"mappings":";;;;;AAWA,IAAa,IAAQ,OAAO,OAAO,GAAW;CAC7C,QAAQ;CACR,MAAM;CACN,SAAS;CACT,CAAC"}

package/dist/components/Sheet/SheetActions.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export interface SheetActionsProps {
+    /** The action buttons, stacked full-width in reading/focus order (primary first). */
+    children?: ReactNode;
+    className?: string;
+}
+export declare function SheetActions({ children, className }: SheetActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sheet/SheetActions.js

@@ -0,0 +1,14 @@
+import { cx as e } from "../../utils/cx.js";
+import { sheetActions as t } from "./Sheet.css.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Sheet/SheetActions.tsx
+function r({ children: r, className: i }) {
+	return /* @__PURE__ */ n("div", {
+		className: e(t, i),
+		children: r
+	});
+}
+//#endregion
+export { r as SheetActions };
+
+//# sourceMappingURL=SheetActions.js.map

package/dist/components/Sheet/SheetActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetActions.js","names":[],"sources":["../../../src/components/Sheet/SheetActions.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { sheetActions } from \"./Sheet.css.js\";\n\nexport interface SheetActionsProps {\n\t/** The action buttons, stacked full-width in reading/focus order (primary first). */\n\tchildren?: ReactNode;\n\tclassName?: string;\n}\n\nexport function SheetActions({ children, className }: SheetActionsProps) {\n\treturn <div className={cx(sheetActions, className)}>{children}</div>;\n}\n"],"mappings":";;;;AAUA,SAAgB,EAAa,EAAE,aAAU,gBAAgC;AACxE,QAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAc,EAAU;EAAG;EAAe,CAAA"}

package/dist/components/Sheet/SheetBody.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export interface SheetBodyProps {
+    children?: ReactNode;
+    className?: string;
+    /**
+     * Opts the body into a named keyboard-scroll region. Use this only when the
+     * body can overflow without containing an enabled, focusable descendant.
+     */
+    keyboardScrollLabel?: string;
+}
+export declare function SheetBody({ children, className, keyboardScrollLabel, }: SheetBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sheet/SheetBody.js

@@ -0,0 +1,20 @@
+import { cx as e } from "../../utils/cx.js";
+import { sheetBody as t } from "./Sheet.css.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Sheet/SheetBody.tsx
+function r({ children: r, className: i, keyboardScrollLabel: a }) {
+	let o = a === void 0 ? {} : {
+		"aria-label": a,
+		role: "region",
+		tabIndex: 0
+	};
+	return /* @__PURE__ */ n("div", {
+		className: e(t, i),
+		...o,
+		children: r
+	});
+}
+//#endregion
+export { r as SheetBody };
+
+//# sourceMappingURL=SheetBody.js.map

package/dist/components/Sheet/SheetBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetBody.js","names":[],"sources":["../../../src/components/Sheet/SheetBody.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { sheetBody } from \"./Sheet.css.js\";\n\nexport interface SheetBodyProps {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\t/**\n\t * Opts the body into a named keyboard-scroll region. Use this only when the\n\t * body can overflow without containing an enabled, focusable descendant.\n\t */\n\tkeyboardScrollLabel?: string;\n}\n\nexport function SheetBody({\n\tchildren,\n\tclassName,\n\tkeyboardScrollLabel,\n}: SheetBodyProps) {\n\tconst keyboardScrollProps =\n\t\tkeyboardScrollLabel === undefined\n\t\t\t? {}\n\t\t\t: {\n\t\t\t\t\t\"aria-label\": keyboardScrollLabel,\n\t\t\t\t\trole: \"region\" as const,\n\t\t\t\t\ttabIndex: 0,\n\t\t\t\t};\n\n\treturn (\n\t\t<div className={cx(sheetBody, className)} {...keyboardScrollProps}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAcA,SAAgB,EAAU,EACzB,aACA,cACA,0BACkB;CAClB,IAAM,IACL,MAAwB,KAAA,IACrB,EAAE,GACF;EACA,cAAc;EACd,MAAM;EACN,UAAU;EACV;AAEJ,QACC,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAW,EAAU;EAAE,GAAI;EAC5C;EACI,CAAA"}

package/dist/components/Sheet/SheetHeader.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface SheetHeaderProps {
+    /**
+     * Centered title. Supplies the dialog's accessible name inside `SheetOverlay`.
+     * Omit for a close-only header (e.g. a full-screen survey) — then give
+     * `SheetOverlay` an `aria-label` for the dialog name instead.
+     */
+    title?: ReactNode;
+    className?: string;
+    showBack?: boolean;
+    onBack?: () => void;
+    backLabel?: string;
+    showClose?: boolean;
+    onClose?: () => void;
+    closeLabel?: string;
+}
+export declare function SheetHeader({ title, className, ...props }: SheetHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sheet/SheetHeader.js

@@ -0,0 +1,44 @@
+import { cx as e } from "../../utils/cx.js";
+import { ArrowLeft as t } from "../Icon/icons/ArrowLeft.js";
+import { Xmark as n } from "../Icon/icons/Xmark.js";
+import { IconButton as r } from "../IconButton/IconButton.js";
+import { sheetBackIcon as i, sheetHeader as a, sheetHeaderEnd as o, sheetHeaderStart as s, sheetHeaderTitle as c } from "./Sheet.css.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Heading as d } from "react-aria-components";
+//#region src/components/Sheet/SheetHeader.tsx
+function f({ title: f, className: p, ...m }) {
+	return /* @__PURE__ */ u("div", {
+		className: e(a, p),
+		children: [
+			m.showBack && m.onBack ? /* @__PURE__ */ l("span", {
+				className: s,
+				children: /* @__PURE__ */ l(r, {
+					label: m.backLabel ?? "Back",
+					variant: "tertiary",
+					size: "sm",
+					onPress: m.onBack,
+					children: /* @__PURE__ */ l(t, { className: i })
+				})
+			}) : null,
+			f != null && f !== "" ? /* @__PURE__ */ l(d, {
+				slot: "title",
+				className: c,
+				children: f
+			}) : null,
+			m.showClose && m.onClose ? /* @__PURE__ */ l("span", {
+				className: o,
+				children: /* @__PURE__ */ l(r, {
+					label: m.closeLabel ?? "Close",
+					variant: "tertiary",
+					size: "sm",
+					onPress: m.onClose,
+					children: /* @__PURE__ */ l(n, {})
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { f as SheetHeader };
+
+//# sourceMappingURL=SheetHeader.js.map

package/dist/components/Sheet/SheetHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetHeader.js","names":[],"sources":["../../../src/components/Sheet/SheetHeader.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Heading } from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { ArrowLeft, Xmark } from \"../Icon/icons/index.js\";\nimport { IconButton } from \"../IconButton/index.js\";\nimport {\n\tsheetBackIcon,\n\tsheetHeader,\n\tsheetHeaderEnd,\n\tsheetHeaderStart,\n\tsheetHeaderTitle,\n} from \"./Sheet.css.js\";\n\nexport interface SheetHeaderProps {\n\t/**\n\t * Centered title. Supplies the dialog's accessible name inside `SheetOverlay`.\n\t * Omit for a close-only header (e.g. a full-screen survey) — then give\n\t * `SheetOverlay` an `aria-label` for the dialog name instead.\n\t */\n\ttitle?: ReactNode;\n\tclassName?: string;\n\tshowBack?: boolean;\n\tonBack?: () => void;\n\tbackLabel?: string;\n\tshowClose?: boolean;\n\tonClose?: () => void;\n\tcloseLabel?: string;\n}\n\nexport function SheetHeader({ title, className, ...props }: SheetHeaderProps) {\n\treturn (\n\t\t<div className={cx(sheetHeader, className)}>\n\t\t\t{props.showBack && props.onBack ? (\n\t\t\t\t// Pin via a wrapper span so we don't fight IconButton's own position:relative.\n\t\t\t\t<span className={sheetHeaderStart}>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tlabel={props.backLabel ?? \"Back\"}\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tonPress={props.onBack}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowLeft className={sheetBackIcon} />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t{title != null && title !== \"\" ? (\n\t\t\t\t<Heading slot=\"title\" className={sheetHeaderTitle}>\n\t\t\t\t\t{title}\n\t\t\t\t</Heading>\n\t\t\t) : null}\n\t\t\t{props.showClose && props.onClose ? (\n\t\t\t\t<span className={sheetHeaderEnd}>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tlabel={props.closeLabel ?? \"Close\"}\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tonPress={props.onClose}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Xmark />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AA6BA,SAAgB,EAAY,EAAE,UAAO,cAAW,GAAG,KAA2B;AAC7E,QACC,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAa,EAAU;YAA1C;GACE,EAAM,YAAY,EAAM,SAExB,kBAAC,QAAD;IAAM,WAAW;cAChB,kBAAC,GAAD;KACC,OAAO,EAAM,aAAa;KAC1B,SAAQ;KACR,MAAK;KACL,SAAS,EAAM;eAEf,kBAAC,GAAD,EAAW,WAAW,GAAiB,CAAA;KAC3B,CAAA;IACP,CAAA,GACJ;GACH,KAAS,QAAQ,MAAU,KAC3B,kBAAC,GAAD;IAAS,MAAK;IAAQ,WAAW;cAC/B;IACQ,CAAA,GACP;GACH,EAAM,aAAa,EAAM,UACzB,kBAAC,QAAD;IAAM,WAAW;cAChB,kBAAC,GAAD;KACC,OAAO,EAAM,cAAc;KAC3B,SAAQ;KACR,MAAK;KACL,SAAS,EAAM;eAEf,kBAAC,GAAD,EAAS,CAAA;KACG,CAAA;IACP,CAAA,GACJ;GACC"}

package/dist/components/Sheet/SheetRoot.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+export interface SheetProps {
+    /** Composed parts, canonical order: `Sheet.Header` → `Sheet.Body` → `Sheet.Actions`. */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function SheetRoot({ children, className, style, ref }: SheetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sheet/SheetRoot.js

@@ -0,0 +1,16 @@
+import { cx as e } from "../../utils/cx.js";
+import { sheetRoot as t } from "./Sheet.css.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Sheet/SheetRoot.tsx
+function r({ children: r, className: i, style: a, ref: o }) {
+	return /* @__PURE__ */ n("div", {
+		ref: o,
+		className: e(t, i),
+		style: a,
+		children: r
+	});
+}
+//#endregion
+export { r as SheetRoot };
+
+//# sourceMappingURL=SheetRoot.js.map

package/dist/components/Sheet/SheetRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetRoot.js","names":[],"sources":["../../../src/components/Sheet/SheetRoot.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from \"react\";\nimport { cx } from \"../../utils/cx.js\";\nimport { sheetRoot } from \"./Sheet.css.js\";\n\nexport interface SheetProps {\n\t/** Composed parts, canonical order: `Sheet.Header` → `Sheet.Body` → `Sheet.Actions`. */\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\tref?: Ref<HTMLDivElement>;\n}\n\nexport function SheetRoot({ children, className, style, ref }: SheetProps) {\n\treturn (\n\t\t<div ref={ref} className={cx(sheetRoot, className)} style={style}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAYA,SAAgB,EAAU,EAAE,aAAU,cAAW,UAAO,UAAmB;AAC1E,QACC,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,GAAW,EAAU;EAAS;EACzD;EACI,CAAA"}

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

@@ -0,0 +1,4 @@
+export { Sheet, type SheetProps } from "./Sheet.js";
+export type { SheetActionsProps } from "./SheetActions.js";
+export type { SheetBodyProps } from "./SheetBody.js";
+export type { SheetHeaderProps } from "./SheetHeader.js";

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

@@ -0,0 +1,3 @@
+export declare const sheetScrim: string;
+export declare const sheetModal: string;
+export declare const sheetDialog: string;

package/dist/components/SheetOverlay/SheetOverlay.css.js

@@ -0,0 +1,8 @@
+/* empty css                                    */
+/* empty css                                */
+//#region src/components/SheetOverlay/SheetOverlay.css.ts
+var e = "_1hi4ecs0 _1r1codi0", t = "_1hi4ecs1", n = "_1hi4ecs2";
+//#endregion
+export { n as sheetDialog, t as sheetModal, e as sheetScrim };
+
+//# sourceMappingURL=SheetOverlay.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SheetOverlay.css.js","names":[],"sources":["../../../src/components/SheetOverlay/SheetOverlay.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// Dark-scrim backdrop that anchors the sheet to the bottom edge, centered\n// horizontally.\nexport const sheetScrim = style([\n\toverlayScrimBase,\n\t{\n\t\talignItems: \"center\",\n\t\tjustifyContent: \"flex-end\",\n\t\tbackgroundColor: t(\"color-background-neutral-overlay\"),\n\t},\n]);\n\n// The elevated surface. overflow:hidden clips the child's square top corners;\n// a box's own shadow is not clipped by its own overflow, so the shadow survives.\nexport const sheetModal = style({\n\tposition: \"relative\",\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tminHeight: 0,\n\twidth: \"100%\",\n\t// Figma: sheet caps at ~80% of the chat window; taller content scrolls in the body.\n\tmaxHeight: \"80%\",\n\tbackgroundColor: t(\"color-background-default\"),\n\tborderStartStartRadius: t(\"border-radius-container\"),\n\tborderStartEndRadius: t(\"border-radius-container\"),\n\toverflow: \"hidden\",\n\tboxShadow: SURFACE_SHADOW,\n\tselectors: {\n\t\t\"&[data-entering]\": { transform: \"translateY(100%)\" },\n\t\t\"&[data-exiting]\": { transform: \"translateY(100%)\" },\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 sheetDialog = style({\n\tdisplay: \"flex\",\n\tflexDirection: \"column\",\n\tflex: \"1 1 auto\",\n\tminHeight: 0,\n\tmaxHeight: \"100%\",\n\toutline: \"none\",\n});\n"],"mappings":""}

package/dist/components/SheetOverlay/SheetOverlay.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface SheetOverlayProps {
+    /** Whether the sheet is open. */
+    isOpen: boolean;
+    /** Called with the next open state on dismiss (scrim tap, Escape) or programmatic close. */
+    onOpenChange: (isOpen: boolean) => void;
+    /** Dismiss on scrim tap. Escape always cancels (RAC default). Defaults to `true`. */
+    isDismissable?: boolean;
+    /** Accessible name fallback when the child has no `Sheet.Header` title. */
+    "aria-label"?: string;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Modal bottom-sheet presentation: dark scrim, focus-trap, dismiss-on-tap/Escape,
+ * bottom-anchored, rounded-top corners, slide-up. Wraps arbitrary children
+ * (typically a `Sheet`). For a full-window surface use `FullscreenOverlay`; for a
+ * centered dialog `Dialog`; for a non-dimming bottom bubble `BubbleOverlay`.
+ *
+ * Give the dialog an accessible name via either a `Sheet.Header` title or the
+ * `aria-label` prop — with neither (e.g. an actions-only Confirm sheet) RAC
+ * emits a missing-name warning.
+ */
+export declare function SheetOverlay({ isOpen, onOpenChange, isDismissable, "aria-label": ariaLabel, className, children, }: SheetOverlayProps): import("react/jsx-runtime").JSX.Element;