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

package/components/qds-select.js

@@ -0,0 +1,361 @@
+/*!
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2806fee1.js';
+import { c as invariant, p as pickFocusEventAttributes, h as pickInputEventAttributes, i as inheritAriaAttributes } from './p-8abba29b.js';
+import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './p-d107c90c.js';
+import { d as defineCustomElement$2 } from './p-ba880369.js';
+
+const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"d\"}.qds-container,.qds-select{width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:d}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal);text-overflow:ellipsis}.qds-select:not(:focus):user-invalid{border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:d;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
+const QdsSelectStyle0 = selectCss;
+
+// 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");
+    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 _Select_instances, _Select_inheritedAttributes, _Select_select, _Select_computedDisabled_get, _Select_computedOptions_get, _Select_computedSize_get, _Select_computedType_get, _Select_computedValue_get, _Select_computedSelectedOptions_get, _Select_ref, _Select_onBlur, _Select_onChange, _Select_onFocus, _Select_onInput, _Select_onSlotchange, _Select_defineGetter;
+const throwError = () => {
+    invariant(false);
+};
+const EMPTY_OPTIONS_COLLECTION = {
+    length: 0,
+    selectedIndex: -1,
+    add: throwError,
+    remove: throwError,
+    item: throwError,
+    namedItem: throwError,
+    [Symbol.iterator]: throwError,
+};
+const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.changeEmitter = createEvent(this, "qdsChange", 6);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        this.inputEmitter = createEvent(this, "qdsInput", 6);
+        this.internals = this.attachInternals();
+        _Select_instances.add(this);
+        /**
+         * The select's size.
+         *
+         * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS
+         * `height` should be used instead if this functionality is needed.
+         *
+         * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size
+         */
+        this.size = 'standard';
+        /**
+         * The [`<form>`][] element to associate the select with (its form owner).
+         *
+         * The value of this attribute must be the id of a `<form>` in the same
+         * document. If this attribute is not set, the `<qds-select>` is associated
+         * with its ancestor `<form>` element, if any.
+         *
+         * This attribute lets you associate `<qds-select>` elements to `<form>`s
+         * anywhere in the document, not just inside a `<form>`. It can also override
+         * an ancestor `<form>` element.
+         *
+         * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form
+         *
+         * @readonly
+         * @webnative
+         */
+        // eslint-disable-next-line unicorn/no-null
+        this.form = null;
+        /**
+         * Returns the number of elements in the [`<option>`s collection][].
+         *
+         * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection
+         *
+         * @readonly
+         * @webnative
+         */
+        this.length = 0;
+        /**
+         * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by
+         * the `<qds-select>` element.
+         *
+         * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection
+         * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
+         *
+         * @readonly
+         * @webnative
+         */
+        this.options = EMPTY_OPTIONS_COLLECTION;
+        /**
+         * The index of the first or last selected [`<option>`][] element, depending
+         * on the value of `multiple`. The value `-1` indicates that no element is
+         * selected.
+         *
+         * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
+         *
+         * @webnative
+         */
+        this.selectedIndex = -1;
+        /**
+         * Collection of the [`<option>`][] elements contained within the
+         * `<qds-select>` element that are currently selected.
+         *
+         * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
+         *
+         * @readonly
+         * @webnative
+         */
+        this.selectedOptions = EMPTY_OPTIONS_COLLECTION;
+        /**
+         * Returns `select-multiple` if the `multiple` attribute is true;
+         * `select-one` otherwise.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.type = 'select-one';
+        /**
+         * The error message that would be shown to the user if the `<qds-select>`
+         * was to be checked for validity.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validationMessage = '';
+        /**
+         * The [`ValidityState`][] object for this `<qds-select>`.
+         *
+         * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState
+         *
+         * @readonly
+         * @webnative
+         */
+        this.validity = VALID_STATE;
+        /**
+         * The `value` property of the first selected [`<option>`][] element, or the
+         * empty string if no options are selected.
+         *
+         * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
+         *
+         * @webnative
+         */
+        this.value = '';
+        /**
+         * True if `<qds-select>` will be validated when the form is submitted;
+         * false otherwise.
+         *
+         * @readonly
+         * @webnative
+         */
+        this.willValidate = false;
+        _Select_inheritedAttributes.set(this, {});
+        _Select_select.set(this, void 0);
+        this.checkValidity = () => this.internals.checkValidity();
+        this.reportValidity = () => this.internals.reportValidity();
+        this.setCustomValidity = (error) => {
+            invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+            __classPrivateFieldGet(this, _Select_select, "f").setCustomValidity(error);
+            if (error)
+                this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, __classPrivateFieldGet(this, _Select_select, "f"));
+            else
+                this.internals.setValidity(NO_ERROR_FLAGS);
+        };
+        this.addItem = (element, before) => {
+            invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+            __classPrivateFieldGet(this, _Select_select, "f").add(element, before);
+        };
+        this.removeItem = (index) => {
+            invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+            __classPrivateFieldGet(this, _Select_select, "f").remove(index);
+        };
+        this.item = (index) => {
+            invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+            return __classPrivateFieldGet(this, _Select_select, "f").item(index);
+        };
+        this.namedItem = (name) => {
+            invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+            return __classPrivateFieldGet(this, _Select_select, "f").namedItem(name);
+        };
+        _Select_ref.set(this, (select) => {
+            __classPrivateFieldSet(this, _Select_select, select, "f");
+        });
+        _Select_onBlur.set(this, (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _Select_onChange.set(this, () => {
+            this.changeEmitter.emit();
+        });
+        _Select_onFocus.set(this, (event) => {
+            this.focusEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _Select_onInput.set(this, (event) => {
+            invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+            this.value = __classPrivateFieldGet(this, _Select_select, "f").value;
+            this.inputEmitter.emit(pickInputEventAttributes(event));
+        });
+        _Select_onSlotchange.set(this, (event) => {
+            invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+            const { currentTarget } = event;
+            invariant(currentTarget instanceof HTMLSlotElement);
+            __classPrivateFieldGet(this, _Select_select, "f").replaceChildren(...currentTarget.assignedNodes().map((node) => node.cloneNode(true)));
+        });
+    }
+    onClick(event) {
+        if (__classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get))
+            event.stopImmediatePropagation();
+    }
+    disabledChanged() {
+        if (__classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get))
+            // eslint-disable-next-line unicorn/no-null
+            this.internals.setFormValue(null);
+        else
+            this.internals.setFormValue(__classPrivateFieldGet(this, _Select_instances, "a", _Select_computedValue_get));
+    }
+    selectedIndexChanged() {
+        invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+        __classPrivateFieldGet(this, _Select_select, "f").selectedIndex = this.selectedIndex;
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        this.tabIndex =
+            parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue;
+    }
+    validationChanged() {
+        invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+        __classPrivateFieldGet(this, _Select_select, "f").value = __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedValue_get);
+        __classPrivateFieldGet(this, _Select_select, "f").required = this.required ?? false;
+        const { valid } = __classPrivateFieldGet(this, _Select_select, "f").validity;
+        if (valid)
+            this.internals.setValidity(NO_ERROR_FLAGS, undefined, __classPrivateFieldGet(this, _Select_select, "f"));
+        else
+            this.internals.setValidity(__classPrivateFieldGet(this, _Select_select, "f").validity, __classPrivateFieldGet(this, _Select_select, "f").validationMessage, __classPrivateFieldGet(this, _Select_select, "f"));
+    }
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'form', () => this.internals.form);
+        __classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'willValidate', () => this.internals.willValidate);
+        __classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'validity', () => this.internals.validity);
+        __classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'validationMessage', () => this.internals.validationMessage);
+        __classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'type', () => __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedType_get));
+        __classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'options', () => __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedOptions_get));
+        __classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'length', () => __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedOptions_get).length);
+        __classPrivateFieldGet(this, _Select_instances, "m", _Select_defineGetter).call(this, 'selectedOptions', () => __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSelectedOptions_get));
+        __classPrivateFieldSet(this, _Select_inheritedAttributes, inheritAriaAttributes(this.host), "f");
+        this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
+    }
+    componentDidLoad() {
+        invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+        this.validationChanged();
+        this.selectedIndex = __classPrivateFieldGet(this, _Select_select, "f").selectedIndex;
+    }
+    render() {
+        return (h("div", { key: '775cc10b64f353ffcc54654212005cd41f319767', class: {
+                'qds-container': true,
+                'qds-multiple': this.multiple ?? false,
+            }, "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get) }, h("select", { key: '3eb930f8ee0360a9091c22eabede009ed7ea50cf', autoComplete: this.autoComplete,
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus: this.host.autofocus, class: "qds-select", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), disabled: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get), multiple: this.multiple, name: this.name, onBlur: __classPrivateFieldGet(this, _Select_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Select_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Select_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Select_onInput, "f"), ref: __classPrivateFieldGet(this, _Select_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get) ? undefined : this.tabIndex, ...__classPrivateFieldGet(this, _Select_inheritedAttributes, "f") }), this.multiple !== true && (h("qds-icon", { key: 'b83e1c50f43271e69446bf115dec6dccce389b59', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), library: "core", name: "dropdown" })), h("slot", { key: '24fb8877a33d393dde6d2e40b09c7d59a9096818', onSlotchange: __classPrivateFieldGet(this, _Select_onSlotchange, "f") }), h("div", { key: '9cd40db31ea7703639bf5bcdeba2279bd45c50d8', class: "qds-focus-ring" })));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "disabled": ["disabledChanged"],
+        "selectedIndex": ["selectedIndexChanged"],
+        "tabindex": ["tabindexChanged"],
+        "required": ["validationChanged"],
+        "value": ["validationChanged"]
+    }; }
+    static get style() { return QdsSelectStyle0; }
+}, [81, "qds-select", {
+        "size": [1],
+        "autoComplete": [1, "autocomplete"],
+        "disabled": [4],
+        "form": [1],
+        "length": [2],
+        "multiple": [4],
+        "name": [1],
+        "options": [16],
+        "required": [4],
+        "selectedIndex": [1026, "selected-index"],
+        "selectedOptions": [16],
+        "type": [1],
+        "validationMessage": [1, "validation-message"],
+        "validity": [16],
+        "value": [1025],
+        "willValidate": [4, "will-validate"],
+        "tabIndex": [32]
+    }, [[0, "click", "onClick"]], {
+        "disabled": ["disabledChanged"],
+        "selectedIndex": ["selectedIndexChanged"],
+        "tabindex": ["tabindexChanged"],
+        "required": ["validationChanged"],
+        "value": ["validationChanged"]
+    }]);
+_Select_inheritedAttributes = new WeakMap(), _Select_select = new WeakMap(), _Select_ref = new WeakMap(), _Select_onBlur = new WeakMap(), _Select_onChange = new WeakMap(), _Select_onFocus = new WeakMap(), _Select_onInput = new WeakMap(), _Select_onSlotchange = new WeakMap(), _Select_instances = new WeakSet(), _Select_computedDisabled_get = function _Select_computedDisabled_get() {
+    return ((this.host.matches(':disabled') || (this.disabled ?? false)) &&
+        this.host.getAttribute('disabled') !== 'false');
+}, _Select_computedOptions_get = function _Select_computedOptions_get() {
+    invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+    return __classPrivateFieldGet(this, _Select_select, "f").options;
+}, _Select_computedSize_get = function _Select_computedSize_get() {
+    switch (this.size) {
+        case 'standard':
+        case 'small':
+        case 'large': {
+            return this.size;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _Select_computedType_get = function _Select_computedType_get() {
+    invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+    return __classPrivateFieldGet(this, _Select_select, "f").type;
+}, _Select_computedValue_get = function _Select_computedValue_get() {
+    return this.value ?? '';
+}, _Select_computedSelectedOptions_get = function _Select_computedSelectedOptions_get() {
+    invariant(__classPrivateFieldGet(this, _Select_select, "f"));
+    return __classPrivateFieldGet(this, _Select_select, "f").selectedOptions;
+}, _Select_defineGetter = function _Select_defineGetter(p, get) {
+    Object.defineProperty(this.host, p, { enumerable: true, get });
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-select", "qds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Select);
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const QdsSelect = Select;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsSelect, defineCustomElement };
+
+//# sourceMappingURL=qds-select.js.map

package/components/qds-select.js.map

@@ -0,0 +1 @@
+{"file":"qds-select.js","mappings":"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","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.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\nslot {\n  display: none;\n}\n\n.qds-container {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-areas: 'select';\n}\n\n.qds-container,\n.qds-select {\n  width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n  color: var(--qds-theme-control-text-standard);\n  grid-area: select;\n}\n\n.qds-icon {\n  margin-inline-end: calc(\n    var(--qds-control-input-padding-horizontal) +\n      var(--qds-control-border-width)\n  );\n  place-self: center end;\n  pointer-events: none;\n}\n\n.qds-select {\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-color: var(--qds-theme-control-border);\n  border-radius: var(\n      --qds-control-border-radius-top-left,\n      var(--qds-control-border-radius)\n    )\n    var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n    var(\n      --qds-control-border-radius-bottom-right,\n      var(--qds-control-border-radius)\n    )\n    var(\n      --qds-control-border-radius-bottom-left,\n      var(--qds-control-border-radius)\n    );\n  border-style: solid;\n  border-width: var(--qds-control-border-width)\n    var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n    var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n    var(--qds-control-border-width);\n  margin: 0;\n  outline: 0;\n  padding-block: 0;\n  padding-inline: var(--qds-control-input-padding-horizontal);\n  text-overflow: ellipsis;\n\n  &:not(:focus):user-invalid {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n  opacity: var(--qds-theme-disabled);\n}\n\n:is(\n    ::slotted(optgroup),\n    ::slotted(optgroup:not(:disabled) > option),\n    ::slotted(option)\n  ):disabled {\n  opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n  font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n  font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n  &.qds-select {\n    font: var(--qds-control-small-text);\n\n    &:not([multiple]) {\n      height: var(--qds-control-small-height);\n      padding-inline-end: calc(\n        var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      );\n    }\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n}\n\n[data-size='standard'] {\n  &.qds-select {\n    font: var(--qds-control-standard-text);\n\n    &:not([multiple]) {\n      height: var(--qds-control-standard-height);\n      padding-inline-end: calc(\n        var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      );\n    }\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n}\n\n[data-size='large'] {\n  &.qds-select {\n    font: var(--qds-control-large-text);\n\n    &:not([multiple]) {\n      height: var(--qds-control-large-height);\n      padding-inline-end: calc(\n        var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n          var(--qds-control-input-padding-horizontal)\n      );\n    }\n  }\n\n  &.qds-icon {\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n}\n\n.qds-focus-ring {\n  border-radius: max(\n      1px,\n      var(\n        --qds-control-border-radius-top-left,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-top-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-right,\n        var(--qds-control-border-radius)\n      )\n    )\n    max(\n      1px,\n      var(\n        --qds-control-border-radius-bottom-left,\n        var(--qds-control-border-radius)\n      )\n    );\n  grid-area: select;\n  isolation: isolate;\n  outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  outline-offset: var(--qds-focus-border-offset);\n  pointer-events: none;\n  visibility: hidden;\n  width: calc(\n    100% + var(--qds-control-border-width) -\n      var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      )\n  );\n  height: calc(\n    100% + var(--qds-control-border-width) -\n      var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n  );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n  visibility: visible;\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  AttachInternals,\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' | 'select-one'\n\nconst throwError = (): never => {\n  invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n  length: 0,\n  selectedIndex: -1,\n  add: throwError,\n  remove: throwError,\n  item: throwError,\n  namedItem: throwError,\n  [Symbol.iterator]: throwError,\n}\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n  tag: 'qds-select',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n  styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n  /**\n   * The select's size.\n   *\n   * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n   * `height` should be used instead if this functionality is needed.\n   *\n   * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n   */\n  @Prop() public readonly size?: Size = 'standard'\n\n  /**\n   * Provides a hint for a [user agent's][] autocomplete feature. See\n   * [the HTML `autocomplete` attribute][] for a complete list of values and\n   * details on how to use `autoComplete`.\n   *\n   * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n   * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocomplete' })\n  public readonly autoComplete?: AutoComplete\n\n  /**\n   * Prevents the select from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop() public readonly disabled?: boolean\n\n  /**\n   * The [`<form>`][] element to associate the select with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<qds-select>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-select>` elements to `<form>`s\n   * anywhere in the document, not just inside a `<form>`. It can also override\n   * an ancestor `<form>` element.\n   *\n   * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n   *\n   * @readonly\n   * @webnative\n   */\n  // eslint-disable-next-line unicorn/no-null\n  @Prop() public readonly form: ElementInternals['form'] | string = null\n\n  /**\n   * Returns the number of elements in the [`<option>`s collection][].\n   *\n   * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not\n   * specified, then only one option can be selected at a time. When `multiple`\n   * is specified, most browsers will show a scrolling list box instead of a\n   * single line dropdown.\n   *\n   * @webnative\n   */\n  @Prop() public multiple?: boolean\n\n  /**\n   * The name of the select, which is submitted with the form data.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n   * the `<qds-select>` element.\n   *\n   * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n   * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly options: HTMLSelectElement['options'] =\n    EMPTY_OPTIONS_COLLECTION\n\n  /**\n   * An `<option>` with a non-empty string value must be selected before this\n   * select can be submitted.\n   *\n   * See [Client-side validation] and the [HTML attribute: `required`] for more\n   * information.\n   *\n   * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n   * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The index of the first or last selected [`<option>`][] element, depending\n   * on the value of `multiple`. The value `-1` indicates that no element is\n   * selected.\n   *\n   * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true })\n  public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n  /**\n   * Collection of the [`<option>`][] elements contained within the\n   * `<qds-select>` element that are currently selected.\n   *\n   * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop()\n  public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n    EMPTY_OPTIONS_COLLECTION\n\n  /**\n   * Returns `select-multiple` if the `multiple` attribute is true;\n   * `select-one` otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly type: SelectType = 'select-one'\n\n  /**\n   * The error message that would be shown to the user if the `<qds-select>`\n   * was to be checked for validity.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop()\n  public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n  /**\n   * The [`ValidityState`][] object for this `<qds-select>`.\n   *\n   * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n  /**\n   * The `value` property of the first selected [`<option>`][] element, or the\n   * empty string if no options are selected.\n   *\n   * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value? = ''\n\n  /**\n   * True if `<qds-select>` will be validated when the form is submitted;\n   * false otherwise.\n   *\n   * @readonly\n   * @webnative\n   */\n  @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n  @AttachInternals() private readonly internals!: ElementInternals\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when an alteration to the select's value is committed by the\n   * user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the select gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the select's value changes.\n   */\n  @Event({ eventName: 'qdsInput', cancelable: false })\n  private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n  @Element() private readonly host!: HTMLElement\n\n  @State() private tabIndex?: number\n\n  #inheritedAttributes: Attributes = {}\n\n  #select?: HTMLSelectElement\n\n  get #computedDisabled(): boolean {\n    return (\n      (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n      this.host.getAttribute('disabled') !== 'false'\n    )\n  }\n\n  get #computedOptions(): HTMLSelectElement['options'] {\n    invariant(this.#select)\n\n    return this.#select.options\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  get #computedType(): HTMLSelectElement['type'] {\n    invariant(this.#select)\n\n    return this.#select.type\n  }\n\n  get #computedValue(): string {\n    return this.value ?? ''\n  }\n\n  get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n    invariant(this.#select)\n\n    return this.#select.selectedOptions\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.#computedDisabled) event.stopImmediatePropagation()\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    if (this.#computedDisabled)\n      // eslint-disable-next-line unicorn/no-null\n      this.internals.setFormValue(null)\n    else this.internals.setFormValue(this.#computedValue)\n  }\n\n  @Watch('selectedIndex')\n  protected selectedIndexChanged(): void {\n    invariant(this.#select)\n\n    this.#select.selectedIndex = this.selectedIndex\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  @Watch('required')\n  @Watch('value')\n  protected validationChanged(): void {\n    invariant(this.#select)\n\n    this.#select.value = this.#computedValue\n    this.#select.required = this.required ?? false\n\n    const { valid } = this.#select.validity\n    if (valid)\n      this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n    else\n      this.internals.setValidity(\n        this.#select.validity,\n        this.#select.validationMessage,\n        this.#select,\n      )\n  }\n\n  public componentWillLoad(): void {\n    this.#defineGetter('form', () => this.internals.form)\n    this.#defineGetter('willValidate', () => this.internals.willValidate)\n    this.#defineGetter('validity', () => this.internals.validity)\n    this.#defineGetter(\n      'validationMessage',\n      () => this.internals.validationMessage,\n    )\n\n    this.#defineGetter('type', () => this.#computedType)\n    this.#defineGetter('options', () => this.#computedOptions)\n    this.#defineGetter('length', () => this.#computedOptions.length)\n    this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n    this.#inheritedAttributes = inheritAriaAttributes(this.host)\n    this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n  }\n\n  public componentDidLoad(): void {\n    invariant(this.#select)\n\n    this.validationChanged()\n    this.selectedIndex = this.#select.selectedIndex\n  }\n\n  public render() {\n    return (\n      <div\n        class={{\n          'qds-container': true,\n          'qds-multiple': this.multiple ?? false,\n        }}\n        data-size={this.#computedSize}\n      >\n        <select\n          autoComplete={this.autoComplete}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.host.autofocus}\n          class=\"qds-select\"\n          data-size={this.#computedSize}\n          disabled={this.#computedDisabled}\n          multiple={this.multiple}\n          name={this.name}\n          onBlur={this.#onBlur}\n          onChange={this.#onChange}\n          onFocus={this.#onFocus}\n          onInput={this.#onInput}\n          ref={this.#ref}\n          required={this.required}\n          tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.#inheritedAttributes}\n        />\n        {this.multiple !== true && (\n          <qds-icon\n            aria-hidden=\"true\"\n            class=\"qds-icon\"\n            data-size={this.#computedSize}\n            library=\"core\"\n            name=\"dropdown\"\n          />\n        )}\n        <slot onSlotchange={this.#onSlotchange} />\n        <div class=\"qds-focus-ring\" />\n      </div>\n    )\n  }\n\n  public checkValidity: ElementInternals['checkValidity'] = () =>\n    this.internals.checkValidity()\n\n  public reportValidity: ElementInternals['reportValidity'] = () =>\n    this.internals.reportValidity()\n\n  public setCustomValidity: HTMLSelectElement['setCustomValidity'] = (\n    error,\n  ) => {\n    invariant(this.#select)\n\n    this.#select.setCustomValidity(error)\n    if (error)\n      this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n    else this.internals.setValidity(NO_ERROR_FLAGS)\n  }\n\n  public addItem: HTMLSelectElement['add'] = (element, before) => {\n    invariant(this.#select)\n\n    this.#select.add(element, before)\n  }\n\n  public removeItem = (index: number): void => {\n    invariant(this.#select)\n\n    this.#select.remove(index)\n  }\n\n  public item: HTMLSelectElement['item'] = (index) => {\n    invariant(this.#select)\n\n    return this.#select.item(index)\n  }\n\n  public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n    invariant(this.#select)\n\n    return this.#select.namedItem(name)\n  }\n\n  readonly #ref = (select?: HTMLSelectElement): void => {\n    this.#select = select\n  }\n\n  readonly #onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onChange = (): void => {\n    this.changeEmitter.emit()\n  }\n\n  readonly #onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  readonly #onInput = (event: InputEvent): void => {\n    invariant(this.#select)\n\n    this.value = this.#select.value\n    this.inputEmitter.emit(pickInputEventAttributes(event))\n  }\n\n  readonly #onSlotchange = (event: Event): void => {\n    invariant(this.#select)\n    const { currentTarget } = event\n    invariant(currentTarget instanceof HTMLSlotElement)\n\n    this.#select.replaceChildren(\n      ...currentTarget.assignedNodes().map((node) => node.cloneNode(true)),\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-standalone-link.d.ts

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

package/components/qds-standalone-link.js

@@ -0,0 +1,174 @@
+/*!
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2806fee1.js';
+import { a as attachInternals, p as pickFocusEventAttributes, g as determineLinkIcon } from './p-8abba29b.js';
+import { d as defineCustomElement$2 } from './p-ba880369.js';
+
+const standaloneLinkCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-icon-crop{align-items:center;display:flex;justify-content:center}.qds-icon{flex-shrink:0;transform:scaleX(var(--qds-direction-factor,1))}.qds-standalone-link{border-radius:var(--qds-focus-border-radius);box-sizing:border-box;display:inline-flex;justify-content:center;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-text-decoration:none;text-decoration:none;width:100%}.qds-standalone-link:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-standalone-link:active,.qds-standalone-link:hover{-webkit-text-decoration:underline;text-decoration:underline}.qds-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}[data-importance=subdued]{color:var(--qds-theme-link-subdued-default)}.qds-visitable[data-importance=subdued]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=subdued]:hover{color:var(--qds-theme-link-subdued-hover)}[data-importance=subdued]:active{color:var(--qds-theme-link-subdued-pressed)}.qds-visitable[data-importance=subdued]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=subdued]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=standard]{color:var(--qds-theme-link-standard-default)}.qds-visitable[data-importance=standard]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=standard]:hover{color:var(--qds-theme-link-standard-hover)}[data-importance=standard]:active{color:var(--qds-theme-link-standard-pressed)}.qds-visitable[data-importance=standard]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=standard]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=emphasized]{color:var(--qds-theme-link-emphasized-default)}.qds-visitable[data-importance=emphasized]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=emphasized]:hover{color:var(--qds-theme-link-emphasized-hover)}[data-importance=emphasized]:active{color:var(--qds-theme-link-emphasized-pressed)}.qds-visitable[data-importance=emphasized]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=emphasized]:visited:active{color:var(--qds-theme-link-visited-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-standalone-link[data-size=small]{font:var(--qds-control-small-link);gap:var(--qds-control-small-gap-internal);padding-block:var(--qds-control-small-padding-auto-height)}[data-size=small][data-importance=subdued]{font:var(--qds-control-small-text)}.qds-icon-crop[data-size=small]{height:var(--qds-control-small-icon-crop-height)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-standalone-link[data-size=standard]{font:var(--qds-control-standard-link);gap:var(--qds-control-standard-gap-internal);padding-block:var(--qds-control-standard-padding-auto-height)}[data-size=standard][data-importance=subdued]{font:var(--qds-control-standard-text)}.qds-icon-crop[data-size=standard]{height:var(--qds-control-standard-icon-crop-height)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-standalone-link[data-size=large]{font:var(--qds-control-large-link);gap:var(--qds-control-large-gap-internal);padding-block:var(--qds-control-large-padding-auto-height)}[data-size=large][data-importance=subdued]{font:var(--qds-control-large-text)}.qds-icon-crop[data-size=large]{height:var(--qds-control-large-icon-crop-height)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
+const QdsStandaloneLinkStyle0 = standaloneLinkCss;
+
+// 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 _StandaloneLink_instances, _StandaloneLink_internals, _StandaloneLink_computedImportance_get, _StandaloneLink_computedSize_get, _StandaloneLink_onBlur, _StandaloneLink_onFocus, _StandaloneLink_onSlotchange;
+const StandaloneLink = /*@__PURE__*/ proxyCustomElement(class StandaloneLink extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.blurEmitter = createEvent(this, "qdsBlur", 2);
+        this.focusEmitter = createEvent(this, "qdsFocus", 2);
+        _StandaloneLink_instances.add(this);
+        /**
+         * Prevents the standalone link from being interacted with: it cannot be pressed
+         * or focused.
+         */
+        this.disabled = false;
+        /**
+         * The name of a registered icon library.
+         */
+        this.iconLibrary = 'default';
+        /**
+         * The standalone link's importance.
+         */
+        this.importance = 'standard';
+        /**
+         * The standalone link's size.
+         */
+        this.size = 'standard';
+        /**
+         * Defines if the standalone link will display the visited state.
+         */
+        this.visitable = false;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        _StandaloneLink_internals.set(this, attachInternals.call(this));
+        _StandaloneLink_onBlur.set(this, (event) => {
+            this.blurEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _StandaloneLink_onFocus.set(this, (event) => {
+            this.focusEmitter.emit(pickFocusEventAttributes(event));
+        });
+        _StandaloneLink_onSlotchange.set(this, () => {
+            __classPrivateFieldGet(this, _StandaloneLink_internals, "f").ariaLabel = this.host.textContent;
+        });
+    }
+    onClick(event) {
+        if (this.disabled)
+            event.stopImmediatePropagation();
+    }
+    disabledChanged() {
+        __classPrivateFieldGet(this, _StandaloneLink_internals, "f").ariaDisabled = this.disabled.toString();
+    }
+    tabindexChanged(newValue) {
+        const parsedValue = Number.parseInt(newValue, 10);
+        // FIXME: `undefined` instead of `0` causes `qdsFocus/qdsBlur` E2E tests
+        // to fail, but it's not clear why this is the case since it works for
+        // other components.
+        this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
+    }
+    hrefTargetChanged() {
+        this.linkIcon = determineLinkIcon(this.href, this.target);
+    }
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _StandaloneLink_internals, "f").role = 'link';
+        this.disabledChanged();
+        this.hrefTargetChanged();
+        this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
+    }
+    componentDidLoad() {
+        __classPrivateFieldGet(this, _StandaloneLink_internals, "f").ariaLabel = this.host.textContent;
+    }
+    render() {
+        return (h("a", { key: 'abab380cd9a22d00a0b504e0ed7cb5d5f1ca7ae2', "aria-hidden": "true", class: {
+                'qds-standalone-link': true,
+                'qds-disabled': this.disabled,
+                'qds-visitable': this.visitable,
+            }, "data-importance": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedImportance_get), "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _StandaloneLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _StandaloneLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target }, this.iconName !== undefined && this.iconName !== '' && (h("span", { key: '733f3a24a1755bfb7433e755b86694bbc57832a0', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: '99cf41fd72607d2b8c426b6aa249fe848d0650c4', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: this.iconLibrary, name: this.iconName }))), h("span", { key: '6a3d73fd1ddd338c7bf4de18828ed7c960cd86ea', class: "qds-text" }, h("slot", { key: '1e451614590865d9aa2bfe6175d0d82771e887c7', onSlotchange: __classPrivateFieldGet(this, _StandaloneLink_onSlotchange, "f") })), this.linkIcon && (h("span", { key: '8c340596a69219ef6378083141ff3febe0d26f4d', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: '9034e9e1265e04d53a3f8ed0c9c0756c1d94a673', class: "qds-icon", library: "core", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), name: this.linkIcon }))), this.importance === 'emphasized' && (h("span", { key: '6b6aa6b82742965e1357422dbb78e022a28183bc', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: '239fe0a496827fe27d7b34a57e217b764e02407c', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: "core", name: "next" })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "href": ["hrefTargetChanged"],
+        "target": ["hrefTargetChanged"]
+    }; }
+    static get style() { return QdsStandaloneLinkStyle0; }
+}, [17, "qds-standalone-link", {
+        "disabled": [4],
+        "iconName": [1, "icon-name"],
+        "iconLibrary": [1, "icon-library"],
+        "importance": [1],
+        "size": [1],
+        "visitable": [4],
+        "download": [8],
+        "href": [1],
+        "hreflang": [1],
+        "referrerPolicy": [1, "referrerpolicy"],
+        "rel": [1],
+        "target": [1],
+        "linkIcon": [32],
+        "tabIndex": [32]
+    }, [[0, "click", "onClick"]], {
+        "disabled": ["disabledChanged"],
+        "tabindex": ["tabindexChanged"],
+        "href": ["hrefTargetChanged"],
+        "target": ["hrefTargetChanged"]
+    }]);
+_StandaloneLink_internals = new WeakMap(), _StandaloneLink_onBlur = new WeakMap(), _StandaloneLink_onFocus = new WeakMap(), _StandaloneLink_onSlotchange = new WeakMap(), _StandaloneLink_instances = new WeakSet(), _StandaloneLink_computedImportance_get = function _StandaloneLink_computedImportance_get() {
+    switch (this.importance) {
+        case 'subdued':
+        case 'emphasized': {
+            return this.importance;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+}, _StandaloneLink_computedSize_get = function _StandaloneLink_computedSize_get() {
+    switch (this.size) {
+        case 'standard':
+        case 'small':
+        case 'large': {
+            return this.size;
+        }
+        default: {
+            return 'standard';
+        }
+    }
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-standalone-link", "qds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-standalone-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, StandaloneLink);
+            }
+            break;
+        case "qds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const QdsStandaloneLink = StandaloneLink;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsStandaloneLink, defineCustomElement };
+
+//# sourceMappingURL=qds-standalone-link.js.map