@cruglobal/cornerstone-components 0.6.1 → 0.7.0

package/dist/unbundled/cornerstone.js

@@ -1,47 +1,47 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import "./chunks/chunk.CMV4SKUA.js";
-import "./chunks/chunk.YBSGFX35.js";
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import "./chunks/chunk.KNKAL7PC.js";
+import "./chunks/chunk.WSJY5HJZ.js";
+import "./chunks/chunk.3HZEFFM5.js";
 import {
   discover,
   preventTurboFouce,
   startLoader,
   stopLoader
-} from "./chunks/chunk.VD4SWEXQ.js";
+} from "./chunks/chunk.ELMAERKS.js";
 import {
   allDefined
-} from "./chunks/chunk.SZBZBSWR.js";
+} from "./chunks/chunk.FI73GLIY.js";
 import {
   serialize
-} from "./chunks/chunk.B3FMBUUY.js";
-import "./chunks/chunk.ACPMHJAI.js";
+} from "./chunks/chunk.W7R2V5IZ.js";
 import {
   getAnimationNames,
   getEasingNames
-} from "./chunks/chunk.TUMOBTES.js";
+} from "./chunks/chunk.4QK6UVHJ.js";
 import {
   registerTranslation
-} from "./chunks/chunk.V3OJKPQZ.js";
-import "./chunks/chunk.D7BHLZNU.js";
+} from "./chunks/chunk.N7QTQOAR.js";
+import "./chunks/chunk.CG2W46XZ.js";
 import {
   getDefaultIconFamily,
   registerIconLibrary,
   setDefaultIconFamily,
   unregisterIconLibrary
-} from "./chunks/chunk.5SB535WG.js";
-import "./chunks/chunk.ZKPECPPZ.js";
+} from "./chunks/chunk.TN255ITC.js";
+import "./chunks/chunk.A6PE2BDS.js";
 import {
   getIconFileName,
   getIconStyle,
   getIconWeight
-} from "./chunks/chunk.NWV3U6VD.js";
+} from "./chunks/chunk.RW2GBP4G.js";
 import {
   getBasePath,
   getIconPath,
   setBasePath,
   setIconPath
-} from "./chunks/chunk.AF4NWEDF.js";
-import "./chunks/chunk.BG6YAMWP.js";
-import "./chunks/chunk.LOD6ZXF2.js";
+} from "./chunks/chunk.7CX7TYXB.js";
+import "./chunks/chunk.F3TEYKB3.js";
+import "./chunks/chunk.HWQS6OLV.js";
 export {
   allDefined,
   discover,

package/dist/unbundled/cornerstone.loader.js

@@ -1,48 +1,48 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import "./chunks/chunk.OJIHSUCM.js";
-import "./chunks/chunk.CMV4SKUA.js";
-import "./chunks/chunk.YBSGFX35.js";
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import "./chunks/chunk.ZOCVZ23Q.js";
+import "./chunks/chunk.KNKAL7PC.js";
+import "./chunks/chunk.WSJY5HJZ.js";
+import "./chunks/chunk.3HZEFFM5.js";
 import {
   discover,
   preventTurboFouce,
   startLoader,
   stopLoader
-} from "./chunks/chunk.VD4SWEXQ.js";
+} from "./chunks/chunk.ELMAERKS.js";
 import {
   allDefined
-} from "./chunks/chunk.SZBZBSWR.js";
+} from "./chunks/chunk.FI73GLIY.js";
 import {
   serialize
-} from "./chunks/chunk.B3FMBUUY.js";
-import "./chunks/chunk.ACPMHJAI.js";
+} from "./chunks/chunk.W7R2V5IZ.js";
 import {
   getAnimationNames,
   getEasingNames
-} from "./chunks/chunk.TUMOBTES.js";
+} from "./chunks/chunk.4QK6UVHJ.js";
 import {
   registerTranslation
-} from "./chunks/chunk.V3OJKPQZ.js";
-import "./chunks/chunk.D7BHLZNU.js";
+} from "./chunks/chunk.N7QTQOAR.js";
+import "./chunks/chunk.CG2W46XZ.js";
 import {
   getDefaultIconFamily,
   registerIconLibrary,
   setDefaultIconFamily,
   unregisterIconLibrary
-} from "./chunks/chunk.5SB535WG.js";
-import "./chunks/chunk.ZKPECPPZ.js";
+} from "./chunks/chunk.TN255ITC.js";
+import "./chunks/chunk.A6PE2BDS.js";
 import {
   getIconFileName,
   getIconStyle,
   getIconWeight
-} from "./chunks/chunk.NWV3U6VD.js";
+} from "./chunks/chunk.RW2GBP4G.js";
 import {
   getBasePath,
   getIconPath,
   setBasePath,
   setIconPath
-} from "./chunks/chunk.AF4NWEDF.js";
-import "./chunks/chunk.BG6YAMWP.js";
-import "./chunks/chunk.LOD6ZXF2.js";
+} from "./chunks/chunk.7CX7TYXB.js";
+import "./chunks/chunk.F3TEYKB3.js";
+import "./chunks/chunk.HWQS6OLV.js";
 export {
   allDefined,
   discover,

package/dist/unbundled/cornerstone.ssr-loader.js

@@ -1,48 +1,48 @@
-/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
-import "./chunks/chunk.OJIHSUCM.js";
-import "./chunks/chunk.CMV4SKUA.js";
-import "./chunks/chunk.YBSGFX35.js";
+/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import "./chunks/chunk.ZOCVZ23Q.js";
+import "./chunks/chunk.KNKAL7PC.js";
+import "./chunks/chunk.WSJY5HJZ.js";
+import "./chunks/chunk.3HZEFFM5.js";
 import {
   discover,
   preventTurboFouce,
   startLoader,
   stopLoader
-} from "./chunks/chunk.VD4SWEXQ.js";
+} from "./chunks/chunk.ELMAERKS.js";
 import {
   allDefined
-} from "./chunks/chunk.SZBZBSWR.js";
+} from "./chunks/chunk.FI73GLIY.js";
 import {
   serialize
-} from "./chunks/chunk.B3FMBUUY.js";
-import "./chunks/chunk.ACPMHJAI.js";
+} from "./chunks/chunk.W7R2V5IZ.js";
 import {
   getAnimationNames,
   getEasingNames
-} from "./chunks/chunk.TUMOBTES.js";
+} from "./chunks/chunk.4QK6UVHJ.js";
 import {
   registerTranslation
-} from "./chunks/chunk.V3OJKPQZ.js";
-import "./chunks/chunk.D7BHLZNU.js";
+} from "./chunks/chunk.N7QTQOAR.js";
+import "./chunks/chunk.CG2W46XZ.js";
 import {
   getDefaultIconFamily,
   registerIconLibrary,
   setDefaultIconFamily,
   unregisterIconLibrary
-} from "./chunks/chunk.5SB535WG.js";
-import "./chunks/chunk.ZKPECPPZ.js";
+} from "./chunks/chunk.TN255ITC.js";
+import "./chunks/chunk.A6PE2BDS.js";
 import {
   getIconFileName,
   getIconStyle,
   getIconWeight
-} from "./chunks/chunk.NWV3U6VD.js";
+} from "./chunks/chunk.RW2GBP4G.js";
 import {
   getBasePath,
   getIconPath,
   setBasePath,
   setIconPath
-} from "./chunks/chunk.AF4NWEDF.js";
-import "./chunks/chunk.BG6YAMWP.js";
-import "./chunks/chunk.LOD6ZXF2.js";
+} from "./chunks/chunk.7CX7TYXB.js";
+import "./chunks/chunk.F3TEYKB3.js";
+import "./chunks/chunk.HWQS6OLV.js";
 
 // src/cornerstone.ssr-loader.ts
 import "@lit-labs/ssr-client/lit-element-hydrate-support.js";

