@bspk/ui 1.3.19 → 1.3.20

package/dist/components/Accordion/AccordionExample.js

@@ -43,7 +43,7 @@ export const presets = [
     },
     {
         label: '1 disabled and open (but not showing)',
-        hideDemo: true,
+        hideDemoOption: true,
         propState: {
             items: [
                 {

package/dist/components/Accordion/AccordionExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionExample.js","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC3B,0JAGI,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC7C;QACI,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;gBACD;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;oBAC9B,OAAO,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAG;oBAC9C,QAAQ,EAAE,sCAAqB;iBAClC;gBACD;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;aACJ;SACJ;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;gBACD,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;gBAC/E,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;aAClE;SACJ;KACJ;IACD;QACI,KAAK,EAAE,uCAAuC;QAC9C,QAAQ,EAAE,IAAI;QACd,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;gBACD,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;gBAC7F,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;aAClE;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,GAAG,EAAE,CAAC,CAAC;IACvE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE;IAC9C,YAAY,EAAE;QACV,KAAK,EAAE;YACH;gBACI,EAAE,EAAE,GAAG;gBACP,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;aACjC;YACD;gBACI,EAAE,EAAE,GAAG;gBACP,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;gBAC9B,OAAO,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAG;gBAC9C,QAAQ,EAAE,sCAAqB;aAClC;YACD;gBACI,EAAE,EAAE,GAAG;gBACP,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;aACjC;SACJ;KACJ;IACD,OAAO;IACP,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}
+{"version":3,"file":"AccordionExample.js","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC3B,0JAGI,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC7C;QACI,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;gBACD;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;oBAC9B,OAAO,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAG;oBAC9C,QAAQ,EAAE,sCAAqB;iBAClC;gBACD;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;aACJ;SACJ;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;gBACD,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;gBAC/E,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;aAClE;SACJ;KACJ;IACD;QACI,KAAK,EAAE,uCAAuC;QAC9C,cAAc,EAAE,IAAI;QACpB,SAAS,EAAE;YACP,KAAK,EAAE;gBACH;oBACI,EAAE,EAAE,GAAG;oBACP,KAAK,EAAE,WAAW;oBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;iBACjC;gBACD,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;gBAC7F,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAC,gBAAgB,KAAG,EAAE;aAClE;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,GAAG,EAAE,CAAC,CAAC;IACvE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE;IAC9C,YAAY,EAAE;QACV,KAAK,EAAE;YACH;gBACI,EAAE,EAAE,GAAG;gBACP,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;aACjC;YACD;gBACI,EAAE,EAAE,GAAG;gBACP,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;gBAC9B,OAAO,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,GAAG;gBAC9C,QAAQ,EAAE,sCAAqB;aAClC;YACD;gBACI,EAAE,EAAE,GAAG;gBACP,KAAK,EAAE,WAAW;gBAClB,QAAQ,EAAE,KAAC,gBAAgB,KAAG;aACjC;SACJ;KACJ;IACD,OAAO;IACP,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}

package/dist/components/BannerAlert/BannerAlert.js

@@ -36,6 +36,6 @@ import { Button } from '../Button';
  * @phase Stable
  */
 export function BannerAlert({ variant = 'informational', onClose, header, callToAction, body, elevated = false, }) {
-    return (_jsxs("div", { "data-bspk": "banner-alert", "data-elevated": elevated || undefined, "data-variant": variant, role: "alert", children: [_jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && _jsx(SvgErrorFill, {}), variant === 'informational' && _jsx(SvgInfoFill, {}), variant === 'success' && _jsx(SvgCheckCircleFill, {}), variant === 'warning' && _jsx(SvgWarningFill, {})] }), _jsxs("div", { "data-content": true, children: [(header || onClose) && (_jsxs("header", { children: [_jsx("span", { children: header }), typeof onClose === 'function' && (_jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "Close", onClick: onClose, size: "small", variant: "tertiary" }))] })), _jsxs("div", { "data-body": true, children: [_jsx("span", { children: body }), callToAction?.label && callToAction?.onClick && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "tertiary" }))] })] })] }));
+    return (_jsxs("div", { "data-bspk": "banner-alert", "data-elevated": elevated || undefined, "data-variant": variant, role: "alert", children: [_jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && _jsx(SvgErrorFill, {}), variant === 'informational' && _jsx(SvgInfoFill, {}), variant === 'success' && _jsx(SvgCheckCircleFill, {}), variant === 'warning' && _jsx(SvgWarningFill, {})] }), _jsxs("div", { "data-content": true, children: [(header || onClose) && (_jsxs("div", { "data-header": true, children: [_jsx("span", { children: header }), typeof onClose === 'function' && (_jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "Close", onClick: onClose, size: "small", variant: "tertiary" }))] })), _jsxs("div", { "data-body": true, children: [_jsx("span", { children: body }), callToAction?.label && callToAction?.onClick && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "tertiary" }))] })] })] }));
 }
 //# sourceMappingURL=BannerAlert.js.map

