@quartzds/core 1.0.0-beta.9 → 1.0.0-beta.91

package/components/qds-loader.js

@@ -0,0 +1,113 @@
+/*!
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { p as proxyCustomElement, H, h } from './p-2806fee1.js';
+import { d as defineCustomElement$2 } from './p-ba880369.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 QdsLoaderStyle0 = loaderCss;
+
+// 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 _Loader_instances, _Loader_computedSize_get, _Loader_computedStatus_get, _Loader_defineGetter;
+const Loader = /*@__PURE__*/ proxyCustomElement(class Loader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.internals = this.attachInternals();
+        _Loader_instances.add(this);
+        /**
+         * The loader's size.
+         */
+        this.size = 'standard';
+    }
+    statusChanged() {
+        this.internals.ariaValueNow =
+            __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get) === 'loading'
+                ? // eslint-disable-next-line unicorn/no-null
+                    null
+                : this.internals.ariaValueMax;
+    }
+    componentWillLoad() {
+        this.internals.role = 'progressbar';
+        this.internals.ariaValueMin = this.host.ariaValueMin ?? '0';
+        this.internals.ariaValueMax = this.host.ariaValueMax ?? '1';
+        __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_defineGetter).call(this, 'labels', () => this.internals.labels);
+        this.statusChanged();
+    }
+    render() {
+        return __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get) === 'loading' ? (h("div", { "aria-hidden": "true", class: "qds-loader", "data-size": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedSize_get), "data-status": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get) })) : (h("qds-icon", { "aria-hidden": "true", class: "qds-loader", "data-size": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedSize_get), "data-status": __classPrivateFieldGet(this, _Loader_instances, "a", _Loader_computedStatus_get), library: "core", name: `status-${this.status}` }));
+    }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "status": ["statusChanged"]
+    }; }
+    static get style() { return QdsLoaderStyle0; }
+}, [65, "qds-loader", {
+        "size": [1],
+        "status": [1]
+    }, undefined, {
+        "status": ["statusChanged"]
+    }]);
+_Loader_instances = new WeakSet(), _Loader_computedSize_get = function _Loader_computedSize_get() {
+    switch (this.size) {
+        case 'small':
+        case 'large':
+        case 'jumbo': {
+            return this.size;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _Loader_computedStatus_get = function _Loader_computedStatus_get() {
+    switch (this.status) {
+        case 'error':
+        case 'success':
+        case 'warning': {
+            return this.status;
+        }
+        default: {
+            return 'loading';
+        }
+    }
+}, _Loader_defineGetter = function _Loader_defineGetter(p, get) {
+    Object.defineProperty(this.host, p, { enumerable: true, get });
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-loader", "qds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-loader":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Loader);
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const QdsLoader = Loader;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsLoader, defineCustomElement };
+
+//# sourceMappingURL=qds-loader.js.map

package/components/qds-loader.js.map

@@ -0,0 +1 @@
+{"file":"qds-loader.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,IACvC,0BACc,MAAM,EAClB,KAAK,EAAC,YAAY,eACP,uBAAA,IAAI,mDAAc,iBAChB,uBAAA,IAAI,qDAAgB,GACjC,KAEF,+BACc,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":[],"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/components/qds-nav-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface QdsNavListItem extends Components.QdsNavListItem, HTMLElement {}
+export const QdsNavListItem: {
+    prototype: QdsNavListItem;
+    new (): QdsNavListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/qds-nav-list-item.js

@@ -0,0 +1,162 @@
+/*!
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-2806fee1.js';
+import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './p-8abba29b.js';
+import { d as defineCustomElement$3 } from './p-ba880369.js';
+import { d as defineCustomElement$2 } from './p-c80f112a.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)}";
+const QdsNavListItemStyle0 = navListItemCss;
+
+// 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 _NavListItem_instances, _NavListItem_computedSize_get, _NavListItem_shouldCollapse_get, _NavListItem_liRef, _NavListItem_tooltipRef, _NavListItem_onBlur, _NavListItem_onFocus;
+const NavListItem = /*@__PURE__*/ proxyCustomElement(class NavListItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.focusEmitter = 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;
+        });
+        _NavListItem_tooltipRef.set(this, (tooltip) => {
+            if (tooltip)
+                // eslint-disable-next-line no-param-reassign
+                tooltip.target = this.li;
+        });
+        _NavListItem_onBlur.set(this, (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _NavListItem_onFocus.set(this, (event) => {
+            this.focusEmitter.emit(pickFocusEventAttributes(event));
+        });
+    }
+    onClick(event) {
+        if (this.disabled)
+            event.stopImmediatePropagation();
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
+        this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
+    }
+    render() {
+        return (h(Host, { key: 'd8fa60da531b9bd93a16c3e21f8d3ac3986c61a0' }, h("li", { key: 'fc5237181a7ec072fa4643e5b6702b25843698ae', class: {
+                'qds-nav-list-item': true,
+                'qds-disabled': this.disabled,
+                'qds-selected': this.selected,
+            }, ref: __classPrivateFieldGet(this, _NavListItem_liRef, "f"), ...this.inheritedAttributes }, h("button", { key: '07ed4f3b4b369565bfa3807969d0d45795c66694', 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 !== '' && (h("qds-icon", { key: '920ce703bd408a135c97d0efa29da86bb8b08bc2', "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 && (h("qds-tooltip", { key: '6cf3305f81a62bc2f1146298bfcd109f96ee7281', placement: "right", ref: __classPrivateFieldGet(this, _NavListItem_tooltipRef, "f") }, this.renderText()))));
+    }
+    renderText() {
+        return (h("div", { class: "qds-texts" }, h("div", { class: "qds-text" }, this.text), this.subtext !== undefined && this.subtext !== '' && (h("div", { class: "qds-subtext" }, this.subtext))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "tabindex": ["tabindexChanged"]
+    }; }
+    static get style() { return QdsNavListItemStyle0; }
+}, [17, "qds-nav-list-item", {
+        "collapsed": [4],
+        "disabled": [4],
+        "iconName": [1, "icon-name"],
+        "iconLibrary": [1, "icon-library"],
+        "size": [1],
+        "selected": [4],
+        "subtext": [1],
+        "text": [1],
+        "tabIndex": [32]
+    }, [[0, "click", "onClick"]], {
+        "tabindex": ["tabindexChanged"]
+    }]);
+_NavListItem_liRef = new WeakMap(), _NavListItem_tooltipRef = new WeakMap(), _NavListItem_onBlur = new WeakMap(), _NavListItem_onFocus = new WeakMap(), _NavListItem_instances = new WeakSet(), _NavListItem_computedSize_get = function _NavListItem_computedSize_get() {
+    switch (this.size) {
+        case 'standard':
+        case 'small':
+        case 'large': {
+            return this.size;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _NavListItem_shouldCollapse_get = function _NavListItem_shouldCollapse_get() {
+    return this.collapsed && this.iconName !== undefined && this.iconName !== '';
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-nav-list-item", "qds-icon", "qds-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-nav-list-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NavListItem);
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "qds-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const QdsNavListItem = NavListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsNavListItem, defineCustomElement };
+
+//# sourceMappingURL=qds-nav-list-item.js.map

package/components/qds-nav-list-item.js.map

@@ -0,0 +1 @@
+{"file":"qds-nav-list-item.js","mappings":"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","names":[],"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/components/qds-progress-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface QdsProgressBar extends Components.QdsProgressBar, HTMLElement {}
+export const QdsProgressBar: {
+    prototype: QdsProgressBar;
+    new (): QdsProgressBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/qds-progress-bar.js

@@ -0,0 +1,153 @@
+/*!
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { p as proxyCustomElement, H, h } from './p-2806fee1.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 QdsProgressBarStyle0 = progressBarCss;
+
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        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 _ProgressBar_instances, _ProgressBar_localMax, _ProgressBar_localValue, _ProgressBar_position, _ProgressBar_computedSize_get, _ProgressBar_positionChanged, _ProgressBar_defineGetter;
+const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.internals = this.attachInternals();
+        _ProgressBar_instances.add(this);
+        /**
+         * 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 = {};
+        /**
+         * 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.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;
+        __classPrivateFieldSet(this, _ProgressBar_localMax, max === undefined || Number.isNaN(max) || max < 0 ? 1 : max, "f");
+        this.internals.ariaValueMax = __classPrivateFieldGet(this, _ProgressBar_localMax, "f").toString();
+        __classPrivateFieldGet(this, _ProgressBar_instances, "m", _ProgressBar_positionChanged).call(this);
+    }
+    valueChanged() {
+        const value = typeof this.value === 'string'
+            ? Number.parseFloat(this.value)
+            : this.value;
+        __classPrivateFieldSet(this, _ProgressBar_localValue, value === undefined || Number.isNaN(value) || value < 0 ? 0 : value, "f");
+        this.internals.ariaValueNow =
+            // eslint-disable-next-line unicorn/no-null
+            this.value === undefined ? null : __classPrivateFieldGet(this, _ProgressBar_localValue, "f").toString();
+        __classPrivateFieldGet(this, _ProgressBar_instances, "m", _ProgressBar_positionChanged).call(this);
+    }
+    componentWillLoad() {
+        this.internals.role = 'progressbar';
+        __classPrivateFieldGet(this, _ProgressBar_instances, "m", _ProgressBar_defineGetter).call(this, 'labels', () => this.internals.labels);
+        __classPrivateFieldGet(this, _ProgressBar_instances, "m", _ProgressBar_defineGetter).call(this, 'position', () => __classPrivateFieldGet(this, _ProgressBar_position, "f"));
+        this.maxChanged();
+        this.valueChanged();
+    }
+    render() {
+        return (h("div", { key: 'a27fc224ae0a302c1303a7f8e3495b7085078b5f', "aria-hidden": "true", class: "qds-track", "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get) }, h("div", { key: '35b538fed23adf5c01bc92c00dd9cf220ddd0634', 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 } })));
+    }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "max": ["maxChanged"],
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return QdsProgressBarStyle0; }
+}, [65, "qds-progress-bar", {
+        "size": [1],
+        "labels": [16],
+        "max": [8],
+        "position": [2],
+        "value": [8],
+        "width": [32]
+    }, undefined, {
+        "max": ["maxChanged"],
+        "value": ["valueChanged"]
+    }]);
+_ProgressBar_localMax = new WeakMap(), _ProgressBar_localValue = new WeakMap(), _ProgressBar_position = new WeakMap(), _ProgressBar_instances = new WeakSet(), _ProgressBar_computedSize_get = function _ProgressBar_computedSize_get() {
+    switch (this.size) {
+        case 'small':
+        case 'large': {
+            return this.size;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _ProgressBar_positionChanged = function _ProgressBar_positionChanged() {
+    if (this.value === undefined) {
+        __classPrivateFieldSet(this, _ProgressBar_position, -1, "f");
+        this.width = '50%';
+        return;
+    }
+    __classPrivateFieldSet(this, _ProgressBar_position, __classPrivateFieldGet(this, _ProgressBar_localValue, "f") / __classPrivateFieldGet(this, _ProgressBar_localMax, "f"), "f");
+    this.width = `${Math.min(__classPrivateFieldGet(this, _ProgressBar_position, "f") * 100, 100)}%`;
+}, _ProgressBar_defineGetter = function _ProgressBar_defineGetter(p, get) {
+    Object.defineProperty(this.host, p, { enumerable: true, get });
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-progress-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ProgressBar);
+            }
+            break;
+    } });
+}
+
+const QdsProgressBar = ProgressBar;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsProgressBar, defineCustomElement };
+
+//# sourceMappingURL=qds-progress-bar.js.map

package/components/qds-progress-bar.js.map

@@ -0,0 +1 @@
+{"file":"qds-progress-bar.js","mappings":"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","names":[],"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/components/qds-radio.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../dist/types/components";
 
 interface QdsRadio extends Components.QdsRadio, HTMLElement {}
 export const QdsRadio: {
-  prototype: QdsRadio;
-  new (): QdsRadio;
+    prototype: QdsRadio;
+    new (): QdsRadio;
 };
 /**
  * Used to define this component and all nested components recursively.