package/dist/unbundled/custom-elements-jsx.d.ts

@@ -929,7 +929,7 @@ export 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"];
@@ -992,7 +992,7 @@ export type CsAnimationSolidJsProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   "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()`. */
   "prop:play"?: CsAnimation["play"];
   /** The number of milliseconds to delay the start of the animation. */
   "prop:delay"?: CsAnimation["delay"];
@@ -2533,8 +2533,8 @@ includes the hint 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. */
   ssrHint?: 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"];
@@ -2565,7 +2565,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"];
@@ -2651,8 +2658,8 @@ includes the hint 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. */
   "prop:ssrHint"?: 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. */
   "prop:label"?: CsColorPicker["label"];
   /** The color picker's hint. If you need to display HTML, use the `hint` slot instead. */
   "prop:hint"?: CsColorPicker["hint"];
@@ -2683,7 +2690,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". */
   "prop:swatches"?: CsColorPicker["swatches"];
   /** Makes the color picker a required field. */
   "prop:required"?: CsColorPicker["required"];
@@ -8299,7 +8313,7 @@ export type CustomElements = {
    *
    * - `name`: The name of the built-in animation to use. For custom animations, use the `keyframes` prop.
    * - `play`: 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()`.
    * - `delay`: The number of milliseconds to delay the start of the animation.
    * - `direction`: Determines the direction of playback as well as the behavior when reaching the end of an iteration.
    * [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
@@ -8345,6 +8359,12 @@ export type CustomElements = {
    * - `handlePlaybackRateChange() => void`: undefined
    * - `cancel() => void`: Clears all keyframe effects caused by this animation and aborts its playback.
    * - `finish() => void`: Sets the playback time to the end of the animation corresponding to the current playback direction.
+   * - `restart() => void`: 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.
    */
   "cs-animation": Partial<
     CsAnimationProps & BaseProps<CsAnimation> & BaseEvents
@@ -9226,8 +9246,8 @@ export type CustomElements = {
    * includes the label before the component hydrates on the client.
    * - `ssr-hint`/`ssrHint`: 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.
-   * - `label`: 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.
+   * - `label`: 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.
    * - `hint`: The color picker's hint. If you need to display HTML, use the `hint` slot instead.
    * - `format`: The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
    * picker will accept user input in any format (including CSS color names) and convert it to the desired format.
@@ -9246,6 +9266,13 @@ export type CustomElements = {
    * 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.
+   *
+   * 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".
    * - `required`: Makes the color picker a required field.
    * - `custom-error`/`customError`: undefined
    * - `dir`: undefined
@@ -9774,7 +9801,7 @@ export type CustomElements = {
    *
    * - `--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<CsDivider> & BaseEvents>;
 
@@ -10874,12 +10901,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".
    *
    * ## Methods
@@ -13192,7 +13226,7 @@ export type CustomElementsSolidJs = {
    *
    * - `name`: The name of the built-in animation to use. For custom animations, use the `keyframes` prop.
    * - `play`: 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()`.
    * - `delay`: The number of milliseconds to delay the start of the animation.
    * - `direction`: Determines the direction of playback as well as the behavior when reaching the end of an iteration.
    * [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
@@ -13238,6 +13272,12 @@ export type CustomElementsSolidJs = {
    * - `handlePlaybackRateChange() => void`: undefined
    * - `cancel() => void`: Clears all keyframe effects caused by this animation and aborts its playback.
    * - `finish() => void`: Sets the playback time to the end of the animation corresponding to the current playback direction.
+   * - `restart() => void`: 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.
    */
   "cs-animation": Partial<
     CsAnimationProps &
@@ -14155,8 +14195,8 @@ export type CustomElementsSolidJs = {
    * includes the label before the component hydrates on the client.
    * - `ssr-hint`/`ssrHint`: 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.
-   * - `label`: 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.
+   * - `label`: 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.
    * - `hint`: The color picker's hint. If you need to display HTML, use the `hint` slot instead.
    * - `format`: The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color
    * picker will accept user input in any format (including CSS color names) and convert it to the desired format.
@@ -14175,6 +14215,13 @@ export type CustomElementsSolidJs = {
    * 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.
+   *
+   * 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".
    * - `required`: Makes the color picker a required field.
    * - `custom-error`/`customError`: undefined
    * - `dir`: undefined
@@ -14718,7 +14765,7 @@ export type CustomElementsSolidJs = {
    *
    * - `--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 & CsDividerSolidJsProps & BaseProps<CsDivider> & BaseEvents
@@ -15869,12 +15916,19 @@ export type CustomElementsSolidJs = {
    * - `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".
    *
    * ## Methods