@quartzds/core 1.0.0-beta.1

package/components/qds-switch.js

@@ -0,0 +1,119 @@
+/*!
+ * 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$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './label.js';
+
+const switchCss = ".sc-qds-switch-h{box-sizing:border-box}[hidden].sc-qds-switch-h{display:none !important}.sc-qds-switch-h *.sc-qds-switch,.sc-qds-switch-h *.sc-qds-switch::before,.sc-qds-switch-h *.sc-qds-switch::after{box-sizing:inherit}.sc-qds-switch-h{display:inline-block}.track.sc-qds-switch,.knob.sc-qds-switch{-webkit-print-color-adjust:exact;print-color-adjust:exact}.unchecked-text.sc-qds-switch{text-align:end}.icon.sc-qds-switch{color:var(--qds-theme-control-text-standard);flex-shrink:0}.track.sc-qds-switch{align-items:center;border-radius:var(--qds-control-rounded-border-radius);display:flex;flex-shrink:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-color:var(--qds-theme-control-slider-track-inactive)}.knob.sc-qds-switch{background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-control-rounded-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);box-shadow:var(--qds-theme-accessory-elevation);box-sizing:content-box}.label.sc-qds-switch{cursor:pointer;display:flex}.switch.sc-qds-switch{-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:0;position:absolute;white-space:nowrap;width:1px}.switch.sc-qds-switch:hover~.track.sc-qds-switch>.knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-hover)}.switch.sc-qds-switch:active~.track.sc-qds-switch>.knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-pressed)}.switch.sc-qds-switch:checked~.track.sc-qds-switch{justify-content:flex-end;background-color:var(--qds-theme-signature-color-default)}.switch.sc-qds-switch:checked~.track.sc-qds-switch>.knob.sc-qds-switch{border-color:transparent;box-sizing:border-box;-webkit-margin-end:var(--qds-control-border-width);margin-inline-end:var(--qds-control-border-width)}.switch.sc-qds-switch:checked:hover~.track.sc-qds-switch>.knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-hover)}.switch.sc-qds-switch:checked:active~.track.sc-qds-switch>.knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-pressed)}.switch.sc-qds-switch:focus-visible~.track.sc-qds-switch{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}[aria-disabled='true'].sc-qds-switch{opacity:var(--qds-theme-disabled);pointer-events:none}.icon[data-size='small'].sc-qds-switch{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.inline[data-size='small'].sc-qds-switch{margin-block:var(--qds-control-small-padding-auto-height)}.label[data-size='small'].sc-qds-switch{gap:var(--qds-control-small-gap-siblings-related)}.track[data-size='small'].sc-qds-switch{width:calc(var(--qds-control-slider-knob-small-size) * 2);height:var(--qds-control-toggle-box-small-size)}.knob[data-size='small'].sc-qds-switch{height:var(--qds-control-slider-knob-small-size);width:var(--qds-control-slider-knob-small-size)}.icon[data-size='standard'].sc-qds-switch{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.inline[data-size='standard'].sc-qds-switch{margin-block:var(--qds-control-standard-padding-auto-height)}.label[data-size='standard'].sc-qds-switch{gap:var(--qds-control-standard-gap-siblings-related)}.track[data-size='standard'].sc-qds-switch{width:calc(var(--qds-control-slider-knob-standard-size) * 2);height:var(--qds-control-toggle-box-standard-size)}.knob[data-size='standard'].sc-qds-switch{height:var(--qds-control-slider-knob-standard-size);width:var(--qds-control-slider-knob-standard-size)}.icon[data-size='large'].sc-qds-switch{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.inline[data-size='large'].sc-qds-switch{margin-block:var(--qds-control-large-padding-auto-height)}.label[data-size='large'].sc-qds-switch{gap:var(--qds-control-large-gap-siblings-related)}.track[data-size='large'].sc-qds-switch{width:calc(var(--qds-control-slider-knob-large-size) * 2);height:var(--qds-control-toggle-box-large-size)}.knob[data-size='large'].sc-qds-switch{height:var(--qds-control-slider-knob-large-size);width:var(--qds-control-slider-knob-large-size)}";
+
+let autoIncrementingId = 1;
+const Switch = /*@__PURE__*/ proxyCustomElement(class Switch 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.onBlur = (event) => {
+      this.blurEmitter.emit(pickFocusEventAttributes(event));
+    };
+    this.onFocus = (event) => {
+      this.focusEmitter.emit(pickFocusEventAttributes(event));
+    };
+    this.inline = false;
+    this.iconCheckedName = undefined;
+    this.iconCheckedLibrary = 'default';
+    this.iconUncheckedName = undefined;
+    this.iconUncheckedLibrary = 'default';
+    this.size = 'standard';
+    this.textChecked = undefined;
+    this.textUnchecked = undefined;
+    this.autoFocus = undefined;
+    this.checked = undefined;
+    this.disabled = undefined;
+    this.form = undefined;
+    this.name = `qds-switch-${autoIncrementingId}`;
+    this.value = undefined;
+  }
+  get computedDisabled() {
+    return this.disabled ?? false;
+  }
+  onClick(event) {
+    if (this.computedDisabled)
+      return;
+    event.preventDefault();
+    this.checked = !(this.checked ?? false);
+    this.changeEmitter.emit();
+  }
+  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 }, this.textUnchecked !== undefined && this.textUnchecked !== '' && (h("qds-label", { class: "unchecked-text", size: this.size, text: this.textUnchecked })), this.iconUncheckedName !== undefined &&
+      this.iconUncheckedName !== '' && (h("qds-icon", { class: "icon", "data-size": this.size, library: this.iconUncheckedLibrary, name: this.iconUncheckedName })), h("input", {
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus: this.autoFocus, checked: this.checked, class: "switch", disabled: this.disabled, form: this.form, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes
+    }), h("div", { class: "track", "data-size": this.size }, h("div", { class: "knob", "data-size": this.size })), this.iconCheckedName !== undefined && this.iconCheckedName !== '' && (h("qds-icon", { class: "icon", "data-size": this.size, library: this.iconCheckedLibrary, name: this.iconCheckedName })), this.textChecked !== undefined && this.textChecked !== '' && (h("qds-label", { size: this.size, text: this.textChecked }))));
+  }
+  get element() { return this; }
+  static get style() { return switchCss; }
+}, [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"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["qds-switch", "qds-icon", "qds-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "qds-switch":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Switch);
+      }
+      break;
+    case "qds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "qds-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const QdsSwitch = Switch;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsSwitch, defineCustomElement };
+
+//# sourceMappingURL=qds-switch.js.map