package/dist/components/BannerAlert/BannerAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AA2C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,4BAAe,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,aACnG,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,QAAQ,QACR,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,CACL,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,CACL,IACC,IACJ,IACJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AA2C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,4BAAe,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,aACnG,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,+CACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,QAAQ,QACR,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,CACL,IACC,CACT,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,CACL,IACC,IACJ,IACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/BannerAlert/banner-alert.css

@@ -39,14 +39,14 @@
   flex-direction: column;
   padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
 }
-[data-bspk=banner-alert] [data-content] header {
+[data-bspk=banner-alert] [data-content] [data-header] {
   display: flex;
   flex-direction: row;
   gap: var(--spacing-sizing-03);
   height: var(--spacing-sizing-12);
   align-items: center;
 }
-[data-bspk=banner-alert] [data-content] header span {
+[data-bspk=banner-alert] [data-content] [data-header] span {
   flex: 1;
   display: flex;
   align-items: center;
@@ -54,7 +54,7 @@
   font: var(--heading-h6);
 }
 @media (any-pointer: coarse) {
-  [data-bspk=banner-alert] [data-content] header span {
+  [data-bspk=banner-alert] [data-content] [data-header] span {
     font: var(--heading-h6);
   }
 }

package/dist/components/BannerAlert/banner-alert.css.js

@@ -42,14 +42,14 @@ style.appendChild(document.createTextNode(`[data-bspk=banner-alert] {
   flex-direction: column;
   padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
 }
-[data-bspk=banner-alert] [data-content] header {
+[data-bspk=banner-alert] [data-content] [data-header] {
   display: flex;
   flex-direction: row;
   gap: var(--spacing-sizing-03);
   height: var(--spacing-sizing-12);
   align-items: center;
 }
-[data-bspk=banner-alert] [data-content] header span {
+[data-bspk=banner-alert] [data-content] [data-header] span {
   flex: 1;
   display: flex;
   align-items: center;
@@ -57,7 +57,7 @@ style.appendChild(document.createTextNode(`[data-bspk=banner-alert] {
   font: var(--heading-h6);
 }
 @media (any-pointer: coarse) {
-  [data-bspk=banner-alert] [data-content] header span {
+  [data-bspk=banner-alert] [data-content] [data-header] span {
     font: var(--heading-h6);
   }
 }

package/dist/components/CheckboxOption/CheckboxOption.d.ts

@@ -1,7 +1,19 @@
 import { CheckboxProps } from '-/components/Checkbox';
-import { ToggleOptionControlProps } from '-/components/ToggleOption';
 import { CommonProps } from '-/types/common';
-export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProps<CheckboxProps>;
+export type CheckboxOptionProps = CheckboxProps & CommonProps<'style'> & {
+    /**
+     * The label of the option. Also used as the aria-label of the control.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The description of the option.
+     *
+     * @type multiline
+     */
+    description?: string;
+};
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
@@ -30,5 +42,5 @@ export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProp
  * @name CheckboxOption
  * @phase Stable
  */
-export declare function CheckboxOption({ label: labelProp, description, disabled, style, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
+export declare function CheckboxOption({ label: labelProp, description, disabled, style, ...checkboxProps }: CheckboxOptionProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/CheckboxOption/CheckboxOption.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox } from '../Checkbox';
-import { ToggleOption } from '../ToggleOption';
+import { ListItem } from '../ListItem';
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
@@ -30,8 +30,7 @@ import { ToggleOption } from '../ToggleOption';
  * @phase Stable
  */
 export function CheckboxOption({ label: labelProp, description, disabled, style, ...checkboxProps }) {
-    const label = labelProp || description;
     const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, disabled: disabled, label: label, style: style, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": ariaLabel, disabled: disabled }) })));
+    return (_jsx(ListItem, { "aria-disabled": disabled || undefined, as: "label", label: labelProp, leading: _jsx(Checkbox, { ...checkboxProps, "aria-label": ariaLabel, disabled: disabled }), owner: "checkbox-option", style: style, subText: description, width: "hug" }));
 }
 //# sourceMappingURL=CheckboxOption.js.map

package/dist/components/CheckboxOption/CheckboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAKnF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,cAAc,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,QAAQ,EACR,KAAK,EACL,GAAG,aAAa,EACE;IAClB,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBACC,iBAAiB,EAC3B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,YAEZ,KAAC,QAAQ,OAAK,aAAa,gBAAc,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC/D,CAClB,CACJ,CAAC;AACN,CAAC"}
+{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAmBjD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,cAAc,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,QAAQ,EACR,KAAK,EACL,GAAG,aAAa,EACE;IAClB,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,OAAO,CACH,KAAC,QAAQ,qBACU,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAC,OAAO,EACV,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,KAAC,QAAQ,OAAK,aAAa,gBAAc,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,EACnF,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,WAAW,EACpB,KAAK,EAAC,KAAK,GACb,CACL,CAAC;AACN,CAAC"}

package/dist/components/Dialog/Dialog.d.ts

@@ -47,11 +47,12 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
     disableFocusTrap?: boolean;
 };
 /**
- * Dialogs display important information that users need to acknowledge. They appear over the interface and block
+ * Dialogs display important information that users need to acknowledge. They appear over the interface and may block
  * further interactions until an action is selected.
  *
- * This is a low-level component that provides the container and functionality for dialogs. You will typically want to
- * use a higher-level component that provides a consistent UI and behavior for dialogs such as Modal.
+ * The Modal component is a higher-level component built on top of Dialog that includes standard dialog UI and behavior.
+ *
+ * Also known as: Tray, Drawer, Flyout, Sheet
  *
  * @example
  *     import { Dialog } from '@bspk/ui/Dialog';
@@ -63,11 +64,20 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
  *         return (
  *             <>
  *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
- *                 <Dialog open={open} onClose={() => setOpen(false)}>
+ *                 <Dialog onClose={() => setOpen(false)} open={open}>
  *                     <div style={{ padding: 'var(--spacing-sizing-04)' }}>
- *                         <h1>Dialog Title</h1>
+ *                         <Flex align="center" justify="space-between">
+ *                             <h4>Dialog Title</h4>
+ *                             <Button
+ *                                 icon={<SvgClose />}
+ *                                 iconOnly
+ *                                 label="Close dialog"
+ *                                 onClick={() => setOpen(false)}
+ *                                 variant="tertiary"
+ *                             />
+ *                         </Flex>
  *                         <p>This is the content of the dialog.</p>
- *                         <Button label="Cancel" variant="secondary" onClick={() => setOpen(false)} />
+ *                         <Button label="Cancel" onClick={() => setOpen(false)} variant="secondary" />
  *                     </div>
  *                 </Dialog>
  *             </>
@@ -75,7 +85,7 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
  *     };
  *
  * @name Dialog
- * @phase Utility
+ * @phase Stable
  */
 export declare function Dialog({ children, innerRef, onClose, open, placement, showScrim, widthFull, id: idProp, owner, container, disableFocusTrap, ...containerProps }: ElementProps<DialogProps, 'div'>): false | import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Dialog/Dialog.js

@@ -6,11 +6,12 @@ import { Portal } from '../Portal';
 import { Scrim } from '../Scrim';
 import { useId } from '../../hooks/useId';
 /**
- * Dialogs display important information that users need to acknowledge. They appear over the interface and block
+ * Dialogs display important information that users need to acknowledge. They appear over the interface and may block
  * further interactions until an action is selected.
  *
- * This is a low-level component that provides the container and functionality for dialogs. You will typically want to
- * use a higher-level component that provides a consistent UI and behavior for dialogs such as Modal.
+ * The Modal component is a higher-level component built on top of Dialog that includes standard dialog UI and behavior.
+ *
+ * Also known as: Tray, Drawer, Flyout, Sheet
  *
  * @example
  *     import { Dialog } from '@bspk/ui/Dialog';
@@ -22,11 +23,20 @@ import { useId } from '../../hooks/useId';
  *         return (
  *             <>
  *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
- *                 <Dialog open={open} onClose={() => setOpen(false)}>
+ *                 <Dialog onClose={() => setOpen(false)} open={open}>
  *                     <div style={{ padding: 'var(--spacing-sizing-04)' }}>
- *                         <h1>Dialog Title</h1>
+ *                         <Flex align="center" justify="space-between">
+ *                             <h4>Dialog Title</h4>
+ *                             <Button
+ *                                 icon={<SvgClose />}
+ *                                 iconOnly
+ *                                 label="Close dialog"
+ *                                 onClick={() => setOpen(false)}
+ *                                 variant="tertiary"
+ *                             />
+ *                         </Flex>
  *                         <p>This is the content of the dialog.</p>
- *                         <Button label="Cancel" variant="secondary" onClick={() => setOpen(false)} />
+ *                         <Button label="Cancel" onClick={() => setOpen(false)} variant="secondary" />
  *                     </div>
  *                 </Dialog>
  *             </>
@@ -34,7 +44,7 @@ import { useId } from '../../hooks/useId';
  *     };
  *
  * @name Dialog
- * @phase Utility
+ * @phase Stable
  */
 export function Dialog({ children, innerRef, onClose, open = false, placement = 'center', showScrim = true, widthFull = false, id: idProp, owner, container, disableFocusTrap, ...containerProps }) {
     const id = useId(idProp);
@@ -48,13 +58,11 @@ export function Dialog({ children, innerRef, onClose, open = false, placement =
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [handleKeyDown, open]);
-    return (open && (_jsxs(Portal, { container: container, children: [_jsx("div", { ...containerProps, "data-bspk": "dialog", "data-bspk-owner": owner || undefined, "data-placement": placement, id: id, ref: innerRef, role: "presentation", children: _jsx(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: {
+    return (open && (_jsxs(Portal, { container: container, children: [_jsx("div", { ...containerProps, "data-bspk": "dialog", "data-bspk-owner": owner || undefined, "data-contained": !!container || undefined, "data-placement": placement, id: id, ref: innerRef, role: "presentation", children: _jsx(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: {
                         clickOutsideDeactivates: true,
                         fallbackFocus: () => boxRef.current,
                     }, children: _jsx("div", { "data-dialog-box": true, "data-width-full": widthFull, ref: (node) => {
                             boxRef.current = node;
-                        }, tabIndex: -1, children: children }) }) }), _jsx(Scrim, { onClick: () => {
-                    onClose();
-                }, owner: "dialog", visible: showScrim !== false })] })));
+                        }, tabIndex: -1, children: children }) }) }), _jsx(Scrim, { contained: !!container || undefined, onClick: () => onClose(), owner: "dialog", visible: showScrim !== false })] })));
 }
 //# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkDtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,KAAK,EACjB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAElH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;YAC7C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;wBACd,uBAAuB,EAAE,IAAI;wBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;qBACvC,YAED,0DAEqB,SAAS,EAC1B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,EAAE,CAAC;gBACd,CAAC,EACD,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkDtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,KAAK,EACjB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAElH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;YAC7C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,CAAC,CAAC,SAAS,IAAI,SAAS,oBACxB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;wBACd,uBAAuB,EAAE,IAAI;wBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;qBACvC,YAED,0DAEqB,SAAS,EAC1B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,SAAS,EAAE,CAAC,CAAC,SAAS,IAAI,SAAS,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EACxB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}

package/dist/components/Dialog/DialogExample.d.ts

@@ -1,4 +1,4 @@
 import { DialogProps } from '.';
-import { ComponentExample, Preset } from '-/utils/demo';
-export declare const presets: Preset<DialogProps>[];
+import { ComponentExample } from '-/utils/demo';
 export declare const DialogExample: ComponentExample<DialogProps>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogExample.js

@@ -1,12 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SvgClose } from '@bspk/icons/Close';
+import { useRef, useState } from 'react';
+import { Dialog } from '.';
 import { Button } from '../Button';
-export const presets = [];
+import { Flex } from '../Flex';
 export const DialogExample = {
     render: ({ props, setState, Component }) => {
         const label = 'Open Dialog';
-        return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => setState({ open: true }) }), _jsx(Component, { "data-example-component": true, ...props, id: "exampleId", onClose: () => setState({ open: false }), children: _jsxs("div", { style: { padding: 'var(--spacing-sizing-04)' }, children: ["Hello, I am a (", props.placement, ") dialog!"] }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => setState({ open: true }) }), _jsx(Component, { "data-example-component": true, ...props, id: "exampleId", onClose: () => setState({ open: false }), children: _jsxs("div", { style: { padding: 'var(--spacing-sizing-04)' }, children: [_jsxs(Flex, { align: "center", justify: "space-between", style: {
+                                    width: '100%',
+                                    marginBottom: 'var(--spacing-sizing-04)',
+                                }, children: [_jsx("h4", { children: "Dialog" }), _jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "Close dialog", onClick: () => setState({ open: false }), variant: "tertiary" })] }), _jsxs("p", { children: ["Hello, I am a (", props.placement, ") dialog!"] })] }) })] }));
     },
     variants: false,
