@quartzds/core 1.0.0-beta.1

package/dist/esm/qds-title.entry.js.map

@@ -0,0 +1 @@
+{"file":"qds-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,qnXAAqnX;;MCuBznX,KAAK;;;IAkCR,wBAAmB,GAAe,EAAE,CAAA;;uBAvBmB,SAAS;;iBAOjC,OAAO;iBAEN,SAAS;;eAUd,IAAI;;EAMvC,IAAY,WAAW;IACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAED,IAAY,SAAS;IACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;GACvD;EAED,IAAY,OAAO;IACjB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM;IACX,QACE,cACE,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,MAAM,EAAE,IAAI;OACb,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,IACP,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,KAAK,EAAE,IAAI;OACZ,IAEA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,EACD,eACE,eAAQ,CACJ,CACG,EACV,IAAI,CAAC,WAAW,KACf,SACE,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,IAAI,CAAC,OAAO;OACzB,IAEA,IAAI,CAAC,QAAQ,CACZ,CACL,EACA,IAAI,CAAC,SAAS,KACb,SACE,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,IAAI,CAAC,OAAO;OACzB,IAEA,IAAI,CAAC,MAAM,CACV,CACL,CACM,EACV;GACF;;;;;;;","names":[],"sources":["./src/components/title/title.css?tag=qds-title&encapsulation=shadow","./src/components/title/title.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: block;\n}\n\n.titles,\n.title {\n  display: flex;\n}\n\n.titles {\n  flex-direction: column;\n}\n\n.title,\n.subtitle,\n.kicker {\n  margin-block: 0;\n}\n\n.icon {\n  flex-shrink: 0;\n}\n\n.title {\n  font-weight: initial;\n  font-size: initial;\n  color: var(--qds-theme-title);\n}\n\n.subtitle {\n  color: var(--qds-theme-subtitle);\n}\n\n.kicker {\n  color: var(--qds-theme-kicker);\n  order: -1;\n}\n\n.subtitle,\n.kicker {\n  overflow-wrap: break-word;\n}\n\n.main {\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-main-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-main-section-title);\n\n      & .icon {\n        --qds-main-section-title-line-height: 2rem;\n\n        width: var(--qds-main-section-titles-icon-size);\n        height: var(--qds-main-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-main-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-main-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );\n    }\n\n    &.has-icon-end {\n      padding-inline-end: calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.subsection {\n    &.titles,\n    &.title {\n      gap: var(--qds-main-subsection-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-main-subsection-title);\n\n      & .icon {\n        --qds-main-subsection-title-line-height: 1.5rem;\n\n        width: var(--qds-main-subsection-titles-icon-size);\n        height: var(--qds-main-subsection-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-main-subsection-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-main-subsection-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-main-subsection-titles-icon-size, 0px) +\n          var(--qds-main-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.panel {\n  &.root {\n    &.titles,\n    &.title {\n      gap: var(--qds-panel-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-panel-title);\n\n      & .icon {\n        --qds-panel-title-line-height: 2rem;\n\n        width: var(--qds-panel-titles-icon-size);\n        height: var(--qds-panel-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-panel-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-panel-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-panel-titles-icon-size, 0px) +\n          var(--qds-panel-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-panel-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-panel-section-title);\n\n      & .icon {\n        --qds-panel-section-title-line-height: 1.5rem;\n\n        width: var(--qds-panel-section-titles-icon-size);\n        height: var(--qds-panel-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-panel-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-panel-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-panel-section-titles-icon-size, 0px) +\n          var(--qds-panel-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.subsection {\n    &.titles,\n    &.title {\n      gap: var(--qds-panel-subsection-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-panel-subsection-title);\n\n      & .icon {\n        --qds-panel-subsection-title-line-height: 1.25rem;\n\n        width: var(--qds-panel-subsection-titles-icon-size);\n        height: var(--qds-panel-subsection-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-panel-subsection-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-panel-subsection-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-panel-subsection-titles-icon-size, 0px) +\n          var(--qds-panel-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.navigation {\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-navigation-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-navigation-section-title);\n\n      & .icon {\n        --qds-navigation-section-title-line-height: 1.5rem;\n\n        width: var(--qds-navigation-section-titles-icon-size);\n        height: var(--qds-navigation-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-navigation-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-navigation-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-navigation-section-titles-icon-size, 0px) +\n          var(--qds-navigation-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.subsection {\n    &.titles,\n    &.title {\n      gap: var(--qds-navigation-subsection-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-navigation-subsection-title);\n\n      & .icon {\n        --qds-navigation-subsection-title-line-height: 1.25rem;\n\n        width: var(--qds-navigation-subsection-titles-icon-size);\n        height: var(--qds-navigation-subsection-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-navigation-subsection-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-navigation-subsection-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-navigation-subsection-titles-icon-size, 0px) +\n          var(--qds-navigation-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.popup {\n  &.root {\n    &.titles,\n    &.title {\n      gap: var(--qds-popup-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-popup-title);\n\n      & .icon {\n        --qds-popup-title-line-height: 1.75rem;\n\n        width: var(--qds-popup-titles-icon-size);\n        height: var(--qds-popup-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-popup-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-popup-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-popup-titles-icon-size, 0px) +\n          var(--qds-popup-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-popup-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-popup-section-title);\n\n      & .icon {\n        --qds-popup-section-title-line-height: 1.5rem;\n\n        width: var(--qds-popup-section-titles-icon-size);\n        height: var(--qds-popup-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-popup-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-popup-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-popup-section-titles-icon-size, 0px) +\n          var(--qds-popup-section-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.subsection {\n    &.titles,\n    &.title {\n      gap: var(--qds-popup-subsection-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-popup-subsection-title);\n\n      & .icon {\n        --qds-popup-subsection-title-line-height: 1.25rem;\n\n        width: var(--qds-popup-subsection-titles-icon-size);\n        height: var(--qds-popup-subsection-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-popup-subsection-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-popup-subsection-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-popup-subsection-titles-icon-size, 0px) +\n          var(--qds-popup-subsection-titles-gap, 0px)\n      );\n    }\n  }\n}\n\n.accessory {\n  &.root {\n    &.titles,\n    &.title {\n      gap: var(--qds-accessory-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-accessory-title);\n\n      & .icon {\n        --qds-accessory-title-line-height: 1.5rem;\n\n        width: var(--qds-accessory-titles-icon-size);\n        height: var(--qds-accessory-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-accessory-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-accessory-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-accessory-titles-icon-size, 0px) +\n          var(--qds-accessory-titles-gap, 0px)\n      );\n    }\n  }\n\n  &.section {\n    &.titles,\n    &.title {\n      gap: var(--qds-accessory-section-titles-gap);\n    }\n\n    &.title {\n      font: var(--qds-accessory-section-title);\n\n      & .icon {\n        --qds-accessory-section-title-line-height: 1.25rem;\n\n        width: var(--qds-accessory-section-titles-icon-size);\n        height: var(--qds-accessory-section-title-line-height);\n      }\n    }\n\n    &.subtitle {\n      font: var(--qds-accessory-section-subtitle);\n    }\n\n    &.kicker {\n      font: var(--qds-accessory-section-kicker);\n    }\n\n    &.has-icon {\n      padding-inline-start: calc(\n        var(--qds-accessory-section-titles-icon-size, 0px) +\n          var(--qds-accessory-section-titles-gap, 0px)\n      );\n    }\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n  tag: 'qds-title',\n  shadow: true,\n  styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n  /**\n   * The name of the icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconName?: string\n\n  /**\n   * The name of a registered icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconLibrary: string = 'default'\n\n  /**\n   * Text to display for the kicker.\n   */\n  @Prop() public readonly kicker?: string\n\n  @Prop() public readonly layer: Layer = 'panel'\n\n  @Prop() public readonly level?: Level = 'section'\n\n  /**\n   * Text to display for the subtitle.\n   */\n  @Prop() public readonly subtitle?: string\n\n  /**\n   * HTML tag to use to render the title.\n   */\n  @Prop() public readonly tag: Tag = 'h2'\n\n  @Element() private readonly element!: HTMLQdsTitleElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get hasSubtitle(): boolean {\n    return this.subtitle !== undefined && this.subtitle !== ''\n  }\n\n  private get hasKicker(): boolean {\n    return this.kicker !== undefined && this.kicker !== ''\n  }\n\n  private get hasIcon(): boolean {\n    return this.iconName !== undefined && this.iconName !== ''\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = inheritAriaAttributes(this.element)\n  }\n\n  public render() {\n    return (\n      <hgroup\n        class={{\n          [this.layer]: true,\n          [this.level ?? 'root']: true,\n          titles: true,\n        }}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      >\n        <this.tag\n          class={{\n            [this.layer]: true,\n            [this.level ?? 'root']: true,\n            title: true,\n          }}\n        >\n          {this.iconName !== undefined && this.iconName !== '' && (\n            <qds-icon\n              class=\"icon\"\n              name={this.iconName}\n              library={this.iconLibrary}\n            />\n          )}\n          <div>\n            <slot />\n          </div>\n        </this.tag>\n        {this.hasSubtitle && (\n          <p\n            class={{\n              [this.layer]: true,\n              [this.level ?? 'root']: true,\n              subtitle: true,\n              'has-icon': this.hasIcon,\n            }}\n          >\n            {this.subtitle}\n          </p>\n        )}\n        {this.hasKicker && (\n          <p\n            class={{\n              [this.layer]: true,\n              [this.level ?? 'root']: true,\n              kicker: true,\n              'has-icon': this.hasIcon,\n            }}\n          >\n            {this.kicker}\n          </p>\n        )}\n      </hgroup>\n    )\n  }\n}\n"],"version":3}

