@cruglobal/cornerstone-components 0.6.2 → 0.7.1

package/dist/unbundled/custom-elements.json

@@ -7504,7 +7504,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled. To play it again from the start, call `restart()`.",
               "attribute": "play",
               "reflects": true
             },
@@ -7646,6 +7646,11 @@
               "name": "createAnimation",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "dispatchStart",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "destroyAnimation",
@@ -7688,6 +7693,14 @@
                 "text": "finish() => void"
               }
             },
+            {
+              "kind": "method",
+              "name": "restart",
+              "description": "Rewinds the animation to the start and plays it, whether it has finished, been canceled, been paused or is still\nrunning. Each restart is a new run: the delay and every iteration play again as the current options describe them,\n`play` is set to `true`, and `cs-start` is emitted. The run it interrupts emits neither `cs-cancel` nor `cs-finish`.\nIf the animation doesn't exist yet, for example because nothing is slotted, it starts as soon as it does.\nChanging an option such as `duration` while the animation plays also starts a new run, so changing one in the same\ntick as `restart()` emits `cs-start` twice.",
+              "type": {
+                "text": "restart() => void"
+              }
+            },
             {
               "kind": "field",
               "name": "#hasRecordedInitialProperties",
@@ -7795,7 +7808,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled. To play it again from the start, call `restart()`.",
               "fieldName": "play"
             },
             {
@@ -15917,6 +15930,93 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/color-picker/internal/swatch-vars.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "parseCssVar",
+          "return": {
+            "type": {
+              "text": "{ name: string; fallback?: string } | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Splits `var(--cs-name)` or `var(--cs-name, fallback)` into its parts. Returns `null` for anything else."
+        },
+        {
+          "kind": "function",
+          "name": "resolveCssVar",
+          "return": {
+            "type": {
+              "text": "string | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "styles",
+              "type": {
+                "text": "Pick<CSSStyleDeclaration, 'getPropertyValue'>"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "The custom property's value, else the fallback, else `null`. Also `null` for anything that isn't a `var(--cs-*)`."
+        },
+        {
+          "kind": "function",
+          "name": "getSwatchLabel",
+          "parameters": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "A swatch's default accessible name: `var(--cs-color-brand-fill-loud)` reads \"brand fill loud\"."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "parseCssVar",
+          "declaration": {
+            "name": "parseCssVar",
+            "module": "components/color-picker/internal/swatch-vars.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveCssVar",
+          "declaration": {
+            "name": "resolveCssVar",
+            "module": "components/color-picker/internal/swatch-vars.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getSwatchLabel",
+          "declaration": {
+            "name": "getSwatchLabel",
+            "module": "components/color-picker/internal/swatch-vars.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/color-picker/color-picker.js",
@@ -16291,6 +16391,13 @@
               "privacy": "private",
               "default": "100"
             },
+            {
+              "kind": "field",
+              "name": "resolvedSwatchVars",
+              "privacy": "private",
+              "default": "new Map<string, string>()",
+              "description": "Resolved values for `var()` swatches, keyed by the swatch's color as written. Set by `resolveSwatchVars()`."
+            },
             {
               "kind": "field",
               "name": "_value",
@@ -16359,7 +16466,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
+              "description": "The color picker's label. It is displayed with the trigger and gives the trigger its accessible name. If you need to\ndisplay HTML, use the `label` slot instead.",
               "attribute": "label"
             },
             {
@@ -16493,7 +16600,7 @@
                 "text": "string | string[] | CsColorPickerSwatch[]"
               },
               "default": "''",
-              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values or an array of `{ color, label }` objects to\nthis property using JavaScript. When using objects with labels, the label will be used for the swatch's accessible\nname instead of the raw color value.",
+              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values or an array of `{ color, label }` objects to\nthis property using JavaScript. When using objects with labels, the label will be used for the swatch's accessible\nname instead of the raw color value.\n\nA swatch can also be a design token, written as `var(--cs-name)` or `var(--cs-name, fallback)`, in any of these\nforms. The picker resolves it against its own computed style each time it opens, so a theme set on any ancestor\napplies, and selecting the swatch sets the resolved color in the picker's `format`. A swatch that doesn't resolve to\na color the picker can parse is skipped, as is a `var()` of any custom property outside `--cs-*`. Without a label,\na `var()` swatch is named after its custom property, so `var(--cs-color-brand-fill-loud)` is announced as \"brand\nfill loud\".",
               "attribute": "swatches",
               "parsedType": {
                 "text": "string | string[] | { color: string, label: string }[]"
@@ -16736,6 +16843,23 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "getNormalizedSwatches",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "CsColorPickerSwatch[]"
+                }
+              },
+              "description": "The `swatches` property in whichever of its three forms it was given, as `{ color, label }` objects."
+            },
+            {
+              "kind": "method",
+              "name": "resolveSwatchVars",
+              "privacy": "private",
+              "description": "Resolves every `var()` swatch against the picker's own computed style, so a theme class or custom property set on\nany ancestor applies. Client only: it runs after the first render, which is after hydration, so the server and the\nfirst client render agree on leaving these swatches out."
+            },
             {
               "kind": "method",
               "name": "getHexString",
@@ -17488,7 +17612,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
+              "description": "The color picker's label. It is displayed with the trigger and gives the trigger its accessible name. If you need to\ndisplay HTML, use the `label` slot instead.",
               "fieldName": "label"
             },
             {
@@ -17607,7 +17731,7 @@
                 "text": "string | string[] | CsColorPickerSwatch[]"
               },
               "default": "''",
-              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values or an array of `{ color, label }` objects to\nthis property using JavaScript. When using objects with labels, the label will be used for the swatch's accessible\nname instead of the raw color value.",
+              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values or an array of `{ color, label }` objects to\nthis property using JavaScript. When using objects with labels, the label will be used for the swatch's accessible\nname instead of the raw color value.\n\nA swatch can also be a design token, written as `var(--cs-name)` or `var(--cs-name, fallback)`, in any of these\nforms. The picker resolves it against its own computed style each time it opens, so a theme set on any ancestor\napplies, and selecting the swatch sets the resolved color in the picker's `format`. A swatch that doesn't resolve to\na color the picker can parse is skipped, as is a `var()` of any custom property outside `--cs-*`. Without a label,\na `var()` swatch is named after its custom property, so `var(--cs-color-brand-fill-loud)` is announced as \"brand\nfill loud\".",
               "fieldName": "swatches",
               "parsedType": {
                 "text": "string | string[] | { color: string, label: string }[]"
@@ -18302,6 +18426,12 @@
               ],
               "description": "Removes the tooltip ID from the aria-labelledby attribute"
             },
+            {
+              "kind": "field",
+              "name": "isOpenAndEnabled",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "handleOpenChange",
@@ -19272,6 +19402,66 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "internal/test/form-control-height.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "formControlHeight",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "Element"
+              }
+            }
+          ],
+          "description": "The height in pixels that `--cs-form-control-height` resolves to at `element`'s font size."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "formControlHeight",
+          "declaration": {
+            "name": "formControlHeight",
+            "module": "internal/test/form-control-height.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "internal/test/native-styles.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "loadNativeStyles",
+          "return": {
+            "type": {
+              "text": "Promise<HTMLLinkElement>"
+            }
+          },
+          "description": "Loads `native.css` into the document and resolves with its `<link>` once applied, reusing one already there."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "loadNativeStyles",
+          "declaration": {
+            "name": "loadNativeStyles",
+            "module": "internal/test/native-styles.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/details/details.js",
@@ -20513,7 +20703,7 @@
               "name": "--width"
             },
             {
-              "description": "The spacing of the divider.",
+              "description": "The margin on either side of the divider: above and below it when horizontal, left and right when vertical. As a direct child of a layout utility such as `cs-stack` or `cs-cluster`, the container's gap sets this space instead, so use a `cs-gap-*` class on the container to change it.",
               "name": "--spacing"
             }
           ],
@@ -20675,7 +20865,7 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Dividers visually separate or group adjacent elements with a horizontal or vertical line. Use them to\nestablish rhythm and hierarchy within menus, toolbars, and layouts.",
-          "jsDoc": "/**\n * @summary Dividers visually separate or group adjacent elements with a horizontal or vertical line. Use them to\n *  establish rhythm and hierarchy within menus, toolbars, and layouts.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/divider\n * @status stable\n * @since 0.1\n *\n * @cssproperty --color - The color of the divider.\n * @cssproperty --width - The width of the divider.\n * @cssproperty --spacing - The spacing of the divider.\n */",
+          "jsDoc": "/**\n * @summary Dividers visually separate or group adjacent elements with a horizontal or vertical line. Use them to\n *  establish rhythm and hierarchy within menus, toolbars, and layouts.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/divider\n * @status stable\n * @since 0.1\n *\n * @cssproperty --color - The color of the divider.\n * @cssproperty --width - The width of the divider.\n * @cssproperty --spacing - The margin on either side of the divider: above and below it when horizontal, left and\n *  right when vertical. As a direct child of a layout utility such as `cs-stack` or `cs-cluster`, the container's gap\n *  sets this space instead, so use a `cs-gap-*` class on the container to change it.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/divider",
           "status": "stable",
           "since": "0.1",
@@ -21204,8 +21394,8 @@
             "name": "CornerstoneElement",
             "module": "/src/internal/cornerstone-element.js"
           },
-          "summary": "Drawers slide in from the edge of a container to expose additional options and information without\nnavigating away. Useful for navigation menus, filters, and secondary content.",
-          "jsDoc": "/**\n * @summary Drawers slide in from the edge of a container to expose additional options and information without\n *  navigating away. Useful for navigation menus, filters, and secondary content.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/drawer\n * @status stable\n * @since 0.1\n *\n * @dependency cs-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<cs-button>`.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event cs-show - Emitted when the drawer opens.\n * @event cs-after-show - Emitted after the drawer opens and all animations are complete.\n * @event cs-hide - Emitted when the drawer closes.\n * @event cs-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event {{ source: Element }} cs-hide - Emitted when the drawer is requesting to close. Calling\n *  `event.preventDefault()` will prevent the drawer from closing. You can inspect `event.detail.source` to see which\n *  element caused the drawer to close. If the source is the drawer element itself, the user has pressed [[Escape]] or\n *  the drawer has been closed programmatically. Avoid using this unless closing the drawer will result in destructive\n *  behavior such as data loss.\n *\n * @csspart dialog - The drawer's internal `<dialog>` element.\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<cs-button>`.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, a `<cs-button>`.\n * @csspart close-button__button - The close button's exported `button` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --spacing - The amount of space around and between the drawer's content.\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty [--backdrop-filter=none] - A filter to apply to the backdrop behind the drawer.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The animation duration when showing the drawer.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The animation duration when hiding the drawer.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n *   trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when\n *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.\n */",
+          "summary": "Drawers slide in from an edge of the viewport to expose additional options and information without\nnavigating away. Useful for navigation menus, filters, and secondary content.",
+          "jsDoc": "/**\n * @summary Drawers slide in from an edge of the viewport to expose additional options and information without\n *  navigating away. Useful for navigation menus, filters, and secondary content.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/drawer\n * @status stable\n * @since 0.1\n *\n * @dependency cs-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with `<cs-button>`.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event cs-show - Emitted when the drawer opens.\n * @event cs-after-show - Emitted after the drawer opens and all animations are complete.\n * @event cs-hide - Emitted when the drawer closes.\n * @event cs-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event {{ source: Element }} cs-hide - Emitted when the drawer is requesting to close. Calling\n *  `event.preventDefault()` will prevent the drawer from closing. You can inspect `event.detail.source` to see which\n *  element caused the drawer to close. If the source is the drawer element itself, the user has pressed [[Escape]] or\n *  the drawer has been closed programmatically. Avoid using this unless closing the drawer will result in destructive\n *  behavior such as data loss.\n *\n * @csspart dialog - The drawer's internal `<dialog>` element.\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<cs-button>`.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, a `<cs-button>`.\n * @csspart close-button__button - The close button's exported `button` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --spacing - The amount of space around and between the drawer's content.\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty [--backdrop-filter=none] - A filter to apply to the backdrop behind the drawer.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The animation duration when showing the drawer.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The animation duration when hiding the drawer.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n *   trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when\n *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/drawer",
           "status": "stable",
           "since": "0.1",
@@ -22662,7 +22852,7 @@
               "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
               "attribute": "date",
               "parsedType": {
-                "text": "string | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1237: {  } }"
+                "text": "string | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1240: {  } }"
               }
             },
             {
@@ -22891,7 +23081,7 @@
               "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
               "fieldName": "date",
               "parsedType": {
-                "text": "string | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1237: {  } }"
+                "text": "string | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1240: {  } }"
               }
             },
             {
@@ -24783,7 +24973,7 @@
               "description": "The committed value as a `Date`, or `null` when the value is empty/invalid.",
               "readonly": true,
               "parsedType": {
-                "text": "null | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1237: {  } }"
+                "text": "null | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1240: {  } }"
               }
             },
             {
@@ -29144,6 +29334,12 @@
                 "text": "handleValueChange() => void"
               }
             },