-    presets,
+    sections: [
+        {
+            title: 'Contained Dialog',
+            location: 'beforeDemo',
+            content: function ContainedDialog() {
+                const [open, setOpen] = useState(false);
+                const container = useRef(undefined);
+                return (_jsxs("div", { ref: (node) => (container.current = node || undefined), style: {
+                        border: '1px solid var(--stroke-neutral-base)',
+                        padding: 'var(--spacing-sizing-04)',
+                        minHeight: 200,
+                        position: 'relative',
+                        overflow: 'hidden',
+                    }, children: [_jsx(Button, { label: "Open Dialog", onClick: () => setOpen(true) }), _jsx(Dialog, { container: container.current, onClose: () => setOpen(false), open: open, placement: "right", children: _jsxs("div", { style: { padding: 'var(--spacing-sizing-04)' }, children: [_jsxs(Flex, { align: "center", justify: "space-between", style: {
+                                            marginBottom: 'var(--spacing-sizing-04)',
+                                        }, children: [_jsx("h4", { children: "Contained" }), _jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "Close dialog", onClick: () => setOpen(false), variant: "tertiary" })] }), _jsx("p", { children: "Hello, I am a contained dialog!" })] }) })] }));
+            },
+        },
+    ],
+};
+// eslint-disable-next-line react/no-multi-comp
+export const Usage = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Open Dialog", onClick: () => setOpen(true) }), _jsx(Dialog, { onClose: () => setOpen(false), open: open, children: _jsxs("div", { style: { padding: 'var(--spacing-sizing-04)' }, children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx("h1", { children: "Dialog Title" }), _jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "Close dialog", onClick: () => setOpen(false), variant: "tertiary" })] }), _jsx("p", { children: "This is the content of the dialog." }), _jsx(Button, { label: "Cancel", onClick: () => setOpen(false), variant: "secondary" })] }) })] }));
 };
 //# sourceMappingURL=DialogExample.js.map

