@cruglobal/cornerstone-components 0.6.2 → 0.7.0

package/dist/bundled/types/svelte/index.d.ts

@@ -332,7 +332,7 @@ type CsAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: string;
   /** Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when
-the animation finishes or gets canceled. */
+the animation finishes or gets canceled. To play it again from the start, call `restart()`. */
   play?: boolean;
   /** The number of milliseconds to delay the start of the animation. */
   delay?: number;
@@ -1014,8 +1014,8 @@ includes the label before the component hydrates on the client. */
   /** Only required for SSR. Set to `true` if you're slotting in a `hint` element so the server-rendered markup
 includes the hint before the component hydrates on the client. */
   "ssr-hint"?: boolean;
-  /** The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
-display HTML, you can use the `label` slot` instead. */
+  /** The color picker's label. It is displayed with the trigger and gives the trigger its accessible name. If you need to
+display HTML, use the `label` slot instead. */
   label?: string;
   /** The color picker's hint. If you need to display HTML, use the `hint` slot instead. */
   hint?: string;
@@ -1056,7 +1056,14 @@ can use the `show()` and `hide()` methods and this attribute will reflect the po
 picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
 semicolon (`;`). Alternatively, you can pass an array of color values or an array of `{ color, label }` objects to
 this property using JavaScript. When using objects with labels, the label will be used for the swatch's accessible
-name instead of the raw color value. */
+name instead of the raw color value.
+
+A swatch can also be a design token, written as `var(--cs-name)` or `var(--cs-name, fallback)`, in any of these
+forms. The picker resolves it against its own computed style each time it opens, so a theme set on any ancestor
+applies, and selecting the swatch sets the resolved color in the picker's `format`. A swatch that doesn't resolve to
+a color the picker can parse is skipped, as is a `var()` of any custom property outside `--cs-*`. Without a label,
+a `var()` swatch is named after its custom property, so `var(--cs-color-brand-fill-loud)` is announced as "brand
+fill loud". */
   swatches?: string | string[] | CsColorPickerSwatch[];
   /** Makes the color picker a required field. */
   required?: boolean;
@@ -3604,6 +3611,12 @@ export type CustomElements = {
    * ### **Methods:**
    *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
    * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   * - **restart()** - Rewinds the animation to the start and plays it, whether it has finished, been canceled, been paused or is still
+   * running. Each restart is a new run: the delay and every iteration play again as the current options describe them,
+   * `play` is set to `true`, and `cs-start` is emitted. The run it interrupts emits neither `cs-cancel` nor `cs-finish`.
+   * If the animation doesn't exist yet, for example because nothing is slotted, it starts as soon as it does.
+   * Changing an option such as `duration` while the animation plays also starts a new run, so changing one in the same
+   * tick as `restart()` emits `cs-start` twice.
    *
    * ### **Slots:**
    *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<cs-animation>` elements.
@@ -4198,12 +4211,12 @@ export type CustomElements = {
    * ### **CSS Properties:**
    *  - **--color** - The color of the divider. _(default: undefined)_
    * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
+   * - **--spacing** - 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. _(default: undefined)_
    */
   "cs-divider": Partial<CsDividerProps & BaseProps & BaseEvents>;
 
   /**
-   * Drawers slide in from the edge of a container to expose additional options and information without
+   * Drawers slide in from an edge of the viewport to expose additional options and information without
    * navigating away. Useful for navigation menus, filters, and secondary content.
    * ---
    *
@@ -4640,12 +4653,19 @@ export type CustomElements = {
    * - **navigation-header** - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.
    * - **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.
    * - **navigation-footer** - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.
+   * - **desktop-navigation-header** - The sidebar's header on desktop, in place of `navigation-header`. On mobile, `<cs-drawer>` still shows `navigation-header`.
+   * - **desktop-navigation** - The sidebar's content on desktop, in place of `navigation`. On mobile, `<cs-drawer>` still shows `navigation`.
+   * - **desktop-navigation-footer** - The sidebar's footer on desktop, in place of `navigation-footer`. On mobile, `<cs-drawer>` still shows `navigation-footer`.
+   * - **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.
+   * - **mobile-navigation** - The content of `<cs-drawer>` on mobile, in place of `navigation`. On desktop, the sidebar still shows `navigation`.
+   * - **mobile-navigation-footer** - The footer for `<cs-drawer>` on mobile, in place of `navigation-footer`. On desktop, the sidebar still shows `navigation-footer`.
    * - **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>`
    * - **navigation-toggle-icon** - Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars `<cs-icon>`.
    * - **main-header** - Header to display inline above the main content.
    * - **main-footer** - Footer to display inline below the main content.
    * - **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.
    * - **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.
+   * - **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.
    * - **footer** - The content to display in the footer. This is always displayed underneath the viewport so will always make the page "scrollable".
    *
    * ### **CSS Properties:**

package/dist/bundled/types/vue/index.d.ts

@@ -366,7 +366,7 @@ type CsAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: CsAnimation["name"];
   /** Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when
-the animation finishes or gets canceled. */
+the animation finishes or gets canceled. To play it again from the start, call `restart()`. */
   play?: CsAnimation["play"];
   /** The number of milliseconds to delay the start of the animation. */
   delay?: CsAnimation["delay"];
@@ -1024,8 +1024,8 @@ includes the label before the component hydrates on the client. */
   /** Only required for SSR. Set to `true` if you're slotting in a `hint` element so the server-rendered markup
 includes the hint before the component hydrates on the client. */
   "ssr-hint"?: CsColorPicker["ssrHint"];
-  /** The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to
-display HTML, you can use the `label` slot` instead. */
+  /** The color picker's label. It is displayed with the trigger and gives the trigger its accessible name. If you need to
+display HTML, use the `label` slot instead. */
   label?: CsColorPicker["label"];
   /** The color picker's hint. If you need to display HTML, use the `hint` slot instead. */
   hint?: CsColorPicker["hint"];
@@ -1054,7 +1054,14 @@ can use the `show()` and `hide()` methods and this attribute will reflect the po
 picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a
 semicolon (`;`). Alternatively, you can pass an array of color values or an array of `{ color, label }` objects to
 this property using JavaScript. When using objects with labels, the label will be used for the swatch's accessible
-name instead of the raw color value. */
+name instead of the raw color value.
+
+A swatch can also be a design token, written as `var(--cs-name)` or `var(--cs-name, fallback)`, in any of these
+forms. The picker resolves it against its own computed style each time it opens, so a theme set on any ancestor
+applies, and selecting the swatch sets the resolved color in the picker's `format`. A swatch that doesn't resolve to
+a color the picker can parse is skipped, as is a `var()` of any custom property outside `--cs-*`. Without a label,
+a `var()` swatch is named after its custom property, so `var(--cs-color-brand-fill-loud)` is announced as "brand
+fill loud". */
   swatches?: CsColorPicker["swatches"];
   /** Makes the color picker a required field. */
   required?: CsColorPicker["required"];
@@ -3578,6 +3585,12 @@ export type CustomElements = {
    * ### **Methods:**
    *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
    * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   * - **restart()** - Rewinds the animation to the start and plays it, whether it has finished, been canceled, been paused or is still
+   * running. Each restart is a new run: the delay and every iteration play again as the current options describe them,
+   * `play` is set to `true`, and `cs-start` is emitted. The run it interrupts emits neither `cs-cancel` nor `cs-finish`.
+   * If the animation doesn't exist yet, for example because nothing is slotted, it starts as soon as it does.
+   * Changing an option such as `duration` while the animation plays also starts a new run, so changing one in the same
+   * tick as `restart()` emits `cs-start` twice.
    *
    * ### **Slots:**
    *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<cs-animation>` elements.
@@ -4172,12 +4185,12 @@ export type CustomElements = {
    * ### **CSS Properties:**
    *  - **--color** - The color of the divider. _(default: undefined)_
    * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
+   * - **--spacing** - 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. _(default: undefined)_
    */
   "cs-divider": DefineComponent<CsDividerProps>;
 
   /**
-   * Drawers slide in from the edge of a container to expose additional options and information without
+   * Drawers slide in from an edge of the viewport to expose additional options and information without
    * navigating away. Useful for navigation menus, filters, and secondary content.
    * ---
    *
@@ -4614,12 +4627,19 @@ export type CustomElements = {
    * - **navigation-header** - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.
    * - **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.
    * - **navigation-footer** - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.
+   * - **desktop-navigation-header** - The sidebar's header on desktop, in place of `navigation-header`. On mobile, `<cs-drawer>` still shows `navigation-header`.
+   * - **desktop-navigation** - The sidebar's content on desktop, in place of `navigation`. On mobile, `<cs-drawer>` still shows `navigation`.
+   * - **desktop-navigation-footer** - The sidebar's footer on desktop, in place of `navigation-footer`. On mobile, `<cs-drawer>` still shows `navigation-footer`.
+   * - **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.
+   * - **mobile-navigation** - The content of `<cs-drawer>` on mobile, in place of `navigation`. On desktop, the sidebar still shows `navigation`.
+   * - **mobile-navigation-footer** - The footer for `<cs-drawer>` on mobile, in place of `navigation-footer`. On desktop, the sidebar still shows `navigation-footer`.
    * - **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>`
    * - **navigation-toggle-icon** - Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars `<cs-icon>`.
    * - **main-header** - Header to display inline above the main content.
    * - **main-footer** - Footer to display inline below the main content.
    * - **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.
    * - **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.
+   * - **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.
    * - **footer** - The content to display in the footer. This is always displayed underneath the viewport so will always make the page "scrollable".
    *
    * ### **CSS Properties:**

package/dist/bundled/utilities/animation.js

@@ -1,10 +1,10 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import "../chunks/chunk.Z5IBFIUX.js";
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import "../chunks/chunk.3HZEFFM5.js";
 import {
   getAnimationNames,
   getEasingNames
-} from "../chunks/chunk.CVRSRK6H.js";
-import "../chunks/chunk.QQCENPXN.js";
+} from "../chunks/chunk.6BPSQM77.js";
+import "../chunks/chunk.4QJR2RKX.js";
 export {
   getAnimationNames,
   getEasingNames

package/dist/bundled/utilities/autoloader.js

@@ -1,12 +1,12 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   discover,
   preventTurboFouce,
   startLoader,
   stopLoader
-} from "../chunks/chunk.O637MP3W.js";
-import "../chunks/chunk.WI4KFPQA.js";
-import "../chunks/chunk.QQCENPXN.js";
+} from "../chunks/chunk.ELMAERKS.js";
+import "../chunks/chunk.7CX7TYXB.js";
+import "../chunks/chunk.4QJR2RKX.js";
 export {
   discover,
   preventTurboFouce,

package/dist/bundled/utilities/base-path.js

@@ -1,11 +1,11 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   getBasePath,
   getIconPath,
   setBasePath,
   setIconPath
-} from "../chunks/chunk.WI4KFPQA.js";
-import "../chunks/chunk.QQCENPXN.js";
+} from "../chunks/chunk.7CX7TYXB.js";
+import "../chunks/chunk.4QJR2RKX.js";
 export {
   getBasePath,
   getIconPath,

package/dist/bundled/utilities/clone.js

@@ -1,5 +1,5 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import "../chunks/chunk.QQCENPXN.js";
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import "../chunks/chunk.4QJR2RKX.js";
 
 // src/utilities/clone.ts
 function deepClone(value, seen = /* @__PURE__ */ new WeakMap()) {

package/dist/bundled/utilities/defined.js

@@ -1,8 +1,8 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   allDefined
-} from "../chunks/chunk.PWDONGWF.js";
-import "../chunks/chunk.QQCENPXN.js";
+} from "../chunks/chunk.FI73GLIY.js";
+import "../chunks/chunk.4QJR2RKX.js";
 export {
   allDefined
 };

