@quartzds/core 1.0.0-beta.1

package/components/qds-checkbox.js

@@ -0,0 +1,156 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as pickFocusEventAttributes, a as invariant, i as inheritAriaAttributes, b as inheritAttributes } from './helpers.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './label.js';
+
+const checkboxCss = ".sc-qds-checkbox-h{box-sizing:border-box}[hidden].sc-qds-checkbox-h{display:none !important}.sc-qds-checkbox-h *.sc-qds-checkbox,.sc-qds-checkbox-h *.sc-qds-checkbox::before,.sc-qds-checkbox-h *.sc-qds-checkbox::after{box-sizing:inherit}.sc-qds-checkbox-h{display:inline-block;line-height:0}.icon.sc-qds-checkbox{display:none;color:var(--qds-theme-signature-color-contrast);inset-inline-start:0;pointer-events:none;position:absolute}.label.sc-qds-checkbox{cursor:pointer;display:inline-flex;position:relative}.checkbox.sc-qds-checkbox{align-items:center;-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.checkbox.sc-qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.checkbox.sc-qds-checkbox::before{content:'';height:10px;position:absolute;width:10px}.checkbox.sc-qds-checkbox:hover::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-hover)}.checkbox.sc-qds-checkbox:active::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-pressed)}.checkbox.sc-qds-checkbox:checked~.checked.sc-qds-checkbox,.checkbox.sc-qds-checkbox:indeterminate~.indeterminate.sc-qds-checkbox{display:inline-block}.checkbox.sc-qds-checkbox:checked,.checkbox.sc-qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:transparent}.checkbox.sc-qds-checkbox:checked:hover,.checkbox.sc-qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.checkbox.sc-qds-checkbox:checked:active,.checkbox.sc-qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled='true'].sc-qds-checkbox{opacity:var(--qds-theme-disabled);pointer-events:none}.icon[data-size='small'].sc-qds-checkbox,.checkbox[data-size='small'].sc-qds-checkbox{width:var(--qds-control-small-icon-size);height:var(--qds-control-small-icon-size)}.inline[data-size='small'].sc-qds-checkbox{margin-block:var(--qds-control-small-padding-auto-height)}.label[data-size='small'].sc-qds-checkbox{gap:var(--qds-control-small-gap-siblings-related)}.icon[data-size='standard'].sc-qds-checkbox,.checkbox[data-size='standard'].sc-qds-checkbox{width:var(--qds-control-standard-icon-size);height:var(--qds-control-standard-icon-size)}.inline[data-size='standard'].sc-qds-checkbox{margin-block:var(--qds-control-standard-padding-auto-height)}.label[data-size='standard'].sc-qds-checkbox{gap:var(--qds-control-standard-gap-siblings-related)}.icon[data-size='large'].sc-qds-checkbox,.checkbox[data-size='large'].sc-qds-checkbox{width:var(--qds-control-large-icon-size);height:var(--qds-control-large-icon-size)}.inline[data-size='large'].sc-qds-checkbox{margin-block:var(--qds-control-large-padding-auto-height)}.label[data-size='large'].sc-qds-checkbox{gap:var(--qds-control-large-gap-siblings-related)}";
+
+let autoIncrementingId = 1;
+const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.blurEmitter = createEvent(this, "qdsBlur", 2);
+    this.changeEmitter = createEvent(this, "qdsChange", 6);
+    this.focusEmitter = createEvent(this, "qdsFocus", 2);
+    this.inheritedAttributes = {};
+    this.ref = (checkbox) => {
+      this.input = checkbox;
+    };
+    this.onBlur = (event) => {
+      this.blurEmitter.emit(pickFocusEventAttributes(event));
+    };
+    this.onFocus = (event) => {
+      this.focusEmitter.emit(pickFocusEventAttributes(event));
+    };
+    this.inline = false;
+    this.size = 'standard';
+    this.text = undefined;
+    this.autoFocus = undefined;
+    this.checked = undefined;
+    this.disabled = undefined;
+    this.form = undefined;
+    this.indeterminate = undefined;
+    this.name = `qds-checkbox-${autoIncrementingId}`;
+    this.required = undefined;
+    this.value = undefined;
+  }
+  get computedDisabled() {
+    return this.disabled ?? false;
+  }
+  get computedIndeterminate() {
+    return this.indeterminate ?? false;
+  }
+  get hasText() {
+    return ((this.text !== undefined && this.text !== '') || this.required === true);
+  }
+  /**
+   * Returns whether a form will validate this checkbox when it is submitted
+   * without having to submit it.
+   */
+  async checkValidity() {
+    invariant(this.input);
+    return this.input.checkValidity();
+  }
+  /**
+   * Returns true if the checkbox's value passes validity checks; otherwise,
+   * returns false, and (if the event isn't canceled) reports the problem to
+   * the user.
+   */
+  async reportValidity() {
+    invariant(this.input);
+    return this.input.reportValidity();
+  }
+  /**
+   * Sets a custom validity message for the checkbox. If this message is not the
+   * empty string, then the checkbox is considered invalid.
+   */
+  async setCustomValidity(message) {
+    invariant(this.input);
+    this.input.setCustomValidity(message);
+  }
+  onClick(event) {
+    if (this.computedDisabled)
+      return;
+    event.preventDefault();
+    this.checked = this.computedIndeterminate ? true : !(this.checked ?? false);
+    this.changeEmitter.emit();
+    this.indeterminate = false;
+  }
+  componentWillLoad() {
+    autoIncrementingId += 1;
+    this.inheritedAttributes = {
+      ...inheritAriaAttributes(this.element),
+      ...inheritAttributes(this.element, ['tabindex']),
+    };
+  }
+  render() {
+    return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    h("label", { "aria-disabled": this.computedDisabled ? 'true' : 'false', class: {
+        inline: this.inline,
+        label: true,
+      }, "data-size": this.size }, h("input", {
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus: this.autoFocus, checked: this.computedIndeterminate ? false : this.checked, class: "checkbox", "data-size": this.size, disabled: this.disabled, form: this.form, indeterminate: this.indeterminate, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes
+    }), h("qds-icon", { "aria-hidden": "true", class: {
+        icon: true,
+        checked: true,
+      }, "data-size": this.size, library: "system", name: "check" }), h("qds-icon", { "aria-hidden": "true", class: {
+        icon: true,
+        indeterminate: true,
+      }, "data-size": this.size, library: "system", name: "minus" }), this.hasText && (h("qds-label", { required: this.required, size: this.size, text: this.text }))));
+  }
+  get element() { return this; }
+  static get style() { return checkboxCss; }
+}, [2, "qds-checkbox", {
+    "inline": [4],
+    "size": [513],
+    "text": [1537],
+    "autoFocus": [4, "autofocus"],
+    "checked": [1540],
+    "disabled": [1540],
+    "form": [1],
+    "indeterminate": [1540],
+    "name": [1],
+    "required": [4],
+    "value": [1032],
+    "checkValidity": [64],
+    "reportValidity": [64],
+    "setCustomValidity": [64]
+  }, [[0, "click", "onClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["qds-checkbox", "qds-icon", "qds-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "qds-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Checkbox);
+      }
+      break;
+    case "qds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "qds-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const QdsCheckbox = Checkbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsCheckbox, defineCustomElement };
+
+//# sourceMappingURL=qds-checkbox.js.map

package/components/qds-checkbox.js.map

@@ -0,0 +1 @@
+{"file":"qds-checkbox.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n  line-height: 0;\n}\n\n.icon {\n  display: none;\n  color: var(--qds-theme-signature-color-contrast);\n  inset-inline-start: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n.label {\n  cursor: pointer;\n  display: inline-flex;\n  position: relative;\n}\n\n.checkbox {\n  align-items: center;\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  cursor: pointer;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  margin: 0;\n  print-color-adjust: exact;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &::before {\n    content: '';\n    height: 10px;\n    position: absolute;\n    width: 10px;\n  }\n\n  &:hover::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-hover);\n  }\n\n  &:active::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-pressed);\n  }\n\n  &:checked ~ .checked,\n  &:indeterminate ~ .indeterminate {\n    display: inline-block;\n  }\n\n  &:checked,\n  &:indeterminate {\n    background-color: var(--qds-theme-signature-color-default);\n    border-color: transparent;\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &:is(.icon, .checkbox) {\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-size='standard'] {\n  &:is(.icon, .checkbox) {\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n}\n\n[data-size='large'] {\n  &:is(.icon, .checkbox) {\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Listen,\n  Method,\n  Prop,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n} from '../../helpers'\n\nexport type CheckboxValue = number | string | null\nexport type CheckboxSize = 'large' | 'small' | 'standard'\n\nlet autoIncrementingId = 1\n\n/**\n * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n *\n * @see https://quartz.se.com/build/components/checkbox\n */\n@Component({\n  tag: 'qds-checkbox',\n  scoped: true,\n  styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n  /**\n   * Adds vertical margin to the checkbox for alignment.\n   *\n   * This is useful when creating inline layouts so that the first lines have\n   * the correct vertical centering.\n   */\n  @Prop() public readonly inline: boolean = false\n\n  /**\n   * The checkbox's size.\n   */\n  @Prop({ reflect: true }) public readonly size: CheckboxSize = 'standard'\n\n  /**\n   * The checkbox's text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly text?: string\n\n  /**\n   * Specify whether the checkbox should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Sets the checkbox's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public checked?: boolean\n\n  /**\n   * Prevents the checkbox from being interacted with: it cannot be pressed or\n   * focused.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled?: boolean\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the checkbox with (its form owner).\n   *\n   * The value of this property must be the id of a `<form>` in the same\n   * document. If this property is not set, the `<qds-checkbox>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-checkbox>` 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   * @webnative\n   */\n  @Prop() public readonly form?: string\n\n  /**\n   * Sets the checkbox to an indeterminate state. This is usually applied to\n   * checkboxes that represents a \"select all/none\" behavior when associated\n   * checkboxes have a mix of checked and unchecked states.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public indeterminate?: boolean\n\n  /**\n   * The name of the checkbox, which is submitted with the form data. An\n   * incrementing ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-checkbox-${autoIncrementingId}`\n\n  /**\n   * A value must be specified for the checkbox before the owning form can be\n   * submitted.\n   *\n   * See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * and the\n   * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The value of the checkbox, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: CheckboxValue\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when a change to the checkbox's state is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the checkbox gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsCheckboxElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get computedIndeterminate(): boolean {\n    return this.indeterminate ?? false\n  }\n\n  private get hasText(): boolean {\n    return (\n      (this.text !== undefined && this.text !== '') || this.required === true\n    )\n  }\n\n  /**\n   * Returns whether a form will validate this checkbox when it is submitted\n   * without having to submit it.\n   */\n  @Method()\n  public async checkValidity(): Promise<boolean> {\n    invariant(this.input)\n\n    return this.input.checkValidity()\n  }\n\n  /**\n   * Returns true if the checkbox's value passes validity checks; otherwise,\n   * returns false, and (if the event isn't canceled) reports the problem to\n   * the user.\n   */\n  @Method()\n  public async reportValidity(): Promise<boolean> {\n    invariant(this.input)\n\n    return this.input.reportValidity()\n  }\n\n  /**\n   * Sets a custom validity message for the checkbox. If this message is not the\n   * empty string, then the checkbox is considered invalid.\n   */\n  @Method()\n  public async setCustomValidity(message: string): Promise<void> {\n    invariant(this.input)\n\n    this.input.setCustomValidity(message)\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.computedDisabled) return\n\n    event.preventDefault()\n\n    this.checked = this.computedIndeterminate ? true : !(this.checked ?? false)\n    this.changeEmitter.emit()\n    this.indeterminate = false\n  }\n\n  public componentWillLoad(): void {\n    autoIncrementingId += 1\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control\n      <label\n        aria-disabled={this.computedDisabled ? 'true' : 'false'}\n        class={{\n          inline: this.inline,\n          label: true,\n        }}\n        data-size={this.size}\n      >\n        <input\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.autoFocus}\n          checked={this.computedIndeterminate ? false : this.checked}\n          class=\"checkbox\"\n          data-size={this.size}\n          disabled={this.disabled}\n          form={this.form}\n          indeterminate={this.indeterminate}\n          name={this.name}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          ref={this.ref}\n          required={this.required}\n          type=\"checkbox\"\n          value={this.value ?? undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        />\n        <qds-icon\n          aria-hidden=\"true\"\n          class={{\n            icon: true,\n            checked: true,\n          }}\n          data-size={this.size}\n          library=\"system\"\n          name=\"check\"\n        />\n        <qds-icon\n          aria-hidden=\"true\"\n          class={{\n            icon: true,\n            indeterminate: true,\n          }}\n          data-size={this.size}\n          library=\"system\"\n          name=\"minus\"\n        />\n        {this.hasText && (\n          <qds-label\n            required={this.required}\n            size={this.size}\n            text={this.text}\n          />\n        )}\n      </label>\n    )\n  }\n\n  private readonly ref = (checkbox?: HTMLInputElement): void => {\n    this.input = checkbox\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}

package/components/qds-dropdown.d.ts

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

package/components/qds-dropdown.js

@@ -0,0 +1,259 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { o as offset, f as flip, s as shift, c as computePosition, a as autoUpdate, l as limitShift } from './floating-ui.dom.esm.js';
+import { c as ignorePromise, d as propertyToPx, a as invariant, r as roundByDPR } from './helpers.js';
+
+const dropdownCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{background:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);display:inline-block;left:0;top:0}";
+
+let autoIncrementingId = 1;
+const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.cancelEmitter = createEvent(this, "qdsCancel", 3);
+    this.closeEmitter = createEvent(this, "qdsClose", 2);
+    this.open = false;
+    this.boundFocusout = (event) => {
+      ignorePromise(this.handleFocusOut(event));
+    };
+    this.boundEscape = (event) => {
+      ignorePromise(this.handleEscape(event));
+    };
+    this.boundReferenceClick = () => {
+      ignorePromise(this.handleReferenceClick());
+    };
+    this.autoUpdateOptions = undefined;
+    this.disabled = false;
+    this.flipOptions = undefined;
+    this.noFlip = false;
+    this.noShift = false;
+    this.offsetOptions = undefined;
+    this.placement = 'bottom-start';
+    this.shiftOptions = undefined;
+    this.strategy = undefined;
+    this.target = undefined;
+    this.hostAriaLabelledBy = undefined;
+    this.hostDisplay = undefined;
+    this.hostPosition = undefined;
+    this.hostTransform = undefined;
+  }
+  /**
+   * Show the dropdown.
+   */
+  async show() {
+    if (this.open)
+      return;
+    if (this.referenceElement instanceof globalThis.Element) {
+      this.referenceElement.setAttribute('aria-expanded', 'true');
+      this.referenceElement.setAttribute('aria-controls', this.element.id);
+    }
+    this.open = true;
+    this.hostDisplay = undefined;
+    this.startAutoUpdate();
+  }
+  /**
+   * Close the dropdown.
+   */
+  async close() {
+    if (!this.open)
+      return;
+    if (this.referenceElement instanceof globalThis.Element) {
+      this.referenceElement.setAttribute('aria-expanded', 'false');
+      this.referenceElement.removeAttribute('aria-controls');
+    }
+    this.open = false;
+    this.hostDisplay = 'none';
+    if (this.cleanup)
+      this.cleanup();
+    this.closeEmitter.emit();
+  }
+  /**
+   * Update the dropdown's middleware and position.
+   */
+  async update() {
+    await this.updateMiddleware();
+  }
+  async handleMouseDown(event) {
+    if (!this.open)
+      return;
+    const composedPath = event.composedPath();
+    const withinBounds = composedPath.includes(this.element) ||
+      (this.referenceElement instanceof globalThis.Element &&
+        composedPath.includes(this.referenceElement));
+    if (!withinBounds)
+      await this.close();
+  }
+  async updateReferenceElement() {
+    var _a;
+    this.disconnectReferenceElement();
+    const resolvedTarget = typeof this.target === 'function' ? this.target() : this.target;
+    if (typeof resolvedTarget === 'string') {
+      const element = document.querySelector(resolvedTarget);
+      if (element === null)
+        throw new Error('String `target` must resolve to an Element.');
+      this.referenceElement = element;
+    }
+    else
+      this.referenceElement = resolvedTarget;
+    if (!(this.referenceElement instanceof globalThis.Element))
+      return;
+    this.referenceElement.setAttribute('aria-expanded', 'false');
+    this.referenceElement.addEventListener('click', this.boundReferenceClick);
+    this.referenceElement.addEventListener('focusout', this.boundFocusout);
+    this.referenceElement.addEventListener('keydown', this.boundEscape);
+    if (this.element.role === 'menu') {
+      (_a = this.referenceElement).id || (_a.id = `qds-dropdown-trigger-${autoIncrementingId}`);
+      this.hostAriaLabelledBy = this.referenceElement.id;
+    }
+  }
+  async updateMiddleware() {
+    this.middleware = [
+      offset({
+        ...this.offsetOptions,
+        mainAxis: propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,
+      }),
+      !this.noFlip &&
+        flip({
+          crossAxis: this.noShift,
+          ...this.flipOptions,
+        }),
+      !this.noShift &&
+        shift({
+          limiter: limitShift(),
+          ...this.shiftOptions,
+        }),
+    ].filter((middleware) => middleware !== false);
+    await this.updatePosition();
+  }
+  async updatePosition() {
+    invariant(this.referenceElement);
+    const { x, y, strategy } = await computePosition(this.referenceElement, this.element, {
+      middleware: this.middleware,
+      placement: this.placement,
+      strategy: this.strategy,
+    });
+    this.hostPosition = strategy;
+    this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`;
+  }
+  startAutoUpdate() {
+    invariant(this.referenceElement);
+    if (this.cleanup)
+      this.cleanup();
+    this.cleanup = autoUpdate(this.referenceElement, this.element, () => {
+      ignorePromise(this.updatePosition());
+    }, this.autoUpdateOptions);
+  }
+  async componentWillLoad() {
+    var _a, _b;
+    this.hostDisplay = 'none';
+    (_a = this.element).role ?? (_a.role = 'menu');
+    (_b = this.element).id || (_b.id = `qds-dropdown-${autoIncrementingId}`);
+    await this.updateReferenceElement();
+    autoIncrementingId += 1;
+    await this.updateMiddleware();
+  }
+  disconnectedCallback() {
+    this.disconnectReferenceElement();
+  }
+  render() {
+    return (h(Host, { "aria-labelledby": this.hostAriaLabelledBy, onKeyDown: this.boundEscape, onFocusout: this.boundFocusout, style: {
+        display: this.hostDisplay,
+        position: this.hostPosition,
+        transform: this.hostTransform,
+      } }, h("slot", null)));
+  }
+  async handleFocusOut(event) {
+    if (!(event instanceof FocusEvent))
+      return;
+    const { relatedTarget } = event;
+    if (relatedTarget instanceof globalThis.Element &&
+      !this.element.contains(relatedTarget) &&
+      this.referenceElement !== relatedTarget)
+      await this.close();
+  }
+  async handleEscape(event) {
+    if (!(event instanceof KeyboardEvent) ||
+      event.key !== 'Escape' ||
+      (event.target !== this.referenceElement &&
+        event.target instanceof globalThis.Element &&
+        event.target.closest('qds-dropdown') !== this.element))
+      return;
+    const cancelEvent = this.cancelEmitter.emit();
+    if (cancelEvent.defaultPrevented)
+      return;
+    await this.close();
+    if (this.referenceElement instanceof globalThis.HTMLElement ||
+      this.referenceElement instanceof globalThis.SVGElement)
+      this.referenceElement.focus();
+  }
+  async handleReferenceClick() {
+    if (!this.disabled)
+      await (this.open ? this.close() : this.show());
+  }
+  disconnectReferenceElement() {
+    this.hostAriaLabelledBy = undefined;
+    if (!(this.referenceElement instanceof globalThis.Element))
+      return;
+    this.referenceElement.removeEventListener('click', this.boundReferenceClick);
+    this.referenceElement.removeEventListener('focusout', this.boundFocusout);
+    this.referenceElement.removeEventListener('keydown', this.boundEscape);
+    this.referenceElement.removeAttribute('aria-expanded');
+    this.referenceElement.removeAttribute('aria-controls');
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "target": ["updateReferenceElement"],
+    "flipOptions": ["updateMiddleware"],
+    "noFlip": ["updateMiddleware"],
+    "noShift": ["updateMiddleware"],
+    "offsetOptions": ["updateMiddleware"],
+    "shiftOptions": ["updateMiddleware"],
+    "placement": ["updatePosition"],
+    "strategy": ["updatePosition"],
+    "autoUpdateOptions": ["startAutoUpdate"]
+  }; }
+  static get style() { return dropdownCss; }
+}, [1, "qds-dropdown", {
+    "autoUpdateOptions": [16],
+    "disabled": [1028],
+    "flipOptions": [16],
+    "noFlip": [4, "no-flip"],
+    "noShift": [4, "no-shift"],
+    "offsetOptions": [16],
+    "placement": [1],
+    "shiftOptions": [16],
+    "strategy": [1],
+    "target": [1],
+    "hostAriaLabelledBy": [32],
+    "hostDisplay": [32],
+    "hostPosition": [32],
+    "hostTransform": [32],
+    "show": [64],
+    "close": [64],
+    "update": [64]
+  }, [[4, "click", "handleMouseDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["qds-dropdown"];
+  components.forEach(tagName => { switch (tagName) {
+    case "qds-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Dropdown);
+      }
+      break;
+  } });
+}
+
+const QdsDropdown = Dropdown;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsDropdown, defineCustomElement };
+
+//# sourceMappingURL=qds-dropdown.js.map

package/components/qds-dropdown.js.map

@@ -0,0 +1 @@
+{"file":"qds-dropdown.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  background: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-accessory-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  display: inline-block;\n  left: 0;\n  top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n  AutoUpdateOptions,\n  DetectOverflowOptions,\n  FlipOptions,\n  Middleware,\n  Placement,\n  ReferenceElement,\n  ShiftOptions,\n  Strategy,\n} from '@floating-ui/dom'\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n  ignorePromise,\n  invariant,\n  propertyToPx,\n  roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n */\n@Component({\n  tag: 'qds-dropdown',\n  shadow: true,\n  styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n  /**\n   * Options to pass to Floating UI's\n   * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n   *\n   * @see https://floating-ui.com/docs/autoupdate#options\n   */\n  @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n  /**\n   * Prevents the dropdown from being shown by user interaction. The dropdown\n   * can still be displayed by calling the `show()` method.\n   */\n  @Prop({ mutable: true }) public disabled = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   *\n   * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n   * set to the value of the `noShift` property by default for interoperability\n   * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/flip#options\n   */\n  @Prop() public readonly flipOptions?: Partial<\n    DetectOverflowOptions & FlipOptions\n  >\n\n  /**\n   * Disable Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   */\n  @Prop() public readonly noFlip: boolean = false\n\n  /**\n   * Disable Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   */\n  @Prop() public readonly noShift: boolean = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`offset` middleware](https://floating-ui.com/docs/offset).\n   *\n   * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n   * not supported.\n   *\n   * @see https://floating-ui.com/docs/offset#options\n   */\n  @Prop() public readonly offsetOptions?: OffsetOptions\n\n  /**\n   * Where to place the dropdown relative to the `target`.\n   *\n   * @see https://floating-ui.com/docs/tutorial#placements\n   */\n  @Prop() public readonly placement: Placement = 'bottom-start'\n\n  /**\n   * Options to pass to Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/shift#options\n   */\n  @Prop() public readonly shiftOptions?: Partial<\n    DetectOverflowOptions & ShiftOptions\n  >\n\n  /**\n   * The CSS position strategy to use.\n   *\n   * @see https://floating-ui.com/docs/computeposition#strategy\n   */\n  @Prop() public readonly strategy?: Strategy\n\n  /**\n   * The trigger element that will trigger the dropdown. The target specified\n   * can be any of the follow:\n   *\n   * - A CSS selector string\n   * - A reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n   * - A function returning a reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n   * or a CSS selector string\n   */\n  @Prop() public readonly target!:\n    | ReferenceElement\n    | string\n    | (() => ReferenceElement | string)\n\n  /**\n   * Emitted when the user instructs the browser that they wish to dismiss the\n   * current open dropdown by pressing the `Esc` key.\n   *\n   * When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n   * `qdsClose` events are emitted.\n   */\n  @Event({ eventName: 'qdsCancel', bubbles: false })\n  private readonly cancelEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  @Element() private readonly element!: HTMLQdsDropdownElement\n\n  @State() private hostAriaLabelledBy?: string\n\n  @State() private hostDisplay?: string\n\n  @State() private hostPosition?: string\n\n  @State() private hostTransform?: string\n\n  private cleanup?: () => void\n\n  private middleware?: Middleware[]\n\n  private referenceElement?: ReferenceElement\n\n  private open = false\n\n  /**\n   * Show the dropdown.\n   */\n  @Method()\n  public async show(): Promise<void> {\n    if (this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element) {\n      this.referenceElement.setAttribute('aria-expanded', 'true')\n      this.referenceElement.setAttribute('aria-controls', this.element.id)\n    }\n\n    this.open = true\n    this.hostDisplay = undefined\n    this.startAutoUpdate()\n  }\n\n  /**\n   * Close the dropdown.\n   */\n  @Method()\n  public async close(): Promise<void> {\n    if (!this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element) {\n      this.referenceElement.setAttribute('aria-expanded', 'false')\n      this.referenceElement.removeAttribute('aria-controls')\n    }\n\n    this.open = false\n    this.hostDisplay = 'none'\n    if (this.cleanup) this.cleanup()\n\n    this.closeEmitter.emit()\n  }\n\n  /**\n   * Update the dropdown's middleware and position.\n   */\n  @Method()\n  public async update(): Promise<void> {\n    await this.updateMiddleware()\n  }\n\n  @Listen('click', { target: 'document' })\n  protected async handleMouseDown(event: MouseEvent): Promise<void> {\n    if (!this.open) return\n\n    const composedPath = event.composedPath()\n    const withinBounds =\n      composedPath.includes(this.element) ||\n      (this.referenceElement instanceof globalThis.Element &&\n        composedPath.includes(this.referenceElement))\n    if (!withinBounds) await this.close()\n  }\n\n  @Watch('target')\n  private async updateReferenceElement(): Promise<void> {\n    this.disconnectReferenceElement()\n\n    const resolvedTarget =\n      typeof this.target === 'function' ? this.target() : this.target\n    if (typeof resolvedTarget === 'string') {\n      const element = document.querySelector(resolvedTarget)\n      if (element === null)\n        throw new Error('String `target` must resolve to an Element.')\n      this.referenceElement = element\n    } else this.referenceElement = resolvedTarget\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    this.referenceElement.setAttribute('aria-expanded', 'false')\n    this.referenceElement.addEventListener('click', this.boundReferenceClick)\n    this.referenceElement.addEventListener('focusout', this.boundFocusout)\n    this.referenceElement.addEventListener('keydown', this.boundEscape)\n    if (this.element.role === 'menu') {\n      this.referenceElement.id ||= `qds-dropdown-trigger-${autoIncrementingId}`\n      this.hostAriaLabelledBy = this.referenceElement.id\n    }\n  }\n\n  @Watch('flipOptions')\n  @Watch('noFlip')\n  @Watch('noShift')\n  @Watch('offsetOptions')\n  @Watch('shiftOptions')\n  private async updateMiddleware(): Promise<void> {\n    this.middleware = [\n      offset({\n        ...this.offsetOptions,\n        mainAxis:\n          propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n      }),\n      !this.noFlip &&\n        flip({\n          crossAxis: this.noShift,\n          ...this.flipOptions,\n        }),\n      !this.noShift &&\n        shift({\n          limiter: limitShift(),\n          ...this.shiftOptions,\n        }),\n    ].filter((middleware): middleware is Middleware => middleware !== false)\n    await this.updatePosition()\n  }\n\n  @Watch('placement')\n  @Watch('strategy')\n  private async updatePosition(): Promise<void> {\n    invariant(this.referenceElement)\n\n    const { x, y, strategy } = await computePosition(\n      this.referenceElement,\n      this.element,\n      {\n        middleware: this.middleware,\n        placement: this.placement,\n        strategy: this.strategy,\n      },\n    )\n    this.hostPosition = strategy\n    this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n  }\n\n  @Watch('autoUpdateOptions')\n  private startAutoUpdate(): void {\n    invariant(this.referenceElement)\n\n    if (this.cleanup) this.cleanup()\n    this.cleanup = autoUpdate(\n      this.referenceElement,\n      this.element,\n      () => {\n        ignorePromise(this.updatePosition())\n      },\n      this.autoUpdateOptions,\n    )\n  }\n\n  public async componentWillLoad(): Promise<void> {\n    this.hostDisplay = 'none'\n    this.element.role ??= 'menu'\n    this.element.id ||= `qds-dropdown-${autoIncrementingId}`\n    await this.updateReferenceElement()\n    autoIncrementingId += 1\n    await this.updateMiddleware()\n  }\n\n  public disconnectedCallback(): void {\n    this.disconnectReferenceElement()\n  }\n\n  public render() {\n    return (\n      <Host\n        aria-labelledby={this.hostAriaLabelledBy}\n        onKeyDown={this.boundEscape}\n        onFocusout={this.boundFocusout}\n        style={{\n          display: this.hostDisplay,\n          position: this.hostPosition,\n          transform: this.hostTransform,\n        }}\n      >\n        <slot />\n      </Host>\n    )\n  }\n\n  private async handleFocusOut(event: Event): Promise<void> {\n    if (!(event instanceof FocusEvent)) return\n    const { relatedTarget } = event\n\n    if (\n      relatedTarget instanceof globalThis.Element &&\n      !this.element.contains(relatedTarget) &&\n      this.referenceElement !== relatedTarget\n    )\n      await this.close()\n  }\n\n  private readonly boundFocusout = (event: Event): void => {\n    ignorePromise(this.handleFocusOut(event))\n  }\n\n  private async handleEscape(event: Event): Promise<void> {\n    if (\n      !(event instanceof KeyboardEvent) ||\n      event.key !== 'Escape' ||\n      (event.target !== this.referenceElement &&\n        event.target instanceof globalThis.Element &&\n        event.target.closest('qds-dropdown') !== this.element)\n    )\n      return\n\n    const cancelEvent = this.cancelEmitter.emit()\n    if (cancelEvent.defaultPrevented) return\n\n    await this.close()\n    if (\n      this.referenceElement instanceof globalThis.HTMLElement ||\n      this.referenceElement instanceof globalThis.SVGElement\n    )\n      this.referenceElement.focus()\n  }\n\n  private readonly boundEscape = (event: Event): void => {\n    ignorePromise(this.handleEscape(event))\n  }\n\n  private async handleReferenceClick(): Promise<void> {\n    if (!this.disabled) await (this.open ? this.close() : this.show())\n  }\n\n  private readonly boundReferenceClick = (): void => {\n    ignorePromise(this.handleReferenceClick())\n  }\n\n  private disconnectReferenceElement(): void {\n    this.hostAriaLabelledBy = undefined\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n    this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n    this.referenceElement.removeEventListener('keydown', this.boundEscape)\n    this.referenceElement.removeAttribute('aria-expanded')\n    this.referenceElement.removeAttribute('aria-controls')\n  }\n}\n"],"version":3}

package/components/qds-icon.d.ts

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

package/components/qds-icon.js

@@ -0,0 +1,13 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { I as Icon, d as defineCustomElement$1 } from './icon.js';
+
+const QdsIcon = Icon;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsIcon, defineCustomElement };
+
+//# sourceMappingURL=qds-icon.js.map

package/components/qds-icon.js.map

@@ -0,0 +1 @@
+{"file":"qds-icon.js","mappings":";;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/qds-inline-link.d.ts

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

package/components/qds-inline-link.js

@@ -0,0 +1,89 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as pickFocusEventAttributes, i as inheritAriaAttributes, b as inheritAttributes } from './helpers.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const inlineLinkCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:inline-block}.external{display:none;height:1.25em;-webkit-margin-start:var(--qds-text-icon-gap);margin-inline-start:var(--qds-text-icon-gap);vertical-align:text-top;width:1.25em}.inline-link{border-radius:var(--qds-focus-border-radius);color:var(--qds-theme-link-default)}.inline-link[rel~='external']>.external{display:inline-block}.inline-link:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.inline-link:visited{color:var(--qds-theme-link-visited)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}";
+
+const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.blurEmitter = createEvent(this, "qdsBlur", 2);
+    this.focusEmitter = createEvent(this, "qdsFocus", 2);
+    this.inheritedAttributes = {};
+    this.onBlur = (event) => {
+      this.blurEmitter.emit(pickFocusEventAttributes(event));
+    };
+    this.onFocus = (event) => {
+      this.focusEmitter.emit(pickFocusEventAttributes(event));
+    };
+    this.disabled = false;
+    this.download = undefined;
+    this.href = undefined;
+    this.hreflang = undefined;
+    this.referrerPolicy = undefined;
+    this.rel = undefined;
+    this.target = '_self';
+  }
+  get computedTabIndex() {
+    const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex, 10);
+    return Number.isNaN(parsedValue) ? 0 : parsedValue;
+  }
+  onClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = {
+      ...inheritAriaAttributes(this.element),
+      ...inheritAttributes(this.element, ['tabindex']),
+    };
+  }
+  render() {
+    return (h("a", { "aria-disabled": this.disabled ? 'true' : 'false', class: "inline-link", download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target, ...this.inheritedAttributes, tabIndex: this.disabled ? -1 : this.computedTabIndex }, h("slot", null), h("qds-icon", { class: "external", library: "system", name: "arrow-top-right-on-square" })));
+  }
+  static get delegatesFocus() { return true; }
+  get element() { return this; }
+  static get style() { return inlineLinkCss; }
+}, [17, "qds-inline-link", {
+    "disabled": [1540],
+    "download": [8],
+    "href": [1],
+    "hreflang": [1],
+    "referrerPolicy": [1, "referrerpolicy"],
+    "rel": [1],
+    "target": [1]
+  }, [[0, "click", "onClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["qds-inline-link", "qds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "qds-inline-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InlineLink);
+      }
+      break;
+    case "qds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const QdsInlineLink = InlineLink;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsInlineLink, defineCustomElement };
+
+//# sourceMappingURL=qds-inline-link.js.map