package/dist/components/Dialog/DialogExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,OAAO,GAA0B,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,aAAa,CAAC;QAC5B,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,SAAS,uCAA4B,KAAK,EAAE,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,0BAA0B,EAAE,gCAAkB,KAAK,CAAC,SAAS,iBAAgB,GAC5F,IACb,CACN,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,KAAK;IACf,OAAO;CACV,CAAC"}
+{"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAe,MAAM,GAAG,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGzC,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,aAAa,CAAC;QAC5B,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,SAAS,uCAA4B,KAAK,EAAE,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,0BAA0B,EAAE,aAC/C,MAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE;oCACH,KAAK,EAAE,MAAM;oCACb,YAAY,EAAE,0BAA0B;iCAC3C,aAED,kCAAe,EACf,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,QAAQ,QACR,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EACxC,OAAO,EAAC,UAAU,GACpB,IACC,EACP,2CAAmB,KAAK,CAAC,SAAS,iBAAc,IAC9C,GACE,IACb,CACN,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE;QACN;YACI,KAAK,EAAE,kBAAkB;YACzB,QAAQ,EAAE,YAAY;YACtB,OAAO,EAAE,SAAS,eAAe;gBAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAExC,MAAM,SAAS,GAAG,MAAM,CAA6B,SAAS,CAAC,CAAC;gBAEhE,OAAO,CACH,eACI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,IAAI,SAAS,CAAC,EACtD,KAAK,EAAE;wBACH,MAAM,EAAE,sCAAsC;wBAC9C,OAAO,EAAE,0BAA0B;wBACnC,SAAS,EAAE,GAAG;wBACd,QAAQ,EAAE,UAAU;wBACpB,QAAQ,EAAE,QAAQ;qBACrB,aAED,KAAC,MAAM,IAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAI,EAC5D,KAAC,MAAM,IACH,SAAS,EAAE,SAAS,CAAC,OAAO,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,OAAO,YAEjB,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,0BAA0B,EAAE,aAC/C,MAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE;4CACH,YAAY,EAAE,0BAA0B;yCAC3C,aAED,qCAAkB,EAClB,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,QAAQ,QACR,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,OAAO,EAAC,UAAU,GACpB,IACC,EACP,0DAAsC,IACpC,GACD,IACP,CACT,CAAC;YACN,CAAC;SACJ;KACJ;CACJ,CAAC;AAEF,+CAA+C;AAC/C,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAI,EAC5D,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI,YAC7C,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,0BAA0B,EAAE,aAC/C,MAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,eAAe,aACxC,wCAAqB,EACrB,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,QAAQ,QACR,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,OAAO,EAAC,UAAU,GACpB,IACC,EACP,6DAAyC,EACzC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,OAAO,EAAC,WAAW,GAAG,IAC1E,GACD,IACV,CACN,CAAC;AACN,CAAC,CAAC"}

