@quartzds/core 1.0.0-beta.81 → 1.0.0-beta.82

package/dist/cjs/qds-list-item.cjs.entry.js

@@ -7,7 +7,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a9985af0.js');
+const index = require('./index-644fe556.js');
 const helpers = require('./helpers-cdd65bd0.js');
 
 const listItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-indented-content,.qds-list-item{align-items:center;box-sizing:border-box;display:flex}.qds-list-action{pointer-events:none}.qds-indented-content{align-self:stretch;flex:1 0}.qds-destination{transform:scaleX(var(--qds-direction-factor,1))}.qds-divider{border-block-end:var(--qds-list-border-width) solid var(--qds-theme-divider-standard)}.qds-icon{color:var(--qds-theme-text-standard)}.qds-texts{display:flex;flex:1 0;flex-direction:column;justify-items:center;padding:0;position:relative}.qds-input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--qds-control-border-radius);inset:0;margin:0;outline:none;position:absolute}.qds-title{color:var(--qds-theme-title)}.qds-subtitle{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker)}.qds-list-item[data-size=small]{gap:var(--qds-list-item-small-gap-internal);padding-inline-start:var(--qds-list-item-small-padding-horizontal)}[data-size=small] .qds-indented-content{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline-end:var(--qds-list-item-small-padding-horizontal)}[data-size=small] .qds-icon{font-size:var(--qds-control-small-icon-size)}[data-size=small] .qds-main-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size=small] .qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-kicker{font:var(--qds-list-item-small-kicker)}[data-size=small] .qds-title{font:var(--qds-list-item-small-title)}[data-size=small] .qds-subtitle{font:var(--qds-list-item-small-subtitle)}.qds-list-item[data-size=standard]{gap:var(--qds-list-item-standard-gap-internal);padding-inline-start:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .qds-indented-content{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline-end:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .qds-icon{font-size:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-main-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size=standard] .qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-kicker{font:var(--qds-list-item-standard-kicker)}[data-size=standard] .qds-title{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-subtitle{font:var(--qds-list-item-standard-subtitle)}.qds-list-item[data-size=large]{gap:var(--qds-list-item-large-gap-internal);padding-inline-start:var(--qds-list-item-large-padding-horizontal)}[data-size=large] .qds-indented-content{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline-end:var(--qds-list-item-large-padding-horizontal)}[data-size=large] .qds-icon{font-size:var(--qds-control-large-icon-size)}[data-size=large] .qds-main-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size=large] .qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-kicker{font:var(--qds-list-item-large-kicker)}[data-size=large] .qds-title{font:var(--qds-list-item-large-title)}[data-size=large] .qds-subtitle{font:var(--qds-list-item-large-subtitle)}.qds-list-item:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-list-item:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-list-item:has(input:focus-visible){outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size=small] .qds-title{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size=standard] .qds-title{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size=large] .qds-title{font:var(--qds-list-item-large-title-emphasized)}:host(:last-of-type) .qds-divider{border-block-end:none}";
@@ -31,6 +31,19 @@ const ListItem = class {
         this.changeEmitter = index.createEvent(this, "qdsChange", 6);
         this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
         _ListItem_instances.add(this);
+        /**
+         * Prevents the list item from being interacted with: it cannot be selected
+         * or focused.
+         */
+        this.disabled = false;
+        /**
+         * The name of a registered icon library.
+         */
+        this.iconLibrary = 'default';
+        /**
+         * The list items's size.
+         */
+        this.size = 'standard';
         this.inheritedAttributes = {};
         _ListItem_onBlur.set(this, (event) => {
             this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
@@ -38,20 +51,6 @@ const ListItem = class {
         _ListItem_onFocus.set(this, (event) => {
             this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
         });
-        this.destination = undefined;
-        this.disabled = false;
-        this.divider = undefined;
-        this.iconName = undefined;
-        this.iconLibrary = 'default';
-        this.kicker = undefined;
-        this.listAction = undefined;
-        this.size = 'standard';
-        this.checked = undefined;
-        this.selected = undefined;
-        this.indeterminate = undefined;
-        this.text = undefined;
-        this.subtitle = undefined;
-        this.tabIndex = undefined;
     }
     onClick(event) {
         if (this.disabled) {
@@ -82,7 +81,7 @@ const ListItem = class {
         return (
         /* eslint-disable jsx-a11y/label-has-associated-control */
         // eslint-disable-next-line jsx-a11y/no-redundant-roles
-        index.h("li", { key: 'c09bbb11c3ae41ee243258bf17a6b50a08a7ab9f', class: {
+        index.h("li", { key: 'c85d55cd3ac8feac479d083eda49f4f0b30d0479', class: {
                 'qds-list-item': true,
                 'qds-disabled': this.disabled,
                 'qds-divider': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDivider_get) === undefined,
@@ -91,10 +90,10 @@ const ListItem = class {
                 'qds-checked': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedChecked_get),
             }, "data-size": __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSize_get), role: "listitem" // Required because it can't be a direct child of a list element (<ul>, <ol>, or <menu>).
             ,
-            ...this.inheritedAttributes }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (index.h("qds-checkbox", { key: 'b742bc469102b814accd5d4db4042f1c773e77ec', checked: this.checked, class: "qds-list-action", indeterminate: this.indeterminate, size: this.size, tabIndex: -1 })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'reorder' && (index.h("qds-icon", { key: '19401bc80454f6f66aa79d8744c6ab41e6f3926e', "aria-hidden": "true", class: "qds-icon qds-list-action", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) })), index.h("div", { key: 'b63f3a1d35567a402d919b619098202c499b5a2b', class: {
+            ...this.inheritedAttributes }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (index.h("qds-checkbox", { key: '66b8c8d52826ea1b040677510c1ea25743f8b0e2', checked: this.checked, class: "qds-list-action", indeterminate: this.indeterminate, size: this.size, tabIndex: -1 })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'reorder' && (index.h("qds-icon", { key: '3604e1d5a72df42062c7c5a03a05a9a1707cfadd', "aria-hidden": "true", class: "qds-icon qds-list-action", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) })), index.h("div", { key: '99cd3e6336faf58bd79eb3c7a6667a6a287d64a4', class: {
                 'qds-indented-content': true,
                 'qds-divider': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDivider_get) === 'indent',
-            } }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '4a7a33b8a07812dd2f82a35e1615a80eab443970', "aria-hidden": "true", class: "qds-icon qds-main-icon", library: this.iconLibrary, name: this.iconName })), index.h("label", { key: 'ecb452a095ff09f7d77c335857800362a25b6418', class: "qds-texts" }, index.h("input", { key: '676fa3ea37f79adde13763459a9fbee81f32f1c9', checked: this.selected, class: "qds-input", disabled: this.disabled, indeterminate: this.indeterminate, onBlur: __classPrivateFieldGet(this, _ListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _ListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "checkbox" }), this.kicker !== undefined && this.kicker !== '' && (index.h("div", { key: 'd6f02a501a2e2df5f968bff27b490e2f1390905f', class: "qds-kicker" }, this.kicker)), index.h("div", { key: 'b9d1695fc5e56f1019553b579aeecab54a92ae28', class: "qds-title" }, this.text), this.subtitle !== undefined && this.subtitle !== '' && (index.h("div", { key: '169a31d0e5e5dcd3c52f2e47b3a01d9f7b4883a9', class: "qds-subtitle" }, this.subtitle))), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) !== undefined && (index.h("qds-icon", { key: 'c544cda251453764a876427832e2f81147d6259f', "aria-hidden": "true", class: "qds-icon qds-destination", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) }))))
+            } }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '8daf63c28a4d387196dcc3b1cb60a8b4f0afdc56', "aria-hidden": "true", class: "qds-icon qds-main-icon", library: this.iconLibrary, name: this.iconName })), index.h("label", { key: 'abd654bb49b8c2ed41233e4ebab6270d50da1da0', class: "qds-texts" }, index.h("input", { key: 'd7ce19ddee65f6a40bd0f2823fa84afdc7925857', checked: this.selected, class: "qds-input", disabled: this.disabled, indeterminate: this.indeterminate, onBlur: __classPrivateFieldGet(this, _ListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _ListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "checkbox" }), this.kicker !== undefined && this.kicker !== '' && (index.h("div", { key: '0824029326ce58e80aa5b1f144b1827178c277f9', class: "qds-kicker" }, this.kicker)), index.h("div", { key: '2049720eabea49046fa13db72429fb1d574b125b', class: "qds-title" }, this.text), this.subtitle !== undefined && this.subtitle !== '' && (index.h("div", { key: '9420a3edf55cea66b3432f64143b6676ce370a95', class: "qds-subtitle" }, this.subtitle))), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) !== undefined && (index.h("qds-icon", { key: '49afdc79bd2d18dac611bda6ebd72a8c8704382e', "aria-hidden": "true", class: "qds-icon qds-destination", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) }))))
         /* eslint-enable jsx-a11y/label-has-associated-control */
         );
     }