+            {
+              "kind": "field",
+              "name": "isOpenAndEnabled",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "handleOpenChange",
@@ -31605,6 +31801,30 @@
               "description": "The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.",
               "name": "navigation-footer"
             },
+            {
+              "description": "The sidebar's header on desktop, in place of `navigation-header`. On mobile, `<cs-drawer>` still shows `navigation-header`.",
+              "name": "desktop-navigation-header"
+            },
+            {
+              "description": "The sidebar's content on desktop, in place of `navigation`. On mobile, `<cs-drawer>` still shows `navigation`.",
+              "name": "desktop-navigation"
+            },
+            {
+              "description": "The sidebar's footer on desktop, in place of `navigation-footer`. On mobile, `<cs-drawer>` still shows `navigation-footer`.",
+              "name": "desktop-navigation-footer"
+            },
+            {
+              "description": "The header for `<cs-drawer>` on mobile, in place of `navigation-header`. On desktop, the sidebar still shows `navigation-header`. Use it for a header only the drawer should have.",
+              "name": "mobile-navigation-header"
+            },
+            {
+              "description": "The content of `<cs-drawer>` on mobile, in place of `navigation`. On desktop, the sidebar still shows `navigation`.",
+              "name": "mobile-navigation"
+            },
+            {
+              "description": "The footer for `<cs-drawer>` on mobile, in place of `navigation-footer`. On desktop, the sidebar still shows `navigation-footer`.",
+              "name": "mobile-navigation-footer"
+            },
             {
               "description": "Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a `<cs-button>` + a 3 bars `<cs-icon>`",
               "name": "navigation-toggle"
@@ -31629,6 +31849,10 @@
               "description": "The \"skip to content\" slot. You can override this If you would like to override the `Skip to content` button and add additional \"Skip to X\", they can be inserted here.",
               "name": "skip-to-content"
             },
+            {
+              "description": "Where the \"skip to content\" link lands. If the document has no element with `id=\"main-content\"`, the page adds an empty one to this slot, at the start of the main content. You don't need to fill it. To choose where the link lands, put `id=\"main-content\"` on your own element in the main content.",
+              "name": "skip-to-content-target"
+            },
             {
               "description": "The content to display in the footer. This is always displayed underneath the viewport so will always make the page \"scrollable\".",
               "name": "footer"
@@ -31651,6 +31875,12 @@
                 "module": "internal/cornerstone-element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "measuredHeights",
+              "privacy": "private",
+              "default": "new Map<string, string>()"
+            },
             {
               "kind": "field",
               "name": "headerResizeObserver",
@@ -31671,6 +31901,11 @@
               "name": "footerResizeObserver",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "styleObserver",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "slotResizeObserver",
@@ -31684,6 +31919,11 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "restoreMeasuredHeights",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "handleNavigationToggle",
@@ -32020,7 +32260,7 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Pages scaffold an entire application layout with header, navigation, sidebar, main content, aside, and\nfooter regions. Use them to structure full pages with minimal markup and responsive behavior built in.",
-          "jsDoc": "/**\n * @summary Pages scaffold an entire application layout with header, navigation, sidebar, main content, aside, and\n *  footer regions. Use them to structure full pages with minimal markup and responsive behavior built in.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/page\n * @status stable\n * @since 0.1\n *\n * @slot - The page's main content.\n * @slot banner - The banner that gets display above the header. The banner will not be shown if no content is provided.\n * @slot header - The header to display at the top of the page. If a banner is present, the header will appear below the banner. The header will not be shown if there is no content.\n * @slot subheader - A subheader to display below the `header`. This is a good place to put things like breadcrumbs.\n * @slot menu - The left side of the page. If you slot an element in here, you will override the default `navigation` slot and will be handling navigation on your own. This also will not disable the fallback behavior of the navigation button. This section \"sticks\" to the top as the page scrolls.\n * @slot navigation-header - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.\n * @slot navigation - The main content to display in the navigation area. This is displayed on the left side of the page, if `menu` is not used. This section \"sticks\" to the top as the page scrolls.\n * @slot navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.\n * @slot navigation-toggle - Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a `<cs-button>` + a 3 bars `<cs-icon>`\n * @slot navigation-toggle-icon - Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars `<cs-icon>`.\n * @slot main-header - Header to display inline above the main content.\n * @slot main-footer - Footer to display inline below the main content.\n * @slot aside - Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section \"sticks\" to the top as the page scrolls.\n * @slot skip-to-content - The \"skip to content\" slot. You can override this If you would like to override the `Skip to content` button and add additional \"Skip to X\", they can be inserted here.\n * @slot footer - The content to display in the footer. This is always displayed underneath the viewport so will always make the page \"scrollable\".\n *\n * @csspart page - The component's outer wrapper.\n * @csspart banner - The banner to show above header.\n * @csspart header - The header, usually for top level navigation / branding.\n * @csspart subheader - Shown below the header, usually intended for things like breadcrumbs and other page level navigation.\n * @csspart body - The wrapper around menu, main, and aside.\n * @csspart menu - The left hand side of the page. Generally intended for navigation.\n * @csspart navigation - The `<nav>` that wraps the navigation slots on desktop viewports.\n * @csspart navigation-desktop - The `<nav>` for navigation on desktop viewports.\n * @csspart navigation-header - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.\n * @csspart navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.\n * @csspart navigation-toggle - The default `<cs-button>` that will toggle the `<cs-drawer>` for mobile viewports.\n * @csspart navigation-toggle-icon - The default `<cs-icon>` displayed inside of the navigation-toggle button.\n * @csspart drawer - The `<cs-drawer>` that contains the navigation on mobile viewports.\n * @csspart drawer__dialog - The navigation drawer's `dialog` part.\n * @csspart drawer__header - The navigation drawer's `header` part.\n * @csspart drawer__header-actions - The navigation drawer's `header-actions` part.\n * @csspart drawer__title - The navigation drawer's `title` part.\n * @csspart drawer__close-button - The navigation drawer's close button.\n * @csspart drawer__close-button__button - The navigation drawer's close button's `button` part.\n * @csspart drawer__body - The navigation drawer's `body` part.\n * @csspart drawer__footer - The navigation drawer's `footer` part.\n * @csspart main - The wrapper around the main header, content, and footer.\n * @csspart main-header - The header above main content.\n * @csspart main-content - The main content.\n * @csspart main-footer - The footer below main content.\n * @csspart aside - The right hand side of the page. Used for things like table of contents, ads, etc.\n * @csspart skip-to-content - The \"skip to content\" link that lets keyboard users bypass navigation.\n * @csspart footer - The footer of the page. This is always below the initial viewport size.\n *\n * @cssproperty [--menu-width=auto] - The width of the page's \"menu\" section.\n * @cssproperty [--main-width=1fr] - The width of the page's \"main\" section.\n * @cssproperty [--aside-width=auto] - The wide of the page's \"aside\" section.\n * @cssproperty [--banner-height=0px] - The height of the banner. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.\n * @cssproperty [--header-height=0px] - The height of the header. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.\n * @cssproperty [--subheader-height=0px] - The height of the subheader. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.\n */",
+          "jsDoc": "/**\n * @summary Pages scaffold an entire application layout with header, navigation, sidebar, main content, aside, and\n *  footer regions. Use them to structure full pages with minimal markup and responsive behavior built in.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/page\n * @status stable\n * @since 0.1\n *\n * @slot - The page's main content.\n * @slot banner - The banner that gets display above the header. The banner will not be shown if no content is provided.\n * @slot header - The header to display at the top of the page. If a banner is present, the header will appear below the banner. The header will not be shown if there is no content.\n * @slot subheader - A subheader to display below the `header`. This is a good place to put things like breadcrumbs.\n * @slot menu - The left side of the page. If you slot an element in here, you will override the default `navigation` slot and will be handling navigation on your own. This also will not disable the fallback behavior of the navigation button. This section \"sticks\" to the top as the page scrolls.\n * @slot navigation-header - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.\n * @slot navigation - The main content to display in the navigation area. This is displayed on the left side of the page, if `menu` is not used. This section \"sticks\" to the top as the page scrolls.\n * @slot navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.\n * @slot desktop-navigation-header - The sidebar's header on desktop, in place of `navigation-header`. On mobile, `<cs-drawer>` still shows `navigation-header`.\n * @slot desktop-navigation - The sidebar's content on desktop, in place of `navigation`. On mobile, `<cs-drawer>` still shows `navigation`.\n * @slot desktop-navigation-footer - The sidebar's footer on desktop, in place of `navigation-footer`. On mobile, `<cs-drawer>` still shows `navigation-footer`.\n * @slot mobile-navigation-header - The header for `<cs-drawer>` on mobile, in place of `navigation-header`. On desktop, the sidebar still shows `navigation-header`. Use it for a header only the drawer should have.\n * @slot mobile-navigation - The content of `<cs-drawer>` on mobile, in place of `navigation`. On desktop, the sidebar still shows `navigation`.\n * @slot mobile-navigation-footer - The footer for `<cs-drawer>` on mobile, in place of `navigation-footer`. On desktop, the sidebar still shows `navigation-footer`.\n * @slot navigation-toggle - Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a `<cs-button>` + a 3 bars `<cs-icon>`\n * @slot navigation-toggle-icon - Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars `<cs-icon>`.\n * @slot main-header - Header to display inline above the main content.\n * @slot main-footer - Footer to display inline below the main content.\n * @slot aside - Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section \"sticks\" to the top as the page scrolls.\n * @slot skip-to-content - The \"skip to content\" slot. You can override this If you would like to override the `Skip to content` button and add additional \"Skip to X\", they can be inserted here.\n * @slot skip-to-content-target - Where the \"skip to content\" link lands. If the document has no element with `id=\"main-content\"`, the page adds an empty one to this slot, at the start of the main content. You don't need to fill it. To choose where the link lands, put `id=\"main-content\"` on your own element in the main content.\n * @slot footer - The content to display in the footer. This is always displayed underneath the viewport so will always make the page \"scrollable\".\n *\n * @csspart page - The component's outer wrapper.\n * @csspart banner - The banner to show above header.\n * @csspart header - The header, usually for top level navigation / branding.\n * @csspart subheader - Shown below the header, usually intended for things like breadcrumbs and other page level navigation.\n * @csspart body - The wrapper around menu, main, and aside.\n * @csspart menu - The left hand side of the page. Generally intended for navigation.\n * @csspart navigation - The `<nav>` that wraps the navigation slots on desktop viewports.\n * @csspart navigation-desktop - The `<nav>` for navigation on desktop viewports.\n * @csspart navigation-header - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.\n * @csspart navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.\n * @csspart navigation-toggle - The default `<cs-button>` that will toggle the `<cs-drawer>` for mobile viewports.\n * @csspart navigation-toggle-icon - The default `<cs-icon>` displayed inside of the navigation-toggle button.\n * @csspart drawer - The `<cs-drawer>` that contains the navigation on mobile viewports.\n * @csspart drawer__dialog - The navigation drawer's `dialog` part.\n * @csspart drawer__header - The navigation drawer's `header` part.\n * @csspart drawer__header-actions - The navigation drawer's `header-actions` part.\n * @csspart drawer__title - The navigation drawer's `title` part.\n * @csspart drawer__close-button - The navigation drawer's close button.\n * @csspart drawer__close-button__button - The navigation drawer's close button's `button` part.\n * @csspart drawer__body - The navigation drawer's `body` part.\n * @csspart drawer__footer - The navigation drawer's `footer` part.\n * @csspart main - The wrapper around the main header, content, and footer.\n * @csspart main-header - The header above main content.\n * @csspart main-content - The main content.\n * @csspart main-footer - The footer below main content.\n * @csspart aside - The right hand side of the page. Used for things like table of contents, ads, etc.\n * @csspart skip-to-content - The \"skip to content\" link that lets keyboard users bypass navigation.\n * @csspart footer - The footer of the page. This is always below the initial viewport size.\n *\n * @cssproperty [--menu-width=auto] - The width of the page's \"menu\" section.\n * @cssproperty [--main-width=1fr] - The width of the page's \"main\" section.\n * @cssproperty [--aside-width=auto] - The wide of the page's \"aside\" section.\n * @cssproperty [--banner-height=0px] - The height of the banner. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.\n * @cssproperty [--header-height=0px] - The height of the header. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.\n * @cssproperty [--subheader-height=0px] - The height of the subheader. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/page",
           "status": "stable",
           "since": "0.1",
@@ -36946,7 +37186,7 @@
               },
               "privacy": "private",
               "parsedType": {
-                "text": "number | { close: {  }, hasRef: {  }, ref: {  }, refresh: {  }, unref: {  }, _onTimeout: {  }, __@toPrimitive@1237: {  }, __@dispose@1239: {  } }"
+                "text": "number | { close: {  }, hasRef: {  }, ref: {  }, refresh: {  }, unref: {  }, _onTimeout: {  }, __@toPrimitive@1240: {  }, __@dispose@1242: {  } }"
               }
             },
             {
@@ -36977,7 +37217,7 @@
               "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
               "attribute": "date",
               "parsedType": {
-                "text": "string | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1237: {  } }"
+                "text": "string | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1240: {  } }"
               }
             },
             {
@@ -37112,7 +37352,7 @@
               "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
               "fieldName": "date",
               "parsedType": {
-                "text": "string | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1237: {  } }"
+                "text": "string | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1240: {  } }"
               }
             },
             {
@@ -45270,7 +45510,7 @@
               "description": "The time as a `Date` (today + wire value), or `null` when empty.",
               "readonly": true,
               "parsedType": {
-                "text": "null | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1237: {  } }"
+                "text": "null | { toString: {  }, toDateString: {  }, toTimeString: {  }, toLocaleString: {  }, toLocaleDateString: {  }, toLocaleTimeString: {  }, valueOf: {  }, getTime: {  }, getFullYear: {  }, getUTCFullYear: {  }, getMonth: {  }, getUTCMonth: {  }, getDate: {  }, getUTCDate: {  }, getDay: {  }, getUTCDay: {  }, getHours: {  }, getUTCHours: {  }, getMinutes: {  }, getUTCMinutes: {  }, getSeconds: {  }, getUTCSeconds: {  }, getMilliseconds: {  }, getUTCMilliseconds: {  }, getTimezoneOffset: {  }, setTime: {  }, setMilliseconds: {  }, setUTCMilliseconds: {  }, setSeconds: {  }, setUTCSeconds: {  }, setMinutes: {  }, setUTCMinutes: {  }, setHours: {  }, setUTCHours: {  }, setDate: {  }, setUTCDate: {  }, setMonth: {  }, setUTCMonth: {  }, setFullYear: {  }, setUTCFullYear: {  }, toUTCString: {  }, toISOString: {  }, toJSON: {  }, __@toPrimitive@1240: {  } }"
               }
             },
             {
@@ -49541,7 +49781,7 @@
         {
           "kind": "variable",
           "name": "reactWrapper",
-          "summary": "Drawers slide in from the edge of a container to expose additional options and information without\nnavigating away. Useful for navigation menus, filters, and secondary content."
+          "summary": "Drawers slide in from an edge of the viewport to expose additional options and information without\nnavigating away. Useful for navigation menus, filters, and secondary content."
         }
       ],
       "exports": [
@@ -52830,7 +53070,7 @@
   "package": {
     "name": "@cruglobal/cornerstone-components",
     "description": "The custom-element library of the Cornerstone design system.",
-    "version": "0.6.2",
+    "version": "0.7.1",
     "author": "Cru Global",
     "homepage": "https://cruglobal.github.io/cornerstone-design-system",
     "license": "MIT"

package/dist/unbundled/events/accordion-after-collapse.js

@@ -1,8 +1,8 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   CsAccordionAfterCollapseEvent
-} from "../chunks/chunk.XSNXTL3J.js";
-import "../chunks/chunk.HBAVB7LX.js";
+} from "../chunks/chunk.H5MXYTTW.js";
+import "../chunks/chunk.PCHA363X.js";
 export {
   CsAccordionAfterCollapseEvent
 };