package/dist/components/Dialog/dialog.css

@@ -4,21 +4,24 @@
   z-index: var(--z-index-dialog);
   display: flex;
   pointer-events: none;
+  --height: 100vh;
+  --width: 100vw;
 }
 [data-bspk=dialog] [data-dialog-box] {
   pointer-events: all;
   text-align: start;
-  position: relative;
+  position: absolute;
   box-shadow: var(--drop-shadow-float);
   background: var(--surface-neutral-t1-base);
   color: var(--foreground-neutral-on-surface);
-  max-height: calc(100vh - var(--spacing-sizing-24));
+  max-height: calc(var(--height) - var(--spacing-sizing-24));
   z-index: 2;
   width: calc(100% - var(--spacing-sizing-08));
   animation-name: var(--box-animation-name);
   animation-duration: 0.5s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
+  animation-delay: 0;
 }
 [data-bspk=dialog] [data-dialog-box] > :first-of-type {
   margin-top: 0;
@@ -79,7 +82,7 @@
 [data-bspk=dialog][data-placement=left] [data-dialog-box] {
   max-height: unset;
   width: 280px;
-  height: 100vh;
+  height: var(--height);
   border-bottom-right-radius: var(--radius-lg);
   border-top-right-radius: var(--radius-lg);
 }
@@ -90,12 +93,79 @@
 [data-bspk=dialog][data-placement=right] [data-dialog-box] {
   max-height: unset;
   width: 280px;
-  height: 100vh;
+  height: var(--height);
   border-bottom-left-radius: var(--radius-lg);
   border-top-left-radius: var(--radius-lg);
 }
 [data-bspk=dialog] [data-width-full=true] {
   width: 100%;
 }
+[data-bspk=dialog][data-contained] {
+  position: absolute;
+  --height: 100%;
+  --width: 100%;
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes placement-left {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    transform: translateX(calc(-1 * var(--width, 100vw)));
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes placement-right {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: translateX(var(--width, 100vw));
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes placement-top {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: translateY(calc(-1 * var(--height, 100vh)));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes placement-bottom {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: translateY(var(--height, 100vh));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Dialog/dialog.css.js

@@ -7,21 +7,24 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
   z-index: var(--z-index-dialog);
   display: flex;
   pointer-events: none;
+  --height: 100vh;
+  --width: 100vw;
 }
 [data-bspk=dialog] [data-dialog-box] {
   pointer-events: all;
   text-align: start;
-  position: relative;
+  position: absolute;
   box-shadow: var(--drop-shadow-float);
   background: var(--surface-neutral-t1-base);
   color: var(--foreground-neutral-on-surface);
-  max-height: calc(100vh - var(--spacing-sizing-24));
+  max-height: calc(var(--height) - var(--spacing-sizing-24));
   z-index: 2;
   width: calc(100% - var(--spacing-sizing-08));
   animation-name: var(--box-animation-name);
   animation-duration: 0.5s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
+  animation-delay: 0;
 }
 [data-bspk=dialog] [data-dialog-box] > :first-of-type {
   margin-top: 0;
@@ -82,7 +85,7 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
 [data-bspk=dialog][data-placement=left] [data-dialog-box] {
   max-height: unset;
   width: 280px;
-  height: 100vh;
+  height: var(--height);
   border-bottom-right-radius: var(--radius-lg);
   border-top-right-radius: var(--radius-lg);
 }
@@ -93,13 +96,80 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
 [data-bspk=dialog][data-placement=right] [data-dialog-box] {
   max-height: unset;
   width: 280px;
-  height: 100vh;
+  height: var(--height);
   border-bottom-left-radius: var(--radius-lg);
   border-top-left-radius: var(--radius-lg);
 }
 [data-bspk=dialog] [data-width-full=true] {
   width: 100%;
 }
+[data-bspk=dialog][data-contained] {
+  position: absolute;
+  --height: 100%;
+  --width: 100%;
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes placement-left {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    transform: translateX(calc(-1 * var(--width, 100vw)));
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes placement-right {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: translateX(var(--width, 100vw));
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes placement-top {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: translateY(calc(-1 * var(--height, 100vh)));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes placement-bottom {
+  0% {
+    opacity: 0;
+  }
+  1% {
+    opacity: 1;
+    transform: translateY(var(--height, 100vh));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));

package/dist/components/Flex/Flex.d.ts

@@ -35,6 +35,8 @@ export type FlexProps<As extends ElementType = ElementType> = {
     direction?: 'column-reverse' | 'column' | 'row-reverse' | 'row';
     /** The padding to apply to the Flex. */
     padding?: SizingPixels | SizingPixels[];
+    /** If true the Flex will take up the full width of its container. */
+    full?: boolean;
 };
 /**
  * Utility component used within other components for layout purposes.

package/dist/components/Flex/Flex.js

@@ -27,6 +27,7 @@ export function Flex({ children, gap, style, as, align = 'flex-start', justify =
             justifyContent: justify || 'flex-start',
             flexWrap: wrap ? 'wrap' : 'nowrap',
             padding: paddingValue,
+            width: props.full ? '100%' : undefined,
             ...style,
         }, children: children }));
 }

package/dist/components/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAgB,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAsC9D;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,IAAI,CAAuC,EACvD,QAAQ,EACR,GAAG,EACH,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,GAAG,KAAK,EACsB;IAC9B,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3F,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAE9C,OAAO,CACH,KAAC,EAAE,OACK,KAAK,uBACS,MAAM,EACxB,KAAK,EAAE;YACH,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,SAAS;YACxB,GAAG,EAAE,cAAc,CAAC,GAAG,CAAC;YACxB,UAAU;YACV,cAAc,EAAE,OAAO,IAAI,YAAY;YACvC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;YAClC,OAAO,EAAE,YAAY;YACrB,GAAG,KAAK;SACX,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC;AAED,SAAS,eAAe,CAAC,OAAuC;IAC5D,IAAI,CAAC,OAAO;QAAE,OAAO,SAAS,CAAC;IAE/B,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACnG,CAAC"}
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAgB,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAwC9D;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,IAAI,CAAuC,EACvD,QAAQ,EACR,GAAG,EACH,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,GAAG,KAAK,EACsB;IAC9B,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3F,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAE9C,OAAO,CACH,KAAC,EAAE,OACK,KAAK,uBACS,MAAM,EACxB,KAAK,EAAE;YACH,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,SAAS;YACxB,GAAG,EAAE,cAAc,CAAC,GAAG,CAAC;YACxB,UAAU;YACV,cAAc,EAAE,OAAO,IAAI,YAAY;YACvC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;YAClC,OAAO,EAAE,YAAY;YACrB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YACtC,GAAG,KAAK;SACX,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC;AAED,SAAS,eAAe,CAAC,OAAuC;IAC5D,IAAI,CAAC,OAAO;QAAE,OAAO,SAAS,CAAC;IAE/B,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACnG,CAAC"}

package/dist/components/ListItem/list-item.css

@@ -52,6 +52,10 @@
   width: fit-content;
   flex: 0 0 auto;
 }
+[data-bspk=list-item] [data-leading]:empty,
+[data-bspk=list-item] [data-trailing]:empty {
+  display: none;
+}
 [data-bspk=list-item] [data-item-label] {
   text-align: left;
 }

package/dist/components/ListItem/list-item.css.js

@@ -55,6 +55,10 @@ style.appendChild(document.createTextNode(`[data-bspk=list-item] {
   width: fit-content;
   flex: 0 0 auto;
 }
+[data-bspk=list-item] [data-leading]:empty,
+[data-bspk=list-item] [data-trailing]:empty {
+  display: none;
+}
 [data-bspk=list-item] [data-item-label] {
   text-align: left;
 }