package/dist/esm/qds-tooltip.entry.js

@@ -0,0 +1,280 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-1bc8e218.js';
+import { o as offset, f as flip, s as shift, l as limitShift, b as arrow, c as computePosition, a as autoUpdate } from './floating-ui.dom.esm-f96ac766.js';
+import { c as ignorePromise, d as propertyToPx, a as invariant, r as roundByDPR, f as isTouchDevice } from './helpers-5c189a19.js';
+
+const tooltipCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);left:0;padding:var(--qds-accessory-padding);top:0}:host([aria-hidden='true']){display:none}:host::before{content:'';height:100%;left:0;position:absolute;top:0;width:100%}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side='top'])::before,:host([data-side='bottom'])::before{height:calc(\n    0px +\n      0px\n  );height:calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );top:100%}:host([data-side='bottom'])::before{top:calc(\n    -1 * (0px +\n          0px)\n  );top:calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  )}:host([data-side='left'])::before,:host([data-side='right'])::before{width:calc(\n    0px +\n      0px\n  );width:calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );left:100%}:host([data-side='right'])::before{left:calc(\n    -1 * (0px +\n          0px)\n  );left:calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  )}.arrow-container{height:var(--qds-signature-triangle-pointer-size-width);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.arrow-container[data-side='bottom']{bottom:100%;transform:rotate(180deg)}.arrow-container[data-side='left']{left:100%;transform:rotate(-90deg)}.arrow-container[data-side='right']{right:100%;transform:rotate(90deg)}.arrow-container[data-side='top']{top:100%}.arrow{fill:var(--qds-theme-accessory-background)}";
+
+let autoIncrementingId = 1;
+const Tooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeEmitter = createEvent(this, "qdsClose", 2);
+    this.clickedTooltip = false;
+    this.isTouchDevice = false;
+    this.arrowContainerRef = (svg) => {
+      this.arrowContainerElement = svg;
+    };
+    this.boundTooltipMouseDown = () => {
+      this.clickedTooltip = true;
+    };
+    this.boundFocus = () => {
+      ignorePromise(this.handleFocus());
+    };
+    this.boundMouseEnter = () => {
+      ignorePromise(this.handleMouseEnter());
+    };
+    this.boundMouseLeave = (event) => {
+      ignorePromise(this.handleMouseLeave(event));
+    };
+    this.boundFocusout = (event) => {
+      ignorePromise(this.handleFocusOut(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 = 'top';
+    this.shiftOptions = undefined;
+    this.strategy = undefined;
+    this.target = undefined;
+    this.hostPosition = undefined;
+    this.hostTransform = undefined;
+    this.open = false;
+    this.middleware = undefined;
+    this.aDisplay = undefined;
+    this.side = 'top';
+    this.aShape = '';
+    this.aViewbox = '';
+    this.aHeight = 0;
+    this.aWidth = 0;
+    this.aGap = 0;
+    this.aX = '';
+    this.aY = '';
+  }
+  /**
+   * Show the tooltip.
+   */
+  async show() {
+    if (this.open)
+      return;
+    if (this.referenceElement instanceof globalThis.Element)
+      this.referenceElement.addEventListener('focusout', this.boundFocusout);
+    this.open = true;
+    this.element.setAttribute('aria-hidden', 'false');
+    this.startAutoUpdate();
+  }
+  /**
+   * Close the tooltip.
+   */
+  async close() {
+    if (!this.open)
+      return;
+    this.closeEmitter.emit();
+    if (this.referenceElement instanceof globalThis.Element)
+      this.referenceElement.removeEventListener('focusout', this.boundFocusout);
+    this.open = false;
+    this.clickedTooltip = false;
+    this.element.setAttribute('aria-hidden', 'true');
+    if (this.cleanup)
+      this.cleanup();
+  }
+  /**
+   * Update the tooltip's arrow.
+   *
+   * This method should typically be called when the Quartz platform was
+   * changed.
+   */
+  async updateArrow() {
+    this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0;
+    this.aHeight =
+      propertyToPx(this.element, `--qds-signature-triangle-pointer-size-height`) ?? 0;
+    this.aWidth =
+      propertyToPx(this.element, `--qds-signature-triangle-pointer-size-width`) ?? 0;
+    this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`;
+    const aTipRadius = propertyToPx(this.element, `--qds-signature-triangle-pointer-tip-radius`) ?? 0;
+    const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1);
+    const svgY = ((this.aHeight / 2) * aTipRadius) / 4;
+    this.aShape =
+      'M0,0' +
+        ` H${this.aWidth}` +
+        ` L${this.aWidth - svgX},${this.aHeight - svgY}` +
+        ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +
+        ' Z';
+  }
+  async handleMouseDown(event) {
+    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 updateMiddleware() {
+    invariant(this.arrowContainerElement);
+    this.middleware = [
+      offset({
+        ...this.offsetOptions,
+        mainAxis: this.aGap + this.aHeight,
+      }),
+      !this.noFlip &&
+        flip({
+          crossAxis: this.noShift,
+          ...this.flipOptions,
+        }),
+      !this.noShift &&
+        shift({
+          limiter: limitShift(),
+          ...this.shiftOptions,
+        }),
+      arrow({
+        element: this.arrowContainerElement,
+      }),
+    ].filter((middleware) => middleware !== false);
+  }
+  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;
+    if (this.isTouchDevice)
+      this.referenceElement.addEventListener('click', this.boundReferenceClick);
+    this.referenceElement.addEventListener('focus', this.boundFocus);
+    this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter);
+    this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave);
+    (_a = this.element).id || (_a.id = `qds-tooltip-${autoIncrementingId}`);
+    this.referenceElement.setAttribute('aria-describedby', this.element.id);
+  }
+  async updatePosition() {
+    invariant(this.referenceElement);
+    const { x, y, middlewareData, placement, 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)`;
+    if (!middlewareData.arrow)
+      return;
+    invariant(this.arrowContainerElement);
+    if (middlewareData.arrow.centerOffset !== 0) {
+      this.aDisplay = 'none';
+      return;
+    }
+    this.aDisplay = undefined;
+    const [side] = placement.split('-');
+    this.side = side;
+    const { x: aX, y: aY } = middlewareData.arrow;
+    this.aX = aX === undefined ? '' : `${aX}px`;
+    this.aY = aY === undefined ? '' : `${aY}px`;
+  }
+  startAutoUpdate() {
+    invariant(this.referenceElement);
+    if (this.cleanup)
+      this.cleanup();
+    this.cleanup = autoUpdate(this.referenceElement, this.element, () => {
+      ignorePromise(this.updatePosition());
+    }, this.autoUpdateOptions);
+  }
+  async componentWillLoad() {
+    this.isTouchDevice = isTouchDevice();
+    this.element.setAttribute('aria-hidden', 'true');
+    await this.updateReferenceElement();
+    autoIncrementingId += 1;
+  }
+  async componentDidLoad() {
+    await this.updateArrow();
+  }
+  disconnectedCallback() {
+    this.disconnectReferenceElement();
+  }
+  render() {
+    return (h(Host, { "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
+        position: this.hostPosition,
+        transform: this.hostTransform,
+      } }, h("slot", null), h("svg", { "aria-hidden": true, "data-side": this.side, class: "arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
+        left: this.aX,
+        top: this.aY,
+        display: this.aDisplay,
+      } }, h("path", { class: "arrow", d: this.aShape }))));
+  }
+  async handleFocus() {
+    if (!this.disabled)
+      await this.show();
+  }
+  async handleMouseEnter() {
+    if (!this.disabled)
+      await this.show();
+  }
+  async handleMouseLeave(event) {
+    if (!this.clickedTooltip &&
+      document.activeElement !== this.referenceElement &&
+      document.activeElement?.closest('qds-tooltip') !== this.element &&
+      event instanceof MouseEvent &&
+      event.relatedTarget !== this.referenceElement &&
+      event.relatedTarget !== this.element)
+      await this.close();
+  }
+  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 handleReferenceClick() {
+    if (!this.disabled)
+      await (this.open ? this.close() : this.show());
+  }
+  disconnectReferenceElement() {
+    if (!(this.referenceElement instanceof globalThis.Element))
+      return;
+    if (this.isTouchDevice)
+      this.referenceElement.removeEventListener('click', this.boundReferenceClick);
+    this.referenceElement.removeEventListener('focus', this.boundFocus);
+    this.referenceElement.removeEventListener('focusout', this.boundFocusout);
+    this.referenceElement.removeEventListener('mouseenter', this.boundMouseEnter);
+    this.referenceElement.removeEventListener('mouseleave', this.boundMouseLeave);
+    this.referenceElement.removeAttribute('aria-describedby');
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "aGap": ["updateMiddleware"],
+    "aHeight": ["updateMiddleware"],
+    "flipOptions": ["updateMiddleware"],
+    "noFlip": ["updateMiddleware"],
+    "noShift": ["updateMiddleware"],
+    "offsetOptions": ["updateMiddleware"],
+    "shiftOptions": ["updateMiddleware"],
+    "target": ["updateReferenceElement"],
+    "middleware": ["updatePosition"],
+    "placement": ["updatePosition"],
+    "strategy": ["updatePosition"],
+    "autoUpdateOptions": ["startAutoUpdate"]
+  }; }
+};
+Tooltip.style = tooltipCss;
+
+export { Tooltip as qds_tooltip };
+
+//# sourceMappingURL=qds-tooltip.entry.js.map

package/dist/esm/qds-tooltip.entry.js.map

@@ -0,0 +1 @@
+{"file":"qds-tooltip.entry.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.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  align-items: flex-start;\n  background-color: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-accessory-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  color: var(--qds-theme-text-standard);\n  display: flex;\n  flex-direction: column;\n  gap: var(--qds-accessory-gap-children-unrelated);\n  left: 0;\n  padding: var(--qds-accessory-padding);\n  top: 0;\n}\n\n:host([aria-hidden='true']) {\n  display: none;\n}\n\n:host::before {\n  content: '';\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n  margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n  height: calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );\n  top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n  top: calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n  width: calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );\n  left: 100%;\n}\n\n:host([data-side='right'])::before {\n  left: calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  );\n}\n\n.arrow-container {\n  height: var(--qds-signature-triangle-pointer-size-width);\n  position: absolute;\n  width: var(--qds-signature-triangle-pointer-size-width);\n\n  &[data-side='bottom'] {\n    bottom: 100%;\n    transform: rotate(180deg);\n  }\n\n  &[data-side='left'] {\n    left: 100%;\n    transform: rotate(-90deg);\n  }\n\n  &[data-side='right'] {\n    right: 100%;\n    transform: rotate(90deg);\n  }\n\n  &[data-side='top'] {\n    top: 100%;\n  }\n}\n\n.arrow {\n  fill: var(--qds-theme-accessory-background);\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  Side,\n  Strategy,\n} from '@floating-ui/dom'\nimport {\n  arrow,\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  isTouchDevice,\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/tooltip\n */\n@Component({\n  tag: 'qds-tooltip',\n  shadow: true,\n  styleUrl: 'tooltip.css',\n})\nexport class Tooltip 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 tooltip from being shown by user interaction. The tooltip can\n   * 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 tooltip relative to the `target`.\n   *\n   * @see https://floating-ui.com/docs/tutorial#placements\n   */\n  @Prop() public readonly placement: Placement = 'top'\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 tooltip. 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 tooltip is closed.\n   */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  @Element() private readonly element!: HTMLQdsTooltipElement\n\n  @State() private hostPosition?: string\n\n  @State() private hostTransform?: string\n\n  @State() private open = false\n\n  @State() private middleware?: Middleware[]\n\n  @State() private aDisplay?: string\n\n  @State() private side: Side = 'top'\n\n  @State() private aShape = ''\n\n  @State() private aViewbox = ''\n\n  @State() private aHeight = 0\n\n  @State() private aWidth = 0\n\n  @State() private aGap = 0\n\n  @State() private aX = ''\n\n  @State() private aY = ''\n\n  private arrowContainerElement?: SVGElement\n\n  private cleanup?: () => void\n\n  private clickedTooltip = false\n\n  private isTouchDevice = false\n\n  private referenceElement?: ReferenceElement\n\n  /**\n   * Show the tooltip.\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.addEventListener('focusout', this.boundFocusout)\n\n    this.open = true\n    this.element.setAttribute('aria-hidden', 'false')\n    this.startAutoUpdate()\n  }\n\n  /**\n   * Close the tooltip.\n   */\n  @Method()\n  public async close(): Promise<void> {\n    if (!this.open) return\n\n    this.closeEmitter.emit()\n    if (this.referenceElement instanceof globalThis.Element)\n      this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n    this.open = false\n    this.clickedTooltip = false\n    this.element.setAttribute('aria-hidden', 'true')\n    if (this.cleanup) this.cleanup()\n  }\n\n  /**\n   * Update the tooltip's arrow.\n   *\n   * This method should typically be called when the Quartz platform was\n   * changed.\n   */\n  @Method()\n  public async updateArrow(): Promise<void> {\n    this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n    this.aHeight =\n      propertyToPx(\n        this.element,\n        `--qds-signature-triangle-pointer-size-height`,\n      ) ?? 0\n\n    this.aWidth =\n      propertyToPx(\n        this.element,\n        `--qds-signature-triangle-pointer-size-width`,\n      ) ?? 0\n\n    this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n    const aTipRadius =\n      propertyToPx(\n        this.element,\n        `--qds-signature-triangle-pointer-tip-radius`,\n      ) ?? 0\n\n    const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n    const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n    this.aShape =\n      'M0,0' +\n      ` H${this.aWidth}` +\n      ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n      ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n      ' Z'\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  protected async handleMouseDown(event: MouseEvent): Promise<void> {\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('aGap')\n  @Watch('aHeight')\n  @Watch('flipOptions')\n  @Watch('noFlip')\n  @Watch('noShift')\n  @Watch('offsetOptions')\n  @Watch('shiftOptions')\n  protected async updateMiddleware(): Promise<void> {\n    invariant(this.arrowContainerElement)\n\n    this.middleware = [\n      offset({\n        ...this.offsetOptions,\n        mainAxis: this.aGap + this.aHeight,\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      arrow({\n        element: this.arrowContainerElement,\n      }),\n    ].filter((middleware): middleware is Middleware => middleware !== false)\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    if (this.isTouchDevice)\n      this.referenceElement.addEventListener('click', this.boundReferenceClick)\n    this.referenceElement.addEventListener('focus', this.boundFocus)\n    this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n    this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n    this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n    this.referenceElement.setAttribute('aria-describedby', this.element.id)\n  }\n\n  @Watch('middleware')\n  @Watch('placement')\n  @Watch('strategy')\n  private async updatePosition(): Promise<void> {\n    invariant(this.referenceElement)\n\n    const { x, y, middlewareData, placement, 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    if (!middlewareData.arrow) return\n\n    invariant(this.arrowContainerElement)\n\n    if (middlewareData.arrow.centerOffset !== 0) {\n      this.aDisplay = 'none'\n      return\n    }\n    this.aDisplay = undefined\n\n    const [side] = placement.split('-') as [Side]\n    this.side = side\n\n    const { x: aX, y: aY } = middlewareData.arrow\n\n    this.aX = aX === undefined ? '' : `${aX}px`\n    this.aY = aY === undefined ? '' : `${aY}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.isTouchDevice = isTouchDevice()\n    this.element.setAttribute('aria-hidden', 'true')\n    await this.updateReferenceElement()\n    autoIncrementingId += 1\n  }\n\n  public async componentDidLoad(): Promise<void> {\n    await this.updateArrow()\n  }\n\n  public disconnectedCallback(): void {\n    this.disconnectReferenceElement()\n  }\n\n  public render() {\n    return (\n      <Host\n        data-side={this.side}\n        onFocusout={this.boundFocusout}\n        onMouseDown={this.boundTooltipMouseDown}\n        onMouseLeave={this.boundMouseLeave}\n        role={this.element.role ?? 'tooltip'}\n        style={{\n          position: this.hostPosition,\n          transform: this.hostTransform,\n        }}\n      >\n        <slot />\n        <svg\n          aria-hidden\n          data-side={this.side}\n          class=\"arrow-container\"\n          ref={this.arrowContainerRef}\n          viewBox={this.aViewbox}\n          style={{\n            left: this.aX,\n            top: this.aY,\n            display: this.aDisplay,\n          }}\n        >\n          <path class=\"arrow\" d={this.aShape} />\n        </svg>\n      </Host>\n    )\n  }\n\n  private readonly arrowContainerRef = (svg?: SVGElement): void => {\n    this.arrowContainerElement = svg\n  }\n\n  private readonly boundTooltipMouseDown = (): void => {\n    this.clickedTooltip = true\n  }\n\n  private async handleFocus(): Promise<void> {\n    if (!this.disabled) await this.show()\n  }\n\n  private readonly boundFocus = (): void => {\n    ignorePromise(this.handleFocus())\n  }\n\n  private async handleMouseEnter(): Promise<void> {\n    if (!this.disabled) await this.show()\n  }\n\n  private readonly boundMouseEnter = (): void => {\n    ignorePromise(this.handleMouseEnter())\n  }\n\n  private async handleMouseLeave(event: Event): Promise<void> {\n    if (\n      !this.clickedTooltip &&\n      document.activeElement !== this.referenceElement &&\n      document.activeElement?.closest('qds-tooltip') !== this.element &&\n      event instanceof MouseEvent &&\n      event.relatedTarget !== this.referenceElement &&\n      event.relatedTarget !== this.element\n    )\n      await this.close()\n  }\n\n  private readonly boundMouseLeave = (event: Event): void => {\n    ignorePromise(this.handleMouseLeave(event))\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 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    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    if (this.isTouchDevice)\n      this.referenceElement.removeEventListener(\n        'click',\n        this.boundReferenceClick,\n      )\n    this.referenceElement.removeEventListener('focus', this.boundFocus)\n    this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n    this.referenceElement.removeEventListener(\n      'mouseenter',\n      this.boundMouseEnter,\n    )\n    this.referenceElement.removeEventListener(\n      'mouseleave',\n      this.boundMouseLeave,\n    )\n    this.referenceElement.removeAttribute('aria-describedby')\n  }\n}\n"],"version":3}