package/dist/unbundled/events/accordion-after-expand.js

@@ -1,8 +1,8 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   CsAccordionAfterExpandEvent
-} from "../chunks/chunk.QNZZU272.js";
-import "../chunks/chunk.HBAVB7LX.js";
+} from "../chunks/chunk.J2S7Q7BI.js";
+import "../chunks/chunk.PCHA363X.js";
 export {
   CsAccordionAfterExpandEvent
 };

package/dist/unbundled/events/accordion-collapse.js

@@ -1,8 +1,8 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   CsAccordionCollapseEvent
-} from "../chunks/chunk.25QWNZW6.js";
-import "../chunks/chunk.HBAVB7LX.js";
+} from "../chunks/chunk.QVRKN47B.js";
+import "../chunks/chunk.PCHA363X.js";
 export {
   CsAccordionCollapseEvent
 };

package/dist/unbundled/events/accordion-expand.js

@@ -1,8 +1,8 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   CsAccordionExpandEvent
-} from "../chunks/chunk.ZTDXG7TX.js";
-import "../chunks/chunk.HBAVB7LX.js";
+} from "../chunks/chunk.GUNFUBLB.js";
+import "../chunks/chunk.PCHA363X.js";
 export {
   CsAccordionExpandEvent
 };

package/dist/unbundled/events/accordion-item-collapsed.js

@@ -1,8 +1,8 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   CsAccordionItemCollapsedEvent
-} from "../chunks/chunk.XJ36J6OZ.js";
-import "../chunks/chunk.HBAVB7LX.js";
+} from "../chunks/chunk.ZEOUKEGF.js";
+import "../chunks/chunk.PCHA363X.js";
 export {
   CsAccordionItemCollapsedEvent
 };

package/dist/unbundled/events/accordion-item-expanded.js

@@ -1,8 +1,8 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.1 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   CsAccordionItemExpandedEvent
-} from "../chunks/chunk.2MQX2VB4.js";
-import "../chunks/chunk.HBAVB7LX.js";
+} from "../chunks/chunk.IGTI6MYY.js";
+import "../chunks/chunk.PCHA363X.js";
 export {
   CsAccordionItemExpandedEvent
 };