package/dist/cjs/qds-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"qds-list-item.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-list-item,\n.qds-indented-content {\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.qds-list-action {\n  pointer-events: none;\n}\n\n.qds-indented-content {\n  flex: 1 0;\n  align-self: stretch;\n}\n\n.qds-destination {\n  transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-divider {\n  border-block-end: var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard);\n}\n\n.qds-icon {\n  color: var(--qds-theme-text-standard);\n}\n\n.qds-texts {\n  justify-items: center;\n  display: flex;\n  flex: 1 0;\n  flex-direction: column;\n  padding: 0;\n  position: relative;\n}\n\n.qds-input {\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: var(--qds-control-border-radius);\n  inset: 0;\n  margin: 0;\n  outline: none;\n  position: absolute;\n}\n\n.qds-title {\n  color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n  color: var(--qds-theme-kicker);\n}\n\n[data-size='small'] {\n  &.qds-list-item {\n    gap: var(--qds-list-item-small-gap-internal);\n    padding-inline-start: var(--qds-list-item-small-padding-horizontal);\n  }\n\n  .qds-indented-content {\n    gap: var(--qds-list-item-small-gap-internal);\n    min-height: var(--qds-list-item-small-height);\n    padding-block: var(--qds-list-item-small-padding-vertical);\n    padding-inline-end: var(--qds-list-item-small-padding-horizontal);\n  }\n\n  .qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n\n  .qds-main-icon {\n    font-size: var(--qds-list-item-small-icon-size);\n  }\n\n  .qds-texts {\n    gap: var(--qds-list-item-small-titles-gap);\n  }\n\n  .qds-kicker {\n    font: var(--qds-list-item-small-kicker);\n  }\n\n  .qds-title {\n    font: var(--qds-list-item-small-title);\n  }\n\n  .qds-subtitle {\n    font: var(--qds-list-item-small-subtitle);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-list-item {\n    gap: var(--qds-list-item-standard-gap-internal);\n    padding-inline-start: var(--qds-list-item-standard-padding-horizontal);\n  }\n\n  .qds-indented-content {\n    gap: var(--qds-list-item-standard-gap-internal);\n    min-height: var(--qds-list-item-standard-height);\n    padding-block: var(--qds-list-item-standard-padding-vertical);\n    padding-inline-end: var(--qds-list-item-standard-padding-horizontal);\n  }\n\n  .qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n\n  .qds-main-icon {\n    font-size: var(--qds-list-item-standard-icon-size);\n  }\n\n  .qds-texts {\n    gap: var(--qds-list-item-standard-titles-gap);\n  }\n\n  .qds-kicker {\n    font: var(--qds-list-item-standard-kicker);\n  }\n\n  .qds-title {\n    font: var(--qds-list-item-standard-title);\n  }\n\n  .qds-subtitle {\n    font: var(--qds-list-item-standard-subtitle);\n  }\n}\n\n[data-size='large'] {\n  &.qds-list-item {\n    gap: var(--qds-list-item-large-gap-internal);\n    padding-inline-start: var(--qds-list-item-large-padding-horizontal);\n  }\n\n  .qds-indented-content {\n    gap: var(--qds-list-item-large-gap-internal);\n    min-height: var(--qds-list-item-large-height);\n    padding-block: var(--qds-list-item-large-padding-vertical);\n    padding-inline-end: var(--qds-list-item-large-padding-horizontal);\n  }\n\n  .qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n\n  .qds-main-icon {\n    font-size: var(--qds-list-item-large-icon-size);\n  }\n\n  .qds-texts {\n    gap: var(--qds-list-item-large-titles-gap);\n  }\n\n  .qds-kicker {\n    font: var(--qds-list-item-large-kicker);\n  }\n\n  .qds-title {\n    font: var(--qds-list-item-large-title);\n  }\n\n  .qds-subtitle {\n    font: var(--qds-list-item-large-subtitle);\n  }\n}\n\n.qds-list-item {\n  &:hover {\n    background-color: var(--qds-theme-interactive-background-hover);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-interactive-background-pressed);\n  }\n\n  &:has(input:focus-visible) {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n.qds-selected {\n  &.qds-list-item {\n    background-color: var(--qds-theme-interactive-background-selected);\n  }\n\n  &[data-size='small'] .qds-title {\n    font: var(--qds-list-item-small-title-emphasized);\n  }\n\n  &[data-size='standard'] .qds-title {\n    font: var(--qds-list-item-standard-title-emphasized);\n  }\n\n  &[data-size='large'] .qds-title {\n    font: var(--qds-list-item-large-title-emphasized);\n  }\n}\n\n:host(:last-of-type) {\n  .qds-divider {\n    border-block-end: none;\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\nexport type Destination = 'navigation'\nexport type ListAction = 'multiselect' | 'reorder'\nexport type Divider = 'hide' | 'indent'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n  tag: 'qds-list-item',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n  /**\n   * The destination action that the list item denotes through its rightmost icon.\n   */\n  @Prop() public readonly destination?: Destination\n\n  /**\n   * Prevents the list item from being interacted with: it cannot be selected\n   * or focused.\n   */\n  @Prop() public readonly disabled: boolean = false\n\n  /**\n   * Control how to display the bottom divider line.\n   *\n   * By default, the divider is visible and uses the full width of the list item.\n   *\n   * Use the `hide` value to hide the divider completely (useful with multiselect).\n   *\n   * Use the `indent` value to align the left end of the divider to the icon/text (useful on mobile).\n   *\n   * **Note**: the divider is automatically hidden on the last list item in the parent container.\n   */\n  @Prop() public readonly divider?: Divider\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  /**\n   * The type of list-level action that the list item supports\n   */\n  @Prop() public readonly listAction?: ListAction\n\n  /**\n   * The list items's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Whether or not the list item is checked when `list-action=\"multiselect\"`\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * Whether or not the list item is selected.\n   */\n  @Prop({ mutable: true }) public selected?: boolean\n\n  /**\n   * Sets the list item to an indeterminate state, only when `list-action=\"indeterminate\"`.\n   * This is usually applied to items that represent a \"select all/none\" behavior when associated\n   * items have a mix of selected and unselected states.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public indeterminate?: boolean\n\n  /**\n   * The primary text of the list item.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * Text to display below the primary text.\n   */\n  @Prop() public readonly subtitle?: string\n\n  /**\n   * Emitted when the list item loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the checkbox's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the list item gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLQdsListItemElement\n\n  @State() private tabIndex?: number\n\n  private inheritedAttributes: Attributes = {}\n\n  get #computedDestination(): Destination | undefined {\n    switch (this.destination) {\n      case 'navigation': {\n        return this.destination\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedDivider(): Divider | undefined {\n    switch (this.divider) {\n      case 'hide':\n      case 'indent': {\n        return this.divider\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedIndeterminate(): boolean {\n    return this.indeterminate ?? false\n  }\n\n  get #computedListAction(): ListAction | undefined {\n    switch (this.listAction) {\n      case 'reorder':\n      case 'multiselect': {\n        return this.listAction\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedSelected(): boolean {\n    return this.selected ?? false\n  }\n\n  get #computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    // Always prevent default behavior to avoid the internal `<input>`\n    // to toggle `checked` state inappropriately.\n    //\n    // Note that this will need adjustments once we add the `item-action` slot.\n    event.preventDefault()\n\n    if (this.listAction === 'multiselect') {\n      this.checked = this.#computedIndeterminate ? true : !this.#computedChecked\n      this.changeEmitter.emit()\n      this.indeterminate = false\n    }\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    return (\n      /* eslint-disable jsx-a11y/label-has-associated-control */\n      // eslint-disable-next-line jsx-a11y/no-redundant-roles\n      <li\n        class={{\n          'qds-list-item': true,\n          'qds-disabled': this.disabled,\n          'qds-divider': this.#computedDivider === undefined,\n          'qds-multiselect': this.#computedListAction === 'multiselect',\n          'qds-selected': this.#computedSelected,\n          'qds-checked': this.#computedChecked,\n        }}\n        data-size={this.#computedSize}\n        role=\"listitem\" // Required because it can't be a direct child of a list element (<ul>, <ol>, or <menu>).\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        {this.#computedListAction === 'multiselect' && (\n          <qds-checkbox\n            checked={this.checked}\n            class=\"qds-list-action\"\n            indeterminate={this.indeterminate}\n            size={this.size}\n            tabIndex={-1}\n          />\n        )}\n        {this.#computedListAction === 'reorder' && (\n          <qds-icon\n            aria-hidden=\"true\"\n            class=\"qds-icon qds-list-action\"\n            library=\"core\"\n            name={this.#computedListAction}\n          />\n        )}\n\n        <div\n          class={{\n            'qds-indented-content': true,\n            'qds-divider': this.#computedDivider === 'indent',\n          }}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon qds-main-icon\"\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n\n          <label class=\"qds-texts\">\n            <input\n              checked={this.selected}\n              class=\"qds-input\"\n              disabled={this.disabled}\n              indeterminate={this.indeterminate}\n              onBlur={this.#onBlur}\n              onFocus={this.#onFocus}\n              tabIndex={this.disabled ? undefined : this.tabIndex}\n              type=\"checkbox\"\n            />\n            {this.kicker !== undefined && this.kicker !== '' && (\n              <div class=\"qds-kicker\">{this.kicker}</div>\n            )}\n            <div class=\"qds-title\">{this.text}</div>\n            {this.subtitle !== undefined && this.subtitle !== '' && (\n              <div class=\"qds-subtitle\">{this.subtitle}</div>\n            )}\n          </label>\n          {this.#computedDestination !== undefined && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon qds-destination\"\n              library=\"core\"\n              name={this.#computedDestination}\n            />\n          )}\n        </div>\n      </li>\n      /* eslint-enable jsx-a11y/label-has-associated-control */\n    )\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}
+{"file":"qds-list-item.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-list-item,\n.qds-indented-content {\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.qds-list-action {\n  pointer-events: none;\n}\n\n.qds-indented-content {\n  flex: 1 0;\n  align-self: stretch;\n}\n\n.qds-destination {\n  transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-divider {\n  border-block-end: var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard);\n}\n\n.qds-icon {\n  color: var(--qds-theme-text-standard);\n}\n\n.qds-texts {\n  justify-items: center;\n  display: flex;\n  flex: 1 0;\n  flex-direction: column;\n  padding: 0;\n  position: relative;\n}\n\n.qds-input {\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: var(--qds-control-border-radius);\n  inset: 0;\n  margin: 0;\n  outline: none;\n  position: absolute;\n}\n\n.qds-title {\n  color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n  color: var(--qds-theme-kicker);\n}\n\n[data-size='small'] {\n  &.qds-list-item {\n    gap: var(--qds-list-item-small-gap-internal);\n    padding-inline-start: var(--qds-list-item-small-padding-horizontal);\n  }\n\n  .qds-indented-content {\n    gap: var(--qds-list-item-small-gap-internal);\n    min-height: var(--qds-list-item-small-height);\n    padding-block: var(--qds-list-item-small-padding-vertical);\n    padding-inline-end: var(--qds-list-item-small-padding-horizontal);\n  }\n\n  .qds-icon {\n    font-size: var(--qds-control-small-icon-size);\n  }\n\n  .qds-main-icon {\n    font-size: var(--qds-list-item-small-icon-size);\n  }\n\n  .qds-texts {\n    gap: var(--qds-list-item-small-titles-gap);\n  }\n\n  .qds-kicker {\n    font: var(--qds-list-item-small-kicker);\n  }\n\n  .qds-title {\n    font: var(--qds-list-item-small-title);\n  }\n\n  .qds-subtitle {\n    font: var(--qds-list-item-small-subtitle);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-list-item {\n    gap: var(--qds-list-item-standard-gap-internal);\n    padding-inline-start: var(--qds-list-item-standard-padding-horizontal);\n  }\n\n  .qds-indented-content {\n    gap: var(--qds-list-item-standard-gap-internal);\n    min-height: var(--qds-list-item-standard-height);\n    padding-block: var(--qds-list-item-standard-padding-vertical);\n    padding-inline-end: var(--qds-list-item-standard-padding-horizontal);\n  }\n\n  .qds-icon {\n    font-size: var(--qds-control-standard-icon-size);\n  }\n\n  .qds-main-icon {\n    font-size: var(--qds-list-item-standard-icon-size);\n  }\n\n  .qds-texts {\n    gap: var(--qds-list-item-standard-titles-gap);\n  }\n\n  .qds-kicker {\n    font: var(--qds-list-item-standard-kicker);\n  }\n\n  .qds-title {\n    font: var(--qds-list-item-standard-title);\n  }\n\n  .qds-subtitle {\n    font: var(--qds-list-item-standard-subtitle);\n  }\n}\n\n[data-size='large'] {\n  &.qds-list-item {\n    gap: var(--qds-list-item-large-gap-internal);\n    padding-inline-start: var(--qds-list-item-large-padding-horizontal);\n  }\n\n  .qds-indented-content {\n    gap: var(--qds-list-item-large-gap-internal);\n    min-height: var(--qds-list-item-large-height);\n    padding-block: var(--qds-list-item-large-padding-vertical);\n    padding-inline-end: var(--qds-list-item-large-padding-horizontal);\n  }\n\n  .qds-icon {\n    font-size: var(--qds-control-large-icon-size);\n  }\n\n  .qds-main-icon {\n    font-size: var(--qds-list-item-large-icon-size);\n  }\n\n  .qds-texts {\n    gap: var(--qds-list-item-large-titles-gap);\n  }\n\n  .qds-kicker {\n    font: var(--qds-list-item-large-kicker);\n  }\n\n  .qds-title {\n    font: var(--qds-list-item-large-title);\n  }\n\n  .qds-subtitle {\n    font: var(--qds-list-item-large-subtitle);\n  }\n}\n\n.qds-list-item {\n  &:hover {\n    background-color: var(--qds-theme-interactive-background-hover);\n  }\n\n  &:active {\n    background-color: var(--qds-theme-interactive-background-pressed);\n  }\n\n  &:has(input:focus-visible) {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n.qds-selected {\n  &.qds-list-item {\n    background-color: var(--qds-theme-interactive-background-selected);\n  }\n\n  &[data-size='small'] .qds-title {\n    font: var(--qds-list-item-small-title-emphasized);\n  }\n\n  &[data-size='standard'] .qds-title {\n    font: var(--qds-list-item-standard-title-emphasized);\n  }\n\n  &[data-size='large'] .qds-title {\n    font: var(--qds-list-item-large-title-emphasized);\n  }\n}\n\n:host(:last-of-type) {\n  .qds-divider {\n    border-block-end: none;\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\nexport type Destination = 'navigation'\nexport type ListAction = 'multiselect' | 'reorder'\nexport type Divider = 'hide' | 'indent'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n  tag: 'qds-list-item',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n  /**\n   * The destination action that the list item denotes through its rightmost icon.\n   */\n  @Prop() public readonly destination?: Destination\n\n  /**\n   * Prevents the list item from being interacted with: it cannot be selected\n   * or focused.\n   */\n  @Prop() public readonly disabled: boolean = false\n\n  /**\n   * Control how to display the bottom divider line.\n   *\n   * By default, the divider is visible and uses the full width of the list item.\n   *\n   * Use the `hide` value to hide the divider completely (useful with multiselect).\n   *\n   * Use the `indent` value to align the left end of the divider to the icon/text (useful on mobile).\n   *\n   * **Note**: the divider is automatically hidden on the last list item in the parent container.\n   */\n  @Prop() public readonly divider?: Divider\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  /**\n   * The type of list-level action that the list item supports\n   */\n  @Prop() public readonly listAction?: ListAction\n\n  /**\n   * The list items's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Whether or not the list item is checked when `list-action=\"multiselect\"`\n   */\n  @Prop({ mutable: true }) public checked?: boolean\n\n  /**\n   * Whether or not the list item is selected.\n   */\n  @Prop({ mutable: true }) public selected?: boolean\n\n  /**\n   * Sets the list item to an indeterminate state, only when `list-action=\"indeterminate\"`.\n   * This is usually applied to items that represent a \"select all/none\" behavior when associated\n   * items have a mix of selected and unselected states.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public indeterminate?: boolean\n\n  /**\n   * The primary text of the list item.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * Text to display below the primary text.\n   */\n  @Prop() public readonly subtitle?: string\n\n  /**\n   * Emitted when the list item loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the checkbox's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the list item gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLElement\n\n  @State() private tabIndex?: number\n\n  private inheritedAttributes: Attributes = {}\n\n  get #computedDestination(): Destination | undefined {\n    switch (this.destination) {\n      case 'navigation': {\n        return this.destination\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedDivider(): Divider | undefined {\n    switch (this.divider) {\n      case 'hide':\n      case 'indent': {\n        return this.divider\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedIndeterminate(): boolean {\n    return this.indeterminate ?? false\n  }\n\n  get #computedListAction(): ListAction | undefined {\n    switch (this.listAction) {\n      case 'reorder':\n      case 'multiselect': {\n        return this.listAction\n      }\n      default: {\n        return undefined\n      }\n    }\n  }\n\n  get #computedSelected(): boolean {\n    return this.selected ?? false\n  }\n\n  get #computedChecked(): boolean {\n    return this.checked ?? false\n  }\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation()\n      return\n    }\n\n    // Always prevent default behavior to avoid the internal `<input>`\n    // to toggle `checked` state inappropriately.\n    //\n    // Note that this will need adjustments once we add the `item-action` slot.\n    event.preventDefault()\n\n    if (this.listAction === 'multiselect') {\n      this.checked = this.#computedIndeterminate ? true : !this.#computedChecked\n      this.changeEmitter.emit()\n      this.indeterminate = false\n    }\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    return (\n      /* eslint-disable jsx-a11y/label-has-associated-control */\n      // eslint-disable-next-line jsx-a11y/no-redundant-roles\n      <li\n        class={{\n          'qds-list-item': true,\n          'qds-disabled': this.disabled,\n          'qds-divider': this.#computedDivider === undefined,\n          'qds-multiselect': this.#computedListAction === 'multiselect',\n          'qds-selected': this.#computedSelected,\n          'qds-checked': this.#computedChecked,\n        }}\n        data-size={this.#computedSize}\n        role=\"listitem\" // Required because it can't be a direct child of a list element (<ul>, <ol>, or <menu>).\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        {this.#computedListAction === 'multiselect' && (\n          <qds-checkbox\n            checked={this.checked}\n            class=\"qds-list-action\"\n            indeterminate={this.indeterminate}\n            size={this.size}\n            tabIndex={-1}\n          />\n        )}\n        {this.#computedListAction === 'reorder' && (\n          <qds-icon\n            aria-hidden=\"true\"\n            class=\"qds-icon qds-list-action\"\n            library=\"core\"\n            name={this.#computedListAction}\n          />\n        )}\n\n        <div\n          class={{\n            'qds-indented-content': true,\n            'qds-divider': this.#computedDivider === 'indent',\n          }}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon qds-main-icon\"\n              library={this.iconLibrary}\n              name={this.iconName}\n            />\n          )}\n\n          <label class=\"qds-texts\">\n            <input\n              checked={this.selected}\n              class=\"qds-input\"\n              disabled={this.disabled}\n              indeterminate={this.indeterminate}\n              onBlur={this.#onBlur}\n              onFocus={this.#onFocus}\n              tabIndex={this.disabled ? undefined : this.tabIndex}\n              type=\"checkbox\"\n            />\n            {this.kicker !== undefined && this.kicker !== '' && (\n              <div class=\"qds-kicker\">{this.kicker}</div>\n            )}\n            <div class=\"qds-title\">{this.text}</div>\n            {this.subtitle !== undefined && this.subtitle !== '' && (\n              <div class=\"qds-subtitle\">{this.subtitle}</div>\n            )}\n          </label>\n          {this.#computedDestination !== undefined && (\n            <qds-icon\n              aria-hidden=\"true\"\n              class=\"qds-icon qds-destination\"\n              library=\"core\"\n              name={this.#computedDestination}\n            />\n          )}\n        </div>\n      </li>\n      /* eslint-enable jsx-a11y/label-has-associated-control */\n    )\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}

package/dist/cjs/qds-loader.cjs.entry.js

@@ -7,9 +7,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a9985af0.js');
+const index = require('./index-644fe556.js');
 
-const loaderCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-loader{border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-feedback-action-destructive-contrast)}[data-size=small]{height:var(--qds-control-small-icon-size);padding:var(--qds-signature-circle-progress-small-border-width);width:var(--qds-control-small-icon-size)}[data-size=standard]{height:var(--qds-control-standard-icon-size);padding:var(--qds-signature-circle-progress-standard-border-width);width:var(--qds-control-standard-icon-size)}[data-size=large]{height:var(--qds-control-large-icon-size);padding:var(--qds-signature-circle-progress-large-border-width);width:var(--qds-control-large-icon-size)}[data-size=jumbo]{height:var(--qds-control-jumbo-icon-size);padding:var(--qds-signature-circle-progress-jumbo-border-width);width:var(--qds-control-jumbo-icon-size)}[data-status=loading]{animation:a 1s linear infinite;background-image:var(--qds-theme-signature-circle-progress-indeterminate);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}@keyframes a{to{transform:rotate(1turn)}}[data-status=success]{background-color:var(--qds-theme-feedback-result-success)}[data-status=warning]{background-color:var(--qds-theme-feedback-result-partial-success)}[data-status=error]{background-color:var(--qds-theme-feedback-result-failure)}";
+const loaderCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-loader{border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-feedback-action-destructive-contrast)}[data-size=small]{height:var(--qds-control-small-icon-size);padding:var(--qds-signature-circle-progress-small-border-width);width:var(--qds-control-small-icon-size)}[data-size=standard]{height:var(--qds-control-standard-icon-size);padding:var(--qds-signature-circle-progress-standard-border-width);width:var(--qds-control-standard-icon-size)}[data-size=large]{height:var(--qds-control-large-icon-size);padding:var(--qds-signature-circle-progress-large-border-width);width:var(--qds-control-large-icon-size)}[data-size=jumbo]{height:var(--qds-control-jumbo-icon-size);padding:var(--qds-signature-circle-progress-jumbo-border-width);width:var(--qds-control-jumbo-icon-size)}[data-status=loading]{animation:b 1s linear infinite;background-image:var(--qds-theme-signature-circle-progress-indeterminate);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}@keyframes b{to{transform:rotate(1turn)}}[data-status=success]{background-color:var(--qds-theme-feedback-result-success)}[data-status=warning]{background-color:var(--qds-theme-feedback-result-partial-success)}[data-status=error]{background-color:var(--qds-theme-feedback-result-failure)}";
 const QdsLoaderStyle0 = loaderCss;
 
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -34,8 +34,10 @@ const Loader = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         _Loader_instances.add(this);
+        /**
+         * The loader's size.
+         */
         this.size = 'standard';