package/dist/esm/qds.js

@@ -0,0 +1,28 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { p as promiseResolve, b as bootstrapLazy } from './index-1bc8e218.js';
+export { s as setNonce } from './index-1bc8e218.js';
+
+/*
+ Stencil Client Patch Browser v3.2.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = import.meta.url;
+    const opts = {};
+    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+        // TODO(STENCIL-661): Remove code related to the dynamic import shim
+        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
+    }
+    return promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return bootstrapLazy([["qds-icon",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]],["qds-checkbox",[[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"]]]]],["qds-radio",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dropdown",[[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"]]]]],["qds-input",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-tooltip",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]]], options);
+});
+
+//# sourceMappingURL=qds.js.map

package/dist/esm/qds.js.map

@@ -0,0 +1 @@
+{"file":"qds.js","mappings":";;;;;;;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.2.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/types/components/button/button.d.ts

@@ -0,0 +1,209 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { LiteralUnion } from 'type-fest';
+export type ButtonType = 'button' | 'reset' | 'submit';
+export type Importance = 'destructive' | 'emphasized' | 'standard' | 'subdued';
+export type ButtonSize = 'large' | 'small' | 'standard';
+export type FormMethod = 'get' | 'post';
+export type ButtonTarget = '_blank' | '_parent' | '_self' | '_top';
+/**
+ * The `<qds-button>` element is an interactive element activated by a user
+ * with a mouse, keyboard, finger, voice command, or other assistive technology.
+ * Once activated, it then performs a programmable action, such as submitting a
+ * [form](https://developer.mozilla.org/docs/Learn/Forms)
+ * or opening a dialog.
+ *
+ * @see https://quartz.se.com/build/components/button
+ */
+export declare class Button implements ComponentInterface {
+  /**
+   * The name of the icon to render.
+   *
+   * Available names depend on the icon library being used.
+   */
+  readonly iconName?: string;
+  /**
+   * The name of a registered icon library.
+   */
+  readonly iconLibrary: string;
+  /**
+   * The button's importance.
+   */
+  readonly importance: Importance;
+  /**
+   * The button's size.
+   */
+  readonly size: ButtonSize;
+  /**
+   * The button's text.
+   */
+  readonly text?: string;
+  /**
+   * Prevents the button from being interacted with: it cannot be pressed or
+   * focused.
+   *
+   * @webnative
+   */
+  disabled?: boolean;
+  /**
+   * Tells the browser to download the linked file as this filename. Only used
+   * when `href` is set.
+   *
+   * @webnative
+   */
+  readonly download?: string;
+  /**
+   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)
+   * element to associate the button 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 `<button>` is associated with
+   * its ancestor `<form>` element, if any.
+   *
+   * This attribute lets you associate `<button>` elements to `<form>`s
+   * anywhere in the document, not just inside a `<form>`. It can also override
+   * an ancestor `<form>` element.
+   *
+   * @webnative
+   */
+  readonly form?: string;
+  /**
+   * The URL that processes the information submitted by the button. Overrides
+   * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)
+   * attribute of the button's form owner. Does nothing if there is no form owner.
+   *
+   * @webnative
+   */
+  readonly formAction?: string;
+  /**
+   * If the button is a submit button (it's inside/associated with a `<form>`
+   * and doesn't have `type="button"`), this attribute specifies the
+   * [HTTP method](https://developer.mozilla.org/docs/Web/HTTP/Methods) used to
+   * submit the form. Possible values:
+   *
+   * - `get`: The form data are appended to the form's action URL, with a ? as
+   * a separator, and the resulting URL is sent to the server. Use this method
+   * when the form has no side effects, like search forms.
+   * - `post`: The data from the form are included in the body of the HTTP
+   * request when sent to the server. Use when the form contains information
+   * that shouldn't be public, like login credentials.
+   *
+   * If specified, this attribute overrides the method attribute of the button's form owner.
+   *
+   * @webnative
+   */
+  readonly formMethod?: FormMethod;
+  /**
+   * If the button is a submit button, this attribute specifies that the form
+   * is not to be
+   * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)
+   * when it is submitted. If this attribute is specified, it overrides the
+   * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)
+   * attribute of the button's form owner.
+   *
+   * @webnative
+   */
+  readonly formNoValidate: boolean;
+  /**
+   * If the button is a submit button, this attribute is an author-defined name
+   * or standardized, underscore-prefixed keyword indicating where to display
+   * the response from submitting the form. This is the `name` of, or keyword
+   * for, a browsing context (a tab, window, or
+   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).
+   * If this attribute is specified, it overrides the
+   * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)
+   * attribute of the button's form owner. The following keywords have special
+   * meanings:
+   *
+   * - `_blank`: Load the response into a new unnamed browsing context — usually
+   * a new tab or window, depending on the user's browser settings.
+   * - `_parent`: Load the response into the parent browsing context of the
+   * current one. If there is no parent, this option behaves the same way as
+   * `_self`.
+   * - `_self`: Load the response into the same browsing context as the current
+   * one.
+   * - `_top`: Load the response into the top-level browsing context (that is,
+   * the browsing context that is an ancestor of the current one, and has no
+   * parent). If there is no parent, this option behaves the same way as
+   * `_self`.
+   *
+   * @webnative
+   */
+  readonly formTarget: LiteralUnion<ButtonTarget, string>;
+  /**
+   * When set, the underlying button will be rendered as an `<a>` with this
+   * `href` instead of a `<button>`.
+   *
+   * @webnative
+   */
+  readonly href?: string;
+  /**
+   * The name of the button, submitted as a pair with the button's `value` as
+   * part of the form data, when that button is used to submit the form.
+   * Ignored when `href` is set.
+   *
+   * @webnative
+   */
+  readonly name?: string;
+  /**
+   * Where to display the linked URL, as the name for a browsing context (a
+   * tab, window, or
+   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).
+   * The following keywords have special meanings for where to load the URL:
+   *
+   * - `_blank`: usually a new tab, but users can configure browsers to open a new
+   *   window instead.
+   * - `_parent`: the parent browsing context of the current one. If no parent,
+   *   behaves as `_self`.
+   * - `_self`: the current browsing context.
+   * - `_top`: the topmost browsing context (the "highest" context that's an
+   *   ancestor of the current one). If no ancestors, behaves as `_self`.
+   *
+   * @webnative
+   */
+  readonly target: LiteralUnion<ButtonTarget, string>;
+  /**
+   * The type of button.
+   *
+   * `button`: The button has no default behavior, and does nothing when
+   * pressed by default. It can have client-side scripts listen to the
+   * element's events, which are triggered when the events occur.
+   *
+   * `submit`: The button submits the form data to the server. This is the
+   * default if the attribute is not specified for buttons associated with a
+   * `<form>`, or if the attribute is an empty or invalid value.
+   *
+   * `reset`: The button resets all the controls to their initial values.
+   *
+   * @webnative
+   */
+  readonly type?: ButtonType;
+  /**
+   * Defines the value associated with the button's `name` when it's submitted
+   * with the form data. This value is passed to the server in params when the
+   * form is submitted using this button. Ignored when `href` is set.
+   *
+   * @webnative
+   */
+  readonly value?: string;
+  /**
+   * Emitted when the button loses focus.
+   */
+  private readonly blurEmitter;
+  /**
+   * Emitted when the button gains focus.
+   */
+  private readonly focusEmitter;
+  private readonly element;
+  private inheritedAttributes;
+  private get formElement();
+  private get buttonType();
+  private get iconOnly();
+  private get computedDisabled();
+  private get computedTabIndex();
+  componentWillLoad(): void;
+  render(): any;
+  private readonly onClick;
+  private readonly onBlur;
+  private readonly onFocus;
+}
+//# sourceMappingURL=button.d.ts.map