package/dist/bundled/utilities/form.js

@@ -1,8 +1,8 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   serialize
-} from "../chunks/chunk.WHPMQ7KH.js";
-import "../chunks/chunk.QQCENPXN.js";
+} from "../chunks/chunk.W7R2V5IZ.js";
+import "../chunks/chunk.4QJR2RKX.js";
 export {
   serialize
 };

package/dist/bundled/utilities/localize.js

@@ -1,12 +1,12 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
 import {
   LocalizeController
-} from "../chunks/chunk.QUVFD4CZ.js";
-import "../chunks/chunk.PRD3XZ4M.js";
+} from "../chunks/chunk.HGW5EEZU.js";
+import "../chunks/chunk.5KDJHYSM.js";
 import {
   registerTranslation
-} from "../chunks/chunk.FFJLVZKJ.js";
-import "../chunks/chunk.QQCENPXN.js";
+} from "../chunks/chunk.H6NVWX7V.js";
+import "../chunks/chunk.4QJR2RKX.js";
 export {
   LocalizeController,
   registerTranslation

package/dist/bundled/utilities/ssr-hydration.js

@@ -1,7 +1,7 @@
-/*! Cornerstone Components 0.6.2 - MIT licensed. See LICENSE.md and NOTICE. */
-import "../chunks/chunk.CE753ISO.js";
-import "../chunks/chunk.AEGNXCBX.js";
-import "../chunks/chunk.TGBJR2G4.js";
-import "../chunks/chunk.VYYRMD7E.js";
-import "../chunks/chunk.B2T6AD2P.js";
-import "../chunks/chunk.QQCENPXN.js";
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import "../chunks/chunk.ZX7BSQPM.js";
+import "../chunks/chunk.PLO7CA2D.js";
+import "../chunks/chunk.PWXDOHGL.js";
+import "../chunks/chunk.BBFIYGZZ.js";
+import "../chunks/chunk.IPM67WBE.js";
+import "../chunks/chunk.4QJR2RKX.js";

package/dist/bundled/vscode.html-custom-data.json

@@ -342,7 +342,7 @@
     },
     {
       "name": "cs-animation",
-      "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.\nPowered by the Web Animations API.\n---\n\n\n### **Events:**\n - **cs-cancel** - Emitted when the animation is canceled.\n- **cs-finish** - Emitted when the animation finishes.\n- **cs-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<cs-animation>` elements.",
+      "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.\nPowered by the Web Animations API.\n---\n\n\n### **Events:**\n - **cs-cancel** - Emitted when the animation is canceled.\n- **cs-finish** - Emitted when the animation finishes.\n- **cs-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n- **restart()** - 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.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<cs-animation>` elements.",
       "attributes": [
         {
           "name": "name",
@@ -351,7 +351,7 @@
         },
         {
           "name": "play",
-          "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()`.",
           "values": []
         },
         {
@@ -1418,7 +1418,7 @@
         },
         {
           "name": "label",
-          "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.",
           "values": []
         },
         {
@@ -1497,7 +1497,7 @@
         },
         {
           "name": "swatches",
-          "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\".",
           "values": [
             { "name": "string[]" },
             { "name": "{ color: string, label: string }[]" }
@@ -1771,7 +1771,7 @@
     },
     {
       "name": "cs-divider",
-      "description": "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.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
+      "description": "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.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - 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. _(default: undefined)_",
       "attributes": [
         {
           "name": "orientation",
@@ -1791,7 +1791,7 @@
     },
     {
       "name": "cs-drawer",
-      "description": "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.\n---\n\n\n### **Events:**\n - **cs-show** - Emitted when the drawer opens.\n- **cs-after-show** - Emitted after the drawer opens and all animations are complete.\n- **cs-hide** - Emitted when the drawer is requesting to close. Calling `event.preventDefault()` will prevent the drawer from closing. You can inspect `event.detail.source` to see which element caused the drawer to close. If the source is the drawer element itself, the user has pressed [[Escape]] or the drawer has been closed programmatically. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n- **cs-after-hide** - Emitted after the drawer closes and all animations are complete.\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<cs-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--spacing** - The amount of space around and between the drawer's content. _(default: undefined)_\n- **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--backdrop-filter** - A filter to apply to the backdrop behind the drawer. _(default: none)_\n- **--show-duration** - The animation duration when showing the drawer. _(default: var(--cs-transition-normal))_\n- **--hide-duration** - The animation duration when hiding the drawer. _(default: var(--cs-transition-normal))_\n\n### **CSS Parts:**\n - **dialog** - The drawer's internal `<dialog>` element.\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<cs-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, a `<cs-button>`.\n- **close-button__button** - The close button's exported `button` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
+      "description": "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.\n---\n\n\n### **Events:**\n - **cs-show** - Emitted when the drawer opens.\n- **cs-after-show** - Emitted after the drawer opens and all animations are complete.\n- **cs-hide** - Emitted when the drawer is requesting to close. Calling `event.preventDefault()` will prevent the drawer from closing. You can inspect `event.detail.source` to see which element caused the drawer to close. If the source is the drawer element itself, the user has pressed [[Escape]] or the drawer has been closed programmatically. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n- **cs-after-hide** - Emitted after the drawer closes and all animations are complete.\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<cs-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--spacing** - The amount of space around and between the drawer's content. _(default: undefined)_\n- **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--backdrop-filter** - A filter to apply to the backdrop behind the drawer. _(default: none)_\n- **--show-duration** - The animation duration when showing the drawer. _(default: var(--cs-transition-normal))_\n- **--hide-duration** - The animation duration when hiding the drawer. _(default: var(--cs-transition-normal))_\n\n### **CSS Parts:**\n - **dialog** - The drawer's internal `<dialog>` element.\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<cs-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, a `<cs-button>`.\n- **close-button__button** - The close button's exported `button` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
       "attributes": [
         {
           "name": "open",
@@ -1986,7 +1986,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).",
           "values": [
             {
-              "name": "{ 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: {  } }"
+              "name": "{ 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: {  } }"
             }
           ]
         },
@@ -2876,7 +2876,7 @@
     },
     {
       "name": "cs-page",
-      "description": "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.\n---\n\n\n### **Methods:**\n - **visiblePixelsInViewport(element: _HTMLElement | null_)** - https://stackoverflow.com/a/26831113\nThis prevents awkward gaps when scrolling the page and the aside / menu don't \"fill\" the gaps.\n- **showNavigation()** - Shows the mobile navigation drawer\n- **hideNavigation()** - Hides the mobile navigation drawer\n- **toggleNavigation()** - Toggles the mobile navigation drawer\n\n### **Slots:**\n - _default_ - The page's main content.\n- **banner** - The banner that gets display above the header. The banner will not be shown if no content is provided.\n- **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- **subheader** - A subheader to display below the `header`. This is a good place to put things like breadcrumbs.\n- **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- **navigation-header** - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.\n- **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- **navigation-footer** - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.\n- **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- **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- **main-header** - Header to display inline above the main content.\n- **main-footer** - Footer to display inline below the main content.\n- **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- **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- **footer** - The content to display in the footer. This is always displayed underneath the viewport so will always make the page \"scrollable\".\n\n### **CSS Properties:**\n - **--menu-width** - The width of the page's \"menu\" section. _(default: auto)_\n- **--main-width** - The width of the page's \"main\" section. _(default: 1fr)_\n- **--aside-width** - The wide of the page's \"aside\" section. _(default: auto)_\n- **--banner-height** - 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. _(default: 0px)_\n- **--header-height** - 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. _(default: 0px)_\n- **--subheader-height** - 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. _(default: 0px)_\n\n### **CSS Parts:**\n - **page** - The component's outer wrapper.\n- **banner** - The banner to show above header.\n- **header** - The header, usually for top level navigation / branding.\n- **subheader** - Shown below the header, usually intended for things like breadcrumbs and other page level navigation.\n- **body** - The wrapper around menu, main, and aside.\n- **menu** - The left hand side of the page. Generally intended for navigation.\n- **navigation** - The `<nav>` that wraps the navigation slots on desktop viewports.\n- **navigation-desktop** - The `<nav>` for navigation on desktop viewports.\n- **navigation-header** - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.\n- **navigation-footer** - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.\n- **navigation-toggle** - The default `<cs-button>` that will toggle the `<cs-drawer>` for mobile viewports.\n- **navigation-toggle-icon** - The default `<cs-icon>` displayed inside of the navigation-toggle button.\n- **drawer** - The `<cs-drawer>` that contains the navigation on mobile viewports.\n- **drawer__dialog** - The navigation drawer's `dialog` part.\n- **drawer__header** - The navigation drawer's `header` part.\n- **drawer__header-actions** - The navigation drawer's `header-actions` part.\n- **drawer__title** - The navigation drawer's `title` part.\n- **drawer__close-button** - The navigation drawer's close button.\n- **drawer__close-button__button** - The navigation drawer's close button's `button` part.\n- **drawer__body** - The navigation drawer's `body` part.\n- **drawer__footer** - The navigation drawer's `footer` part.\n- **main** - The wrapper around the main header, content, and footer.\n- **main-header** - The header above main content.\n- **main-content** - The main content.\n- **main-footer** - The footer below main content.\n- **aside** - The right hand side of the page. Used for things like table of contents, ads, etc.\n- **skip-to-content** - The \"skip to content\" link that lets keyboard users bypass navigation.\n- **footer** - The footer of the page. This is always below the initial viewport size.",
+      "description": "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.\n---\n\n\n### **Methods:**\n - **visiblePixelsInViewport(element: _HTMLElement | null_)** - https://stackoverflow.com/a/26831113\nThis prevents awkward gaps when scrolling the page and the aside / menu don't \"fill\" the gaps.\n- **showNavigation()** - Shows the mobile navigation drawer\n- **hideNavigation()** - Hides the mobile navigation drawer\n- **toggleNavigation()** - Toggles the mobile navigation drawer\n\n### **Slots:**\n - _default_ - The page's main content.\n- **banner** - The banner that gets display above the header. The banner will not be shown if no content is provided.\n- **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- **subheader** - A subheader to display below the `header`. This is a good place to put things like breadcrumbs.\n- **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- **navigation-header** - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.\n- **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- **navigation-footer** - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.\n- **desktop-navigation-header** - The sidebar's header on desktop, in place of `navigation-header`. On mobile, `<cs-drawer>` still shows `navigation-header`.\n- **desktop-navigation** - The sidebar's content on desktop, in place of `navigation`. On mobile, `<cs-drawer>` still shows `navigation`.\n- **desktop-navigation-footer** - The sidebar's footer on desktop, in place of `navigation-footer`. On mobile, `<cs-drawer>` still shows `navigation-footer`.\n- **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- **mobile-navigation** - The content of `<cs-drawer>` on mobile, in place of `navigation`. On desktop, the sidebar still shows `navigation`.\n- **mobile-navigation-footer** - The footer for `<cs-drawer>` on mobile, in place of `navigation-footer`. On desktop, the sidebar still shows `navigation-footer`.\n- **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- **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- **main-header** - Header to display inline above the main content.\n- **main-footer** - Footer to display inline below the main content.\n- **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- **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- **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- **footer** - The content to display in the footer. This is always displayed underneath the viewport so will always make the page \"scrollable\".\n\n### **CSS Properties:**\n - **--menu-width** - The width of the page's \"menu\" section. _(default: auto)_\n- **--main-width** - The width of the page's \"main\" section. _(default: 1fr)_\n- **--aside-width** - The wide of the page's \"aside\" section. _(default: auto)_\n- **--banner-height** - 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. _(default: 0px)_\n- **--header-height** - 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. _(default: 0px)_\n- **--subheader-height** - 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. _(default: 0px)_\n\n### **CSS Parts:**\n - **page** - The component's outer wrapper.\n- **banner** - The banner to show above header.\n- **header** - The header, usually for top level navigation / branding.\n- **subheader** - Shown below the header, usually intended for things like breadcrumbs and other page level navigation.\n- **body** - The wrapper around menu, main, and aside.\n- **menu** - The left hand side of the page. Generally intended for navigation.\n- **navigation** - The `<nav>` that wraps the navigation slots on desktop viewports.\n- **navigation-desktop** - The `<nav>` for navigation on desktop viewports.\n- **navigation-header** - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.\n- **navigation-footer** - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.\n- **navigation-toggle** - The default `<cs-button>` that will toggle the `<cs-drawer>` for mobile viewports.\n- **navigation-toggle-icon** - The default `<cs-icon>` displayed inside of the navigation-toggle button.\n- **drawer** - The `<cs-drawer>` that contains the navigation on mobile viewports.\n- **drawer__dialog** - The navigation drawer's `dialog` part.\n- **drawer__header** - The navigation drawer's `header` part.\n- **drawer__header-actions** - The navigation drawer's `header-actions` part.\n- **drawer__title** - The navigation drawer's `title` part.\n- **drawer__close-button** - The navigation drawer's close button.\n- **drawer__close-button__button** - The navigation drawer's close button's `button` part.\n- **drawer__body** - The navigation drawer's `body` part.\n- **drawer__footer** - The navigation drawer's `footer` part.\n- **main** - The wrapper around the main header, content, and footer.\n- **main-header** - The header above main content.\n- **main-content** - The main content.\n- **main-footer** - The footer below main content.\n- **aside** - The right hand side of the page. Used for things like table of contents, ads, etc.\n- **skip-to-content** - The \"skip to content\" link that lets keyboard users bypass navigation.\n- **footer** - The footer of the page. This is always below the initial viewport size.",
       "attributes": [
         {
           "name": "view",
@@ -3373,7 +3373,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).",
           "values": [
             {
-              "name": "{ 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: {  } }"
+              "name": "{ 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: {  } }"
             }
           ]
         },