package/components/qds-switch.js.map

@@ -0,0 +1 @@
+{"file":"qds-switch.js","mappings":";;;;;;;;;;AAAA,MAAM,SAAS,GAAG,ulIAAulI;;ACiBzmI,IAAI,kBAAkB,GAAG,CAAC,CAAA;MAUb,MAAM;;;;;;;IA2HT,wBAAmB,GAAe,EAAE,CAAA;IAoF3B,WAAM,GAAG,CAAC,KAAiB;MAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACvD,CAAA;IAEgB,YAAO,GAAG,CAAC,KAAiB;MAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACxD,CAAA;kBA9MyC,KAAK;;8BAa7C,SAAS;;gCAaT,SAAS;gBAKiD,UAAU;;;;;;;gBAwDvC,cAAc,kBAAkB,EAAE;;;EA+BjE,IAAY,gBAAgB;IAC1B,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;GAC9B;EAGS,OAAO,CAAC,KAAiB;IACjC,IAAI,IAAI,CAAC,gBAAgB;MAAE,OAAM;IAEjC,KAAK,CAAC,cAAc,EAAE,CAAA;IAEtB,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,CAAA;IACvC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;GAC1B;EAEM,iBAAiB;IACtB,kBAAkB,IAAI,CAAC,CAAA;IACvB,IAAI,CAAC,mBAAmB,GAAG;MACzB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC;MACtC,GAAG,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC;KACjD,CAAA;GACF;EAEM,MAAM;IACX;;IAEE,8BACiB,IAAI,CAAC,gBAAgB,GAAG,MAAM,GAAG,OAAO,EACvD,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,IAAI;OACZ,eACU,IAAI,CAAC,IAAI,IAEnB,IAAI,CAAC,aAAa,KAAK,SAAS,IAAI,IAAI,CAAC,aAAa,KAAK,EAAE,KAC5D,iBACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,aAAa,GACxB,CACH,EACA,IAAI,CAAC,iBAAiB,KAAK,SAAS;MACnC,IAAI,CAAC,iBAAiB,KAAK,EAAE,KAC3B,gBACE,KAAK,EAAC,MAAM,eACD,IAAI,CAAC,IAAI,EACpB,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,IAAI,EAAE,IAAI,CAAC,iBAAiB,GAC5B,CACH,EACH;;MAEE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,KAE1B,IAAI,CAAC,mBAAmB;MAC5B,EACF,WAAK,KAAK,EAAC,OAAO,eAAY,IAAI,CAAC,IAAI,IACrC,WAAK,KAAK,EAAC,MAAM,eAAY,IAAI,CAAC,IAAI,GAAI,CACtC,EACL,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,eAAe,KAAK,EAAE,KAChE,gBACE,KAAK,EAAC,MAAM,eACD,IAAI,CAAC,IAAI,EACpB,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACH,EACA,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,EAAE,KACxD,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,GAAI,CACvD,CACK,EACT;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/switch/switch.css?tag=qds-switch&encapsulation=scoped","./src/components/switch/switch.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}\n\n.track,\n.knob {\n  print-color-adjust: exact;\n}\n\n.unchecked-text {\n  text-align: end;\n}\n\n.icon {\n  color: var(--qds-theme-control-text-standard);\n  flex-shrink: 0;\n}\n\n.track {\n  align-items: center;\n  border-radius: var(--qds-control-rounded-border-radius);\n  display: flex;\n  flex-shrink: 0;\n  print-color-adjust: exact;\n  background-color: var(--qds-theme-control-slider-track-inactive);\n}\n\n.knob {\n  background-color: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-control-rounded-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  box-sizing: content-box;\n}\n\n.label {\n  cursor: pointer;\n  display: flex;\n}\n\n.switch {\n  clip-path: inset(50%);\n  height: 1px;\n  margin: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n\n  &:hover ~ .track > .knob {\n    background-color: var(--qds-theme-interactive-background-hover);\n  }\n\n  &:active ~ .track > .knob {\n    background-color: var(--qds-theme-interactive-background-pressed);\n  }\n\n  &:checked {\n    & ~ .track {\n      justify-content: flex-end;\n      background-color: var(--qds-theme-signature-color-default);\n\n      & > .knob {\n        border-color: transparent;\n        box-sizing: border-box;\n        margin-inline-end: var(--qds-control-border-width);\n      }\n    }\n\n    &:hover ~ .track > .knob {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active ~ .track > .knob {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n\n  &:focus-visible ~ .track {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &.icon {\n    height: var(--qds-control-small-icon-size);\n    width: 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  &.track {\n    width: calc(var(--qds-control-slider-knob-small-size) * 2);\n    height: var(--qds-control-toggle-box-small-size);\n  }\n\n  &.knob {\n    height: var(--qds-control-slider-knob-small-size);\n    width: var(--qds-control-slider-knob-small-size);\n  }\n}\n\n[data-size='standard'] {\n  &.icon {\n    height: var(--qds-control-standard-icon-size);\n    width: 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  &.track {\n    width: calc(var(--qds-control-slider-knob-standard-size) * 2);\n    height: var(--qds-control-toggle-box-standard-size);\n  }\n\n  &.knob {\n    height: var(--qds-control-slider-knob-standard-size);\n    width: var(--qds-control-slider-knob-standard-size);\n  }\n}\n\n[data-size='large'] {\n  &.icon {\n    height: var(--qds-control-large-icon-size);\n    width: 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  &.track {\n    width: calc(var(--qds-control-slider-knob-large-size) * 2);\n    height: var(--qds-control-toggle-box-large-size);\n  }\n\n  &.knob {\n    height: var(--qds-control-slider-knob-large-size);\n    width: var(--qds-control-slider-knob-large-size);\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 { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  pickFocusEventAttributes,\n} from '../../helpers'\n\nexport type SwitchValue = number | string | null\nexport type SwitchSize = 'large' | 'small' | 'standard'\n\nlet autoIncrementingId = 1\n\n/**\n * @see https://quartz.se.com/build/components/switch\n */\n@Component({\n  tag: 'qds-switch',\n  scoped: true,\n  styleUrl: 'switch.css',\n})\nexport class Switch implements ComponentInterface {\n  /**\n   * Adds vertical margin to the switch 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 name of the checked icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconCheckedName?: string\n\n  /**\n   * The name of a registered checked icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconCheckedLibrary: string =\n    'default'\n\n  /**\n   * The name of the unchecked icon to render.\n   *\n   * Available names depend on the icon library being used.\n   */\n  @Prop({ reflect: true }) public readonly iconUncheckedName?: string\n\n  /**\n   * The name of a registered unchecked icon library.\n   */\n  @Prop({ reflect: true }) public readonly iconUncheckedLibrary: string =\n    'default'\n\n  /**\n   * The switches's size.\n   */\n  @Prop({ reflect: true }) public readonly size: SwitchSize = 'standard'\n\n  /**\n   * The switch's checked text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly textChecked?: string\n\n  /**\n   * The switch's unchecked text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly textUnchecked?: string\n\n  /**\n   * Specify whether the switch should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   *Sets the switch's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public checked?: boolean\n\n  /**\n   * Prevents the switch 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 switch 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-switch>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-switch>` 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   * The name of the switch, 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-switch-${autoIncrementingId}`\n\n  /**\n   * The value of the switch, submitted as a name/value pair with form data.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: SwitchValue\n\n  /**\n   * Emitted when the switch 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 switch'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 switch gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsSwitchElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\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.checked ?? false)\n    this.changeEmitter.emit()\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        {this.textUnchecked !== undefined && this.textUnchecked !== '' && (\n          <qds-label\n            class=\"unchecked-text\"\n            size={this.size}\n            text={this.textUnchecked}\n          />\n        )}\n        {this.iconUncheckedName !== undefined &&\n          this.iconUncheckedName !== '' && (\n            <qds-icon\n              class=\"icon\"\n              data-size={this.size}\n              library={this.iconUncheckedLibrary}\n              name={this.iconUncheckedName}\n            />\n          )}\n        <input\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={this.autoFocus}\n          checked={this.checked}\n          class=\"switch\"\n          disabled={this.disabled}\n          form={this.form}\n          name={this.name}\n          onBlur={this.onBlur}\n          onFocus={this.onFocus}\n          type=\"checkbox\"\n          value={this.value ?? undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        />\n        <div class=\"track\" data-size={this.size}>\n          <div class=\"knob\" data-size={this.size} />\n        </div>\n        {this.iconCheckedName !== undefined && this.iconCheckedName !== '' && (\n          <qds-icon\n            class=\"icon\"\n            data-size={this.size}\n            library={this.iconCheckedLibrary}\n            name={this.iconCheckedName}\n          />\n        )}\n        {this.textChecked !== undefined && this.textChecked !== '' && (\n          <qds-label size={this.size} text={this.textChecked} />\n        )}\n      </label>\n    )\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-title.d.ts

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

package/components/qds-title.js

@@ -0,0 +1,94 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './helpers.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const titleCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:block}.titles,.title{display:flex}.titles{flex-direction:column}.title,.subtitle,.kicker{margin-block:0}.icon{flex-shrink:0}.title{font-weight:normal;font-weight:initial;font-size:medium;font-size:initial;color:var(--qds-theme-title)}.subtitle{color:var(--qds-theme-subtitle)}.kicker{color:var(--qds-theme-kicker);order:-1}.subtitle,.kicker{word-wrap:break-word}.main.section.titles,.main.section.title{gap:var(--qds-main-section-titles-gap)}.main.section.title{font:var(--qds-main-section-title)}.main.section.title .icon{--qds-main-section-title-line-height:2rem;width:var(--qds-main-section-titles-icon-size);height:2rem;height:var(--qds-main-section-title-line-height)}.main.section.subtitle{font:var(--qds-main-section-subtitle)}.main.section.kicker{font:var(--qds-main-section-kicker)}.main.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      )}.main.section.has-icon-end{-webkit-padding-end:calc(\n        0px +\n          0px\n      );padding-inline-end:calc(\n        0px +\n          0px\n      );-webkit-padding-end:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      );padding-inline-end:calc(\n        var(--qds-main-section-titles-icon-size, 0px) +\n          var(--qds-main-section-titles-gap, 0px)\n      )}.main.subsection.titles,.main.subsection.title{gap:var(--qds-main-subsection-titles-gap)}.main.subsection.title{font:var(--qds-main-subsection-title)}.main.subsection.title .icon{--qds-main-subsection-title-line-height:1.5rem;width:var(--qds-main-subsection-titles-icon-size);height:1.5rem;height:var(--qds-main-subsection-title-line-height)}.main.subsection.subtitle{font:var(--qds-main-subsection-subtitle)}.main.subsection.kicker{font:var(--qds-main-subsection-kicker)}.main.subsection.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-main-subsection-titles-icon-size, 0px) +\n          var(--qds-main-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-main-subsection-titles-icon-size, 0px) +\n          var(--qds-main-subsection-titles-gap, 0px)\n      )}.panel.root.titles,.panel.root.title{gap:var(--qds-panel-titles-gap)}.panel.root.title{font:var(--qds-panel-title)}.panel.root.title .icon{--qds-panel-title-line-height:2rem;width:var(--qds-panel-titles-icon-size);height:2rem;height:var(--qds-panel-title-line-height)}.panel.root.subtitle{font:var(--qds-panel-subtitle)}.panel.root.kicker{font:var(--qds-panel-kicker)}.panel.root.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-panel-titles-icon-size, 0px) +\n          var(--qds-panel-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-panel-titles-icon-size, 0px) +\n          var(--qds-panel-titles-gap, 0px)\n      )}.panel.section.titles,.panel.section.title{gap:var(--qds-panel-section-titles-gap)}.panel.section.title{font:var(--qds-panel-section-title)}.panel.section.title .icon{--qds-panel-section-title-line-height:1.5rem;width:var(--qds-panel-section-titles-icon-size);height:1.5rem;height:var(--qds-panel-section-title-line-height)}.panel.section.subtitle{font:var(--qds-panel-section-subtitle)}.panel.section.kicker{font:var(--qds-panel-section-kicker)}.panel.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-panel-section-titles-icon-size, 0px) +\n          var(--qds-panel-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-panel-section-titles-icon-size, 0px) +\n          var(--qds-panel-section-titles-gap, 0px)\n      )}.panel.subsection.titles,.panel.subsection.title{gap:var(--qds-panel-subsection-titles-gap)}.panel.subsection.title{font:var(--qds-panel-subsection-title)}.panel.subsection.title .icon{--qds-panel-subsection-title-line-height:1.25rem;width:var(--qds-panel-subsection-titles-icon-size);height:1.25rem;height:var(--qds-panel-subsection-title-line-height)}.panel.subsection.subtitle{font:var(--qds-panel-subsection-subtitle)}.panel.subsection.kicker{font:var(--qds-panel-subsection-kicker)}.panel.subsection.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-panel-subsection-titles-icon-size, 0px) +\n          var(--qds-panel-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-panel-subsection-titles-icon-size, 0px) +\n          var(--qds-panel-subsection-titles-gap, 0px)\n      )}.navigation.section.titles,.navigation.section.title{gap:var(--qds-navigation-section-titles-gap)}.navigation.section.title{font:var(--qds-navigation-section-title)}.navigation.section.title .icon{--qds-navigation-section-title-line-height:1.5rem;width:var(--qds-navigation-section-titles-icon-size);height:1.5rem;height:var(--qds-navigation-section-title-line-height)}.navigation.section.subtitle{font:var(--qds-navigation-section-subtitle)}.navigation.section.kicker{font:var(--qds-navigation-section-kicker)}.navigation.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-navigation-section-titles-icon-size, 0px) +\n          var(--qds-navigation-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-navigation-section-titles-icon-size, 0px) +\n          var(--qds-navigation-section-titles-gap, 0px)\n      )}.navigation.subsection.titles,.navigation.subsection.title{gap:var(--qds-navigation-subsection-titles-gap)}.navigation.subsection.title{font:var(--qds-navigation-subsection-title)}.navigation.subsection.title .icon{--qds-navigation-subsection-title-line-height:1.25rem;width:var(--qds-navigation-subsection-titles-icon-size);height:1.25rem;height:var(--qds-navigation-subsection-title-line-height)}.navigation.subsection.subtitle{font:var(--qds-navigation-subsection-subtitle)}.navigation.subsection.kicker{font:var(--qds-navigation-subsection-kicker)}.navigation.subsection.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-navigation-subsection-titles-icon-size, 0px) +\n          var(--qds-navigation-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-navigation-subsection-titles-icon-size, 0px) +\n          var(--qds-navigation-subsection-titles-gap, 0px)\n      )}.popup.root.titles,.popup.root.title{gap:var(--qds-popup-titles-gap)}.popup.root.title{font:var(--qds-popup-title)}.popup.root.title .icon{--qds-popup-title-line-height:1.75rem;width:var(--qds-popup-titles-icon-size);height:1.75rem;height:var(--qds-popup-title-line-height)}.popup.root.subtitle{font:var(--qds-popup-subtitle)}.popup.root.kicker{font:var(--qds-popup-kicker)}.popup.root.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-popup-titles-icon-size, 0px) +\n          var(--qds-popup-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-popup-titles-icon-size, 0px) +\n          var(--qds-popup-titles-gap, 0px)\n      )}.popup.section.titles,.popup.section.title{gap:var(--qds-popup-section-titles-gap)}.popup.section.title{font:var(--qds-popup-section-title)}.popup.section.title .icon{--qds-popup-section-title-line-height:1.5rem;width:var(--qds-popup-section-titles-icon-size);height:1.5rem;height:var(--qds-popup-section-title-line-height)}.popup.section.subtitle{font:var(--qds-popup-section-subtitle)}.popup.section.kicker{font:var(--qds-popup-section-kicker)}.popup.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-popup-section-titles-icon-size, 0px) +\n          var(--qds-popup-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-popup-section-titles-icon-size, 0px) +\n          var(--qds-popup-section-titles-gap, 0px)\n      )}.popup.subsection.titles,.popup.subsection.title{gap:var(--qds-popup-subsection-titles-gap)}.popup.subsection.title{font:var(--qds-popup-subsection-title)}.popup.subsection.title .icon{--qds-popup-subsection-title-line-height:1.25rem;width:var(--qds-popup-subsection-titles-icon-size);height:1.25rem;height:var(--qds-popup-subsection-title-line-height)}.popup.subsection.subtitle{font:var(--qds-popup-subsection-subtitle)}.popup.subsection.kicker{font:var(--qds-popup-subsection-kicker)}.popup.subsection.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-popup-subsection-titles-icon-size, 0px) +\n          var(--qds-popup-subsection-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-popup-subsection-titles-icon-size, 0px) +\n          var(--qds-popup-subsection-titles-gap, 0px)\n      )}.accessory.root.titles,.accessory.root.title{gap:var(--qds-accessory-titles-gap)}.accessory.root.title{font:var(--qds-accessory-title)}.accessory.root.title .icon{--qds-accessory-title-line-height:1.5rem;width:var(--qds-accessory-titles-icon-size);height:1.5rem;height:var(--qds-accessory-title-line-height)}.accessory.root.subtitle{font:var(--qds-accessory-subtitle)}.accessory.root.kicker{font:var(--qds-accessory-kicker)}.accessory.root.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-accessory-titles-icon-size, 0px) +\n          var(--qds-accessory-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-accessory-titles-icon-size, 0px) +\n          var(--qds-accessory-titles-gap, 0px)\n      )}.accessory.section.titles,.accessory.section.title{gap:var(--qds-accessory-section-titles-gap)}.accessory.section.title{font:var(--qds-accessory-section-title)}.accessory.section.title .icon{--qds-accessory-section-title-line-height:1.25rem;width:var(--qds-accessory-section-titles-icon-size);height:1.25rem;height:var(--qds-accessory-section-title-line-height)}.accessory.section.subtitle{font:var(--qds-accessory-section-subtitle)}.accessory.section.kicker{font:var(--qds-accessory-section-kicker)}.accessory.section.has-icon{-webkit-padding-start:calc(\n        0px +\n          0px\n      );padding-inline-start:calc(\n        0px +\n          0px\n      );-webkit-padding-start:calc(\n        var(--qds-accessory-section-titles-icon-size, 0px) +\n          var(--qds-accessory-section-titles-gap, 0px)\n      );padding-inline-start:calc(\n        var(--qds-accessory-section-titles-icon-size, 0px) +\n          var(--qds-accessory-section-titles-gap, 0px)\n      )}";
+
+const Title = /*@__PURE__*/ proxyCustomElement(class Title extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.inheritedAttributes = {};
+    this.iconName = undefined;
+    this.iconLibrary = 'default';
+    this.kicker = undefined;
+    this.layer = 'panel';
+    this.level = 'section';
+    this.subtitle = undefined;
+    this.tag = 'h2';
+  }
+  get hasSubtitle() {
+    return this.subtitle !== undefined && this.subtitle !== '';
+  }
+  get hasKicker() {
+    return this.kicker !== undefined && this.kicker !== '';
+  }
+  get hasIcon() {
+    return this.iconName !== undefined && this.iconName !== '';
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.element);
+  }
+  render() {
+    return (h("hgroup", { class: {
+        [this.layer]: true,
+        [this.level ?? 'root']: true,
+        titles: true,
+      }, ...this.inheritedAttributes }, h(this.tag, { class: {
+        [this.layer]: true,
+        [this.level ?? 'root']: true,
+        title: true,
+      } }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "icon", name: this.iconName, library: this.iconLibrary })), h("div", null, h("slot", null))), this.hasSubtitle && (h("p", { class: {
+        [this.layer]: true,
+        [this.level ?? 'root']: true,
+        subtitle: true,
+        'has-icon': this.hasIcon,
+      } }, this.subtitle)), this.hasKicker && (h("p", { class: {
+        [this.layer]: true,
+        [this.level ?? 'root']: true,
+        kicker: true,
+        'has-icon': this.hasIcon,
+      } }, this.kicker))));
+  }
+  get element() { return this; }
+  static get style() { return titleCss; }
+}, [1, "qds-title", {
+    "iconName": [513, "icon-name"],
+    "iconLibrary": [513, "icon-library"],
+    "kicker": [1],
+    "layer": [1],
+    "level": [1],
+    "subtitle": [1],
+    "tag": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["qds-title", "qds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "qds-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Title);
+      }
+      break;
+    case "qds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const QdsTitle = Title;
+const defineCustomElement = defineCustomElement$1;
+
+export { QdsTitle, defineCustomElement };
+
+//# sourceMappingURL=qds-title.js.map

package/components/qds-title.js.map

@@ -0,0 +1 @@
+{"file":"qds-title.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/components/qds-tooltip.d.ts

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