@ada-cx/lovelace 1.2.0 → 1.4.0

package/dist/components/ScrollMarker/ScrollMarker.js

@@ -16,11 +16,7 @@ function s({ color: s = "default", unreadCount: c, children: l, className: u, "a
 			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, {})]
+		children: [/* @__PURE__ */ r("span", { children: p ? l ?? `${c} unread` : "" }), /* @__PURE__ */ r(t, {})]
 	});
 }
 //#endregion

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

@@ -1 +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"}
+{"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>{withText ? (children ?? `${unreadCount} unread`) : \"\"}</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,EAAA,UAAO,IAAY,KAAY,GAAG,EAAY,WAAY,IAAU,CAAA,EACpE,kBAAC,GAAD,EAAa,CAAA,CACD"}

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

@@ -2,10 +2,12 @@ import type { ReactNode } from "react";
 export interface SheetBodyProps {
     children?: ReactNode;
     className?: string;
+    /** Target for the overlay's `aria-describedby`. */
+    id?: 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;
+export declare function SheetBody({ children, className, id, keyboardScrollLabel, }: SheetBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sheet/SheetBody.js

@@ -2,15 +2,16 @@ 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,
+function r({ children: r, className: i, id: a, keyboardScrollLabel: o }) {
+	let s = o === void 0 ? {} : {
+		"aria-label": o,
 		role: "region",
 		tabIndex: 0
 	};
 	return /* @__PURE__ */ n("div", {
+		id: a,
 		className: e(t, i),
-		...o,
+		...s,
 		children: r
 	});
 }

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

@@ -1 +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"}
+{"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/** Target for the overlay's `aria-describedby`. */\n\tid?: 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\tid,\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 id={id} className={cx(sheetBody, className)} {...keyboardScrollProps}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAgBA,SAAgB,EAAU,EACzB,aACA,cACA,OACA,0BACkB;CAClB,IAAM,IACL,MAAwB,KAAA,IACrB,EAAE,GACF;EACA,cAAc;EACd,MAAM;EACN,UAAU;EACV;AAEJ,QACC,kBAAC,OAAD;EAAS;EAAI,WAAW,EAAG,GAAW,EAAU;EAAE,GAAI;EACpD;EACI,CAAA"}

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

@@ -8,6 +8,8 @@ export interface SheetOverlayProps {
     isDismissable?: boolean;
     /** Accessible name fallback when the child has no `Sheet.Header` title. */
     "aria-label"?: string;
+    /** Id of the element describing the sheet, typically a `Sheet.Body`. */
+    "aria-describedby"?: string;
     className?: string;
     children: ReactNode;
 }
@@ -21,4 +23,4 @@ export interface SheetOverlayProps {
  * `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;
+export declare function SheetOverlay({ isOpen, onOpenChange, isDismissable, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className, children, }: SheetOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SheetOverlay/SheetOverlay.js

@@ -4,20 +4,21 @@ import { jsx as i } from "react/jsx-runtime";
 import { useLocale as a } from "react-aria";
 import { Dialog as o, Modal as s, ModalOverlay as c } from "react-aria-components";
 //#region src/components/SheetOverlay/SheetOverlay.tsx
-function l({ isOpen: l, onOpenChange: u, isDismissable: d = !0, "aria-label": f, className: p, children: m }) {
-	let { direction: h } = a();
+function l({ isOpen: l, onOpenChange: u, isDismissable: d = !0, "aria-label": f, "aria-describedby": p, className: m, children: h }) {
+	let { direction: g } = a();
 	return /* @__PURE__ */ i(c, {
 		isOpen: l,
 		onOpenChange: u,
 		isDismissable: d,
 		className: r,
-		dir: h,
+		dir: g,
 		children: /* @__PURE__ */ i(s, {
 			className: n,
 			children: /* @__PURE__ */ i(o, {
 				"aria-label": f,
-				className: e(t, p),
-				children: m
+				"aria-describedby": p,
+				className: e(t, m),
+				children: h
 			})
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"SheetOverlay.js","names":[],"sources":["../../../src/components/SheetOverlay/SheetOverlay.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useLocale } from \"react-aria\";\nimport {\n\tDialog as AriaDialog,\n\tModal,\n\tModalOverlay,\n} from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { sheetDialog, sheetModal, sheetScrim } from \"./SheetOverlay.css.js\";\n\nexport interface SheetOverlayProps {\n\t/** Whether the sheet is open. */\n\tisOpen: boolean;\n\t/** Called with the next open state on dismiss (scrim tap, Escape) or programmatic close. */\n\tonOpenChange: (isOpen: boolean) => void;\n\t/** Dismiss on scrim tap. Escape always cancels (RAC default). Defaults to `true`. */\n\tisDismissable?: boolean;\n\t/** Accessible name fallback when the child has no `Sheet.Header` title. */\n\t\"aria-label\"?: string;\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\n/**\n * Modal bottom-sheet presentation: dark scrim, focus-trap, dismiss-on-tap/Escape,\n * bottom-anchored, rounded-top corners, slide-up. Wraps arbitrary children\n * (typically a `Sheet`). For a full-window surface use `FullscreenOverlay`; for a\n * centered dialog `Dialog`; for a non-dimming bottom bubble `BubbleOverlay`.\n *\n * Give the dialog an accessible name via either a `Sheet.Header` title or the\n * `aria-label` prop — with neither (e.g. an actions-only Confirm sheet) RAC\n * emits a missing-name warning.\n */\nexport function SheetOverlay({\n\tisOpen,\n\tonOpenChange,\n\tisDismissable = true,\n\t\"aria-label\": ariaLabel,\n\tclassName,\n\tchildren,\n}: SheetOverlayProps) {\n\t// Stated, not inherited: this renders through a portal, so its direction must\n\t// not depend on where the portal lands. See the portalled-surface scenario\n\t// under the RTL requirement in openspec/specs/accessibility/spec.md.\n\tconst { direction } = useLocale();\n\n\treturn (\n\t\t<ModalOverlay\n\t\t\tisOpen={isOpen}\n\t\t\tonOpenChange={onOpenChange}\n\t\t\tisDismissable={isDismissable}\n\t\t\tclassName={sheetScrim}\n\t\t\tdir={direction}\n\t\t>\n\t\t\t<Modal className={sheetModal}>\n\t\t\t\t<AriaDialog\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\tclassName={cx(sheetDialog, className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</AriaDialog>\n\t\t\t</Modal>\n\t\t</ModalOverlay>\n\t);\n}\n"],"mappings":";;;;;;AAiCA,SAAgB,EAAa,EAC5B,WACA,iBACA,mBAAgB,IAChB,cAAc,GACd,cACA,eACqB;CAIrB,IAAM,EAAE,iBAAc,GAAW;AAEjC,QACC,kBAAC,GAAD;EACS;EACM;EACC;EACf,WAAW;EACX,KAAK;YAEL,kBAAC,GAAD;GAAO,WAAW;aACjB,kBAAC,GAAD;IACC,cAAY;IACZ,WAAW,EAAG,GAAa,EAAU;IAEpC;IACW,CAAA;GACN,CAAA;EACM,CAAA"}
+{"version":3,"file":"SheetOverlay.js","names":[],"sources":["../../../src/components/SheetOverlay/SheetOverlay.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useLocale } from \"react-aria\";\nimport {\n\tDialog as AriaDialog,\n\tModal,\n\tModalOverlay,\n} from \"react-aria-components\";\nimport { cx } from \"../../utils/cx.js\";\nimport { sheetDialog, sheetModal, sheetScrim } from \"./SheetOverlay.css.js\";\n\nexport interface SheetOverlayProps {\n\t/** Whether the sheet is open. */\n\tisOpen: boolean;\n\t/** Called with the next open state on dismiss (scrim tap, Escape) or programmatic close. */\n\tonOpenChange: (isOpen: boolean) => void;\n\t/** Dismiss on scrim tap. Escape always cancels (RAC default). Defaults to `true`. */\n\tisDismissable?: boolean;\n\t/** Accessible name fallback when the child has no `Sheet.Header` title. */\n\t\"aria-label\"?: string;\n\t/** Id of the element describing the sheet, typically a `Sheet.Body`. */\n\t\"aria-describedby\"?: string;\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\n/**\n * Modal bottom-sheet presentation: dark scrim, focus-trap, dismiss-on-tap/Escape,\n * bottom-anchored, rounded-top corners, slide-up. Wraps arbitrary children\n * (typically a `Sheet`). For a full-window surface use `FullscreenOverlay`; for a\n * centered dialog `Dialog`; for a non-dimming bottom bubble `BubbleOverlay`.\n *\n * Give the dialog an accessible name via either a `Sheet.Header` title or the\n * `aria-label` prop — with neither (e.g. an actions-only Confirm sheet) RAC\n * emits a missing-name warning.\n */\nexport function SheetOverlay({\n\tisOpen,\n\tonOpenChange,\n\tisDismissable = true,\n\t\"aria-label\": ariaLabel,\n\t\"aria-describedby\": ariaDescribedBy,\n\tclassName,\n\tchildren,\n}: SheetOverlayProps) {\n\t// Stated, not inherited: this renders through a portal, so its direction must\n\t// not depend on where the portal lands. See the portalled-surface scenario\n\t// under the RTL requirement in openspec/specs/accessibility/spec.md.\n\tconst { direction } = useLocale();\n\n\treturn (\n\t\t<ModalOverlay\n\t\t\tisOpen={isOpen}\n\t\t\tonOpenChange={onOpenChange}\n\t\t\tisDismissable={isDismissable}\n\t\t\tclassName={sheetScrim}\n\t\t\tdir={direction}\n\t\t>\n\t\t\t<Modal className={sheetModal}>\n\t\t\t\t<AriaDialog\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t\t\tclassName={cx(sheetDialog, className)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</AriaDialog>\n\t\t\t</Modal>\n\t\t</ModalOverlay>\n\t);\n}\n"],"mappings":";;;;;;AAmCA,SAAgB,EAAa,EAC5B,WACA,iBACA,mBAAgB,IAChB,cAAc,GACd,oBAAoB,GACpB,cACA,eACqB;CAIrB,IAAM,EAAE,iBAAc,GAAW;AAEjC,QACC,kBAAC,GAAD;EACS;EACM;EACC;EACf,WAAW;EACX,KAAK;YAEL,kBAAC,GAAD;GAAO,WAAW;aACjB,kBAAC,GAAD;IACC,cAAY;IACZ,oBAAkB;IAClB,WAAW,EAAG,GAAa,EAAU;IAEpC;IACW,CAAA;GACN,CAAA;EACM,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ada-cx/lovelace",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Ada's messaging design system primitives: React Aria Components behavior, vanilla-extract styling, Figma-generated design tokens.",
   "license": "ISC",
   "type": "module",