-        this.status = undefined;
     }
     statusChanged() {
         this.internals.ariaValueNow =

package/dist/cjs/qds-loader.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"qds-loader.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,29CAA29C,CAAC;AAC9+C,wBAAe,SAAS;;ACDxB;AACA;AACA;;;;;;;;;MA6Ba,MAAM;;;;;;;;;;;oBAI2B,UAAU;;;IAsC5C,aAAa;QACrB,IAAI,CAAC,SAAS,CAAC,YAAY;YACzB,uBAAA,IAAI,qDAAgB,KAAK,SAAS;;oBAE9B,IAAI;kBACJ,IAAI,CAAC,SAAS,CAAC,YAAY,CAAA;KAClC;IAEM,iBAAiB;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,aAAa,CAAA;QACnC,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,GAAG,CAAA;QAC3D,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,GAAG,CAAA;QAC3D,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,QAAQ,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QAEzD,IAAI,CAAC,aAAa,EAAE,CAAA;KACrB;IAEM,MAAM;QACX,OAAO,uBAAA,IAAI,qDAAgB,KAAK,SAAS,IACvCA,gCACc,MAAM,EAClB,KAAK,EAAC,YAAY,eACP,uBAAA,IAAI,mDAAc,iBAChB,uBAAA,IAAI,qDAAgB,GACjC,KAEFA,qCACc,MAAM,EAClB,KAAK,EAAC,YAAY,eACP,uBAAA,IAAI,mDAAc,iBAChB,uBAAA,IAAI,qDAAgB,EACjC,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,UAAU,IAAI,CAAC,MAAM,EAAE,GAC7B,CACH,CAAA;KACF;;;;;;;;IA7DC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;IAGC,QAAQ,IAAI,CAAC,MAAM;QACjB,KAAK,OAAO,CAAC;QACb,KAAK,SAAS,CAAC;QACf,KAAK,SAAS,EAAE;YACd,OAAO,IAAI,CAAC,MAAM,CAAA;SACnB;QACD,SAAS;YACP,OAAO,SAAS,CAAA;SACjB;KACF;AACH,CAAC,uDAwCa,CAAc,EAAE,GAAkB;IAC9C,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAA;AAChE,CAAC;;;;;","names":["h"],"sources":["src/components/loader/loader.css?tag=qds-loader&encapsulation=shadow","src/components/loader/loader.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-loader {\n  border-radius: var(--qds-control-rounded-border-radius);\n  box-sizing: border-box;\n  color: var(--qds-theme-feedback-action-destructive-contrast);\n}\n\n[data-size='small'] {\n  padding: var(--qds-signature-circle-progress-small-border-width);\n  height: var(--qds-control-small-icon-size);\n  width: var(--qds-control-small-icon-size);\n}\n\n[data-size='standard'] {\n  padding: var(--qds-signature-circle-progress-standard-border-width);\n  height: var(--qds-control-standard-icon-size);\n  width: var(--qds-control-standard-icon-size);\n}\n\n[data-size='large'] {\n  padding: var(--qds-signature-circle-progress-large-border-width);\n  height: var(--qds-control-large-icon-size);\n  width: var(--qds-control-large-icon-size);\n}\n\n[data-size='jumbo'] {\n  padding: var(--qds-signature-circle-progress-jumbo-border-width);\n  height: var(--qds-control-jumbo-icon-size);\n  width: var(--qds-control-jumbo-icon-size);\n}\n\n[data-status='loading'] {\n  animation: loading 1s linear infinite;\n  background-image: var(--qds-theme-signature-circle-progress-indeterminate);\n  /* stylelint-disable color-no-hex, declaration-property-value-no-unknown */\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex, declaration-property-value-no-unknown */\n  mask-composite: exclude;\n}\n\n@keyframes loading {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n[data-status='success'] {\n  background-color: var(--qds-theme-feedback-result-success);\n}\n\n[data-status='warning'] {\n  background-color: var(--qds-theme-feedback-result-partial-success);\n}\n\n[data-status='error'] {\n  background-color: var(--qds-theme-feedback-result-failure);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  h,\n  Prop,\n  Watch,\n} from '@stencil/core'\n\nimport type { Size } from '../shared'\n\nexport type LoaderSize = Size | 'jumbo'\nexport type LoaderStatus = 'error' | 'success' | 'warning'\n\n/**\n * The `<qds-loader>` element displays an indicator showing that content is\n * being loaded or processed.\n *\n * @see https://quartz.se.com/build/components/loader\n */\n@Component({\n  tag: 'qds-loader',\n  formAssociated: true,\n  shadow: true,\n  styleUrl: 'loader.css',\n})\nexport class Loader implements ComponentInterface {\n  /**\n   * The loader's size.\n   */\n  @Prop() public readonly size?: LoaderSize = 'standard'\n\n  /**\n   * The loader's status.\n   */\n  @Prop() public readonly status?: LoaderStatus\n\n  @Element() private readonly host!: HTMLQdsLoaderElement\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  get #computedSize(): LoaderSize {\n    switch (this.size) {\n      case 'small':\n      case 'large':\n      case 'jumbo': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #computedStatus(): LoaderStatus | 'loading' {\n    switch (this.status) {\n      case 'error':\n      case 'success':\n      case 'warning': {\n        return this.status\n      }\n      default: {\n        return 'loading'\n      }\n    }\n  }\n\n  @Watch('status')\n  protected statusChanged(): void {\n    this.internals.ariaValueNow =\n      this.#computedStatus === 'loading'\n        ? // eslint-disable-next-line unicorn/no-null\n          null\n        : this.internals.ariaValueMax\n  }\n\n  public componentWillLoad(): void {\n    this.internals.role = 'progressbar'\n    this.internals.ariaValueMin = this.host.ariaValueMin ?? '0'\n    this.internals.ariaValueMax = this.host.ariaValueMax ?? '1'\n    this.#defineGetter('labels', () => this.internals.labels)\n\n    this.statusChanged()\n  }\n\n  public render() {\n    return this.#computedStatus === 'loading' ? (\n      <div\n        aria-hidden=\"true\"\n        class=\"qds-loader\"\n        data-size={this.#computedSize}\n        data-status={this.#computedStatus}\n      />\n    ) : (\n      <qds-icon\n        aria-hidden=\"true\"\n        class=\"qds-loader\"\n        data-size={this.#computedSize}\n        data-status={this.#computedStatus}\n        library=\"core\"\n        name={`status-${this.status}`}\n      />\n    )\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}
+{"file":"qds-loader.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,29CAA29C,CAAC;AAC9+C,wBAAe,SAAS;;ACDxB;AACA;AACA;;;;;;;;;MA6Ba,MAAM;IANnB;;;;;;;;;;;;;QAU0B,SAAI,GAAgB,UAAU,CAAA;KA8EvD;IAxCW,aAAa;QACrB,IAAI,CAAC,SAAS,CAAC,YAAY;YACzB,uBAAA,IAAI,qDAAgB,KAAK,SAAS;;oBAE9B,IAAI;kBACJ,IAAI,CAAC,SAAS,CAAC,YAAY,CAAA;KAClC;IAEM,iBAAiB;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,aAAa,CAAA;QACnC,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,GAAG,CAAA;QAC3D,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,GAAG,CAAA;QAC3D,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,QAAQ,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QAEzD,IAAI,CAAC,aAAa,EAAE,CAAA;KACrB;IAEM,MAAM;QACX,OAAO,uBAAA,IAAI,qDAAgB,KAAK,SAAS,IACvCA,gCACc,MAAM,EAClB,KAAK,EAAC,YAAY,eACP,uBAAA,IAAI,mDAAc,iBAChB,uBAAA,IAAI,qDAAgB,GACjC,KAEFA,qCACc,MAAM,EAClB,KAAK,EAAC,YAAY,eACP,uBAAA,IAAI,mDAAc,iBAChB,uBAAA,IAAI,qDAAgB,EACjC,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,UAAU,IAAI,CAAC,MAAM,EAAE,GAC7B,CACH,CAAA;KACF;;;;;;;;IA7DC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;IAGC,QAAQ,IAAI,CAAC,MAAM;QACjB,KAAK,OAAO,CAAC;QACb,KAAK,SAAS,CAAC;QACf,KAAK,SAAS,EAAE;YACd,OAAO,IAAI,CAAC,MAAM,CAAA;SACnB;QACD,SAAS;YACP,OAAO,SAAS,CAAA;SACjB;KACF;AACH,CAAC,uDAwCa,CAAc,EAAE,GAAkB;IAC9C,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAA;AAChE,CAAC;;;;;","names":["h"],"sources":["src/components/loader/loader.css?tag=qds-loader&encapsulation=shadow","src/components/loader/loader.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n}\n\n.qds-loader {\n  border-radius: var(--qds-control-rounded-border-radius);\n  box-sizing: border-box;\n  color: var(--qds-theme-feedback-action-destructive-contrast);\n}\n\n[data-size='small'] {\n  padding: var(--qds-signature-circle-progress-small-border-width);\n  height: var(--qds-control-small-icon-size);\n  width: var(--qds-control-small-icon-size);\n}\n\n[data-size='standard'] {\n  padding: var(--qds-signature-circle-progress-standard-border-width);\n  height: var(--qds-control-standard-icon-size);\n  width: var(--qds-control-standard-icon-size);\n}\n\n[data-size='large'] {\n  padding: var(--qds-signature-circle-progress-large-border-width);\n  height: var(--qds-control-large-icon-size);\n  width: var(--qds-control-large-icon-size);\n}\n\n[data-size='jumbo'] {\n  padding: var(--qds-signature-circle-progress-jumbo-border-width);\n  height: var(--qds-control-jumbo-icon-size);\n  width: var(--qds-control-jumbo-icon-size);\n}\n\n[data-status='loading'] {\n  animation: loading 1s linear infinite;\n  background-image: var(--qds-theme-signature-circle-progress-indeterminate);\n  /* stylelint-disable color-no-hex, declaration-property-value-no-unknown */\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex, declaration-property-value-no-unknown */\n  mask-composite: exclude;\n}\n\n@keyframes loading {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n[data-status='success'] {\n  background-color: var(--qds-theme-feedback-result-success);\n}\n\n[data-status='warning'] {\n  background-color: var(--qds-theme-feedback-result-partial-success);\n}\n\n[data-status='error'] {\n  background-color: var(--qds-theme-feedback-result-failure);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  h,\n  Prop,\n  Watch,\n} from '@stencil/core'\n\nimport type { Size } from '../shared'\n\nexport type LoaderSize = Size | 'jumbo'\nexport type LoaderStatus = 'error' | 'success' | 'warning'\n\n/**\n * The `<qds-loader>` element displays an indicator showing that content is\n * being loaded or processed.\n *\n * @see https://quartz.se.com/build/components/loader\n */\n@Component({\n  tag: 'qds-loader',\n  formAssociated: true,\n  shadow: true,\n  styleUrl: 'loader.css',\n})\nexport class Loader implements ComponentInterface {\n  /**\n   * The loader's size.\n   */\n  @Prop() public readonly size?: LoaderSize = 'standard'\n\n  /**\n   * The loader's status.\n   */\n  @Prop() public readonly status?: LoaderStatus\n\n  @Element() private readonly host!: HTMLElement\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  get #computedSize(): LoaderSize {\n    switch (this.size) {\n      case 'small':\n      case 'large':\n      case 'jumbo': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #computedStatus(): LoaderStatus | 'loading' {\n    switch (this.status) {\n      case 'error':\n      case 'success':\n      case 'warning': {\n        return this.status\n      }\n      default: {\n        return 'loading'\n      }\n    }\n  }\n\n  @Watch('status')\n  protected statusChanged(): void {\n    this.internals.ariaValueNow =\n      this.#computedStatus === 'loading'\n        ? // eslint-disable-next-line unicorn/no-null\n          null\n        : this.internals.ariaValueMax\n  }\n\n  public componentWillLoad(): void {\n    this.internals.role = 'progressbar'\n    this.internals.ariaValueMin = this.host.ariaValueMin ?? '0'\n    this.internals.ariaValueMax = this.host.ariaValueMax ?? '1'\n    this.#defineGetter('labels', () => this.internals.labels)\n\n    this.statusChanged()\n  }\n\n  public render() {\n    return this.#computedStatus === 'loading' ? (\n      <div\n        aria-hidden=\"true\"\n        class=\"qds-loader\"\n        data-size={this.#computedSize}\n        data-status={this.#computedStatus}\n      />\n    ) : (\n      <qds-icon\n        aria-hidden=\"true\"\n        class=\"qds-loader\"\n        data-size={this.#computedSize}\n        data-status={this.#computedStatus}\n        library=\"core\"\n        name={`status-${this.status}`}\n      />\n    )\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}

package/dist/cjs/qds-nav-list-item.cjs.entry.js

@@ -7,7 +7,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a9985af0.js');
+const index = require('./index-644fe556.js');
 const helpers = require('./helpers-cdd65bd0.js');
 
 const navListItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-button,.qds-nav-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-icon,.qds-text{color:var(--qds-theme-title)}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-texts{flex-direction:column}.qds-button[data-size=small]{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size=small]>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size=small]>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-text{font:var(--qds-list-item-small-title)}[data-size=small] .qds-subtext{font:var(--qds-list-item-small-subtitle)}.qds-button[data-size=standard]{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard]>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size=standard]>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-text{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}.qds-button[data-size=large]{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size=large]>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size=large]>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-text{font:var(--qds-list-item-large-title)}[data-size=large] .qds-subtext{font:var(--qds-list-item-large-subtitle)}.qds-selected.qds-nav-list-item{background-color:var(\n      --qds-theme-navigation-subsection-standard-background\n    )}.qds-selected.qds-nav-list-item:after{background-color:var(--qds-theme-signature-color-default);border-radius:var(--qds-signature-line-connection-cap-radius);content:\"\";cursor:pointer;margin-right:calc(var(--qds-signature-line-connection-width)*-1/2);width:var(--qds-signature-line-connection-width)}.qds-selected .qds-icon{color:var(--qds-theme-signature-color-default)}.qds-selected[data-size=small] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size=standard] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size=large] .qds-text{font:var(--qds-list-item-large-title-emphasized)}";
@@ -30,6 +30,31 @@ const NavListItem = class {
         this.blurEmitter = index.createEvent(this, "qdsBlur", 2);
         this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
         _NavListItem_instances.add(this);
+        /**
+         * Displays the navigation list item in a collapsed state without its text.
+         * The text will be displayed in a tooltip instead.
+         *
+         * This property has no effect if the navigation list item does not have an
+         * icon set.
+         */
+        this.collapsed = false;
+        /**
+         * Prevents the navigation list item from being interacted with: it cannot be
+         * selected or focused.
+         */
+        this.disabled = false;
+        /**
+         * The name of a registered icon library.
+         */
+        this.iconLibrary = 'default';
+        /**
+         * The navigation list items's size.
+         */
+        this.size = 'standard';
+        /**
+         * Whether or not the navigation list item is selected.
+         */
+        this.selected = false;
         this.inheritedAttributes = {};
         _NavListItem_liRef.set(this, (li) => {
             this.li = li;
@@ -45,15 +70,6 @@ const NavListItem = class {
         _NavListItem_onFocus.set(this, (event) => {
             this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
         });
-        this.collapsed = false;
-        this.disabled = false;
-        this.iconName = undefined;
-        this.iconLibrary = 'default';
-        this.size = 'standard';
-        this.selected = false;
-        this.subtext = undefined;
-        this.text = undefined;
-        this.tabIndex = undefined;
     }
     onClick(event) {
         if (this.disabled)
@@ -69,14 +85,14 @@ const NavListItem = class {
         this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
     }
     render() {
-        return (index.h(index.Host, { key: '2996b19be62387c285ad793df8a7b6f93af8088e' }, index.h("li", { key: '313644e68a430693a32f15a2da5868893e864238', class: {
+        return (index.h(index.Host, { key: '861bd4dceb564cea7ef0deb6f3968a967f4a8ecd' }, index.h("li", { key: '85fb0ded3ffe45b3b492b5d46c07e9a72589fc81', class: {
                 'qds-nav-list-item': true,
                 'qds-disabled': this.disabled,
                 'qds-selected': this.selected,
-            }, ref: __classPrivateFieldGet(this, _NavListItem_liRef, "f"), ...this.inheritedAttributes }, index.h("button", { key: '746e2ddb24add2c47fa68a278b3cbca9e0c8a0b8', class: {
+            }, ref: __classPrivateFieldGet(this, _NavListItem_liRef, "f"), ...this.inheritedAttributes }, index.h("button", { key: '7c105a685c879cb014cc0cfd514bfdf1c5a86888', class: {
                 'qds-button': true,
                 'qds-selected': this.selected,
-            }, "data-size": __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_computedSize_get), disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _NavListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _NavListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "button" }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '4a48049897812c0f7dc4be8f1538244b8527a064', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && this.renderText())), __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && (index.h("qds-tooltip", { key: 'ff79d212a6a32cffb514259e72a66a8e66a6ccb9', placement: "right", ref: __classPrivateFieldGet(this, _NavListItem_tooltipRef, "f") }, this.renderText()))));
+            }, "data-size": __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_computedSize_get), disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _NavListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _NavListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "button" }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '2c0a4554e721bb64bb59af6aeb3f4e6efa1362b7', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && this.renderText())), __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && (index.h("qds-tooltip", { key: 'ec28ae83b18c2f6702e04331b09603085c77651b', placement: "right", ref: __classPrivateFieldGet(this, _NavListItem_tooltipRef, "f") }, this.renderText()))));
     }
     renderText() {
         return (index.h("div", { class: "qds-texts" }, index.h("div", { class: "qds-text" }, this.text), this.subtext !== undefined && this.subtext !== '' && (index.h("div", { class: "qds-subtext" }, this.subtext))));

package/dist/cjs/qds-nav-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"qds-nav-list-item.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h","Host"],"sources":["src/components/nav-list-item/nav-list-item.css?tag=qds-nav-list-item&encapsulation=shadow","src/components/nav-list-item/nav-list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-button,\n.qds-nav-list-item,\n.qds-texts {\n  display: flex;\n}\n\n.qds-button,\n.qds-texts {\n  flex: 1 0;\n}\n\n.qds-icon,\n.qds-text {\n  color: var(--qds-theme-title);\n}\n\n.qds-button {\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: initial;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    border-radius: var(--qds-focus-border-radius);\n  }\n\n  &:not(.qds-selected) {\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n}\n\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-subtext {\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-texts {\n  flex-direction: column;\n}\n\n[data-size='small'] {\n  &.qds-button {\n    gap: var(--qds-list-item-small-gap-internal);\n    min-height: var(--qds-list-item-small-height);\n    padding-block: var(--qds-list-item-small-padding-vertical);\n    padding-inline: var(--qds-list-item-small-padding-horizontal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-small-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-small-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-small-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-small-subtitle);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-button {\n    gap: var(--qds-list-item-standard-gap-internal);\n    min-height: var(--qds-list-item-standard-height);\n    padding-block: var(--qds-list-item-standard-padding-vertical);\n    padding-inline: var(--qds-list-item-standard-padding-horizontal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-standard-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-standard-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-standard-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-standard-subtitle);\n  }\n}\n\n[data-size='large'] {\n  &.qds-button {\n    gap: var(--qds-list-item-large-gap-internal);\n    min-height: var(--qds-list-item-large-height);\n    padding-block: var(--qds-list-item-large-padding-vertical);\n    padding-inline: var(--qds-list-item-large-padding-horizontal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-large-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-large-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-large-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-large-subtitle);\n  }\n}\n\n.qds-selected {\n  &.qds-nav-list-item {\n    background-color: var(\n      --qds-theme-navigation-subsection-standard-background\n    );\n\n    &::after {\n      background-color: var(--qds-theme-signature-color-default);\n      border-radius: var(--qds-signature-line-connection-cap-radius);\n      content: '';\n      cursor: pointer;\n      margin-right: calc(-1 * var(--qds-signature-line-connection-width) / 2);\n      width: var(--qds-signature-line-connection-width);\n    }\n  }\n\n  & .qds-icon {\n    color: var(--qds-theme-signature-color-default);\n  }\n\n  &[data-size='small'] .qds-text {\n    font: var(--qds-list-item-small-title-emphasized);\n  }\n\n  &[data-size='standard'] .qds-text {\n    font: var(--qds-list-item-standard-title-emphasized);\n  }\n\n  &[data-size='large'] .qds-text {\n    font: var(--qds-list-item-large-title-emphasized);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/nav-list-item\n */\n@Component({\n  tag: 'qds-nav-list-item',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'nav-list-item.css',\n})\nexport class NavListItem implements ComponentInterface {\n  /**\n   * Displays the navigation list item in a collapsed state without its text.\n   * The text will be displayed in a tooltip instead.\n   *\n   * This property has no effect if the navigation list item does not have an\n   * icon set.\n   */\n  @Prop() public readonly collapsed: boolean = false\n\n  /**\n   * Prevents the navigation list item from being interacted with: it cannot be\n   * selected or focused.\n   */\n  @Prop() public readonly disabled: boolean = false\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The navigation list items's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Whether or not the navigation list item is selected.\n   */\n  @Prop() public readonly selected: boolean = false\n\n  /**\n   * Text to display for the subtext.\n   */\n  @Prop() public readonly subtext?: string\n\n  /**\n   * Primary text to display.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * Emitted when the navigation list item loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the navigation list item gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLQdsNavListItemElement\n\n  @State() private tabIndex?: number\n\n  private inheritedAttributes: Attributes = {}\n\n  private li?: HTMLLIElement\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #shouldCollapse(): boolean {\n    return this.collapsed && this.iconName !== undefined && this.iconName !== ''\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.disabled) event.stopImmediatePropagation()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    return (\n      <Host>\n        <li\n          class={{\n            'qds-nav-list-item': true,\n            'qds-disabled': this.disabled,\n            'qds-selected': this.selected,\n          }}\n          ref={this.#liRef}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        >\n          <button\n            class={{\n              'qds-button': true,\n              'qds-selected': this.selected,\n            }}\n            data-size={this.#computedSize}\n            disabled={this.disabled}\n            onBlur={this.#onBlur}\n            onFocus={this.#onFocus}\n            tabIndex={this.disabled ? undefined : this.tabIndex}\n            type=\"button\"\n          >\n            {this.iconName !== undefined && this.iconName !== '' && (\n              <qds-icon\n                aria-hidden=\"true\"\n                class=\"qds-icon\"\n                library={this.iconLibrary}\n                name={this.iconName}\n              />\n            )}\n            {!this.#shouldCollapse && this.text && this.renderText()}\n          </button>\n        </li>\n        {this.#shouldCollapse && this.text && (\n          <qds-tooltip placement=\"right\" ref={this.#tooltipRef}>\n            {this.renderText()}\n          </qds-tooltip>\n        )}\n      </Host>\n    )\n  }\n\n  private renderText(): JSX.Element {\n    return (\n      <div class=\"qds-texts\">\n        <div class=\"qds-text\">{this.text}</div>\n        {this.subtext !== undefined && this.subtext !== '' && (\n          <div class=\"qds-subtext\">{this.subtext}</div>\n        )}\n      </div>\n    )\n  }\n\n  readonly #liRef = (li?: HTMLLIElement): void => {\n    this.li = li\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.li\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}
+{"file":"qds-nav-list-item.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h","Host"],"sources":["src/components/nav-list-item/nav-list-item.css?tag=qds-nav-list-item&encapsulation=shadow","src/components/nav-list-item/nav-list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n}\n\n.qds-button,\n.qds-nav-list-item,\n.qds-texts {\n  display: flex;\n}\n\n.qds-button,\n.qds-texts {\n  flex: 1 0;\n}\n\n.qds-icon,\n.qds-text {\n  color: var(--qds-theme-title);\n}\n\n.qds-button {\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: initial;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    border-radius: var(--qds-focus-border-radius);\n  }\n\n  &:not(.qds-selected) {\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n}\n\n.qds-disabled {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n.qds-subtext {\n  color: var(--qds-theme-subtitle);\n}\n\n.qds-texts {\n  flex-direction: column;\n}\n\n[data-size='small'] {\n  &.qds-button {\n    gap: var(--qds-list-item-small-gap-internal);\n    min-height: var(--qds-list-item-small-height);\n    padding-block: var(--qds-list-item-small-padding-vertical);\n    padding-inline: var(--qds-list-item-small-padding-horizontal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-small-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-small-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-small-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-small-subtitle);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-button {\n    gap: var(--qds-list-item-standard-gap-internal);\n    min-height: var(--qds-list-item-standard-height);\n    padding-block: var(--qds-list-item-standard-padding-vertical);\n    padding-inline: var(--qds-list-item-standard-padding-horizontal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-standard-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-standard-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-standard-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-standard-subtitle);\n  }\n}\n\n[data-size='large'] {\n  &.qds-button {\n    gap: var(--qds-list-item-large-gap-internal);\n    min-height: var(--qds-list-item-large-height);\n    padding-block: var(--qds-list-item-large-padding-vertical);\n    padding-inline: var(--qds-list-item-large-padding-horizontal);\n  }\n\n  & > .qds-icon {\n    font-size: var(--qds-list-item-large-icon-size);\n  }\n\n  & > .qds-texts {\n    gap: var(--qds-list-item-large-titles-gap);\n  }\n\n  & .qds-text {\n    font: var(--qds-list-item-large-title);\n  }\n\n  & .qds-subtext {\n    font: var(--qds-list-item-large-subtitle);\n  }\n}\n\n.qds-selected {\n  &.qds-nav-list-item {\n    background-color: var(\n      --qds-theme-navigation-subsection-standard-background\n    );\n\n    &::after {\n      background-color: var(--qds-theme-signature-color-default);\n      border-radius: var(--qds-signature-line-connection-cap-radius);\n      content: '';\n      cursor: pointer;\n      margin-right: calc(-1 * var(--qds-signature-line-connection-width) / 2);\n      width: var(--qds-signature-line-connection-width);\n    }\n  }\n\n  & .qds-icon {\n    color: var(--qds-theme-signature-color-default);\n  }\n\n  &[data-size='small'] .qds-text {\n    font: var(--qds-list-item-small-title-emphasized);\n  }\n\n  &[data-size='standard'] .qds-text {\n    font: var(--qds-list-item-standard-title-emphasized);\n  }\n\n  &[data-size='large'] .qds-text {\n    font: var(--qds-list-item-large-title-emphasized);\n  }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter, JSX } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/nav-list-item\n */\n@Component({\n  tag: 'qds-nav-list-item',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'nav-list-item.css',\n})\nexport class NavListItem implements ComponentInterface {\n  /**\n   * Displays the navigation list item in a collapsed state without its text.\n   * The text will be displayed in a tooltip instead.\n   *\n   * This property has no effect if the navigation list item does not have an\n   * icon set.\n   */\n  @Prop() public readonly collapsed: boolean = false\n\n  /**\n   * Prevents the navigation list item from being interacted with: it cannot be\n   * selected or focused.\n   */\n  @Prop() public readonly disabled: boolean = false\n\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop() public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop() public readonly iconLibrary: string = 'default'\n\n  /**\n   * The navigation list items's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Whether or not the navigation list item is selected.\n   */\n  @Prop() public readonly selected: boolean = false\n\n  /**\n   * Text to display for the subtext.\n   */\n  @Prop() public readonly subtext?: string\n\n  /**\n   * Primary text to display.\n   */\n  @Prop() public readonly text!: string\n\n  /**\n   * Emitted when the navigation list item loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the navigation list item gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly host!: HTMLElement\n\n  @State() private tabIndex?: number\n\n  private inheritedAttributes: Attributes = {}\n\n  private li?: HTMLLIElement\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'standard':\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  get #shouldCollapse(): boolean {\n    return this.collapsed && this.iconName !== undefined && this.iconName !== ''\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.disabled) event.stopImmediatePropagation()\n  }\n\n  @Watch('tabindex')\n  protected tabindexChanged(newValue: string): void {\n    const parsedValue = Number.parseInt(newValue, 10)\n    this.tabIndex =\n      parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public render() {\n    return (\n      <Host>\n        <li\n          class={{\n            'qds-nav-list-item': true,\n            'qds-disabled': this.disabled,\n            'qds-selected': this.selected,\n          }}\n          ref={this.#liRef}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        >\n          <button\n            class={{\n              'qds-button': true,\n              'qds-selected': this.selected,\n            }}\n            data-size={this.#computedSize}\n            disabled={this.disabled}\n            onBlur={this.#onBlur}\n            onFocus={this.#onFocus}\n            tabIndex={this.disabled ? undefined : this.tabIndex}\n            type=\"button\"\n          >\n            {this.iconName !== undefined && this.iconName !== '' && (\n              <qds-icon\n                aria-hidden=\"true\"\n                class=\"qds-icon\"\n                library={this.iconLibrary}\n                name={this.iconName}\n              />\n            )}\n            {!this.#shouldCollapse && this.text && this.renderText()}\n          </button>\n        </li>\n        {this.#shouldCollapse && this.text && (\n          <qds-tooltip placement=\"right\" ref={this.#tooltipRef}>\n            {this.renderText()}\n          </qds-tooltip>\n        )}\n      </Host>\n    )\n  }\n\n  private renderText(): JSX.Element {\n    return (\n      <div class=\"qds-texts\">\n        <div class=\"qds-text\">{this.text}</div>\n        {this.subtext !== undefined && this.subtext !== '' && (\n          <div class=\"qds-subtext\">{this.subtext}</div>\n        )}\n      </div>\n    )\n  }\n\n  readonly #liRef = (li?: HTMLLIElement): void => {\n    this.li = li\n  }\n\n  readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n    if (tooltip)\n      // eslint-disable-next-line no-param-reassign\n      tooltip.target = this.li\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}

package/dist/cjs/qds-progress-bar.cjs.entry.js

@@ -7,9 +7,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a9985af0.js');
+const index = require('./index-644fe556.js');
 
-const progressBarCss = ":host([hidden]){display:none!important}:host{display:block;width:100%}.qds-bar,.qds-track{overflow:hidden}.qds-track{background-color:var(--qds-theme-control-slider-track-inactive)}.qds-bar,.qds-track{border-radius:var(--qds-signature-line-progress-cap-radius)}.qds-bar{background-color:var(--qds-theme-signature-line-progress-determinate);transition:width .6s cubic-bezier(.83,0,.17,1)}@media (prefers-reduced-motion){.qds-bar{transition:none}}.qds-indeterminate{animation:b 2s linear infinite;background-color:initial;background-image:var(--qds-theme-signature-line-progress-indeterminate)}@keyframes b{0%{transform:translateX(-100%)}to{transform:translateX(200%)}}[data-size=small]{height:var(--qds-signature-line-progress-small-height)}[data-size=standard]{height:var(--qds-signature-line-progress-standard-height)}[data-size=large]{height:var(--qds-signature-line-progress-large-height)}";
+const progressBarCss = ":host([hidden]){display:none!important}:host{display:block;width:100%}.qds-bar,.qds-track{overflow:hidden}.qds-track{background-color:var(--qds-theme-control-slider-track-inactive)}.qds-bar,.qds-track{border-radius:var(--qds-signature-line-progress-cap-radius)}.qds-bar{background-color:var(--qds-theme-signature-line-progress-determinate);transition:width .6s cubic-bezier(.83,0,.17,1)}@media (prefers-reduced-motion){.qds-bar{transition:none}}.qds-indeterminate{animation:a 2s linear infinite;background-color:initial;background-image:var(--qds-theme-signature-line-progress-indeterminate)}@keyframes a{0%{transform:translateX(-100%)}to{transform:translateX(200%)}}[data-size=small]{height:var(--qds-signature-line-progress-small-height)}[data-size=standard]{height:var(--qds-signature-line-progress-standard-height)}[data-size=large]{height:var(--qds-signature-line-progress-large-height)}";
 const QdsProgressBarStyle0 = progressBarCss;
 
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -43,15 +43,33 @@ const ProgressBar = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         _ProgressBar_instances.add(this);
-        _ProgressBar_localMax.set(this, 1);
-        _ProgressBar_localValue.set(this, 0);
-        _ProgressBar_position.set(this, -1);
+        /**
+         * The progress bar's size.
+         */
         this.size = 'standard';
+        /**
+         * Returns a list of the [`<label>`][] elements associated with the
+         * `qds-progress-bar` element.
+         *
+         * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label
+         *
+         * @readonly
+         * @webnative
+         */
         this.labels = {};
-        this.max = undefined;
+        /**
+         * Returns the result of dividing the current value (`value`) by the maximum
+         * value (`max`); if the progress bar is an indeterminate progress bar, it
+         * returns `-1`.
+         *
+         * @readonly
+         * @webnative
+         */
         this.position = -1;
-        this.value = undefined;
         this.width = '0%';
+        _ProgressBar_localMax.set(this, 1);
+        _ProgressBar_localValue.set(this, 0);
+        _ProgressBar_position.set(this, -1);
     }
     maxChanged() {
         const max = typeof this.max === 'string' ? Number.parseFloat(this.max) : this.max;
@@ -77,7 +95,7 @@ const ProgressBar = class {
         this.valueChanged();
     }
     render() {
-        return (index.h("div", { key: '3950ecf981eecee1a39994ede8ff0957ebf66abe', "aria-hidden": "true", class: "qds-track", "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get) }, index.h("div", { key: '90c1b9ffc919afeca142091ed085154c92de03a3', class: {
+        return (index.h("div", { key: '89fad7b1dd2348a3f4c8a2571fe916d342166acb', "aria-hidden": "true", class: "qds-track", "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get) }, index.h("div", { key: '84ffc7461e57cc90cb8889e16d5cbdf229f0b9f3', class: {
                 'qds-bar': true,
                 'qds-indeterminate': __classPrivateFieldGet(this, _ProgressBar_position, "f") === -1,
             }, "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get), style: { width: this.width } })));

package/dist/cjs/qds-progress-bar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"qds-progress-bar.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/progress-bar/progress-bar.css?tag=qds-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.qds-track,\n.qds-bar {\n  overflow: hidden;\n}\n\n.qds-track {\n  background-color: var(--qds-theme-control-slider-track-inactive);\n  border-radius: var(--qds-signature-line-progress-cap-radius);\n}\n\n.qds-bar {\n  background-color: var(--qds-theme-signature-line-progress-determinate);\n  border-radius: var(--qds-signature-line-progress-cap-radius);\n  transition: width 0.6s cubic-bezier(0.83, 0, 0.17, 1);\n}\n\n@media (prefers-reduced-motion) {\n  .qds-bar {\n    transition: none;\n  }\n}\n\n.qds-indeterminate {\n  animation: indeterminate 2s linear infinite;\n  background-color: transparent;\n  background-image: var(--qds-theme-signature-line-progress-indeterminate);\n}\n\n@keyframes indeterminate {\n  from {\n    transform: translateX(-100%);\n  }\n\n  to {\n    transform: translateX(200%);\n  }\n}\n\n[data-size='small'] {\n  height: var(--qds-signature-line-progress-small-height);\n}\n\n[data-size='standard'] {\n  height: var(--qds-signature-line-progress-standard-height);\n}\n\n[data-size='large'] {\n  height: var(--qds-signature-line-progress-large-height);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Size } from '../shared'\n\n/**\n * The `<qds-progress-bar>` element displays an indicator showing the\n * completion progress of a task.\n *\n * @see https://quartz.se.com/build/components/progress-bar\n */\n@Component({\n  tag: 'qds-progress-bar',\n  formAssociated: true,\n  shadow: true,\n  styleUrl: 'progress-bar.css',\n})\nexport class ProgressBar implements ComponentInterface {\n  /**\n   * The progress bar's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-progress-bar` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly labels: ElementInternals['labels'] =\n    {} as ElementInternals['labels']\n\n  /**\n   * Specifies how much work the task indicated by the progress bar requires.\n   * `max` must have a value greater than 0 and be a valid floating point\n   * number.\n   *\n   * @webnative\n   */\n  @Prop() public readonly max?: number | string\n\n  /**\n   * Returns the result of dividing the current value (`value`) by the maximum\n   * value (`max`); if the progress bar is an indeterminate progress bar, it\n   * returns `-1`.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly position: number = -1\n\n  /**\n   * Specifies how much of the task has been completed. It must be a valid\n   * floating point number between `0` and `max`, or between `0` and `1` if\n   * `max` is omitted. If this attribute is not specified, the progress bar is\n   * indeterminate; this indicates that an activity is ongoing with no\n   * indication of how long it is expected to take.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: number | string\n\n  @Element() private readonly host!: HTMLQdsProgressBarElement\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  @State() private width = '0%'\n\n  #localMax = 1\n\n  #localValue = 0\n\n  #position = -1\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  @Watch('max')\n  protected maxChanged(): void {\n    const max =\n      typeof this.max === 'string' ? Number.parseFloat(this.max) : this.max\n    this.#localMax = max === undefined || Number.isNaN(max) || max < 0 ? 1 : max\n\n    this.internals.ariaValueMax = this.#localMax.toString()\n\n    this.#positionChanged()\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    const value =\n      typeof this.value === 'string'\n        ? Number.parseFloat(this.value)\n        : this.value\n    this.#localValue =\n      value === undefined || Number.isNaN(value) || value < 0 ? 0 : value\n\n    this.internals.ariaValueNow =\n      // eslint-disable-next-line unicorn/no-null\n      this.value === undefined ? null : this.#localValue.toString()\n\n    this.#positionChanged()\n  }\n\n  public componentWillLoad(): void {\n    this.internals.role = 'progressbar'\n    this.#defineGetter('labels', () => this.internals.labels)\n    this.#defineGetter('position', () => this.#position)\n\n    this.maxChanged()\n    this.valueChanged()\n  }\n\n  public render() {\n    return (\n      <div aria-hidden=\"true\" class=\"qds-track\" data-size={this.#computedSize}>\n        <div\n          class={{\n            'qds-bar': true,\n            'qds-indeterminate': this.#position === -1,\n          }}\n          data-size={this.#computedSize}\n          style={{ width: this.width }}\n        />\n      </div>\n    )\n  }\n\n  #positionChanged(): void {\n    if (this.value === undefined) {\n      this.#position = -1\n      this.width = '50%'\n      return\n    }\n\n    this.#position = this.#localValue / this.#localMax\n    this.width = `${Math.min(this.#position * 100, 100)}%`\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}
+{"file":"qds-progress-bar.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/progress-bar/progress-bar.css?tag=qds-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.qds-track,\n.qds-bar {\n  overflow: hidden;\n}\n\n.qds-track {\n  background-color: var(--qds-theme-control-slider-track-inactive);\n  border-radius: var(--qds-signature-line-progress-cap-radius);\n}\n\n.qds-bar {\n  background-color: var(--qds-theme-signature-line-progress-determinate);\n  border-radius: var(--qds-signature-line-progress-cap-radius);\n  transition: width 0.6s cubic-bezier(0.83, 0, 0.17, 1);\n}\n\n@media (prefers-reduced-motion) {\n  .qds-bar {\n    transition: none;\n  }\n}\n\n.qds-indeterminate {\n  animation: indeterminate 2s linear infinite;\n  background-color: transparent;\n  background-image: var(--qds-theme-signature-line-progress-indeterminate);\n}\n\n@keyframes indeterminate {\n  from {\n    transform: translateX(-100%);\n  }\n\n  to {\n    transform: translateX(200%);\n  }\n}\n\n[data-size='small'] {\n  height: var(--qds-signature-line-progress-small-height);\n}\n\n[data-size='standard'] {\n  height: var(--qds-signature-line-progress-standard-height);\n}\n\n[data-size='large'] {\n  height: var(--qds-signature-line-progress-large-height);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { Size } from '../shared'\n\n/**\n * The `<qds-progress-bar>` element displays an indicator showing the\n * completion progress of a task.\n *\n * @see https://quartz.se.com/build/components/progress-bar\n */\n@Component({\n  tag: 'qds-progress-bar',\n  formAssociated: true,\n  shadow: true,\n  styleUrl: 'progress-bar.css',\n})\nexport class ProgressBar implements ComponentInterface {\n  /**\n   * The progress bar's size.\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Returns a list of the [`<label>`][] elements associated with the\n   * `qds-progress-bar` element.\n   *\n   * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly labels: ElementInternals['labels'] =\n    {} as ElementInternals['labels']\n\n  /**\n   * Specifies how much work the task indicated by the progress bar requires.\n   * `max` must have a value greater than 0 and be a valid floating point\n   * number.\n   *\n   * @webnative\n   */\n  @Prop() public readonly max?: number | string\n\n  /**\n   * Returns the result of dividing the current value (`value`) by the maximum\n   * value (`max`); if the progress bar is an indeterminate progress bar, it\n   * returns `-1`.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly position: number = -1\n\n  /**\n   * Specifies how much of the task has been completed. It must be a valid\n   * floating point number between `0` and `max`, or between `0` and `1` if\n   * `max` is omitted. If this attribute is not specified, the progress bar is\n   * indeterminate; this indicates that an activity is ongoing with no\n   * indication of how long it is expected to take.\n   *\n   * @webnative\n   */\n  @Prop() public readonly value?: number | string\n\n  @Element() private readonly host!: HTMLElement\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  @State() private width = '0%'\n\n  #localMax = 1\n\n  #localValue = 0\n\n  #position = -1\n\n  get #computedSize(): Size {\n    switch (this.size) {\n      case 'small':\n      case 'large': {\n        return this.size\n      }\n      default: {\n        return 'standard'\n      }\n    }\n  }\n\n  @Watch('max')\n  protected maxChanged(): void {\n    const max =\n      typeof this.max === 'string' ? Number.parseFloat(this.max) : this.max\n    this.#localMax = max === undefined || Number.isNaN(max) || max < 0 ? 1 : max\n\n    this.internals.ariaValueMax = this.#localMax.toString()\n\n    this.#positionChanged()\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    const value =\n      typeof this.value === 'string'\n        ? Number.parseFloat(this.value)\n        : this.value\n    this.#localValue =\n      value === undefined || Number.isNaN(value) || value < 0 ? 0 : value\n\n    this.internals.ariaValueNow =\n      // eslint-disable-next-line unicorn/no-null\n      this.value === undefined ? null : this.#localValue.toString()\n\n    this.#positionChanged()\n  }\n\n  public componentWillLoad(): void {\n    this.internals.role = 'progressbar'\n    this.#defineGetter('labels', () => this.internals.labels)\n    this.#defineGetter('position', () => this.#position)\n\n    this.maxChanged()\n    this.valueChanged()\n  }\n\n  public render() {\n    return (\n      <div aria-hidden=\"true\" class=\"qds-track\" data-size={this.#computedSize}>\n        <div\n          class={{\n            'qds-bar': true,\n            'qds-indeterminate': this.#position === -1,\n          }}\n          data-size={this.#computedSize}\n          style={{ width: this.width }}\n        />\n      </div>\n    )\n  }\n\n  #positionChanged(): void {\n    if (this.value === undefined) {\n      this.#position = -1\n      this.width = '50%'\n      return\n    }\n\n    this.#position = this.#localValue / this.#localMax\n    this.width = `${Math.min(this.#position * 100, 100)}%`\n  }\n\n  #defineGetter(p: PropertyKey, get: () => unknown): void {\n    Object.defineProperty(this.host, p, { enumerable: true, get })\n  }\n}\n"],"version":3}

package/dist/cjs/qds-radio.cjs.entry.js

@@ -7,15 +7,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a9985af0.js');
+const index = require('./index-644fe556.js');
 const helpers = require('./helpers-cdd65bd0.js');
 
-const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:a;place-self:center}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio{display:none;pointer-events:none}.qds-box.sc-qds-radio{border-radius:var(--qds-control-rounded-border-radius)}.qds-container.sc-qds-radio{align-self:flex-start;display:grid;grid-template-areas:\"a\"}.qds-icon.sc-qds-radio{color:var(--qds-theme-signature-color-contrast)}.qds-label.sc-qds-radio{cursor:pointer;display:inline-flex}.qds-radio.sc-qds-radio{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio,.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-pressed)}.qds-radio.sc-qds-radio:checked{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:checked:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:checked:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-radio[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small].sc-qds-radio{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small].sc-qds-radio{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related)}.qds-radio[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard].sc-qds-radio{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard].sc-qds-radio{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related)}.qds-radio[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large].sc-qds-radio{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large].sc-qds-radio{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related)}";
+const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:c;place-self:center}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio{display:none;pointer-events:none}.qds-box.sc-qds-radio{border-radius:var(--qds-control-rounded-border-radius)}.qds-container.sc-qds-radio{align-self:flex-start;display:grid;grid-template-areas:\"c\"}.qds-icon.sc-qds-radio{color:var(--qds-theme-signature-color-contrast)}.qds-label.sc-qds-radio{cursor:pointer;display:inline-flex}.qds-radio.sc-qds-radio{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio,.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-pressed)}.qds-radio.sc-qds-radio:checked{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:checked:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:checked:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-radio[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small].sc-qds-radio{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small].sc-qds-radio{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related)}.qds-radio[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard].sc-qds-radio{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard].sc-qds-radio{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related)}.qds-radio[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large].sc-qds-radio{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large].sc-qds-radio{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related)}";
 const QdsRadioStyle0 = radioCss;
 
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
 //
 // SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m")
         throw new TypeError("Private method is not writable");
@@ -25,13 +32,6 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
 var _Radio_instances, _Radio_inheritedAttributes, _Radio_input, _Radio_computedDisabled_get, _Radio_computedSize_get, _Radio_hasText_get, _Radio_ref, _Radio_onBlur, _Radio_onChange, _Radio_onFocus;
 const Radio = class {
     constructor(hostRef) {
@@ -40,6 +40,17 @@ const Radio = class {
         this.changeEmitter = index.createEvent(this, "qdsChange", 6);
         this.focusEmitter = index.createEvent(this, "qdsFocus", 2);
         _Radio_instances.add(this);
+        /**
+         * Adds vertical margin to the radio for alignment.
+         *
+         * This is useful when creating inline layouts so that the first lines have
+         * the correct vertical centering.
+         */
+        this.inline = false;
+        /**
+         * The radio button's size.
+         */
+        this.size = 'standard';
         _Radio_inheritedAttributes.set(this, {});
         _Radio_input.set(this, void 0);
         _Radio_ref.set(this, (input) => {
@@ -54,16 +65,6 @@ const Radio = class {
         _Radio_onFocus.set(this, (event) => {
             this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
         });
-        this.inline = false;
-        this.size = 'standard';
-        this.text = undefined;
-        this.checked = undefined;
-        this.disabled = undefined;
-        this.form = undefined;
-        this.name = undefined;
-        this.required = undefined;
-        this.value = undefined;
-        this.tabIndex = undefined;
     }
     onClick(event) {
         if (__classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get)) {
@@ -85,10 +86,10 @@ const Radio = class {
     render() {
         return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        index.h("label", { key: '7dcc00bac49458e19603862725b0f6a530c0907d', "aria-disabled": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? 'true' : undefined, class: {
+        index.h("label", { key: '667293f89507bd2e846c4ed1ed5e70076a93f0ed', "aria-disabled": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? 'true' : undefined, class: {
                 'qds-inline': this.inline,
                 'qds-label': true,
-            }, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, index.h("div", { key: 'a847d5899c41f03687a11961757ecbf59f8e5c3e', class: "qds-container" }, index.h("input", { key: '54c0786dc21551cb9ef1183bce592267642578f8', checked: this.checked, class: "qds-radio", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), disabled: this.disabled, form: this.form, name: this.name, onBlur: __classPrivateFieldGet(this, _Radio_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Radio_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Radio_onFocus, "f"), ref: __classPrivateFieldGet(this, _Radio_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? undefined : this.tabIndex, type: "radio", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Radio_inheritedAttributes, "f") }), index.h("div", { key: 'b5f2f844aa5ec9c336564516e1e7c28b068554d1', class: "qds-box", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }), index.h("qds-icon", { key: 'eb5db14c74493988b67b09dd0321511c3dfd8d21', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), library: "core", name: "checked" })), __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_hasText_get) && (index.h("qds-label", { key: '26ea6231e95eadc571caf3c214277826e723b87b', size: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), text: this.text }))));
+            }, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, index.h("div", { key: '956dccf841262856939cc29165642846f8f4ae01', class: "qds-container" }, index.h("input", { key: '8920f9888ad5b49e667e9517a5eaaad66434b82b', checked: this.checked, class: "qds-radio", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), disabled: this.disabled, form: this.form, name: this.name, onBlur: __classPrivateFieldGet(this, _Radio_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Radio_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Radio_onFocus, "f"), ref: __classPrivateFieldGet(this, _Radio_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? undefined : this.tabIndex, type: "radio", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Radio_inheritedAttributes, "f") }), index.h("div", { key: 'efb2a7e06ec89d59e744f3ecddc606b719570f70', class: "qds-box", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }), index.h("qds-icon", { key: '71851b402290456eeb9f467ff1efea93c4c0b1cd', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), library: "core", name: "checked" })), __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_hasText_get) && (index.h("qds-label", { key: 'd1f2a219824121cd635c3a6184a9e027cd822718', size: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), text: this.text }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {