@cruglobal/cornerstone-components 0.1.1 → 0.1.3

package/dist/unbundled/custom-elements.json

@@ -804,10 +804,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Icons are scalable vector symbols that represent actions, content, or status throughout your application.\nThey support Material Symbols and custom icon libraries with animation presets.",
-          "jsDoc": "/**\n * @summary Icons are scalable vector symbols that represent actions, content, or status throughout your application.\n *  They support Material Symbols and custom icon libraries with animation presets.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/icon\n * @status stable\n * @since 2.0\n *\n * @event cs-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event cs-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The `<use>` element generated when using `spriteSheet: true`\n *\n * @cssproperty [--icon-scale=1.2] Scales the icon artwork within its canvas without changing the canvas itself.\n *  Material Symbols pads each icon into a 24dp box with a 20dp live area; the default of 1.2 (24 / 20) cancels that\n *  padding. Set it to 1 to render the artwork at its native size. It inherits, so it can be set on any ancestor.\n * @cssproperty [--animation-delay=0] Sets when the animation will start.\n * @cssproperty [--animation-direction=normal] Defines whether or not the animation should play in reverse on alternate cycles.\n * @cssproperty [--animation-duration=1s] Defines the length of time that an animation takes to complete one cycle.\n * @cssproperty [--animation-iteration-count=infinite] Defines the number of times an animation cycle is played.\n * @cssproperty [--animation-timing] Describes how the animation will progress over one cycle of its duration.\n * @cssproperty [--beat-fade-opacity] Set lowest opacity value an icon with `beat-fade` animation will fade to and from.\n * @cssproperty [--beat-fade-scale] Set max value that an icon with `beat-fade` animation will scale.\n * @cssproperty [--beat-scale] Set the scale multiplier for an icon with `beat` animation. This multiplies the animation's 1.25× base pulse, so the default `1.25` peaks at ~1.56× and `2` roughly doubles the pulse.\n * @cssproperty [--bounce-height] Set the max height an icon with `bounce` animation will jump to when bouncing.\n * @cssproperty [--bounce-jump-scale-x] Set the icon’s horizontal distortion (“squish”) at the top of the jump.\n * @cssproperty [--bounce-jump-scale-y] Set the icon’s vertical distortion (“squish”) at the top of the jump.\n * @cssproperty [--bounce-land-scale-x] Set the icon’s horizontal distortion (“squish”) when landing after the jump.\n * @cssproperty [--bounce-land-scale-y] Set the icon’s vertical distortion (“squish”) when landing after the jump.\n * @cssproperty [--bounce-rebound] Set the amount of rebound an icon with `bounce` animation has when landing after the jump.\n * @cssproperty [--bounce-start-scale-x] Set the icon’s horizontal distortion (“squish”) when starting to bounce.\n * @cssproperty [--bounce-start-scale-y] Set the icon’s vertical distortion (“squish”) when starting to bounce.\n * @cssproperty [--fade-opacity] Set lowest opacity value an icon with `fade` animation will fade to and from.\n * @cssproperty [--flip-angle] Set rotation angle of flip for an icon with `flip` or `flip-360` animation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.\n * @cssproperty [--flip-x] Set x-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` or `flip-360` animation.\n * @cssproperty [--flip-y] Set y-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` or `flip-360` animation.\n * @cssproperty [--flip-z] Set z-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` or `flip-360` animation.\n * @cssproperty [--flip-anticipation-scale] Set the scale of the wind-up before an icon with `flip` or `flip-360` animation rotates.\n * @cssproperty [--flip-overshoot] Set how far past the final angle an icon with `flip` or `flip-360` animation rotates before settling.\n * @cssproperty [--bounce-anticipation] Set the downward squash distance before an icon with `bounce` animation jumps.\n * @cssproperty [--buzz-distance] Set the horizontal travel of an icon with `buzz` animation.\n * @cssproperty [--wag-angle] Set the peak rotation of an icon with `wag` animation.\n * @cssproperty [--swing-angle] Set the peak rotation of an icon with `swing` animation.\n * @cssproperty [--jello-scale-x] Set the horizontal stretch of an icon with `jello` animation.\n * @cssproperty [--jello-scale-y] Set the vertical stretch of an icon with `jello` animation.\n * @cssproperty [--float-height] Set the rise height of an icon with `float` animation.\n * @cssproperty [--float-drift] Set the horizontal drift of an icon with `float` animation.\n * @cssproperty [--float-tilt] Set the rotation of an icon with `float` animation.\n * @cssproperty [--float-squash-x] Set the horizontal squash of an icon with `float` animation at rest.\n * @cssproperty [--float-squash-y] Set the vertical squash of an icon with `float` animation at rest.\n * @cssproperty [--float-stretch-x] Set the horizontal stretch of an icon with `float` animation at its peak.\n * @cssproperty [--float-stretch-y] Set the vertical stretch of an icon with `float` animation at its peak.\n */",
+          "jsDoc": "/**\n * @summary Icons are scalable vector symbols that represent actions, content, or status throughout your application.\n *  They support Material Symbols and custom icon libraries with animation presets.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/icon\n * @status stable\n * @since 0.1\n *\n * @event cs-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event cs-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The `<use>` element generated when using `spriteSheet: true`\n *\n * @cssproperty [--icon-scale=1.2] Scales the icon artwork within its canvas without changing the canvas itself.\n *  Material Symbols pads each icon into a 24dp box with a 20dp live area; the default of 1.2 (24 / 20) cancels that\n *  padding. Set it to 1 to render the artwork at its native size. It inherits, so it can be set on any ancestor.\n * @cssproperty [--animation-delay=0] Sets when the animation will start.\n * @cssproperty [--animation-direction=normal] Defines whether or not the animation should play in reverse on alternate cycles.\n * @cssproperty [--animation-duration=1s] Defines the length of time that an animation takes to complete one cycle.\n * @cssproperty [--animation-iteration-count=infinite] Defines the number of times an animation cycle is played.\n * @cssproperty [--animation-timing] Describes how the animation will progress over one cycle of its duration.\n * @cssproperty [--beat-fade-opacity] Set lowest opacity value an icon with `beat-fade` animation will fade to and from.\n * @cssproperty [--beat-fade-scale] Set max value that an icon with `beat-fade` animation will scale.\n * @cssproperty [--beat-scale] Set the scale multiplier for an icon with `beat` animation. This multiplies the animation's 1.25× base pulse, so the default `1.25` peaks at ~1.56× and `2` roughly doubles the pulse.\n * @cssproperty [--bounce-height] Set the max height an icon with `bounce` animation will jump to when bouncing.\n * @cssproperty [--bounce-jump-scale-x] Set the icon’s horizontal distortion (“squish”) at the top of the jump.\n * @cssproperty [--bounce-jump-scale-y] Set the icon’s vertical distortion (“squish”) at the top of the jump.\n * @cssproperty [--bounce-land-scale-x] Set the icon’s horizontal distortion (“squish”) when landing after the jump.\n * @cssproperty [--bounce-land-scale-y] Set the icon’s vertical distortion (“squish”) when landing after the jump.\n * @cssproperty [--bounce-rebound] Set the amount of rebound an icon with `bounce` animation has when landing after the jump.\n * @cssproperty [--bounce-start-scale-x] Set the icon’s horizontal distortion (“squish”) when starting to bounce.\n * @cssproperty [--bounce-start-scale-y] Set the icon’s vertical distortion (“squish”) when starting to bounce.\n * @cssproperty [--fade-opacity] Set lowest opacity value an icon with `fade` animation will fade to and from.\n * @cssproperty [--flip-angle] Set rotation angle of flip for an icon with `flip` or `flip-360` animation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.\n * @cssproperty [--flip-x] Set x-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` or `flip-360` animation.\n * @cssproperty [--flip-y] Set y-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` or `flip-360` animation.\n * @cssproperty [--flip-z] Set z-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` or `flip-360` animation.\n * @cssproperty [--flip-anticipation-scale] Set the scale of the wind-up before an icon with `flip` or `flip-360` animation rotates.\n * @cssproperty [--flip-overshoot] Set how far past the final angle an icon with `flip` or `flip-360` animation rotates before settling.\n * @cssproperty [--bounce-anticipation] Set the downward squash distance before an icon with `bounce` animation jumps.\n * @cssproperty [--buzz-distance] Set the horizontal travel of an icon with `buzz` animation.\n * @cssproperty [--wag-angle] Set the peak rotation of an icon with `wag` animation.\n * @cssproperty [--swing-angle] Set the peak rotation of an icon with `swing` animation.\n * @cssproperty [--jello-scale-x] Set the horizontal stretch of an icon with `jello` animation.\n * @cssproperty [--jello-scale-y] Set the vertical stretch of an icon with `jello` animation.\n * @cssproperty [--float-height] Set the rise height of an icon with `float` animation.\n * @cssproperty [--float-drift] Set the horizontal drift of an icon with `float` animation.\n * @cssproperty [--float-tilt] Set the rotation of an icon with `float` animation.\n * @cssproperty [--float-squash-x] Set the horizontal squash of an icon with `float` animation at rest.\n * @cssproperty [--float-squash-y] Set the vertical squash of an icon with `float` animation at rest.\n * @cssproperty [--float-stretch-x] Set the horizontal stretch of an icon with `float` animation at its peak.\n * @cssproperty [--float-stretch-y] Set the vertical stretch of an icon with `float` animation at its peak.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/icon",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-icon",
           "customElement": true,
           "modulePath": "components/icon/icon.js",
@@ -1608,9 +1608,13 @@
               "type": {
                 "text": "string"
               }
+            },
+            {
+              "name": "timeout",
+              "default": "5000"
             }
           ],
-          "description": "Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements."
+          "description": "Resolves when `eventName` fires on `el`, or when `timeout` elapses.\n\nBounded deliberately. Every caller is a `show()`, `hide()`, `expand()` or `collapse()` whose completion\nevent is dispatched at the end of an animation — and a browser is entitled not to finish an animation.\nWebKit throttles them on a backgrounded page, and `scrollend`, which the carousel waits on, is not\nguaranteed at all. With no timeout the promise never settles, so the caller's `await` hangs for the life\nof the page instead of failing: `<cs-accordion>`'s `cs-accordion-after-collapse` simply never fires, and\nnothing logs a word. That is what CI hit on WebKit in run #220.\n\nIt resolves rather than rejects. Every caller is a state transition whose state has *already* changed by\nthe time the animation runs — the event only reports that it settled. Rejecting would turn a cosmetic\nstall into an unhandled rejection in eight components.\n\nThe default is far longer than any animation the library runs, because this is a backstop against a\nwedged promise and not a timing mechanism. A caller that needs a tighter bound should pass one."
         }
       ],
       "exports": [
@@ -1809,6 +1813,7 @@
             {
               "kind": "method",
               "name": "handleExpandedChange",
+              "description": "Animates the body open or closed, then announces that the transition settled.\n\nThe generation guard returns *before* dispatching on purpose: a superseded transition must not emit a\ncompletion event, or a consumer sees a collapse that never happened. `rapid toggling > should only fire\nthe final after event when the animation is interrupted` holds that line.\n\nThe cost is that `expand()`/`collapse()` resolve on these events and nothing else, so the superseded\ncaller's promise is never settled here. That is bounded by the timeout in `waitForEvent` rather than by\ndispatching an event that would be a lie — see `internal/event.ts`.",
               "type": {
                 "text": "handleExpandedChange() => void"
               }
@@ -2009,10 +2014,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Accordion items are used inside `<cs-accordion>` to create expandable sections with accessible headers.",
-          "jsDoc": "/**\n * @summary Accordion items are used inside `<cs-accordion>` to create expandable sections with accessible headers.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/accordion\n * @status experimental\n * @since 1.0\n *\n * @dependency cs-icon\n *\n * @slot - The accordion item's body content.\n * @slot label - The accordion item's label. Alternatively, use the `label` attribute.\n * @slot icon - Optional expand/collapse icon. Works best with `<cs-icon>`.\n *\n * @csspart accordion-item - The component's outer wrapper.\n * @csspart heading - The heading element wrapping the trigger button. Omitted when `heading-level=\"none\"`.\n * @csspart button - The trigger button that toggles the panel.\n * @csspart label - The container that wraps the label.\n * @csspart icon - The container that wraps the expand/collapse icon.\n * @csspart panel - The panel that contains the item's content.\n * @csspart content - The content slot inside the panel.\n *\n * @cssproperty [--spacing=var(--cs-space-m)] - The amount of space around and between the item's header and content.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The duration of the expand animation.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The duration of the collapse animation.\n * @cssproperty [--easing=var(--cs-transition-easing)] - The easing of the expand/collapse animation.\n *\n * @cssstate animating - Applied while the panel is animating.\n */",
+          "jsDoc": "/**\n * @summary Accordion items are used inside `<cs-accordion>` to create expandable sections with accessible headers.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/accordion\n * @status experimental\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot - The accordion item's body content.\n * @slot label - The accordion item's label. Alternatively, use the `label` attribute.\n * @slot icon - Optional expand/collapse icon. Works best with `<cs-icon>`.\n *\n * @csspart accordion-item - The component's outer wrapper.\n * @csspart heading - The heading element wrapping the trigger button. Omitted when `heading-level=\"none\"`.\n * @csspart button - The trigger button that toggles the panel.\n * @csspart label - The container that wraps the label.\n * @csspart icon - The container that wraps the expand/collapse icon.\n * @csspart panel - The panel that contains the item's content.\n * @csspart content - The content slot inside the panel.\n *\n * @cssproperty [--spacing=var(--cs-space-m)] - The amount of space around and between the item's header and content.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The duration of the expand animation.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The duration of the collapse animation.\n * @cssproperty [--easing=var(--cs-transition-easing)] - The easing of the expand/collapse animation.\n *\n * @cssstate animating - Applied while the panel is animating.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/accordion",
           "status": "experimental",
-          "since": "1.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -4584,10 +4589,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Checkboxes let users toggle an option on or off, or select multiple items from a list. They also support an\nindeterminate state for partial selections in groups.",
-          "jsDoc": "/**\n * @summary Checkboxes let users toggle an option on or off, or select multiple items from a list. They also support an\n *  indeterminate state for partial selections in groups.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n *\n * @slot - The checkbox's label.\n * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the checkbox loses focus.\n * @event change - Emitted when the checked state changes.\n * @event focus - Emitted when the checkbox gains focus.\n * @event input - Emitted when the checkbox receives input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart checkbox - The component's outer wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart checked-icon - The checked icon, a `<cs-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, a `<cs-icon>` element.\n * @csspart icon - Whichever state icon is currently rendered, checked or indeterminate.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart hint - The hint's wrapper.\n *\n * @cssproperty --checked-icon-color - The color of the checked and indeterminate icons.\n * @cssproperty --checked-icon-scale - The size of the checked and indeterminate icons relative to the checkbox.\n *\n * @cssstate checked - Applied when the checkbox is checked.\n * @cssstate disabled - Applied when the checkbox is disabled.\n * @cssstate indeterminate - Applied when the checkbox is in an indeterminate state.\n *\n */",
+          "jsDoc": "/**\n * @summary Checkboxes let users toggle an option on or off, or select multiple items from a list. They also support an\n *  indeterminate state for partial selections in groups.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/checkbox\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot - The checkbox's label.\n * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the checkbox loses focus.\n * @event change - Emitted when the checked state changes.\n * @event focus - Emitted when the checkbox gains focus.\n * @event input - Emitted when the checkbox receives input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart checkbox - The component's outer wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart checked-icon - The checked icon, a `<cs-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, a `<cs-icon>` element.\n * @csspart icon - Whichever state icon is currently rendered, checked or indeterminate.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart hint - The hint's wrapper.\n *\n * @cssproperty --checked-icon-color - The color of the checked and indeterminate icons.\n * @cssproperty --checked-icon-scale - The size of the checked and indeterminate icons relative to the checkbox.\n *\n * @cssstate checked - Applied when the checkbox is checked.\n * @cssstate disabled - Applied when the checkbox is disabled.\n * @cssstate indeterminate - Applied when the checkbox is in an indeterminate state.\n *\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/checkbox",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -4748,10 +4753,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Spinners indicate that an operation is in progress when the duration is unknown. Use them for loading states\nwhere a determinate progress bar isn't practical.",
-          "jsDoc": "/**\n * @summary Spinners indicate that an operation is in progress when the duration is unknown. Use them for loading states\n *  where a determinate progress bar isn't practical.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart spinner - The component's outer wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */",
+          "jsDoc": "/**\n * @summary Spinners indicate that an operation is in progress when the duration is unknown. Use them for loading states\n *  where a determinate progress bar isn't practical.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/spinner\n * @status stable\n * @since 0.1\n *\n * @csspart spinner - The component's outer wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/spinner",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-spinner",
           "customElement": true,
           "attributes": [
@@ -5453,10 +5458,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Tree items represent a single hierarchical node inside a tree, and can contain nested items that expand and\ncollapse.",
-          "jsDoc": "/**\n * @summary Tree items represent a single hierarchical node inside a tree, and can contain nested items that expand and\n *  collapse.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tree-item\n * @status stable\n * @since 2.0\n *\n * @dependency cs-checkbox\n * @dependency cs-icon\n * @dependency cs-spinner\n *\n * @event cs-expand - Emitted when the tree item expands.\n * @event cs-after-expand - Emitted after the tree item expands and all animations are complete.\n * @event cs-collapse - Emitted when the tree item collapses.\n * @event cs-after-collapse - Emitted after the tree item collapses and all animations are complete.\n * @event cs-lazy-change - Emitted when the tree item's lazy state changes.\n * @event cs-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append\n *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading\n *  state and update the tree.\n *\n * @slot - The default slot.\n * @slot expand-icon - The icon to show when the tree item is expanded.\n * @slot collapse-icon - The icon to show when the tree item is collapsed.\n *\n * @csspart tree-item - The component's outer wrapper.\n * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.\n * @csspart indentation - The tree item's indentation container.\n * @csspart expand-button - The container that wraps the tree item's expand button and spinner.\n * @csspart spinner - The spinner that shows when a lazy tree item is in the loading state.\n * @csspart spinner__spinner - The spinner's exported `spinner` part.\n * @csspart label - The tree item's label.\n * @csspart children - The container that wraps the tree item's nested children.\n * @csspart checkbox - The checkbox that shows when using multiselect.\n * @csspart checkbox__checkbox - The checkbox's exported `checkbox` part.\n * @csspart checkbox__control - The checkbox's exported `control` part.\n * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.\n * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.\n * @csspart checkbox__label - The checkbox's exported `label` part.\n *\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The animation duration when expanding tree items.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The animation duration when collapsing tree items.\n *\n * @cssstate disabled - Applied when the tree item is disabled.\n * @cssstate expanded - Applied when the tree item is expanded.\n * @cssstate indeterminate - Applied when the selection is indeterminate.\n * @cssstate selected - Applied when the tree item is selected.\n */",
+          "jsDoc": "/**\n * @summary Tree items represent a single hierarchical node inside a tree, and can contain nested items that expand and\n *  collapse.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tree-item\n * @status stable\n * @since 0.1\n *\n * @dependency cs-checkbox\n * @dependency cs-icon\n * @dependency cs-spinner\n *\n * @event cs-expand - Emitted when the tree item expands.\n * @event cs-after-expand - Emitted after the tree item expands and all animations are complete.\n * @event cs-collapse - Emitted when the tree item collapses.\n * @event cs-after-collapse - Emitted after the tree item collapses and all animations are complete.\n * @event cs-lazy-change - Emitted when the tree item's lazy state changes.\n * @event cs-lazy-load - Emitted when a lazy item is selected. Use this event to asynchronously load data and append\n *  items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading\n *  state and update the tree.\n *\n * @slot - The default slot.\n * @slot expand-icon - The icon to show when the tree item is expanded.\n * @slot collapse-icon - The icon to show when the tree item is collapsed.\n *\n * @csspart tree-item - The component's outer wrapper.\n * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.\n * @csspart indentation - The tree item's indentation container.\n * @csspart expand-button - The container that wraps the tree item's expand button and spinner.\n * @csspart spinner - The spinner that shows when a lazy tree item is in the loading state.\n * @csspart spinner__spinner - The spinner's exported `spinner` part.\n * @csspart label - The tree item's label.\n * @csspart children - The container that wraps the tree item's nested children.\n * @csspart checkbox - The checkbox that shows when using multiselect.\n * @csspart checkbox__checkbox - The checkbox's exported `checkbox` part.\n * @csspart checkbox__control - The checkbox's exported `control` part.\n * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.\n * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.\n * @csspart checkbox__label - The checkbox's exported `label` part.\n *\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The animation duration when expanding tree items.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The animation duration when collapsing tree items.\n *\n * @cssstate disabled - Applied when the tree item is disabled.\n * @cssstate expanded - Applied when the tree item is expanded.\n * @cssstate indeterminate - Applied when the selection is indeterminate.\n * @cssstate selected - Applied when the tree item is selected.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/tree-item",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-checkbox",
             "cs-icon",
@@ -5669,8 +5674,8 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Carousel items represent individual slides within a carousel.",
-          "jsDoc": "/**\n * @summary Carousel items represent individual slides within a carousel.\n *\n * @since 2.0\n * @status experimental\n *\n * @slot - The carousel item's content..\n *\n * @cssproperty --aspect-ratio - The slide's aspect ratio. Inherited from the carousel by default.\n *\n */",
-          "since": "2.0",
+          "jsDoc": "/**\n * @summary Carousel items represent individual slides within a carousel.\n *\n * @since 0.1\n * @status experimental\n *\n * @slot - The carousel item's content..\n *\n * @cssproperty --aspect-ratio - The slide's aspect ratio. Inherited from the carousel by default.\n *\n */",
+          "since": "0.1",
           "status": "experimental",
           "tagName": "cs-carousel-item",
           "customElement": true,
@@ -7058,10 +7063,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Accordions are a vertically stacked set of interactive headings that each contain a title, representing a section of content.",
-          "jsDoc": "/**\n * @summary Accordions are a vertically stacked set of interactive headings that each contain a title, representing a section of content.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/accordion\n * @status experimental\n * @since 3.7\n *\n * @dependency cs-accordion-item\n *\n * @slot - One or more `<cs-accordion-item>` elements.\n *\n * @event {{ item: CsAccordionItem }} cs-accordion-expand - Emitted before an item expands. Cancelable.\n * @event {{ item: CsAccordionItem }} cs-accordion-after-expand - Emitted after an item finishes expanding.\n * @event {{ item: CsAccordionItem }} cs-accordion-collapse - Emitted before an item collapses. Cancelable.\n * @event {{ item: CsAccordionItem }} cs-accordion-after-collapse - Emitted after an item finishes collapsing.\n */",
+          "jsDoc": "/**\n * @summary Accordions are a vertically stacked set of interactive headings that each contain a title, representing a section of content.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/accordion\n * @status experimental\n * @since 0.1\n *\n * @dependency cs-accordion-item\n *\n * @slot - One or more `<cs-accordion-item>` elements.\n *\n * @event {{ item: CsAccordionItem }} cs-accordion-expand - Emitted before an item expands. Cancelable.\n * @event {{ item: CsAccordionItem }} cs-accordion-after-expand - Emitted after an item finishes expanding.\n * @event {{ item: CsAccordionItem }} cs-accordion-collapse - Emitted before an item collapses. Cancelable.\n * @event {{ item: CsAccordionItem }} cs-accordion-after-collapse - Emitted after an item finishes collapsing.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/accordion",
           "status": "experimental",
-          "since": "3.7",
+          "since": "0.1",
           "dependencies": [
             "cs-accordion-item"
           ],
@@ -7386,10 +7391,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Animated images display GIFs and WEBPs with controls to play and pause them on demand. Use them when you\nwant motion but need to give users control over when it plays.",
-          "jsDoc": "/**\n * @summary Animated images display GIFs and WEBPs with controls to play and pause them on demand. Use them when you\n *  want motion but need to give users control over when it plays.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/animated-image\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n *\n * @event cs-load - Emitted when the image loads successfully.\n * @event cs-error - Emitted when the image fails to load.\n *\n * @slot play-icon - Optional play icon to use instead of the default. Works best with `<cs-icon>`.\n * @slot pause-icon - Optional pause icon to use instead of the default. Works best with `<cs-icon>`.\n *\n * @csspart control-box - The container that surrounds the pause/play icons and provides their background.\n *\n * @cssproperty --control-box-size - The size of the icon box.\n * @cssproperty --icon-size - The size of the play/pause icons.\n *\n * @ssr - Due to browser limitations, `<cs-animated-image>` can't render during SSR. As a fallback you can use a `<video>` tag, but its controls won't work, and the gif or webp will always auto-play.\n */",
+          "jsDoc": "/**\n * @summary Animated images display GIFs and WEBPs with controls to play and pause them on demand. Use them when you\n *  want motion but need to give users control over when it plays.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/animated-image\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @event cs-load - Emitted when the image loads successfully.\n * @event cs-error - Emitted when the image fails to load.\n *\n * @slot play-icon - Optional play icon to use instead of the default. Works best with `<cs-icon>`.\n * @slot pause-icon - Optional pause icon to use instead of the default. Works best with `<cs-icon>`.\n *\n * @csspart control-box - The container that surrounds the pause/play icons and provides their background.\n *\n * @cssproperty --control-box-size - The size of the icon box.\n * @cssproperty --icon-size - The size of the play/pause icons.\n *\n * @ssr - Due to browser limitations, `<cs-animated-image>` can't render during SSR. As a fallback you can use a `<video>` tag, but its controls won't work, and the gif or webp will always auto-play.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/animated-image",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -7916,10 +7921,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.\nPowered by the Web Animations API.",
-          "jsDoc": "/**\n * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.\n *  Powered by the Web Animations API.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/animation\n * @status stable\n * @since 2.0\n *\n * @event cs-cancel - Emitted when the animation is canceled.\n * @event cs-finish - Emitted when the animation finishes.\n * @event cs-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n *  animate multiple elements, either wrap them in a single container or use multiple `<cs-animation>` elements.\n *\n * @ssr - `<cs-animation>` renders during SSR without causing layout shift, but won't play its animation until the component hydrates on the client. Playback is driven by the Web Animations API, which is only available in the browser.\n */",
+          "jsDoc": "/**\n * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.\n *  Powered by the Web Animations API.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/animation\n * @status stable\n * @since 0.1\n *\n * @event cs-cancel - Emitted when the animation is canceled.\n * @event cs-finish - Emitted when the animation finishes.\n * @event cs-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n *  animate multiple elements, either wrap them in a single container or use multiple `<cs-animation>` elements.\n *\n * @ssr - `<cs-animation>` renders during SSR without causing layout shift, but won't play its animation until the component hydrates on the client. Playback is driven by the Web Animations API, which is only available in the browser.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/animation",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "ssr": [
             {
               "name": "-",
@@ -8247,10 +8252,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Avatars represent a person or object with an image, initials, or icon. Use them in lists, comments, and\nprofiles to give users visual context at a glance.",
-          "jsDoc": "/**\n * @summary Avatars represent a person or object with an image, initials, or icon. Use them in lists, comments, and\n *  profiles to give users visual context at a glance.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/avatar\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n *\n * @slot icon - The default icon to use when no image or initials are present. Works best with `<cs-icon>`.\n *\n * @event cs-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some\n * unknown cause.\n *\n * @csspart icon - The container that wraps the avatar's icon.\n * @csspart initials - The container that wraps the avatar's initials.\n * @csspart image - The avatar image. Only shown when the `image` attribute is set.\n *\n * @cssproperty --size - The size of the avatar.\n */",
+          "jsDoc": "/**\n * @summary Avatars represent a person or object with an image, initials, or icon. Use them in lists, comments, and\n *  profiles to give users visual context at a glance.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/avatar\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot icon - The default icon to use when no image or initials are present. Works best with `<cs-icon>`.\n *\n * @event cs-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some\n * unknown cause.\n *\n * @csspart icon - The container that wraps the avatar's icon.\n * @csspart initials - The container that wraps the avatar's initials.\n * @csspart image - The avatar image. Only shown when the `image` attribute is set.\n *\n * @cssproperty --size - The size of the avatar.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/avatar",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -8544,10 +8549,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Badges draw attention to adjacent content by displaying a status, count, or label. Use them to highlight\nnotifications, categorize items, or flag new activity.",
-          "jsDoc": "/**\n * @summary Badges draw attention to adjacent content by displaying a status, count, or label. Use them to highlight\n *  notifications, categorize items, or flag new activity.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/badge\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n * @slot start - An element, such as `<cs-icon>`, placed before the label.\n * @slot end - An element, such as `<cs-icon>`, placed after the label.\n *\n * @csspart badge - The component's outer wrapper.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n *\n * @cssproperty --pulse-color - The color of the badge's pulse effect when using `attention=\"pulse\"`.\n *\n */",
+          "jsDoc": "/**\n * @summary Badges draw attention to adjacent content by displaying a status, count, or label. Use them to highlight\n *  notifications, categorize items, or flag new activity.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/badge\n * @status stable\n * @since 0.1\n *\n * @slot - The badge's content.\n * @slot start - An element, such as `<cs-icon>`, placed before the label.\n * @slot end - An element, such as `<cs-icon>`, placed after the label.\n *\n * @csspart badge - The component's outer wrapper.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n *\n * @cssproperty --pulse-color - The color of the badge's pulse effect when using `attention=\"pulse\"`.\n *\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/badge",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-badge",
           "customElement": true,
           "modulePath": "components/badge/badge.js",
@@ -8839,10 +8844,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Breadcrumb items represent individual links inside a breadcrumb, typically one per level of the site\nhierarchy.",
-          "jsDoc": "/**\n * @summary Breadcrumb items represent individual links inside a breadcrumb, typically one per level of the site\n *  hierarchy.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/breadcrumb-item\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot start - An element, such as `<cs-icon>`, placed before the label.\n * @slot end - An element, such as `<cs-icon>`, placed after the label.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<cs-breadcrumb>` instead.\n *\n * @csspart label - The breadcrumb item's label.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart separator - The container that wraps the separator.\n */",
+          "jsDoc": "/**\n * @summary Breadcrumb items represent individual links inside a breadcrumb, typically one per level of the site\n *  hierarchy.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/breadcrumb-item\n * @status stable\n * @since 0.1\n *\n * @slot - The breadcrumb item's label.\n * @slot start - An element, such as `<cs-icon>`, placed before the label.\n * @slot end - An element, such as `<cs-icon>`, placed after the label.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<cs-breadcrumb>` instead.\n *\n * @csspart label - The breadcrumb item's label.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart separator - The container that wraps the separator.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/breadcrumb-item",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-breadcrumb-item",
           "customElement": true,
           "modulePath": "components/breadcrumb-item/breadcrumb-item.js",
@@ -9072,10 +9077,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Breadcrumbs display a trail of links that show users where they are in a site's hierarchy. They help users\nunderstand the current location and navigate back to parent pages.",
-          "jsDoc": "/**\n * @summary Breadcrumbs display a trail of links that show users where they are in a site's hierarchy. They help users\n *  understand the current location and navigate back to parent pages.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/breadcrumb\n * @status stable\n * @since 2.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<cs-icon>`.\n *\n * @dependency cs-icon\n *\n * @csspart breadcrumb - The component's outer wrapper.\n */",
+          "jsDoc": "/**\n * @summary Breadcrumbs display a trail of links that show users where they are in a site's hierarchy. They help users\n *  understand the current location and navigate back to parent pages.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/breadcrumb\n * @status stable\n * @since 0.1\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<cs-icon>`.\n *\n * @dependency cs-icon\n *\n * @csspart breadcrumb - The component's outer wrapper.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/breadcrumb",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -10368,10 +10373,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Buttons represent actions the user can take, such as submitting a form, opening a dialog, or navigating to\nanother page.",
-          "jsDoc": "/**\n * @summary Buttons represent actions the user can take, such as submitting a form, opening a dialog, or navigating to\n *  another page.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/button\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n * @dependency cs-spinner\n *\n * @event blur - Emitted when the button loses focus.\n * @event focus - Emitted when the button gains focus.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot start - An element, such as `<cs-icon>`, placed before the label.\n * @slot end - An element, such as `<cs-icon>`, placed after the label.\n *\n * @csspart button - The component's outer wrapper.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart label - The button's label.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart caret - The button's caret icon, a `<cs-icon>` element.\n * @csspart spinner - The spinner that shows when the button is in the loading state.\n *\n * @cssstate disabled - Applied when the button is disabled.\n * @cssstate icon-button - Applied when the button contains only a `<cs-icon>` with no other content.\n * @cssstate link - Applied when the button is rendered as a link (i.e. `href` is set).\n * @cssstate loading - Applied when the button is in the loading state.\n */",
+          "jsDoc": "/**\n * @summary Buttons represent actions the user can take, such as submitting a form, opening a dialog, or navigating to\n *  another page.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/button\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n * @dependency cs-spinner\n *\n * @event blur - Emitted when the button loses focus.\n * @event focus - Emitted when the button gains focus.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot start - An element, such as `<cs-icon>`, placed before the label.\n * @slot end - An element, such as `<cs-icon>`, placed after the label.\n *\n * @csspart button - The component's outer wrapper.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart label - The button's label.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart caret - The button's caret icon, a `<cs-icon>` element.\n * @csspart spinner - The spinner that shows when the button is in the loading state.\n *\n * @cssstate disabled - Applied when the button is disabled.\n * @cssstate icon-button - Applied when the button contains only a `<cs-icon>` with no other content.\n * @cssstate link - Applied when the button is rendered as a link (i.e. `href` is set).\n * @cssstate loading - Applied when the button is in the loading state.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/button",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon",
             "cs-spinner"
@@ -10660,10 +10665,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Button groups combine related buttons into a single visual unit. Use them for toolbars, segmented controls,\nor any set of actions that belong together.",
-          "jsDoc": "/**\n * @summary Button groups combine related buttons into a single visual unit. Use them for toolbars, segmented controls,\n *  or any set of actions that belong together.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<cs-button>` elements to display in the button group.\n *\n */",
+          "jsDoc": "/**\n * @summary Button groups combine related buttons into a single visual unit. Use them for toolbars, segmented controls,\n *  or any set of actions that belong together.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/button-group\n * @status stable\n * @since 0.1\n *\n * @slot - One or more `<cs-button>` elements to display in the button group.\n *\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/button-group",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-button-group",
           "customElement": true,
           "modulePath": "components/button-group/button-group.js",
@@ -10918,10 +10923,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Callouts display important messages inline with surrounding content. Use them to highlight tips, warnings,\nerrors, or other information users should not miss.",
-          "jsDoc": "/**\n * @summary Callouts display important messages inline with surrounding content. Use them to highlight tips, warnings,\n *  errors, or other information users should not miss.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/callout\n * @status stable\n * @since 3.0\n *\n * @slot - The callout's main content.\n * @slot icon - An icon to show in the callout. Works best with `<cs-icon>`.\n *\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the callout's main content.\n */",
+          "jsDoc": "/**\n * @summary Callouts display important messages inline with surrounding content. Use them to highlight tips, warnings,\n *  errors, or other information users should not miss.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/callout\n * @status stable\n * @since 0.1\n *\n * @slot - The callout's main content.\n * @slot icon - An icon to show in the callout. Works best with `<cs-icon>`.\n *\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the callout's main content.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/callout",
           "status": "stable",
-          "since": "3.0",
+          "since": "0.1",
           "tagName": "cs-callout",
           "customElement": true,
           "modulePath": "components/callout/callout.js",
@@ -11298,10 +11303,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Cards group related content and actions inside a bordered container. Use them to present products, articles,\nuser profiles, or any self-contained unit of information.",
-          "jsDoc": "/**\n * @summary Cards group related content and actions inside a bordered container. Use them to present products, articles,\n *  user profiles, or any self-contained unit of information.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/card\n * @status stable\n * @since 2.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot media - An optional media section to render at the start of the card.\n * @slot actions - An optional actions section to render at the end for the horizontal card.\n * @slot header-actions - An optional actions section to render in the header of the vertical card.\n * @slot footer-actions - An optional actions section to render in the footer of the vertical card.\n *\n * @csspart media - The container that wraps the card's media.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n * @csspart actions - The container that wraps the card's actions.\n *\n * @cssproperty [--spacing=var(--cs-space-l)] - The amount of space around and between sections of the card. Expects a single value.\n *\n * @ssr - If you use the header, media, or footer slots, set the matching `has-header`, `has-media`, or `has-footer` attribute — otherwise only the card's body will render during SSR. This works around the lack of a `:has-slotted` CSS pseudo-class, which would normally let us style borders based on slotted content.\n */",
+          "jsDoc": "/**\n * @summary Cards group related content and actions inside a bordered container. Use them to present products, articles,\n *  user profiles, or any self-contained unit of information.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/card\n * @status stable\n * @since 0.1\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot media - An optional media section to render at the start of the card.\n * @slot actions - An optional actions section to render at the end for the horizontal card.\n * @slot header-actions - An optional actions section to render in the header of the vertical card.\n * @slot footer-actions - An optional actions section to render in the footer of the vertical card.\n *\n * @csspart media - The container that wraps the card's media.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n * @csspart actions - The container that wraps the card's actions.\n *\n * @cssproperty [--spacing=var(--cs-space-l)] - The amount of space around and between sections of the card. Expects a single value.\n *\n * @ssr - If you use the header, media, or footer slots, set the matching `has-header`, `has-media`, or `has-footer` attribute — otherwise only the card's body will render during SSR. This works around the lack of a `:has-slotted` CSS pseudo-class, which would normally let us style borders based on slotted content.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/card",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "ssr": [
             {
               "name": "-",
@@ -12300,8 +12305,8 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Carousels display a series of content slides along a horizontal or vertical axis, one or more at a time.\nUsers can navigate between slides with controls, pagination, or autoplay.",
-          "jsDoc": "/**\n * @summary Carousels display a series of content slides along a horizontal or vertical axis, one or more at a time.\n *  Users can navigate between slides with controls, pagination, or autoplay.\n *\n * @since 2.2\n * @status experimental\n *\n * @dependency cs-icon\n *\n * @event {{ index: number, slide: CsCarouselItem }} cs-slide-change - Emitted when the active slide changes.\n *\n * @slot - The carousel's main content, one or more `<cs-carousel-item>` elements.\n * @slot next-icon - Optional next icon to use instead of the default. Works best with `<cs-icon>`.\n * @slot previous-icon - Optional previous icon to use instead of the default. Works best with `<cs-icon>`.\n *\n * @csspart carousel - The component's outer wrapper.\n * @csspart scroll-container - The scroll container that wraps the slides.\n * @csspart pagination - The pagination indicators wrapper.\n * @csspart pagination-item - The pagination indicator.\n * @csspart pagination-item-active - Applied when the item is active.\n * @csspart navigation - The navigation wrapper.\n * @csspart navigation-button - The navigation button.\n * @csspart navigation-button-previous - Applied to the previous button.\n * @csspart navigation-button-next - Applied to the next button.\n *\n * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.\n * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become\n *  partially visible as a scroll hint.\n * @cssproperty [--slide-gap=var(--cs-space-m)] - The space between each slide.\n *\n * @ssr - `<cs-carousel>` displays its first slide during SSR, but won't be interactive until it hydrates on the client.\n */",
-          "since": "2.2",
+          "jsDoc": "/**\n * @summary Carousels display a series of content slides along a horizontal or vertical axis, one or more at a time.\n *  Users can navigate between slides with controls, pagination, or autoplay.\n *\n * @since 0.1\n * @status experimental\n *\n * @dependency cs-icon\n *\n * @event {{ index: number, slide: CsCarouselItem }} cs-slide-change - Emitted when the active slide changes.\n *\n * @slot - The carousel's main content, one or more `<cs-carousel-item>` elements.\n * @slot next-icon - Optional next icon to use instead of the default. Works best with `<cs-icon>`.\n * @slot previous-icon - Optional previous icon to use instead of the default. Works best with `<cs-icon>`.\n *\n * @csspart carousel - The component's outer wrapper.\n * @csspart scroll-container - The scroll container that wraps the slides.\n * @csspart pagination - The pagination indicators wrapper.\n * @csspart pagination-item - The pagination indicator.\n * @csspart pagination-item-active - Applied when the item is active.\n * @csspart navigation - The navigation wrapper.\n * @csspart navigation-button - The navigation button.\n * @csspart navigation-button-previous - Applied to the previous button.\n * @csspart navigation-button-next - Applied to the next button.\n *\n * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.\n * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become\n *  partially visible as a scroll hint.\n * @cssproperty [--slide-gap=var(--cs-space-m)] - The space between each slide.\n *\n * @ssr - `<cs-carousel>` displays its first slide during SSR, but won't be interactive until it hydrates on the client.\n */",
+          "since": "0.1",
           "status": "experimental",
           "dependencies": [
             "cs-icon"
@@ -12784,10 +12789,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Checkbox groups wrap a set of related checkboxes or switches so they share a label, hint, and grouping\nsemantics.",
-          "jsDoc": "/**\n * @summary Checkbox groups wrap a set of related checkboxes or switches so they share a label, hint, and grouping\n *  semantics.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/checkbox-group\n * @status stable\n * @since 3.9\n *\n * @dependency cs-checkbox\n *\n * @slot - The default slot where `<cs-checkbox>` or `<cs-switch>` elements are placed.\n * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n * @slot hint - Text that describes how to use the checkbox group. Alternatively, you can use the `hint` attribute.\n *\n * @csspart form-control - The form control that wraps the label, group, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The element that wraps the grouped checkboxes, exposed as a `role=\"group\"`.\n * @csspart hint - The hint's wrapper.\n *\n * @cssproperty [--gap=0.5em] - The gap between grouped checkboxes.\n */",
+          "jsDoc": "/**\n * @summary Checkbox groups wrap a set of related checkboxes or switches so they share a label, hint, and grouping\n *  semantics.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/checkbox-group\n * @status stable\n * @since 0.1\n *\n * @dependency cs-checkbox\n *\n * @slot - The default slot where `<cs-checkbox>` or `<cs-switch>` elements are placed.\n * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n * @slot hint - Text that describes how to use the checkbox group. Alternatively, you can use the `hint` attribute.\n *\n * @csspart form-control - The form control that wraps the label, group, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The element that wraps the grouped checkboxes, exposed as a `role=\"group\"`.\n * @csspart hint - The hint's wrapper.\n *\n * @cssproperty [--gap=0.5em] - The gap between grouped checkboxes.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/checkbox-group",
           "status": "stable",
-          "since": "3.9",
+          "since": "0.1",
           "dependencies": [
             "cs-checkbox"
           ],
@@ -13639,10 +13644,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Popups declaratively anchor one element to another and keep them positioned together as the page scrolls or\nresizes. Primarily a low-level building block for popovers, dropdowns, and tooltips.",
-          "jsDoc": "/**\n * @summary Popups declaratively anchor one element to another and keep them positioned together as the page scrolls or\n *  resizes. Primarily a low-level building block for popovers, dropdowns, and tooltips.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/popup\n * @status stable\n * @since 2.0\n *\n * @event cs-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n *  operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n *  `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n *  maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n *  attribute is used.\n * @cssproperty [--popup-border-width] - The width of any custom border applied to the popup. This is used to reposition\n *  the arrow to overlap to the inside edge of the popup border.\n * @cssproperty [--arrow-color=black] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--show-duration=var(--cs-transition-fast)] - The show duration to use when applying built-in animation classes.\n * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The hide duration to use when applying built-in animation classes.\n */",
+          "jsDoc": "/**\n * @summary Popups declaratively anchor one element to another and keep them positioned together as the page scrolls or\n *  resizes. Primarily a low-level building block for popovers, dropdowns, and tooltips.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/popup\n * @status stable\n * @since 0.1\n *\n * @event cs-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive\n *  operations in your listener or consider debouncing it.\n *\n * @slot - The popup's content.\n * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the\n *  `anchor` attribute or property instead.\n *\n * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are\n *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and\n *  maybe a border or box shadow.\n * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.\n * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.\n *\n * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`\n *  attribute is used.\n * @cssproperty [--popup-border-width] - The width of any custom border applied to the popup. This is used to reposition\n *  the arrow to overlap to the inside edge of the popup border.\n * @cssproperty [--arrow-color=black] - The color of the arrow.\n * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the\n *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only\n *  available when using `auto-size`.\n * @cssproperty [--show-duration=var(--cs-transition-fast)] - The show duration to use when applying built-in animation classes.\n * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The hide duration to use when applying built-in animation classes.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/popup",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-popup",
           "customElement": true,
           "modulePath": "components/popup/popup.js",
@@ -14112,10 +14117,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Popovers display contextual content and interactive elements in a floating panel anchored to a trigger. Use\nthem for rich tooltips, menus, or any content that appears on demand without navigating away.",
-          "jsDoc": "/**\n * @summary Popovers display contextual content and interactive elements in a floating panel anchored to a trigger. Use\n *  them for rich tooltips, menus, or any content that appears on demand without navigating away.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/popover\n * @status stable\n * @since 3.0\n *\n * @dependency cs-popup\n *\n * @slot - The popover's content. Interactive elements such as buttons and links are supported.\n *\n * @event cs-show - Emitted when the popover begins to show. Canceling this event will stop the popover from showing.\n * @event cs-after-show - Emitted after the popover has shown and all animations are complete.\n * @event cs-hide - Emitted when the popover begins to hide. Canceling this event will stop the popover from hiding.\n * @event cs-after-hide - Emitted after the popover has hidden and all animations are complete.\n *\n * @csspart dialog - The native dialog element that contains the popover content.\n * @csspart body - The popover's body where its content is rendered.\n * @csspart popup - The internal `<cs-popup>` element that positions the popover.\n * @csspart popup__popup - The popup's exported `popup` part. Use this to target the popover's popup container.\n * @csspart popup__arrow - The popup's exported `arrow` part. Use this to target the popover's arrow.\n *\n * @cssproperty [--arrow-size=0.375rem] - The size of the tiny arrow that points to the popover (set to zero to remove).\n * @cssproperty [--max-width=25rem] - The maximum width of the popover's body content.\n * @cssproperty [--show-duration=var(--cs-transition-fast)] - The speed of the show animation.\n * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The speed of the hide animation.\n *\n * @cssstate open - Applied when the popover is open.\n */",
+          "jsDoc": "/**\n * @summary Popovers display contextual content and interactive elements in a floating panel anchored to a trigger. Use\n *  them for rich tooltips, menus, or any content that appears on demand without navigating away.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/popover\n * @status stable\n * @since 0.1\n *\n * @dependency cs-popup\n *\n * @slot - The popover's content. Interactive elements such as buttons and links are supported.\n *\n * @event cs-show - Emitted when the popover begins to show. Canceling this event will stop the popover from showing.\n * @event cs-after-show - Emitted after the popover has shown and all animations are complete.\n * @event cs-hide - Emitted when the popover begins to hide. Canceling this event will stop the popover from hiding.\n * @event cs-after-hide - Emitted after the popover has hidden and all animations are complete.\n *\n * @csspart dialog - The native dialog element that contains the popover content.\n * @csspart body - The popover's body where its content is rendered.\n * @csspart popup - The internal `<cs-popup>` element that positions the popover.\n * @csspart popup__popup - The popup's exported `popup` part. Use this to target the popover's popup container.\n * @csspart popup__arrow - The popup's exported `arrow` part. Use this to target the popover's arrow.\n *\n * @cssproperty [--arrow-size=0.375rem] - The size of the tiny arrow that points to the popover (set to zero to remove).\n * @cssproperty [--max-width=25rem] - The maximum width of the popover's body content.\n * @cssproperty [--show-duration=var(--cs-transition-fast)] - The speed of the show animation.\n * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The speed of the hide animation.\n *\n * @cssstate open - Applied when the popover is open.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/popover",
           "status": "stable",
-          "since": "3.0",
+          "since": "0.1",
           "dependencies": [
             "cs-popup"
           ],
@@ -15880,10 +15885,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Inputs collect single-line data from the user, such as text, numbers, email addresses, and passwords. They\nsupport labels, hints, validation, and prefix or suffix slots.",
-          "jsDoc": "/**\n * @summary Inputs collect single-line data from the user, such as text, numbers, email addresses, and passwords. They\n *  support labels, hints, validation, and prefix or suffix slots.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/input\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot start - An element, such as `<cs-icon>`, placed at the start of the input control.\n * @slot end - An element, such as `<cs-icon>`, placed at the end of the input control.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when an alteration to the control's value is committed by the user.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted when the control receives input.\n * @event cs-clear - Emitted when the clear button is activated.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control-label - The label.\n * @csspart hint - The hint's wrapper.\n * @csspart input-wrapper - The component's outer wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart end - The container that wraps the `end` slot.\n *\n * @cssstate blank - The input is empty.\n */",
+          "jsDoc": "/**\n * @summary Inputs collect single-line data from the user, such as text, numbers, email addresses, and passwords. They\n *  support labels, hints, validation, and prefix or suffix slots.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/input\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot start - An element, such as `<cs-icon>`, placed at the start of the input control.\n * @slot end - An element, such as `<cs-icon>`, placed at the end of the input control.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when an alteration to the control's value is committed by the user.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted when the control receives input.\n * @event cs-clear - Emitted when the clear button is activated.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control-label - The label.\n * @csspart hint - The hint's wrapper.\n * @csspart input-wrapper - The component's outer wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart end - The container that wraps the `end` slot.\n *\n * @cssstate blank - The input is empty.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/input",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -17668,10 +17673,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Color pickers let users choose a color from a visual palette or by entering a value. They support HEX, RGB,\nHSL, and HSV formats with optional alpha channel and swatch presets.",
-          "jsDoc": "/**\n * @summary Color pickers let users choose a color from a visual palette or by entering a value. They support HEX, RGB,\n *  HSL, and HSV formats with optional alpha channel and swatch presets.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/color-picker\n * @status stable\n * @since 2.0\n *\n * @dependency cs-button\n * @dependency cs-button-group\n * @dependency cs-input\n * @dependency cs-popup\n * @dependency cs-visually-hidden\n *\n * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.\n * @slot hint - The color picker's form hint. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the color picker loses focus.\n * @event change - Emitted when the color picker's value changes.\n * @event focus - Emitted when the color picker receives focus.\n * @event input - Emitted when the color picker receives input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart color-picker - The dropdown panel that holds the grid, sliders, and swatches.\n * @csspart trigger - The color picker's dropdown trigger.\n * @csspart trigger-container - The container that wraps the color picker's trigger.\n * @csspart form-control - The form control that wraps the label, input, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The color picker's trigger button.\n * @csspart hint - The hint's wrapper.\n * @csspart swatches - The container that holds the swatches.\n * @csspart swatch - Each individual swatch.\n * @csspart grid - The color grid.\n * @csspart grid-handle - The color grid's handle.\n * @csspart slider - Hue and opacity sliders.\n * @csspart slider-handle - Hue and opacity slider handles.\n * @csspart hue-slider - The hue slider.\n * @csspart hue-slider-handle - The hue slider's handle.\n * @csspart opacity-slider - The opacity slider.\n * @csspart opacity-slider-handle - The opacity slider's handle.\n * @csspart preview - The preview color.\n * @csspart input - The text input.\n * @csspart eyedropper-button - The eye dropper button.\n * @csspart eyedropper-button__button - The eye dropper button's exported `button` part.\n * @csspart eyedropper-button__start - The eye dropper button's exported `start` part.\n * @csspart eyedropper-button__label - The eye dropper button's exported `label` part.\n * @csspart eyedropper-button__end - The eye dropper button's exported `end` part.\n * @csspart eyedropper-button__caret - The eye dropper button's exported `caret` part.\n * @csspart format-button - The format button.\n * @csspart format-button__button - The format button's exported `button` part.\n * @csspart format-button__start - The format button's exported `start` part.\n * @csspart format-button__label - The format button's exported `label` part.\n * @csspart format-button__end - The format button's exported `end` part.\n * @csspart format-button__caret - The format button's exported `caret` part.\n *\n * @cssproperty --grid-width - The width of the color grid.\n * @cssproperty --grid-height - The height of the color grid.\n * @cssproperty --grid-handle-size - The size of the color grid's handle.\n * @cssproperty --slider-height - The height of the hue and alpha sliders.\n * @cssproperty --slider-handle-size - The diameter of the slider's handle.\n */",
+          "jsDoc": "/**\n * @summary Color pickers let users choose a color from a visual palette or by entering a value. They support HEX, RGB,\n *  HSL, and HSV formats with optional alpha channel and swatch presets.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/color-picker\n * @status stable\n * @since 0.1\n *\n * @dependency cs-button\n * @dependency cs-button-group\n * @dependency cs-input\n * @dependency cs-popup\n * @dependency cs-visually-hidden\n *\n * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.\n * @slot hint - The color picker's form hint. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the color picker loses focus.\n * @event change - Emitted when the color picker's value changes.\n * @event focus - Emitted when the color picker receives focus.\n * @event input - Emitted when the color picker receives input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart color-picker - The dropdown panel that holds the grid, sliders, and swatches.\n * @csspart trigger - The color picker's dropdown trigger.\n * @csspart trigger-container - The container that wraps the color picker's trigger.\n * @csspart form-control - The form control that wraps the label, input, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The color picker's trigger button.\n * @csspart hint - The hint's wrapper.\n * @csspart swatches - The container that holds the swatches.\n * @csspart swatch - Each individual swatch.\n * @csspart grid - The color grid.\n * @csspart grid-handle - The color grid's handle.\n * @csspart slider - Hue and opacity sliders.\n * @csspart slider-handle - Hue and opacity slider handles.\n * @csspart hue-slider - The hue slider.\n * @csspart hue-slider-handle - The hue slider's handle.\n * @csspart opacity-slider - The opacity slider.\n * @csspart opacity-slider-handle - The opacity slider's handle.\n * @csspart preview - The preview color.\n * @csspart input - The text input.\n * @csspart eyedropper-button - The eye dropper button.\n * @csspart eyedropper-button__button - The eye dropper button's exported `button` part.\n * @csspart eyedropper-button__start - The eye dropper button's exported `start` part.\n * @csspart eyedropper-button__label - The eye dropper button's exported `label` part.\n * @csspart eyedropper-button__end - The eye dropper button's exported `end` part.\n * @csspart eyedropper-button__caret - The eye dropper button's exported `caret` part.\n * @csspart format-button - The format button.\n * @csspart format-button__button - The format button's exported `button` part.\n * @csspart format-button__start - The format button's exported `start` part.\n * @csspart format-button__label - The format button's exported `label` part.\n * @csspart format-button__end - The format button's exported `end` part.\n * @csspart format-button__caret - The format button's exported `caret` part.\n *\n * @cssproperty --grid-width - The width of the color grid.\n * @cssproperty --grid-height - The height of the color grid.\n * @cssproperty --grid-handle-size - The size of the color grid's handle.\n * @cssproperty --slider-height - The height of the hue and alpha sliders.\n * @cssproperty --slider-handle-size - The diameter of the slider's handle.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/color-picker",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-button",
             "cs-button-group",
@@ -17967,10 +17972,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Comparisons show the visual differences between two pieces of similar content using a draggable divider. Use\nthem for before/after images, design revisions, or side-by-side previews.",
-          "jsDoc": "/**\n * @summary Comparisons show the visual differences between two pieces of similar content using a draggable divider. Use\n *  them for before/after images, design revisions, or side-by-side previews.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/comparison\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n *\n * @slot before - The before content, often an `<img>` or `<svg>` element.\n * @slot after - The after content, often an `<img>` or `<svg>` element.\n * @slot handle - The icon used inside the handle.\n *\n * @event change - Emitted when the position changes.\n *\n * @csspart comparison - The component's outer wrapper.\n * @csspart before - The container that wraps the before content.\n * @csspart after - The container that wraps the after content.\n * @csspart divider - The divider that separates the before and after content.\n * @csspart handle - The handle that the user drags to expose the after content.\n *\n * @cssproperty --divider-width - The width of the dividing line.\n * @cssproperty --handle-size - The size of the compare handle.\n *\n * @cssstate dragging - Applied when the comparison is being dragged.\n */",
+          "jsDoc": "/**\n * @summary Comparisons show the visual differences between two pieces of similar content using a draggable divider. Use\n *  them for before/after images, design revisions, or side-by-side previews.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/comparison\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot before - The before content, often an `<img>` or `<svg>` element.\n * @slot after - The after content, often an `<img>` or `<svg>` element.\n * @slot handle - The icon used inside the handle.\n *\n * @event change - Emitted when the position changes.\n *\n * @csspart comparison - The component's outer wrapper.\n * @csspart before - The container that wraps the before content.\n * @csspart after - The container that wraps the after content.\n * @csspart divider - The divider that separates the before and after content.\n * @csspart handle - The handle that the user drags to expose the after content.\n *\n * @cssproperty --divider-width - The width of the dividing line.\n * @cssproperty --handle-size - The size of the compare handle.\n *\n * @cssstate dragging - Applied when the comparison is being dragged.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/comparison",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -18570,10 +18575,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Tooltips display brief contextual information when the user hovers, focuses, or taps a target element.",
-          "jsDoc": "/**\n * @summary Tooltips display brief contextual information when the user hovers, focuses, or taps a target element.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tooltip\n * @status stable\n * @since 2.0\n *\n * @dependency cs-popup\n *\n * @slot - The tooltip's default slot where any content should live. Interactive content should be avoided.\n *\n * @event cs-show - Emitted when the tooltip begins to show.\n * @event cs-after-show - Emitted after the tooltip has shown and all animations are complete.\n * @event cs-hide - Emitted when the tooltip begins to hide.\n * @event cs-after-hide - Emitted after the tooltip has hidden and all animations are complete.\n *\n * @csspart tooltip - The component's outer wrapper.\n * @csspart tooltip__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart tooltip__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n * @csspart body - The tooltip's body where its content is rendered.\n *\n * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.\n */",
+          "jsDoc": "/**\n * @summary Tooltips display brief contextual information when the user hovers, focuses, or taps a target element.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tooltip\n * @status stable\n * @since 0.1\n *\n * @dependency cs-popup\n *\n * @slot - The tooltip's default slot where any content should live. Interactive content should be avoided.\n *\n * @event cs-show - Emitted when the tooltip begins to show.\n * @event cs-after-show - Emitted after the tooltip has shown and all animations are complete.\n * @event cs-hide - Emitted when the tooltip begins to hide.\n * @event cs-after-hide - Emitted after the tooltip has hidden and all animations are complete.\n *\n * @csspart tooltip - The component's outer wrapper.\n * @csspart tooltip__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart tooltip__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n * @csspart body - The tooltip's body where its content is rendered.\n *\n * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/tooltip",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-popup"
           ],
@@ -19234,10 +19239,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Copy buttons copy text to the clipboard when the user activates them. They provide built-in success and\nerror feedback so users know the copy worked.",
-          "jsDoc": "/**\n * @summary Copy buttons copy text to the clipboard when the user activates them. They provide built-in success and\n *  error feedback so users know the copy worked.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/copy\n * @status stable\n * @since 3.6\n *\n * @dependency cs-icon\n * @dependency cs-tooltip\n *\n * @event cs-copy - Emitted when the data has been copied.\n * @event cs-error - Emitted when the data could not be copied.\n *\n * @slot - The trigger element. By default, a copy icon button is rendered so this is optional. If desired, you can slot\n *  in a custom element such as `<cs-button>` or `<button>`.\n * @slot copy-icon - The icon to show in the default copy state. Works best with `<cs-icon>`.\n * @slot success-icon - The icon to show when the content is copied. Works best with `<cs-icon>`.\n * @slot error-icon - The icon to show when a copy error occurs. Works best with `<cs-icon>`.\n *\n * @cssstate success - Applied when the copy operation succeeds.\n * @cssstate error - Applied when the copy operation fails.\n *\n * @csspart button - The internal `<button>` element.\n * @csspart copy-icon - The container that holds the copy icon.\n * @csspart success-icon - The container that holds the success icon.\n * @csspart error-icon - The container that holds the error icon.\n * @csspart feedback - The internal `<cs-tooltip>` element.\n */",
+          "jsDoc": "/**\n * @summary Copy buttons copy text to the clipboard when the user activates them. They provide built-in success and\n *  error feedback so users know the copy worked.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/copy\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n * @dependency cs-tooltip\n *\n * @event cs-copy - Emitted when the data has been copied.\n * @event cs-error - Emitted when the data could not be copied.\n *\n * @slot - The trigger element. By default, a copy icon button is rendered so this is optional. If desired, you can slot\n *  in a custom element such as `<cs-button>` or `<button>`.\n * @slot copy-icon - The icon to show in the default copy state. Works best with `<cs-icon>`.\n * @slot success-icon - The icon to show when the content is copied. Works best with `<cs-icon>`.\n * @slot error-icon - The icon to show when a copy error occurs. Works best with `<cs-icon>`.\n *\n * @cssstate success - Applied when the copy operation succeeds.\n * @cssstate error - Applied when the copy operation fails.\n *\n * @csspart button - The internal `<button>` element.\n * @csspart copy-icon - The container that holds the copy icon.\n * @csspart success-icon - The container that holds the success icon.\n * @csspart error-icon - The container that holds the error icon.\n * @csspart feedback - The internal `<cs-tooltip>` element.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/copy",
           "status": "stable",
-          "since": "3.6",
+          "since": "0.1",
           "dependencies": [
             "cs-icon",
             "cs-tooltip"
@@ -19730,10 +19735,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Details display a brief summary and expand to reveal additional content. Use them to progressively disclose\ninformation, group related FAQs, or hide advanced options.",
-          "jsDoc": "/**\n * @summary Details display a brief summary and expand to reveal additional content. Use them to progressively disclose\n *  information, group related FAQs, or hide advanced options.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/details\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n *\n * @slot - The details' main content.\n * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<cs-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<cs-icon>`.\n *\n * @event cs-show - Emitted when the details opens.\n * @event cs-after-show - Emitted after the details opens and all animations are complete.\n * @event cs-hide - Emitted when the details closes.\n * @event cs-after-hide - Emitted after the details closes and all animations are complete.\n *\n * @csspart details - The component's outer wrapper.\n *                    Styles you apply to the component are automatically applied to this part, so you usually don't need to deal with it unless you need to set the `display` property.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart icon - The container that wraps the expand/collapse icons.\n * @csspart content - The details content.\n *\n * @cssproperty --spacing - The amount of space around and between the details' content. Expects a single value.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The show duration to use when applying built-in animation classes.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The hide duration to use when applying built-in animation classes.\n *\n * @cssstate animating - Applied when the details is animating expand/collapse.\n */",
+          "jsDoc": "/**\n * @summary Details display a brief summary and expand to reveal additional content. Use them to progressively disclose\n *  information, group related FAQs, or hide advanced options.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/details\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot - The details' main content.\n * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<cs-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<cs-icon>`.\n *\n * @event cs-show - Emitted when the details opens.\n * @event cs-after-show - Emitted after the details opens and all animations are complete.\n * @event cs-hide - Emitted when the details closes.\n * @event cs-after-hide - Emitted after the details closes and all animations are complete.\n *\n * @csspart details - The component's outer wrapper.\n *                    Styles you apply to the component are automatically applied to this part, so you usually don't need to deal with it unless you need to set the `display` property.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart icon - The container that wraps the expand/collapse icons.\n * @csspart content - The details content.\n *\n * @cssproperty --spacing - The amount of space around and between the details' content. Expects a single value.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The show duration to use when applying built-in animation classes.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The hide duration to use when applying built-in animation classes.\n *\n * @cssstate animating - Applied when the details is animating expand/collapse.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/details",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -20458,10 +20463,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Dialogs appear above the page and require the user's immediate attention. Use them for confirmations, forms,\nor focused tasks that interrupt the main flow.",
-          "jsDoc": "/**\n * @summary Dialogs appear above the page and require the user's immediate attention. Use them for confirmations, forms,\n *  or focused tasks that interrupt the main flow.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/dialog\n * @status stable\n * @since 2.0\n *\n * @dependency cs-button\n *\n * @slot - The dialog's main content.\n * @slot label - The dialog'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 dialog's footer, usually one or more buttons representing various options.\n *\n * @event cs-show - Emitted when the dialog opens.\n * @event cs-after-show - Emitted after the dialog opens and all animations are complete.\n * @event {{ source: Element }} cs-hide - Emitted when the dialog is requested to close. Calling\n *  `event.preventDefault()` will prevent the dialog from closing. You can inspect `event.detail.source` to see which\n *  element caused the dialog to close. If the source is the dialog element itself, the user has pressed [[Escape]] or\n *  the dialog has been closed programmatically. Avoid using this unless closing the dialog will result in destructive\n *  behavior such as data loss.\n * @event cs-after-hide - Emitted after the dialog closes and all animations are complete.\n *\n * @csspart dialog - The dialog's internal `<dialog>` element.\n * @csspart header - The dialog'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 dialog'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 dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --spacing - The amount of space around and between the dialog's content.\n * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @cssproperty [--backdrop-filter=none] - A filter to apply to the backdrop behind the dialog.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The animation duration when showing the dialog.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The animation duration when hiding the dialog.\n */",
+          "jsDoc": "/**\n * @summary Dialogs appear above the page and require the user's immediate attention. Use them for confirmations, forms,\n *  or focused tasks that interrupt the main flow.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/dialog\n * @status stable\n * @since 0.1\n *\n * @dependency cs-button\n *\n * @slot - The dialog's main content.\n * @slot label - The dialog'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 dialog's footer, usually one or more buttons representing various options.\n *\n * @event cs-show - Emitted when the dialog opens.\n * @event cs-after-show - Emitted after the dialog opens and all animations are complete.\n * @event {{ source: Element }} cs-hide - Emitted when the dialog is requested to close. Calling\n *  `event.preventDefault()` will prevent the dialog from closing. You can inspect `event.detail.source` to see which\n *  element caused the dialog to close. If the source is the dialog element itself, the user has pressed [[Escape]] or\n *  the dialog has been closed programmatically. Avoid using this unless closing the dialog will result in destructive\n *  behavior such as data loss.\n * @event cs-after-hide - Emitted after the dialog closes and all animations are complete.\n *\n * @csspart dialog - The dialog's internal `<dialog>` element.\n * @csspart header - The dialog'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 dialog'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 dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --spacing - The amount of space around and between the dialog's content.\n * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @cssproperty [--backdrop-filter=none] - A filter to apply to the backdrop behind the dialog.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The animation duration when showing the dialog.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The animation duration when hiding the dialog.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/dialog",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-button"
           ],
@@ -20670,10 +20675,10 @@
             "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 2.0\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 spacing of the divider.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/divider",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-divider",
           "customElement": true,
           "modulePath": "components/divider/divider.js",
@@ -21200,10 +21205,10 @@
             "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 2.0\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 */",
+          "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 */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/drawer",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-button"
           ],
@@ -21635,10 +21640,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Dropdown items represent selectable entries within a dropdown menu, including standard actions, checkable\nitems, and submenu triggers.",
-          "jsDoc": "/**\n * @summary Dropdown items represent selectable entries within a dropdown menu, including standard actions, checkable\n *  items, and submenu triggers.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item\n * @status stable\n * @since 3.0\n *\n * @dependency cs-icon\n *\n * @event blur - Emitted when the dropdown item loses focus.\n * @event focus - Emitted when the dropdown item gains focus.\n *\n * @slot - The dropdown item's label.\n * @slot icon - An optional icon to display before the label.\n * @slot details - Additional content or details to display after the label.\n * @slot submenu - Submenu items, typically `<cs-dropdown-item>` elements, to create a nested menu.\n *\n * @csspart checkmark - The checkmark icon (a `<cs-icon>` element) when the item is a checkbox.\n * @csspart checkmark__svg - The checkmark icon's `svg` part.\n * @csspart icon - The container for the icon slot.\n * @csspart label - The container for the label slot.\n * @csspart details - The container for the details slot.\n * @csspart submenu-icon - The submenu indicator icon (a `<cs-icon>` element).\n * @csspart submenu-icon__svg - The submenu icon's `svg` part.\n * @csspart submenu - The submenu container.\n */",
+          "jsDoc": "/**\n * @summary Dropdown items represent selectable entries within a dropdown menu, including standard actions, checkable\n *  items, and submenu triggers.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @event blur - Emitted when the dropdown item loses focus.\n * @event focus - Emitted when the dropdown item gains focus.\n *\n * @slot - The dropdown item's label.\n * @slot icon - An optional icon to display before the label.\n * @slot details - Additional content or details to display after the label.\n * @slot submenu - Submenu items, typically `<cs-dropdown-item>` elements, to create a nested menu.\n *\n * @csspart checkmark - The checkmark icon (a `<cs-icon>` element) when the item is a checkbox.\n * @csspart checkmark__svg - The checkmark icon's `svg` part.\n * @csspart icon - The container for the icon slot.\n * @csspart label - The container for the label slot.\n * @csspart details - The container for the details slot.\n * @csspart submenu-icon - The submenu indicator icon (a `<cs-icon>` element).\n * @csspart submenu-icon__svg - The submenu icon's `svg` part.\n * @csspart submenu - The submenu container.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/dropdown-item",
           "status": "stable",
-          "since": "3.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -22361,10 +22366,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Dropdowns display a list of options triggered by a button or other element. They support keyboard\nnavigation, submenus, and checkable items for building menus and context actions.",
-          "jsDoc": "/**\n * @summary Dropdowns display a list of options triggered by a button or other element. They support keyboard\n *  navigation, submenus, and checkable items for building menus and context actions.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/dropdown\n * @status stable\n * @since 2.0\n *\n * @dependency cs-dropdown-item\n * @dependency cs-popup\n *\n * @event cs-show - Emitted when the dropdown is about to show.\n * @event cs-after-show - Emitted after the dropdown has been shown.\n * @event cs-hide - Emitted when the dropdown is about to hide.\n * @event cs-after-hide - Emitted after the dropdown has been hidden.\n * @event cs-select - Emitted when an item in the dropdown is selected.\n *\n * @slot - The dropdown's items, typically `<cs-dropdown-item>` elements.\n * @slot trigger - The element that triggers the dropdown, such as a `<cs-button>` or `<button>`.\n *\n * @csspart menu - The dropdown menu container.\n *\n * @cssproperty --show-duration - The duration of the show animation.\n * @cssproperty --hide-duration - The duration of the hide animation.\n */",
+          "jsDoc": "/**\n * @summary Dropdowns display a list of options triggered by a button or other element. They support keyboard\n *  navigation, submenus, and checkable items for building menus and context actions.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/dropdown\n * @status stable\n * @since 0.1\n *\n * @dependency cs-dropdown-item\n * @dependency cs-popup\n *\n * @event cs-show - Emitted when the dropdown is about to show.\n * @event cs-after-show - Emitted after the dropdown has been shown.\n * @event cs-hide - Emitted when the dropdown is about to hide.\n * @event cs-after-hide - Emitted after the dropdown has been hidden.\n * @event cs-select - Emitted when an item in the dropdown is selected.\n *\n * @slot - The dropdown's items, typically `<cs-dropdown-item>` elements.\n * @slot trigger - The element that triggers the dropdown, such as a `<cs-button>` or `<button>`.\n *\n * @csspart menu - The dropdown menu container.\n *\n * @cssproperty --show-duration - The duration of the show animation.\n * @cssproperty --hide-duration - The duration of the hide animation.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/dropdown",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-dropdown-item",
             "cs-popup"
@@ -22602,10 +22607,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Formats a number of bytes as a human-readable string with the appropriate unit, such as kB, MB, or GB.\nSupports both byte and bit units with configurable locale.",
-          "jsDoc": "/**\n * @summary Formats a number of bytes as a human-readable string with the appropriate unit, such as kB, MB, or GB.\n *  Supports both byte and bit units with configurable locale.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/format-bytes\n * @status stable\n * @since 2.0\n */",
+          "jsDoc": "/**\n * @summary Formats a number of bytes as a human-readable string with the appropriate unit, such as kB, MB, or GB.\n *  Supports both byte and bit units with configurable locale.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/format-bytes\n * @status stable\n * @since 0.1\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/format-bytes",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-format-bytes",
           "customElement": true,
           "modulePath": "components/format-bytes/format-bytes.js",
@@ -23044,10 +23049,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Formats a date or time for display using the specified locale and options. Powered by the\nIntl.DateTimeFormat API for consistent, localized output.",
-          "jsDoc": "/**\n * @summary Formats a date or time for display using the specified locale and options. Powered by the\n *  Intl.DateTimeFormat API for consistent, localized output.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/format-date\n * @status stable\n * @since 2.0\n */",
+          "jsDoc": "/**\n * @summary Formats a date or time for display using the specified locale and options. Powered by the\n *  Intl.DateTimeFormat API for consistent, localized output.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/format-date\n * @status stable\n * @since 0.1\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/format-date",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-format-date",
           "customElement": true,
           "modulePath": "components/format-date/format-date.js",
@@ -23404,10 +23409,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Formats a number for display using the specified locale and options, including currency, percent, and unit\nstyles. Powered by the Intl.NumberFormat API.",
-          "jsDoc": "/**\n * @summary Formats a number for display using the specified locale and options, including currency, percent, and unit\n *  styles. Powered by the Intl.NumberFormat API.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/format-number\n * @status stable\n * @since 2.0\n */",
+          "jsDoc": "/**\n * @summary Formats a number for display using the specified locale and options, including currency, percent, and unit\n *  styles. Powered by the Intl.NumberFormat API.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/format-number\n * @status stable\n * @since 0.1\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/format-number",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-format-number",
           "customElement": true,
           "modulePath": "components/format-number/format-number.js",
@@ -23748,10 +23753,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Fetches an external HTML file and embeds its contents inline on the page. Useful for reusing shared markup\nlike headers, footers, and partials across multiple pages.",
-          "jsDoc": "/**\n * @summary Fetches an external HTML file and embeds its contents inline on the page. Useful for reusing shared markup\n *  like headers, footers, and partials across multiple pages.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/include\n * @status stable\n * @since 2.0\n *\n * @event cs-load - Emitted when the included file is loaded.\n * @event {{ status: number }} cs-include-error - Emitted when the included file fails to load due to an error.\n *\n * @ssr - `<cs-include>` fetches its content asynchronously (like `<cs-icon>`), so the rendered output isn't available during SSR.\n */",
+          "jsDoc": "/**\n * @summary Fetches an external HTML file and embeds its contents inline on the page. Useful for reusing shared markup\n *  like headers, footers, and partials across multiple pages.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/include\n * @status stable\n * @since 0.1\n *\n * @event cs-load - Emitted when the included file is loaded.\n * @event {{ status: number }} cs-include-error - Emitted when the included file fails to load due to an error.\n *\n * @ssr - `<cs-include>` fetches its content asynchronously (like `<cs-icon>`), so the rendered output isn't available during SSR.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/include",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "ssr": [
             {
               "name": "-",
@@ -24126,10 +24131,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Tracks immediate child elements and fires events as they move in and out of view. Useful for lazy loading,\nscroll-triggered animations, and viewport-aware interactions.",
-          "jsDoc": "/**\n * @summary Tracks immediate child elements and fires events as they move in and out of view. Useful for lazy loading,\n *  scroll-triggered animations, and viewport-aware interactions.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/intersection-observer\n * @status stable\n * @since 2.0\n *\n * @slot - Elements to track. Only immediate children of the host are monitored.\n *\n * @event {{ entry: IntersectionObserverEntry }} cs-intersect - Fired when a tracked element begins or ceases intersecting.\n */",
+          "jsDoc": "/**\n * @summary Tracks immediate child elements and fires events as they move in and out of view. Useful for lazy loading,\n *  scroll-triggered animations, and viewport-aware interactions.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/intersection-observer\n * @status stable\n * @since 0.1\n *\n * @slot - Elements to track. Only immediate children of the host are monitored.\n *\n * @event {{ entry: IntersectionObserverEntry }} cs-intersect - Fired when a tracked element begins or ceases intersecting.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/intersection-observer",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-intersection-observer",
           "customElement": true,
           "modulePath": "components/intersection-observer/intersection-observer.js",
@@ -25596,10 +25601,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Known dates let users enter dates they already know - birthdays, expirations, document\ndates - through three separate day, month, and year fields shown in the locale's natural order.",
-          "jsDoc": "/**\n * @summary Known dates let users enter dates they already know - birthdays, expirations, document\n *  dates - through three separate day, month, and year fields shown in the locale's natural order.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/known-date\n * @status experimental\n * @since 3.8\n *\n * @slot label - The known date's group label. Alternatively, use the `label` attribute.\n * @slot hint - Text that describes how to use the known date. Alternatively, use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when the committed value transitions to a new ISO date.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted as the user types in any field.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control's outer wrapper.\n * @csspart form-control-label - The wrapper inside the legend that styles the visible label text.\n * @csspart form-control-input - Alias on the fields row matching other form controls.\n * @csspart hint - The hint's wrapper.\n * @csspart known-date - The component's outer wrapper.\n * @csspart fieldset - The `<fieldset>` element grouping the three fields (or a `role=\"group\"` div).\n * @csspart legend - The `<legend>` element (when a label is present).\n * @csspart fields - The flex row holding the three field blocks.\n * @csspart field - Each field block (label + input).\n * @csspart field-day - Added to the day field block.\n * @csspart field-month - Added to the month field block.\n * @csspart field-year - Added to the year field block.\n * @csspart field-label - The text label above each field's input.\n * @csspart field-input - The native `<input>` inside a field.\n *\n * @cssstate blank - The known date has no committed value.\n * @cssstate disabled - The known date is disabled.\n */",
+          "jsDoc": "/**\n * @summary Known dates let users enter dates they already know - birthdays, expirations, document\n *  dates - through three separate day, month, and year fields shown in the locale's natural order.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/known-date\n * @status experimental\n * @since 0.1\n *\n * @slot label - The known date's group label. Alternatively, use the `label` attribute.\n * @slot hint - Text that describes how to use the known date. Alternatively, use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when the committed value transitions to a new ISO date.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted as the user types in any field.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control's outer wrapper.\n * @csspart form-control-label - The wrapper inside the legend that styles the visible label text.\n * @csspart form-control-input - Alias on the fields row matching other form controls.\n * @csspart hint - The hint's wrapper.\n * @csspart known-date - The component's outer wrapper.\n * @csspart fieldset - The `<fieldset>` element grouping the three fields (or a `role=\"group\"` div).\n * @csspart legend - The `<legend>` element (when a label is present).\n * @csspart fields - The flex row holding the three field blocks.\n * @csspart field - Each field block (label + input).\n * @csspart field-day - Added to the day field block.\n * @csspart field-month - Added to the month field block.\n * @csspart field-year - Added to the year field block.\n * @csspart field-label - The text label above each field's input.\n * @csspart field-input - The native `<input>` inside a field.\n *\n * @cssstate blank - The known date has no committed value.\n * @cssstate disabled - The known date is disabled.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/known-date",
           "status": "experimental",
-          "since": "3.8",
+          "since": "0.1",
           "tagName": "cs-known-date",
           "customElement": true,
           "modulePath": "components/known-date/known-date.js",
@@ -25876,10 +25881,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Markdown elements render markdown content as HTML directly in the browser, making it easy to display\nuser-generated content or documentation without a server-side build step.",
-          "jsDoc": "/**\n * @summary Markdown elements render markdown content as HTML directly in the browser, making it easy to display\n *  user-generated content or documentation without a server-side build step.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/markdown\n * @status experimental\n * @since 3.4\n *\n * @ssr - `<cs-markdown>` parses the content of its children at runtime, which requires a DOM. It can't render during SSR — use it on the client only.\n */",
+          "jsDoc": "/**\n * @summary Markdown elements render markdown content as HTML directly in the browser, making it easy to display\n *  user-generated content or documentation without a server-side build step.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/markdown\n * @status experimental\n * @since 0.1\n *\n * @ssr - `<cs-markdown>` parses the content of its children at runtime, which requires a DOM. It can't render during SSR — use it on the client only.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/markdown",
           "status": "experimental",
-          "since": "3.4",
+          "since": "0.1",
           "ssr": [
             {
               "name": "-",
@@ -26216,10 +26221,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Mutation observers watch for changes to an element's DOM tree and emit an event when they occur. Provides a\nthin, declarative interface to the browser's MutationObserver API.",
-          "jsDoc": "/**\n * @summary Mutation observers watch for changes to an element's DOM tree and emit an event when they occur. Provides a\n *  thin, declarative interface to the browser's MutationObserver API.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/mutation-observer\n * @status stable\n * @since 2.0\n *\n * @event {{ mutationList: MutationRecord[] }} cs-mutation - Emitted when a mutation occurs.\n *\n * @slot - The content to watch for mutations.\n */",
+          "jsDoc": "/**\n * @summary Mutation observers watch for changes to an element's DOM tree and emit an event when they occur. Provides a\n *  thin, declarative interface to the browser's MutationObserver API.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/mutation-observer\n * @status stable\n * @since 0.1\n *\n * @event {{ mutationList: MutationRecord[] }} cs-mutation - Emitted when a mutation occurs.\n *\n * @slot - The content to watch for mutations.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/mutation-observer",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-mutation-observer",
           "customElement": true,
           "modulePath": "components/mutation-observer/mutation-observer.js",
@@ -27559,10 +27564,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and\ndecrementing. Use them for quantities, measurements, and other numeric form fields.",
-          "jsDoc": "/**\n * @summary Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and\n *  decrementing. Use them for quantities, measurements, and other numeric form fields.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/number-input\n * @status stable\n * @since 3.2\n *\n * @dependency cs-icon\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot start - An element, such as `<cs-icon>`, placed at the start of the input control.\n * @slot end - An element, such as `<cs-icon>`, placed at the end of the input control (before steppers).\n * @slot increment-icon - An icon to use in lieu of the default increment icon.\n * @slot decrement-icon - An icon to use in lieu of the default decrement icon.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when an alteration to the control's value is committed by the user.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted when the control receives input.\n * @event beforeinput - Emitted before the value changes. Can be cancelled with `event.preventDefault()` to prevent the\n *  value from changing.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control-label - The label.\n * @csspart hint - The hint element.\n * @csspart number-input - The component's outer wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart stepper - Both stepper buttons (for shared styling).\n * @csspart stepper-increment - The increment (+) button on the end side.\n * @csspart stepper-decrement - The decrement (-) button on the start side.\n *\n * @cssstate blank - The input is empty.\n * @cssstate focused - The input has focus.\n */",
+          "jsDoc": "/**\n * @summary Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and\n *  decrementing. Use them for quantities, measurements, and other numeric form fields.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/number-input\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot start - An element, such as `<cs-icon>`, placed at the start of the input control.\n * @slot end - An element, such as `<cs-icon>`, placed at the end of the input control (before steppers).\n * @slot increment-icon - An icon to use in lieu of the default increment icon.\n * @slot decrement-icon - An icon to use in lieu of the default decrement icon.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when an alteration to the control's value is committed by the user.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted when the control receives input.\n * @event beforeinput - Emitted before the value changes. Can be cancelled with `event.preventDefault()` to prevent the\n *  value from changing.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control-label - The label.\n * @csspart hint - The hint element.\n * @csspart number-input - The component's outer wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart stepper - Both stepper buttons (for shared styling).\n * @csspart stepper-increment - The increment (+) button on the end side.\n * @csspart stepper-decrement - The decrement (-) button on the start side.\n *\n * @cssstate blank - The input is empty.\n * @cssstate focused - The input has focus.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/number-input",
           "status": "stable",
-          "since": "3.2",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -27983,10 +27988,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Options represent the individual choices inside a select or similar form control. Each option holds a value\nand the label shown to the user.",
-          "jsDoc": "/**\n * @summary Options represent the individual choices inside a select or similar form control. Each option holds a value\n *  and the label shown to the user.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/option\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n *\n * @slot - The option's label.\n * @slot start - An element, such as `<cs-icon>`, placed before the label.\n * @slot end - An element, such as `<cs-icon>`, placed after the label.\n *\n * @csspart checked-icon - The checked icon, a `<cs-icon>` element.\n * @csspart label - The option's label.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n *\n * @cssstate current - The user has keyed into the option, but hasn't selected it yet (shows a highlight)\n * @cssstate selected - The option is selected and has aria-selected=\"true\"\n * @cssstate disabled - Applied when the option is disabled\n * @cssstate hover - Like `:hover` but works while dragging in Safari\n *\n * @cssproperty --current-text-color - The text color of the current (highlighted) option, paired with `--cs-form-control-activated-color`.\n */",
+          "jsDoc": "/**\n * @summary Options represent the individual choices inside a select or similar form control. Each option holds a value\n *  and the label shown to the user.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/option\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot - The option's label.\n * @slot start - An element, such as `<cs-icon>`, placed before the label.\n * @slot end - An element, such as `<cs-icon>`, placed after the label.\n *\n * @csspart checked-icon - The checked icon, a `<cs-icon>` element.\n * @csspart label - The option's label.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n *\n * @cssstate current - The user has keyed into the option, but hasn't selected it yet (shows a highlight)\n * @cssstate selected - The option is selected and has aria-selected=\"true\"\n * @cssstate disabled - Applied when the option is disabled\n * @cssstate hover - Like `:hover` but works while dragging in Safari\n *\n * @cssproperty --current-text-color - The text color of the current (highlighted) option, paired with `--cs-form-control-activated-color`.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/option",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -28305,10 +28310,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Tags label, categorize, or represent selections with a compact visual marker. Use them for status\nindicators, filters, or removable chips.",
-          "jsDoc": "/**\n * @summary Tags label, categorize, or represent selections with a compact visual marker. Use them for status\n *  indicators, filters, or removable chips.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency cs-button\n *\n * @slot - The tag's content.\n *\n * @event cs-remove - Emitted when the remove button is activated.\n *\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, a `<cs-button>`.\n * @csspart remove-button__button - The remove button's exported `button` part.\n */",
+          "jsDoc": "/**\n * @summary Tags label, categorize, or represent selections with a compact visual marker. Use them for status\n *  indicators, filters, or removable chips.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tag\n * @status stable\n * @since 0.1\n *\n * @dependency cs-button\n *\n * @slot - The tag's content.\n *\n * @event cs-remove - Emitted when the remove button is activated.\n *\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, a `<cs-button>`.\n * @csspart remove-button__button - The remove button's exported `button` part.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/tag",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-button"
           ],
@@ -29906,10 +29911,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Selects let users choose one or more values from a dropdown list of predefined options. Use them in forms\nwhen a fixed set of choices needs to fit in limited space.",
-          "jsDoc": "/**\n * @summary Selects let users choose one or more values from a dropdown list of predefined options. Use them in forms\n *  when a fixed set of choices needs to fit in limited space.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/select\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n * @dependency cs-popup\n * @dependency cs-tag\n * @dependency cs-option\n *\n * @slot - The listbox options. Must be `<cs-option>` elements. You can use `<cs-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot start - An element, such as `<cs-icon>`, placed at the start of the combobox.\n * @slot end - An element, such as `<cs-icon>`, placed at the end of the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *\n * @event change - Emitted when the control's value changes.\n * @event input - Emitted when the control receives input.\n * @event focus - Emitted when the control gains focus.\n * @event blur - Emitted when the control loses focus.\n * @event cs-clear - Emitted when the control's value is cleared.\n * @event cs-show - Emitted when the select's menu opens.\n * @event cs-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event cs-hide - Emitted when the select's menu closes.\n * @event cs-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The select's wrapper.\n * @csspart hint - The hint's wrapper.\n * @csspart combobox - The container the wraps the start, end, value, clear icon, and expand button.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__button - The tag's remove button's exported `button` part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n *\n * @cssproperty [--show-duration=var(--cs-transition-fast)] - The duration of the show animation.\n * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The duration of the hide animation.\n * @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated.\n *\n * @cssstate blank - The select is empty.\n */",
+          "jsDoc": "/**\n * @summary Selects let users choose one or more values from a dropdown list of predefined options. Use them in forms\n *  when a fixed set of choices needs to fit in limited space.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/select\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n * @dependency cs-popup\n * @dependency cs-tag\n * @dependency cs-option\n *\n * @slot - The listbox options. Must be `<cs-option>` elements. You can use `<cs-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot start - An element, such as `<cs-icon>`, placed at the start of the combobox.\n * @slot end - An element, such as `<cs-icon>`, placed at the end of the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *\n * @event change - Emitted when the control's value changes.\n * @event input - Emitted when the control receives input.\n * @event focus - Emitted when the control gains focus.\n * @event blur - Emitted when the control loses focus.\n * @event cs-clear - Emitted when the control's value is cleared.\n * @event cs-show - Emitted when the select's menu opens.\n * @event cs-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event cs-hide - Emitted when the select's menu closes.\n * @event cs-after-hide - Emitted after the select's menu closes and all animations are complete.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The select's wrapper.\n * @csspart hint - The hint's wrapper.\n * @csspart combobox - The container the wraps the start, end, value, clear icon, and expand button.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart display-input - The element that displays the selected option's label, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__button - The tag's remove button's exported `button` part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n *\n * @cssproperty [--show-duration=var(--cs-transition-fast)] - The duration of the show animation.\n * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The duration of the hide animation.\n * @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated.\n *\n * @cssstate blank - The select is empty.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/select",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon",
             "cs-popup",
@@ -31384,10 +31389,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "OTP inputs collect one-time passcodes, PINs, and other fixed-length codes, one character per segment.\nUse them for SMS verification, two-factor authentication, and invite codes.",
-          "jsDoc": "/**\n * @summary OTP inputs collect one-time passcodes, PINs, and other fixed-length codes, one character per segment.\n * Use them for SMS verification, two-factor authentication, and invite codes.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/otp-input\n * @status experimental\n * @since 3.11\n *\n * @slot label - An optional label. Use this for labels that contain HTML. Takes precedence over the `label` attribute, which is its fallback.\n * @slot hint - Optional hint text. Use this for hints that contain HTML. Takes precedence over the `hint` attribute, which is its fallback.\n *\n * @event focus - Emitted when the control gains focus.\n * @event blur - Emitted when the control loses focus.\n * @event input - Emitted when a character is entered or removed.\n * @event change - Emitted when the value changes and the field loses focus.\n * @event cs-complete - Emitted once when all segments are filled. Cancelable — call `preventDefault()` to stop\n *   `autosubmit` from submitting the form for this completion.\n * @event cs-clear - Emitted when the control's value is cleared.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart label - The label element.\n * @csspart hint - The hint element.\n * @csspart segments - The wrapper around all segment cells and separators.\n * @csspart segment - An individual character segment cell.\n * @csspart segment-literal - Inert literal text between segment groups (e.g. space or dash).\n *\n * @cssstate --blank - Applied when no characters have been entered.\n * @cssstate --filled - Applied when all segments are filled.\n * @cssstate disabled - Applied when the component is disabled.\n * @cssstate readonly - Applied when the component is readonly.\n * @cssstate user-invalid - Applied when validation fails after interaction.\n *\n * @cssproperty [--segment-size=2.5em] - Width and height of each segment cell.\n * @cssproperty [--segment-gap=var(--cs-space-xs)] - Gap between segments (not used in `contained` appearance).\n * @cssproperty [--segment-border-radius=var(--cs-form-control-border-radius)] - Corner radius of each segment.\n * @cssproperty [--mask-char='•'] - Character shown in place of entered values when `mask` is set, and as a hint\n *   in empty segments when `with-mask` is set.\n */",
+          "jsDoc": "/**\n * @summary OTP inputs collect one-time passcodes, PINs, and other fixed-length codes, one character per segment.\n * Use them for SMS verification, two-factor authentication, and invite codes.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/otp-input\n * @status experimental\n * @since 0.1\n *\n * @slot label - An optional label. Use this for labels that contain HTML. Takes precedence over the `label` attribute, which is its fallback.\n * @slot hint - Optional hint text. Use this for hints that contain HTML. Takes precedence over the `hint` attribute, which is its fallback.\n *\n * @event focus - Emitted when the control gains focus.\n * @event blur - Emitted when the control loses focus.\n * @event input - Emitted when a character is entered or removed.\n * @event change - Emitted when the value changes and the field loses focus.\n * @event cs-complete - Emitted once when all segments are filled. Cancelable — call `preventDefault()` to stop\n *   `autosubmit` from submitting the form for this completion.\n * @event cs-clear - Emitted when the control's value is cleared.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart label - The label element.\n * @csspart hint - The hint element.\n * @csspart segments - The wrapper around all segment cells and separators.\n * @csspart segment - An individual character segment cell.\n * @csspart segment-literal - Inert literal text between segment groups (e.g. space or dash).\n *\n * @cssstate --blank - Applied when no characters have been entered.\n * @cssstate --filled - Applied when all segments are filled.\n * @cssstate disabled - Applied when the component is disabled.\n * @cssstate readonly - Applied when the component is readonly.\n * @cssstate user-invalid - Applied when validation fails after interaction.\n *\n * @cssproperty [--segment-size=2.5em] - Width and height of each segment cell.\n * @cssproperty [--segment-gap=var(--cs-space-xs)] - Gap between segments (not used in `contained` appearance).\n * @cssproperty [--segment-border-radius=var(--cs-form-control-border-radius)] - Corner radius of each segment.\n * @cssproperty [--mask-char='•'] - Character shown in place of entered values when `mask` is set, and as a hint\n *   in empty segments when `with-mask` is set.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/otp-input",
           "status": "experimental",
-          "since": "3.11",
+          "since": "0.1",
           "tagName": "cs-otp-input",
           "customElement": true,
           "modulePath": "components/otp-input/otp-input.js",
@@ -32015,10 +32020,10 @@
             "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 3.0\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 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 */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/page",
           "status": "stable",
-          "since": "3.0",
+          "since": "0.1",
           "tagName": "cs-page",
           "customElement": true,
           "modulePath": "components/page/page.js",
@@ -32710,10 +32715,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Pagination splits long lists of content into pages, letting users navigate between them.",
-          "jsDoc": "/**\n * @summary Pagination splits long lists of content into pages, letting users navigate between them.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/pagination\n * @status experimental\n * @since 3.11\n *\n * @dependency cs-icon\n *\n * @event cs-page-change - Emitted when the page is about to change but before it does. Canceling this event with\n *  `event.preventDefault()` prevents the page from changing.\n * @event cs-after-page-change - Emitted after the page changes.\n *\n * @slot previous-icon - An icon to use in lieu of the default previous icon.\n * @slot next-icon - An icon to use in lieu of the default next icon.\n * @slot first-icon - An icon to use in lieu of the default first icon.\n * @slot last-icon - An icon to use in lieu of the default last icon.\n *\n * @csspart pagination - The component's outer wrapper, a `<nav>` element.\n * @csspart button - Every button or link, including page numbers and navigation controls.\n * @csspart previous-button - The previous button.\n * @csspart next-button - The next button.\n * @csspart first-button - The first button.\n * @csspart last-button - The last button.\n * @csspart pages - The list that wraps the page number items.\n * @csspart page - A page number button or link.\n * @csspart page-current - The current page number button or link.\n * @csspart ellipsis - An ellipsis for collapsed pages. Acts as a button that jumps several pages toward that side.\n * @csspart summary - The summary of items on the current page, shown with the `with-summary` attribute.\n * @csspart label - The \"1 of 5\" label shown between the navigation buttons in the `compact` layout.\n *\n * @cssstate disabled - Applied when the pagination is disabled.\n */",
+          "jsDoc": "/**\n * @summary Pagination splits long lists of content into pages, letting users navigate between them.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/pagination\n * @status experimental\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @event cs-page-change - Emitted when the page is about to change but before it does. Canceling this event with\n *  `event.preventDefault()` prevents the page from changing.\n * @event cs-after-page-change - Emitted after the page changes.\n *\n * @slot previous-icon - An icon to use in lieu of the default previous icon.\n * @slot next-icon - An icon to use in lieu of the default next icon.\n * @slot first-icon - An icon to use in lieu of the default first icon.\n * @slot last-icon - An icon to use in lieu of the default last icon.\n *\n * @csspart pagination - The component's outer wrapper, a `<nav>` element.\n * @csspart button - Every button or link, including page numbers and navigation controls.\n * @csspart previous-button - The previous button.\n * @csspart next-button - The next button.\n * @csspart first-button - The first button.\n * @csspart last-button - The last button.\n * @csspart pages - The list that wraps the page number items.\n * @csspart page - A page number button or link.\n * @csspart page-current - The current page number button or link.\n * @csspart ellipsis - An ellipsis for collapsed pages. Acts as a button that jumps several pages toward that side.\n * @csspart summary - The summary of items on the current page, shown with the `with-summary` attribute.\n * @csspart label - The \"1 of 5\" label shown between the navigation buttons in the `compact` layout.\n *\n * @cssstate disabled - Applied when the pagination is disabled.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/pagination",
           "status": "experimental",
-          "since": "3.11",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -32978,10 +32983,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Progress bars show how far along an ongoing operation is as a horizontal fill. Use them for file uploads,\nmulti-step flows, or any task with measurable progress.",
-          "jsDoc": "/**\n * @summary Progress bars show how far along an ongoing operation is as a horizontal fill. Use them for file uploads,\n *  multi-step flows, or any task with measurable progress.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/progress-bar\n * @status stable\n * @since 2.0\n *\n * @slot - A label to show inside the progress indicator.\n *\n * @csspart progress-bar - The component's outer wrapper.\n * @csspart indicator - The progress bar's indicator.\n * @csspart label - The progress bar's label.\n *\n * @cssproperty [--track-height=1rem] - The height of the track.\n * @cssproperty [--track-color=var(--cs-color-neutral-fill-normal)] - The color of the track.\n * @cssproperty [--indicator-color=var(--cs-color-brand-fill-loud)] - The color of the indicator.\n */",
+          "jsDoc": "/**\n * @summary Progress bars show how far along an ongoing operation is as a horizontal fill. Use them for file uploads,\n *  multi-step flows, or any task with measurable progress.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/progress-bar\n * @status stable\n * @since 0.1\n *\n * @slot - A label to show inside the progress indicator.\n *\n * @csspart progress-bar - The component's outer wrapper.\n * @csspart indicator - The progress bar's indicator.\n * @csspart label - The progress bar's label.\n *\n * @cssproperty [--track-height=1rem] - The height of the track.\n * @cssproperty [--track-color=var(--cs-color-neutral-fill-normal)] - The color of the track.\n * @cssproperty [--indicator-color=var(--cs-color-brand-fill-loud)] - The color of the indicator.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/progress-bar",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-progress-bar",
           "customElement": true,
           "modulePath": "components/progress-bar/progress-bar.js",
@@ -33250,10 +33255,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Progress rings show how far along a determinate operation is using a circular indicator. Use them as a\ncompact alternative to progress bars when horizontal space is limited.",
-          "jsDoc": "/**\n * @summary Progress rings show how far along a determinate operation is using a circular indicator. Use them as a\n *  compact alternative to progress bars when horizontal space is limited.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/progress-ring\n * @status stable\n * @since 2.0\n *\n * @slot - A label to show inside the ring.\n *\n * @csspart progress-ring - The component's outer wrapper.\n * @csspart label - The progress ring label.\n * @csspart track - The progress ring's track.\n * @csspart indicator - The progress ring's indicator.\n *\n * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.\n */",
+          "jsDoc": "/**\n * @summary Progress rings show how far along a determinate operation is using a circular indicator. Use them as a\n *  compact alternative to progress bars when horizontal space is limited.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/progress-ring\n * @status stable\n * @since 0.1\n *\n * @slot - A label to show inside the ring.\n *\n * @csspart progress-ring - The component's outer wrapper.\n * @csspart label - The progress ring label.\n * @csspart track - The progress ring's track.\n * @csspart indicator - The progress ring's indicator.\n *\n * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/progress-ring",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-progress-ring",
           "customElement": true,
           "modulePath": "components/progress-ring/progress-ring.js",
@@ -33679,10 +33684,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "QR codes encode a URL or other short text into a scannable image, rendered client-side using the Canvas API.\nUse them to share links, contact info, or Wi-Fi credentials that visitors can scan with a phone.",
-          "jsDoc": "/**\n * @summary QR codes encode a URL or other short text into a scannable image, rendered client-side using the Canvas API.\n *  Use them to share links, contact info, or Wi-Fi credentials that visitors can scan with a phone.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/qr-code\n * @status stable\n * @since 2.0\n *\n * @csspart qr-code - The component's outer wrapper.\n */",
+          "jsDoc": "/**\n * @summary QR codes encode a URL or other short text into a scannable image, rendered client-side using the Canvas API.\n *  Use them to share links, contact info, or Wi-Fi credentials that visitors can scan with a phone.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/qr-code\n * @status stable\n * @since 0.1\n *\n * @csspart qr-code - The component's outer wrapper.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/qr-code",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-qr-code",
           "customElement": true,
           "modulePath": "components/qr-code/qr-code.js",
@@ -34470,10 +34475,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Radios represent a single option within a mutually exclusive set. Use them inside a radio group when users\nmust pick exactly one choice from a small list.",
-          "jsDoc": "/**\n * @summary Radios represent a single option within a mutually exclusive set. Use them inside a radio group when users\n *  must pick exactly one choice from a small list.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/radio\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n *\n * @slot - The radio's label.\n *\n * @event blur - Emitted when the control loses focus.\n * @event focus - Emitted when the control gains focus.\n *\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart checked-icon - The checked icon.\n * @csspart label - The container that wraps the radio's label.\n *\n * @cssproperty --checked-icon-color - The color of the checked icon.\n * @cssproperty --checked-icon-scale - The size of the checked icon relative to the radio.\n *\n * @cssstate checked - Applied when the control is checked.\n * @cssstate disabled - Applied when the control is disabled.\n */",
+          "jsDoc": "/**\n * @summary Radios represent a single option within a mutually exclusive set. Use them inside a radio group when users\n *  must pick exactly one choice from a small list.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/radio\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot - The radio's label.\n *\n * @event blur - Emitted when the control loses focus.\n * @event focus - Emitted when the control gains focus.\n *\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart checked-icon - The checked icon.\n * @csspart label - The container that wraps the radio's label.\n *\n * @cssproperty --checked-icon-color - The color of the checked icon.\n * @cssproperty --checked-icon-scale - The size of the checked icon relative to the radio.\n *\n * @cssstate checked - Applied when the control is checked.\n * @cssstate disabled - Applied when the control is disabled.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/radio",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -35439,10 +35444,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Radio groups wrap a set of radios so they function as a single form control with one shared value. They\nhandle keyboard navigation, labeling, and validation for the group as a whole.",
-          "jsDoc": "/**\n * @summary Radio groups wrap a set of radios so they function as a single form control with one shared value. They\n *  handle keyboard navigation, labeling, and validation for the group as a whole.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency cs-radio\n *\n * @slot - The default slot where `<cs-radio>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n * @slot hint - Text that describes how to use the radio group. Alternatively, you can use the `hint` attribute.\n *\n * @event change - Emitted when the radio group's selected value changes.\n * @event input - Emitted when the radio group receives user input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The element that wraps the grouped radios, styled as a flex container by default.\n * @csspart hint - The hint's wrapper.\n */",
+          "jsDoc": "/**\n * @summary Radio groups wrap a set of radios so they function as a single form control with one shared value. They\n *  handle keyboard navigation, labeling, and validation for the group as a whole.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/radio-group\n * @status stable\n * @since 0.1\n *\n * @dependency cs-radio\n *\n * @slot - The default slot where `<cs-radio>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n * @slot hint - Text that describes how to use the radio group. Alternatively, you can use the `hint` attribute.\n *\n * @event change - Emitted when the radio group's selected value changes.\n * @event input - Emitted when the radio group receives user input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The element that wraps the grouped radios, styled as a flex container by default.\n * @csspart hint - The hint's wrapper.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/radio-group",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-radio"
           ],
@@ -35878,10 +35883,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Selects one or more child elements at random and displays them, hiding the rest.",
-          "jsDoc": "/**\n * @summary Selects one or more child elements at random and displays them, hiding the rest.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/random-content\n * @status experimental\n * @since 3.9\n *\n * @slot - The pool of children to choose from. Only direct element children are eligible; unselected\n *  children are hidden with the `hidden` attribute.\n *\n * @event {{ items: Element[] }} cs-content-change - Emitted whenever the displayed selection changes,\n *  including on first render, on `randomize()`, and on each autoplay tick.\n *\n * @cssproperty --animation-duration - Duration of the entrance animation. Default is `300ms`.\n * @cssproperty --animation-easing - Easing function for the entrance animation. Default is `ease`.\n * @cssproperty --animation-translate - Translation distance for directional animations (`fade-up`, `fade-down`, `fade-left`, `fade-right`). Default is `0.5em`.\n */",
+          "jsDoc": "/**\n * @summary Selects one or more child elements at random and displays them, hiding the rest.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/random-content\n * @status experimental\n * @since 0.1\n *\n * @slot - The pool of children to choose from. Only direct element children are eligible; unselected\n *  children are hidden with the `hidden` attribute.\n *\n * @event {{ items: Element[] }} cs-content-change - Emitted whenever the displayed selection changes,\n *  including on first render, on `randomize()`, and on each autoplay tick.\n *\n * @cssproperty --animation-duration - Duration of the entrance animation. Default is `300ms`.\n * @cssproperty --animation-easing - Easing function for the entrance animation. Default is `ease`.\n * @cssproperty --animation-translate - Translation distance for directional animations (`fade-up`, `fade-down`, `fade-left`, `fade-right`). Default is `0.5em`.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/random-content",
           "status": "experimental",
-          "since": "3.9",
+          "since": "0.1",
           "tagName": "cs-random-content",
           "customElement": true,
           "modulePath": "components/random-content/random-content.js",
@@ -36885,10 +36890,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Ratings display a numeric score as a row of selectable symbols, typically stars. Use them to capture quick\nfeedback or show an average rating for a product or piece of content.",
-          "jsDoc": "/**\n * @summary Ratings display a numeric score as a row of selectable symbols, typically stars. Use them to capture quick\n *  feedback or show an average rating for a product or piece of content.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/rating\n * @status stable\n * @since 2.0\n *\n * @dependency cs-icon\n *\n * @event change - Emitted when the rating's value changes.\n * @event {{ phase: 'start' | 'move' | 'end', value: number }} cs-hover - Emitted when the user hovers over a value. The\n *  `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the\n *  rating's value would be if the user were to commit to the hovered value.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart rating - The component's outer wrapper.\n *\n * @cssproperty --symbol-color - The inactive color for symbols.\n * @cssproperty --symbol-color-active - The active color for symbols.\n * @cssproperty --symbol-spacing - The spacing to use around symbols.\n */",
+          "jsDoc": "/**\n * @summary Ratings display a numeric score as a row of selectable symbols, typically stars. Use them to capture quick\n *  feedback or show an average rating for a product or piece of content.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/rating\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @event change - Emitted when the rating's value changes.\n * @event {{ phase: 'start' | 'move' | 'end', value: number }} cs-hover - Emitted when the user hovers over a value. The\n *  `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the\n *  rating's value would be if the user were to commit to the hovered value.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart rating - The component's outer wrapper.\n *\n * @cssproperty --symbol-color - The inactive color for symbols.\n * @cssproperty --symbol-color-active - The active color for symbols.\n * @cssproperty --symbol-spacing - The spacing to use around symbols.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/rating",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -37179,10 +37184,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Relative times display a date as a localized phrase relative to now, such as \"3 hours ago\" or \"in 2 days\".\nThe phrase updates automatically as time passes and respects the user's locale.",
-          "jsDoc": "/**\n * @summary Relative times display a date as a localized phrase relative to now, such as \"3 hours ago\" or \"in 2 days\".\n *  The phrase updates automatically as time passes and respects the user's locale.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/relative-time\n * @status stable\n * @since 2.0\n */",
+          "jsDoc": "/**\n * @summary Relative times display a date as a localized phrase relative to now, such as \"3 hours ago\" or \"in 2 days\".\n *  The phrase updates automatically as time passes and respects the user's locale.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/relative-time\n * @status stable\n * @since 0.1\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/relative-time",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-relative-time",
           "customElement": true,
           "modulePath": "components/relative-time/relative-time.js",
@@ -37417,10 +37422,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Resize observers watch their slotted elements for size changes and emit an event when they occur. Provides a\nthin, declarative interface to the browser's ResizeObserver API.",
-          "jsDoc": "/**\n * @summary Resize observers watch their slotted elements for size changes and emit an event when they occur. Provides a\n *  thin, declarative interface to the browser's ResizeObserver API.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/resize-observer\n * @status stable\n * @since 2.0\n *\n * @slot - One or more elements to watch for resizing.\n *\n * @event {{ entries: ResizeObserverEntry[] }} cs-resize - Emitted when the element is resized.\n */",
+          "jsDoc": "/**\n * @summary Resize observers watch their slotted elements for size changes and emit an event when they occur. Provides a\n *  thin, declarative interface to the browser's ResizeObserver API.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/resize-observer\n * @status stable\n * @since 0.1\n *\n * @slot - One or more elements to watch for resizing.\n *\n * @event {{ entries: ResizeObserverEntry[] }} cs-resize - Emitted when the element is resized.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/resize-observer",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-resize-observer",
           "customElement": true,
           "modulePath": "components/resize-observer/resize-observer.js",
@@ -37734,10 +37739,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Scrollers wrap overflowing content in an accessible container with visual cues that help users recognize and\nnavigate scrollable regions.",
-          "jsDoc": "/**\n * @summary Scrollers wrap overflowing content in an accessible container with visual cues that help users recognize and\n *  navigate scrollable regions.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/scroller\n * @status stable\n * @since 3.0\n *\n * @slot - The content to show inside the scroller.\n *\n * @cssproperty [--shadow-color=var(--cs-color-surface-default)] - The base color of the shadow.\n * @cssproperty [--shadow-size=2rem] - The size of the shadow.\n *\n * @csspart content - The container that wraps the slotted content.\n * @csspart start-shadow - The scroll shadow shown at the start edge when more content is available, unless `without-shadow` is set.\n * @csspart end-shadow - The scroll shadow shown at the end edge when more content is available, unless `without-shadow` is set.\n */",
+          "jsDoc": "/**\n * @summary Scrollers wrap overflowing content in an accessible container with visual cues that help users recognize and\n *  navigate scrollable regions.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/scroller\n * @status stable\n * @since 0.1\n *\n * @slot - The content to show inside the scroller.\n *\n * @cssproperty [--shadow-color=var(--cs-color-surface-default)] - The base color of the shadow.\n * @cssproperty [--shadow-size=2rem] - The size of the shadow.\n *\n * @csspart content - The container that wraps the slotted content.\n * @csspart start-shadow - The scroll shadow shown at the start edge when more content is available, unless `without-shadow` is set.\n * @csspart end-shadow - The scroll shadow shown at the end edge when more content is available, unless `without-shadow` is set.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/scroller",
           "status": "stable",
-          "since": "3.0",
+          "since": "0.1",
           "tagName": "cs-scroller",
           "customElement": true,
           "modulePath": "components/scroller/scroller.js",
@@ -37938,10 +37943,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Skeletons show placeholder shapes where content will appear once it finishes loading, reducing perceived\nwait time and preventing layout shift.",
-          "jsDoc": "/**\n * @summary Skeletons show placeholder shapes where content will appear once it finishes loading, reducing perceived\n *  wait time and preventing layout shift.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/skeleton\n * @status stable\n * @since 2.0\n *\n * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.\n *\n * @cssproperty --color - The color of the skeleton.\n * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.\n */",
+          "jsDoc": "/**\n * @summary Skeletons show placeholder shapes where content will appear once it finishes loading, reducing perceived\n *  wait time and preventing layout shift.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/skeleton\n * @status stable\n * @since 0.1\n *\n * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.\n *\n * @cssproperty --color - The color of the skeleton.\n * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/skeleton",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-skeleton",
           "customElement": true,
           "modulePath": "components/skeleton/skeleton.js",
@@ -39581,10 +39586,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Sliders let users choose a numeric value within a defined range by dragging a thumb along a track.",
-          "jsDoc": "/**\n * <cs-slider>\n *\n * @summary Sliders let users choose a numeric value within a defined range by dragging a thumb along a track.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/slider\n * @status stable\n * @since 2.0\n *\n * @dependency cs-tooltip\n *\n * @slot label - The slider label. Alternatively, you can use the `label` attribute.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *  instead.\n * @slot reference - One or more reference labels to show visually below the slider.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when an alteration to the control's value is committed by the user.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted when the control receives input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart label - The element that contains the sliders's label.\n * @csspart hint - The element that contains the slider's description.\n * @csspart slider - The focusable element with `role=\"slider\"`. Contains the track and reference slot.\n * @csspart track - The slider's track.\n * @csspart indicator - The colored indicator that shows from the start of the slider to the current value.\n * @csspart markers - The container that holds all the markers when `with-markers` is used.\n * @csspart marker - The individual markers that are shown when `with-markers` is used.\n * @csspart references - The container that holds references that get slotted in.\n * @csspart thumb - The slider's thumb.\n * @csspart thumb-min - The min value thumb in a range slider.\n * @csspart thumb-max - The max value thumb in a range slider.\n * @csspart tooltip - The tooltip, a `<cs-tooltip>` element.\n * @csspart tooltip__tooltip - The tooltip's `tooltip` part.\n * @csspart tooltip__body - The tooltip's `body` part.\n * @csspart tooltip__arrow - The tooltip's `arrow` part.\n *\n * @cssstate disabled - Applied when the slider is disabled.\n * @cssstate dragging - Applied when the slider is being dragged.\n * @cssstate focused - Applied when the slider has focus.\n * @cssstate user-valid - Applied when the slider is valid and the user has sufficiently interacted with it.\n * @cssstate user-invalid - Applied when the slider is invalid and the user has sufficiently interacted with it.\n *\n * @cssproperty [--track-size=0.75em] - The height or width of the slider's track.\n * @cssproperty [--marker-width=0.1875em] - The width of each individual marker.\n * @cssproperty [--marker-height=0.1875em] - The height of each individual marker.\n * @cssproperty [--thumb-width=1.25em] - The width of the thumb.\n * @cssproperty [--thumb-height=1.25em] - The height of the thumb.\n */",
+          "jsDoc": "/**\n * <cs-slider>\n *\n * @summary Sliders let users choose a numeric value within a defined range by dragging a thumb along a track.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/slider\n * @status stable\n * @since 0.1\n *\n * @dependency cs-tooltip\n *\n * @slot label - The slider label. Alternatively, you can use the `label` attribute.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *  instead.\n * @slot reference - One or more reference labels to show visually below the slider.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when an alteration to the control's value is committed by the user.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted when the control receives input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart label - The element that contains the sliders's label.\n * @csspart hint - The element that contains the slider's description.\n * @csspart slider - The focusable element with `role=\"slider\"`. Contains the track and reference slot.\n * @csspart track - The slider's track.\n * @csspart indicator - The colored indicator that shows from the start of the slider to the current value.\n * @csspart markers - The container that holds all the markers when `with-markers` is used.\n * @csspart marker - The individual markers that are shown when `with-markers` is used.\n * @csspart references - The container that holds references that get slotted in.\n * @csspart thumb - The slider's thumb.\n * @csspart thumb-min - The min value thumb in a range slider.\n * @csspart thumb-max - The max value thumb in a range slider.\n * @csspart tooltip - The tooltip, a `<cs-tooltip>` element.\n * @csspart tooltip__tooltip - The tooltip's `tooltip` part.\n * @csspart tooltip__body - The tooltip's `body` part.\n * @csspart tooltip__arrow - The tooltip's `arrow` part.\n *\n * @cssstate disabled - Applied when the slider is disabled.\n * @cssstate dragging - Applied when the slider is being dragged.\n * @cssstate focused - Applied when the slider has focus.\n * @cssstate user-valid - Applied when the slider is valid and the user has sufficiently interacted with it.\n * @cssstate user-invalid - Applied when the slider is invalid and the user has sufficiently interacted with it.\n *\n * @cssproperty [--track-size=0.75em] - The height or width of the slider's track.\n * @cssproperty [--marker-width=0.1875em] - The width of each individual marker.\n * @cssproperty [--marker-height=0.1875em] - The height of each individual marker.\n * @cssproperty [--thumb-width=1.25em] - The width of the thumb.\n * @cssproperty [--thumb-height=1.25em] - The height of the thumb.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/slider",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-tooltip"
           ],
@@ -40102,10 +40107,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Split panels display two adjacent panels separated by a draggable divider, letting users resize each side to\nsuit their workflow.",
-          "jsDoc": "/**\n * @summary Split panels display two adjacent panels separated by a draggable divider, letting users resize each side to\n *  suit their workflow.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/split-panel\n * @status stable\n * @since 2.0\n *\n * @event cs-reposition - Emitted when the divider's position changes.\n *\n * @slot start - Content to place in the start panel.\n * @slot end - Content to place in the end panel.\n * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.\n *\n * @csspart start - The start panel.\n * @csspart end - The end panel.\n * @csspart panel - Targets both the start and end panels.\n * @csspart divider - The divider that separates the start and end panels.\n *\n * @cssproperty [--divider-width=4px] - The width of the visible divider.\n * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is\n *  usually wider than the divider to facilitate easier dragging.\n * @cssproperty [--min=0] - The minimum allowed size of the primary panel.\n * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.\n */",
+          "jsDoc": "/**\n * @summary Split panels display two adjacent panels separated by a draggable divider, letting users resize each side to\n *  suit their workflow.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/split-panel\n * @status stable\n * @since 0.1\n *\n * @event cs-reposition - Emitted when the divider's position changes.\n *\n * @slot start - Content to place in the start panel.\n * @slot end - Content to place in the end panel.\n * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.\n *\n * @csspart start - The start panel.\n * @csspart end - The end panel.\n * @csspart panel - Targets both the start and end panels.\n * @csspart divider - The divider that separates the start and end panels.\n *\n * @cssproperty [--divider-width=4px] - The width of the visible divider.\n * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is\n *  usually wider than the divider to facilitate easier dragging.\n * @cssproperty [--min=0] - The minimum allowed size of the primary panel.\n * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/split-panel",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-split-panel",
           "customElement": true,
           "modulePath": "components/split-panel/split-panel.js",
@@ -41106,10 +41111,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Switches toggle a single setting on or off and apply the change immediately, without requiring a form\nsubmission.",
-          "jsDoc": "/**\n * @summary Switches toggle a single setting on or off and apply the change immediately, without requiring a form\n *  submission.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n * @slot hint - Text that describes how to use the switch. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when the control's checked state changes.\n * @event input - Emitted when the control receives input.\n * @event focus - Emitted when the control gains focus.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart switch - The component's outer wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n * @csspart hint - The hint's wrapper.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */",
+          "jsDoc": "/**\n * @summary Switches toggle a single setting on or off and apply the change immediately, without requiring a form\n *  submission.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/switch\n * @status stable\n * @since 0.1\n *\n * @slot - The switch's label.\n * @slot hint - Text that describes how to use the switch. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when the control's checked state changes.\n * @event input - Emitted when the control receives input.\n * @event focus - Emitted when the control gains focus.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart switch - The component's outer wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n * @csspart hint - The hint's wrapper.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/switch",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-switch",
           "customElement": true,
           "modulePath": "components/switch/switch.js",
@@ -41376,10 +41381,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Tabs label and activate an individual panel inside a tab group.",
-          "jsDoc": "/**\n * @summary Tabs label and activate an individual panel inside a tab group.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tab\n * @status stable\n * @since 2.0\n *\n * @slot - The tab's label.\n *\n * @csspart tab - The component's outer wrapper.\n */",
+          "jsDoc": "/**\n * @summary Tabs label and activate an individual panel inside a tab group.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tab\n * @status stable\n * @since 0.1\n *\n * @slot - The tab's label.\n *\n * @csspart tab - The component's outer wrapper.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/tab",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-tab",
           "customElement": true,
           "modulePath": "components/tab/tab.js",
@@ -41632,10 +41637,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Tab panels hold the content shown for a single tab inside a tab group.",
-          "jsDoc": "/**\n * @summary Tab panels hold the content shown for a single tab inside a tab group.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tab-panel\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n *\n * @cssproperty --padding - The tab panel's padding.\n */",
+          "jsDoc": "/**\n * @summary Tab panels hold the content shown for a single tab inside a tab group.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tab-panel\n * @status stable\n * @since 0.1\n *\n * @slot - The tab panel's content.\n *\n *\n * @cssproperty --padding - The tab panel's padding.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/tab-panel",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-tab-panel",
           "customElement": true,
           "modulePath": "components/tab-panel/tab-panel.js",
@@ -42167,10 +42172,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Tab groups organize related content into a single container that displays one panel at a time, with tabs for\nswitching between them.",
-          "jsDoc": "/**\n * @summary Tab groups organize related content into a single container that displays one panel at a time, with tabs for\n *  switching between them.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tab-group\n * @status stable\n * @since 2.0\n *\n * @dependency cs-button\n * @dependency cs-tab\n * @dependency cs-tab-panel\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `<cs-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<cs-tab>` elements. Note that `<cs-tab>` will set this\n *  slot on itself automatically.\n *\n * @event {{ name: String }} cs-tab-show - Emitted when a tab is shown.\n * @event {{ name: String }} cs-tab-hide - Emitted when a tab is hidden.\n *\n * @csspart tab-group - The component's outer wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, a `<cs-button>`.\n * @csspart scroll-button-start - The starting scroll button.\n * @csspart scroll-button-end - The ending scroll button.\n * @csspart scroll-button__button - The scroll button's exported `button` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n *\n * @ssr - During SSR, `<cs-tab-group>` can't access its children to determine which tab is active. To render the correct panel, manually set the `active` attribute on the matching `<cs-tab>` and `<cs-tab-panel>`.\n */",
+          "jsDoc": "/**\n * @summary Tab groups organize related content into a single container that displays one panel at a time, with tabs for\n *  switching between them.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tab-group\n * @status stable\n * @since 0.1\n *\n * @dependency cs-button\n * @dependency cs-tab\n * @dependency cs-tab-panel\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `<cs-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<cs-tab>` elements. Note that `<cs-tab>` will set this\n *  slot on itself automatically.\n *\n * @event {{ name: String }} cs-tab-show - Emitted when a tab is shown.\n * @event {{ name: String }} cs-tab-hide - Emitted when a tab is hidden.\n *\n * @csspart tab-group - The component's outer wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, a `<cs-button>`.\n * @csspart scroll-button-start - The starting scroll button.\n * @csspart scroll-button-end - The ending scroll button.\n * @csspart scroll-button__button - The scroll button's exported `button` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n *\n * @ssr - During SSR, `<cs-tab-group>` can't access its children to determine which tab is active. To render the correct panel, manually set the `active` attribute on the matching `<cs-tab>` and `<cs-tab-panel>`.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/tab-group",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-button",
             "cs-tab",
@@ -43614,10 +43619,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Textareas collect multi-line text input from the user, with optional resizing and character counting.",
-          "jsDoc": "/**\n * @summary Textareas collect multi-line text input from the user, with optional resizing and character counting.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/textarea\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when an alteration to the control's value is committed by the user.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted when the control receives input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control-label - The label.\n * @csspart hint - The hint's wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n * @csspart textarea-wrapper - The component's outer wrapper.\n * @csspart textarea-adjuster - The invisible sizer that grows the control to fit its content when `resize` is `auto`.\n * @csspart count - The character count element, rendered when the `with-count` attribute is present.\n *\n * @cssstate blank - The textarea is empty.\n */",
+          "jsDoc": "/**\n * @summary Textareas collect multi-line text input from the user, with optional resizing and character counting.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/textarea\n * @status stable\n * @since 0.1\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.\n *\n * @event blur - Emitted when the control loses focus.\n * @event change - Emitted when an alteration to the control's value is committed by the user.\n * @event focus - Emitted when the control gains focus.\n * @event input - Emitted when the control receives input.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control-label - The label.\n * @csspart hint - The hint's wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n * @csspart textarea-wrapper - The component's outer wrapper.\n * @csspart textarea-adjuster - The invisible sizer that grows the control to fit its content when `resize` is `auto`.\n * @csspart count - The character count element, rendered when the `with-count` attribute is present.\n *\n * @cssstate blank - The textarea is empty.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/textarea",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "tagName": "cs-textarea",
           "customElement": true,
           "modulePath": "components/textarea/textarea.js",
@@ -46393,10 +46398,10 @@
             "module": "/src/internal/cornerstone-form-associated-element.js"
           },
           "summary": "Time pickers let users enter a time through a segmented field or select one visually from a popup column\npicker. They support 12- and 24-hour formats, optional seconds, and locale-aware segment order.",
-          "jsDoc": "/**\n * @summary Time pickers let users enter a time through a segmented field or select one visually from a popup column\n *  picker. They support 12- and 24-hour formats, optional seconds, and locale-aware segment order.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/time-input\n * @status experimental\n * @since 3.8\n *\n * @dependency cs-icon\n * @dependency cs-popup\n *\n * @slot label - The time picker's label. Alternatively, use the `label` attribute.\n * @slot hint - Text that describes how to use the time picker. Alternatively, use the `hint` attribute.\n * @slot start - An element placed at the start of the input.\n * @slot end - An element placed at the end of the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show on the popup toggle button. Defaults to a clock icon.\n * @slot footer - Content shown below the column picker in the popup. Replaces the default Now button when present.\n *\n * @event change - Emitted when the committed value changes.\n * @event input - Emitted as the user types into a segment or interacts with the popup columns.\n * @event focus - Emitted when the control receives focus.\n * @event blur - Emitted when the control loses focus.\n * @event cs-clear - Emitted when the clear button is activated.\n * @event cs-show - Emitted when the popup is about to open. Cancelable.\n * @event cs-after-show - Emitted after the popup opens and animations complete.\n * @event cs-hide - Emitted when the popup is about to close. Cancelable.\n * @event cs-after-hide - Emitted after the popup closes and animations complete.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The input's wrapper.\n * @csspart hint - The hint's wrapper.\n * @csspart time-input - The component's outer wrapper.\n * @csspart input-wrapper - The container around the start slot, segmented input, clear button, and expand button.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart input - The segmented input group.\n * @csspart segment - Each editable segment (hour/minute/second/AM-PM spinbutton). Use `[part~=\"segment\"]` to style all.\n * @csspart segment-literal - Inert literal text between segments (separators).\n * @csspart clear-button - The clear button.\n * @csspart expand-button - The popup toggle button.\n * @csspart expand-icon - The expand icon wrapper.\n * @csspart popup - The popup container.\n * @csspart columns - The row of column listboxes inside the popup.\n * @csspart column - Each column listbox.\n * @csspart column-hour - The hour column listbox.\n * @csspart column-minute - The minute column listbox.\n * @csspart column-second - The second column listbox.\n * @csspart column-day-period - The AM/PM column listbox.\n * @csspart column-item - Each option inside a column.\n * @csspart column-item-selected - The currently selected option inside a column.\n * @csspart now-button - The default \"Now\" button rendered in the popup footer when `with-now` is set.\n *\n * @cssproperty [--show-duration=var(--cs-transition-fast)] - The duration of the show animation.\n * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The duration of the hide animation.\n * @cssproperty [--column-item-height=2.25em] - Height of each option inside a popup column.\n * @cssproperty [--column-width=3em] - Width of each popup column.\n *\n * @cssstate blank - The time picker has no committed value.\n * @cssstate open - The popup is open.\n * @cssstate disabled - The time picker is disabled.\n */",
+          "jsDoc": "/**\n * @summary Time pickers let users enter a time through a segmented field or select one visually from a popup column\n *  picker. They support 12- and 24-hour formats, optional seconds, and locale-aware segment order.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/time-input\n * @status experimental\n * @since 0.1\n *\n * @dependency cs-icon\n * @dependency cs-popup\n *\n * @slot label - The time picker's label. Alternatively, use the `label` attribute.\n * @slot hint - Text that describes how to use the time picker. Alternatively, use the `hint` attribute.\n * @slot start - An element placed at the start of the input.\n * @slot end - An element placed at the end of the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show on the popup toggle button. Defaults to a clock icon.\n * @slot footer - Content shown below the column picker in the popup. Replaces the default Now button when present.\n *\n * @event change - Emitted when the committed value changes.\n * @event input - Emitted as the user types into a segment or interacts with the popup columns.\n * @event focus - Emitted when the control receives focus.\n * @event blur - Emitted when the control loses focus.\n * @event cs-clear - Emitted when the clear button is activated.\n * @event cs-show - Emitted when the popup is about to open. Cancelable.\n * @event cs-after-show - Emitted after the popup opens and animations complete.\n * @event cs-hide - Emitted when the popup is about to close. Cancelable.\n * @event cs-after-hide - Emitted after the popup closes and animations complete.\n * @event cs-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and hint.\n * @csspart form-control-label - The label.\n * @csspart form-control-input - The input's wrapper.\n * @csspart hint - The hint's wrapper.\n * @csspart time-input - The component's outer wrapper.\n * @csspart input-wrapper - The container around the start slot, segmented input, clear button, and expand button.\n * @csspart start - The container that wraps the `start` slot.\n * @csspart end - The container that wraps the `end` slot.\n * @csspart input - The segmented input group.\n * @csspart segment - Each editable segment (hour/minute/second/AM-PM spinbutton). Use `[part~=\"segment\"]` to style all.\n * @csspart segment-literal - Inert literal text between segments (separators).\n * @csspart clear-button - The clear button.\n * @csspart expand-button - The popup toggle button.\n * @csspart expand-icon - The expand icon wrapper.\n * @csspart popup - The popup container.\n * @csspart columns - The row of column listboxes inside the popup.\n * @csspart column - Each column listbox.\n * @csspart column-hour - The hour column listbox.\n * @csspart column-minute - The minute column listbox.\n * @csspart column-second - The second column listbox.\n * @csspart column-day-period - The AM/PM column listbox.\n * @csspart column-item - Each option inside a column.\n * @csspart column-item-selected - The currently selected option inside a column.\n * @csspart now-button - The default \"Now\" button rendered in the popup footer when `with-now` is set.\n *\n * @cssproperty [--show-duration=var(--cs-transition-fast)] - The duration of the show animation.\n * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The duration of the hide animation.\n * @cssproperty [--column-item-height=2.25em] - Height of each option inside a popup column.\n * @cssproperty [--column-width=3em] - Width of each popup column.\n *\n * @cssstate blank - The time picker has no committed value.\n * @cssstate open - The popup is open.\n * @cssstate disabled - The time picker is disabled.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/time-input",
           "status": "experimental",
-          "since": "3.8",
+          "since": "0.1",
           "dependencies": [
             "cs-icon",
             "cs-popup"
@@ -46866,10 +46871,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Toast items are individual notifications displayed within a toast container.",
-          "jsDoc": "/**\n * @summary Toast items are individual notifications displayed within a toast container.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/toast\n * @status stable\n * @since 3.3\n *\n * @dependency cs-icon\n * @dependency cs-progress-ring\n *\n * @slot - The toast item's message content.\n * @slot icon - An optional icon to show at the start of the toast item.\n *\n * @event cs-show - Emitted when the toast item begins to show.\n * @event cs-after-show - Emitted after the toast item has finished showing.\n * @event cs-hide - Emitted when the toast item begins to hide.\n * @event cs-after-hide - Emitted after the toast item has finished hiding.\n *\n * @csspart toast-item - The toast item's main container.\n * @csspart accent - The colored accent line on the start side.\n * @csspart icon - The icon container.\n * @csspart content - The message content container.\n * @csspart close-button - The close button element.\n * @csspart progress-ring - The progress ring component.\n * @csspart progress-ring__progress-ring - The progress ring's exported `progress-ring` part.\n * @csspart progress-ring__label - The progress ring's exported label part.\n * @csspart progress-ring__track - The progress ring's exported track part.\n * @csspart progress-ring__indicator - The progress ring's exported indicator part.\n * @csspart close-icon - The close icon element.\n * @csspart close-icon__svg - The close icon's exported svg part.\n *\n * @cssproperty --accent-width - The width of the accent line. Defaults to 4px.\n * @cssproperty --padding - The internal spacing of the toast item. Scales with the `size` attribute.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The animation duration when showing.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The animation duration when hiding.\n */",
+          "jsDoc": "/**\n * @summary Toast items are individual notifications displayed within a toast container.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/toast\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n * @dependency cs-progress-ring\n *\n * @slot - The toast item's message content.\n * @slot icon - An optional icon to show at the start of the toast item.\n *\n * @event cs-show - Emitted when the toast item begins to show.\n * @event cs-after-show - Emitted after the toast item has finished showing.\n * @event cs-hide - Emitted when the toast item begins to hide.\n * @event cs-after-hide - Emitted after the toast item has finished hiding.\n *\n * @csspart toast-item - The toast item's main container.\n * @csspart accent - The colored accent line on the start side.\n * @csspart icon - The icon container.\n * @csspart content - The message content container.\n * @csspart close-button - The close button element.\n * @csspart progress-ring - The progress ring component.\n * @csspart progress-ring__progress-ring - The progress ring's exported `progress-ring` part.\n * @csspart progress-ring__label - The progress ring's exported label part.\n * @csspart progress-ring__track - The progress ring's exported track part.\n * @csspart progress-ring__indicator - The progress ring's exported indicator part.\n * @csspart close-icon - The close icon element.\n * @csspart close-icon__svg - The close icon's exported svg part.\n *\n * @cssproperty --accent-width - The width of the accent line. Defaults to 4px.\n * @cssproperty --padding - The internal spacing of the toast item. Scales with the `size` attribute.\n * @cssproperty [--show-duration=var(--cs-transition-normal)] - The animation duration when showing.\n * @cssproperty [--hide-duration=var(--cs-transition-normal)] - The animation duration when hiding.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/toast",
           "status": "stable",
-          "since": "3.3",
+          "since": "0.1",
           "dependencies": [
             "cs-icon",
             "cs-progress-ring"
@@ -47195,10 +47200,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Toasts display brief, non-blocking notifications that appear temporarily above the page content.",
-          "jsDoc": "/**\n * @summary Toasts display brief, non-blocking notifications that appear temporarily above the page content.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/toast\n * @status stable\n * @since 3.3\n *\n * @dependency cs-toast-item\n *\n * @slot - Place `<cs-toast-item>` elements here to show them as notifications.\n *\n * @csspart stack - The container that holds the toast items.\n *\n * @cssproperty [--gap=var(--cs-space-s)] - The gap between stacked toast items.\n * @cssproperty [--width=28rem] - The width of the toast stack.\n *\n * @cssstate visible - Applied when the toast stack has one or more visible toast items.\n */",
+          "jsDoc": "/**\n * @summary Toasts display brief, non-blocking notifications that appear temporarily above the page content.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/toast\n * @status stable\n * @since 0.1\n *\n * @dependency cs-toast-item\n *\n * @slot - Place `<cs-toast-item>` elements here to show them as notifications.\n *\n * @csspart stack - The container that holds the toast items.\n *\n * @cssproperty [--gap=var(--cs-space-s)] - The gap between stacked toast items.\n * @cssproperty [--width=28rem] - The width of the toast stack.\n *\n * @cssstate visible - Applied when the toast stack has one or more visible toast items.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/toast",
           "status": "stable",
-          "since": "3.3",
+          "since": "0.1",
           "dependencies": [
             "cs-toast-item"
           ],
@@ -47656,10 +47661,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded\nand collapsed as desired by the user.",
-          "jsDoc": "/**\n * @summary Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded\n *  and collapsed as desired by the user.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tree\n * @status stable\n * @since 2.0\n *\n * @dependency cs-tree-item\n *\n * @event {{ selection: CsTreeItem[] }} cs-selection-change - Emitted when a tree item is selected or deselected.\n *\n * @slot - The default slot.\n * @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<cs-icon>`.\n * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<cs-icon>`.\n *\n * @csspart tree - The component's outer wrapper.\n *\n * @cssproperty [--indent-size=var(--cs-space-m)] - The size of the indentation for nested items.\n * @cssproperty [--indent-guide-color=var(--cs-color-surface-border)] - The color of the indentation line.\n * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the\n *  indentation line's starting position.\n * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.\n * @cssproperty [--indent-guide-width=0] - The width of the indentation line.\n */",
+          "jsDoc": "/**\n * @summary Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded\n *  and collapsed as desired by the user.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/tree\n * @status stable\n * @since 0.1\n *\n * @dependency cs-tree-item\n *\n * @event {{ selection: CsTreeItem[] }} cs-selection-change - Emitted when a tree item is selected or deselected.\n *\n * @slot - The default slot.\n * @slot expand-icon - The icon to show when the tree item is expanded. Works best with `<cs-icon>`.\n * @slot collapse-icon - The icon to show when the tree item is collapsed. Works best with `<cs-icon>`.\n *\n * @csspart tree - The component's outer wrapper.\n *\n * @cssproperty [--indent-size=var(--cs-space-m)] - The size of the indentation for nested items.\n * @cssproperty [--indent-guide-color=var(--cs-color-surface-border)] - The color of the indentation line.\n * @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the\n *  indentation line's starting position.\n * @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.\n * @cssproperty [--indent-guide-width=0] - The width of the indentation line.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/tree",
           "status": "stable",
-          "since": "2.0",
+          "since": "0.1",
           "dependencies": [
             "cs-tree-item"
           ],
@@ -48285,10 +48290,10 @@
             "module": "/src/internal/cornerstone-element.js"
           },
           "summary": "Zoomable frames embed iframe content with built-in controls for zooming, panning, and managing interaction.",
-          "jsDoc": "/**\n * @summary Zoomable frames embed iframe content with built-in controls for zooming, panning, and managing interaction.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/zoomable-frame\n * @status stable\n * @since 3.0\n *\n * @dependency cs-icon\n *\n * @slot zoom-in-icon - The slot that contains the zoom in icon.\n * @slot zoom-out-icon - The slot that contains the zoom out icon.\n *\n * @event load - Emitted when the internal iframe when it finishes loading.\n * @event error - Emitted from the internal iframe when it fails to load.\n *\n * @csspart iframe - The internal `<iframe>` element.\n * @csspart controls - The container that surrounds zoom control buttons.\n * @csspart zoom-in-button - The zoom in button.\n * @csspart zoom-out-button - The zoom out button.\n */",
+          "jsDoc": "/**\n * @summary Zoomable frames embed iframe content with built-in controls for zooming, panning, and managing interaction.\n * @documentation https://cruglobal.github.io/cornerstone-design-system/components/zoomable-frame\n * @status stable\n * @since 0.1\n *\n * @dependency cs-icon\n *\n * @slot zoom-in-icon - The slot that contains the zoom in icon.\n * @slot zoom-out-icon - The slot that contains the zoom out icon.\n *\n * @event load - Emitted when the internal iframe when it finishes loading.\n * @event error - Emitted from the internal iframe when it fails to load.\n *\n * @csspart iframe - The internal `<iframe>` element.\n * @csspart controls - The container that surrounds zoom control buttons.\n * @csspart zoom-in-button - The zoom in button.\n * @csspart zoom-out-button - The zoom out button.\n */",
           "documentation": "https://cruglobal.github.io/cornerstone-design-system/components/zoomable-frame",
           "status": "stable",
-          "since": "3.0",
+          "since": "0.1",
           "dependencies": [
             "cs-icon"
           ],
@@ -52825,7 +52830,7 @@
   "package": {
     "name": "@cruglobal/cornerstone-components",
     "description": "The custom-element library of the Cornerstone design system.",
-    "version": "0.1.1",
+    "version": "0.1.3",
     "author": "Cru Global",
     "homepage": "https://cruglobal.github.io/cornerstone-design-system",
     "license": "MIT"