@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.15

package/components/qds-inline-link.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { p as pickFocusEventAttributes, i as inheritAriaAttributes, b as inheritAttributes } from './helpers.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const inlineLinkCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:inline-block}.external{display:none;height:1.25em;-webkit-margin-start:var(--qds-text-icon-gap);margin-inline-start:var(--qds-text-icon-gap);vertical-align:text-top;width:1.25em}.inline-link{border-radius:var(--qds-focus-border-radius);color:var(--qds-theme-link-default)}.inline-link[rel~='external']>.external{display:inline-block}.inline-link:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.inline-link:visited{color:var(--qds-theme-link-visited)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}";
+const inlineLinkCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:inline-block}.qds-external{display:none;height:1.25em;-webkit-margin-start:var(--qds-text-icon-gap);margin-inline-start:var(--qds-text-icon-gap);vertical-align:text-top;width:1.25em}.qds-inline-link{border-radius:var(--qds-focus-border-radius);color:var(--qds-theme-link-default)}.qds-inline-link[rel~='external']>.qds-external{display:inline-block}.qds-inline-link:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-inline-link:visited{color:var(--qds-theme-link-visited)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}";
 
 const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends HTMLElement {
   constructor() {
@@ -48,7 +48,7 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends HTM
     };
   }
   render() {
-    return (h("a", { "aria-disabled": this.disabled ? 'true' : 'false', class: "inline-link", download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target, ...this.inheritedAttributes, tabIndex: this.disabled ? -1 : this.computedTabIndex }, h("slot", null), h("qds-icon", { class: "external", library: "core", name: "external-link" })));
+    return (h("a", { "aria-disabled": this.disabled ? 'true' : 'false', class: "qds-inline-link", download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target, ...this.inheritedAttributes, tabIndex: this.disabled ? -1 : this.computedTabIndex }, h("slot", null), h("qds-icon", { class: "qds-external", library: "core", name: "external-link" })));
   }
   static get delegatesFocus() { return true; }
   get element() { return this; }

package/components/qds-inline-link.js.map

@@ -1 +1 @@
-{"file":"qds-inline-link.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,utBAAutB;;MCkChuB,UAAU;;;;;;;IAqMb,wBAAmB,GAAe,EAAE,CAAA;IA6C3B,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;oBAnPyD,KAAK;;;;;;kBAgLA,OAAO;;EAkBtE,IAAY,gBAAgB;IAC1B,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;IAC1E,OAAO,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;GACnD;EAGS,OAAO,CAAC,KAAiB;IACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,KAAK,CAAC,eAAe,EAAE,CAAA;KACxB;GACF;EAEM,iBAAiB;IACtB,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,QACE,0BACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,KAEf,IAAI,CAAC,mBAAmB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,IAEpD,eAAQ,EACR,gBAAU,KAAK,EAAC,UAAU,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAG,CAC/D,EACL;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/inline-link/inline-link.css?tag=qds-inline-link&encapsulation=shadow","src/components/inline-link/inline-link.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.external {\n  display: none;\n  height: 1.25em;\n  margin-inline-start: var(--qds-text-icon-gap);\n  vertical-align: text-top;\n  width: 1.25em;\n}\n\n.inline-link {\n  border-radius: var(--qds-focus-border-radius);\n  color: var(--qds-theme-link-default);\n\n  &[rel~='external'] > .external {\n    display: inline-block;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  }\n\n  &:visited {\n    color: var(--qds-theme-link-visited);\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\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'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  pickFocusEventAttributes,\n} from '../../helpers'\n\nexport type Target = '_blank' | '_parent' | '_self' | '_top'\n\n/**\n * `<qds-inline-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-inline-link>` *should* indicate the inline link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-inline-link>` element will activate it.\n *\n * @slot Content to display for the inline link.\n * @see https://quartz.se.com/build/components/inline-link\n */\n@Component({\n  tag: 'qds-inline-link',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'inline-link.css',\n})\nexport class InlineLink implements ComponentInterface {\n  /**\n   * Prevents the inline link from being interacted with: it cannot be pressed\n   * or focused.\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled = false\n\n  /**\n   * Causes the browser to treat the linked URL as a download. Can be used with\n   * or without a `filename` value:\n   *\n   * - Without a value, the browser will suggest a filename/extension,\n   * generated from various sources:\n   *\n   *   - The\n   *   [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n   *   HTTP header\n   *   - The final segment in the URL\n   *   [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n   *   - The\n   *   [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n   *   (from the\n   *   [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n   *   header, the start of a\n   *   [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n   *   or\n   *   [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n   *   for a\n   *   [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n   * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n   * characters are converted to underscores (`_`). Filesystems may forbid\n   * other characters in filenames, so browsers will adjust the suggested name\n   * if necessary.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: boolean | string\n\n  /**\n   * The URL that the inline link points to. Inline links are not restricted to\n   * HTTP-based URLs — they can use any URL scheme supported by browsers:\n   *\n   * - Sections of a page with document fragments\n   * - Specific text portions with\n   * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n   * - Pieces of media files with media fragments\n   * - Telephone numbers with `tel:` URLs\n   * - Email addresses with `mailto:` URLs\n   * - While web browsers may not support other URL schemes, websites can with\n   * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * Hints at the human language of the linked URL. No built-in functionality.\n   * Allowed values are the same as\n   * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n   *\n   * @webnative\n   */\n  @Prop() public readonly hreflang?: string\n\n  /**\n   * How much of the\n   * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * to send when following the inline link.\n   *\n   * - `no-referrer`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent.\n   * - `no-referrer-when-downgrade`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent to\n   * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n   * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n   * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n   * - `origin`: The sent referrer will be limited to the origin of the\n   * referring page: its\n   * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n   * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n   * [port](https://developer.mozilla.org/docs/Glossary/Port).\n   * - `origin-when-cross-origin`: The referrer sent to other origins will be\n   * limited to the scheme, the host, and the port. Navigations on the same\n   * origin will still include the path.\n   * - `same-origin`: A referrer will be sent for\n   * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n   * but cross-origin requests will contain no referrer information.\n   * - `strict-origin`: Only send the origin of the document as the referrer\n   * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n   * send it to a less secure destination (HTTPS→HTTP).\n   * - `strict-origin-when-cross-origin` (default): Send a full URL when\n   * performing a same-origin request, only send the origin when the protocol\n   * security level stays the same (HTTPS→HTTPS), and send no header to a less\n   * secure destination (HTTPS→HTTP).\n   * - `unsafe-url`: The referrer will include the origin and the path (but not the\n   * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n   * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n   * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n   * **This value is unsafe** because it leaks origins and paths from\n   * TLS-protected resources to insecure origins.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'referrerpolicy' })\n  public readonly referrerPolicy?: ReferrerPolicy\n\n  /**\n   * The relationship of the linked URL as space-separated\n   * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n   *\n   * The following list includes some of the most important existing keywords.\n   * Every keyword within a space-separated value should be unique within that\n   * value.\n   *\n   * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n   * Alternate representations of the current document.\n   * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n   * Author of the current document or article.\n   * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n   * Permalink for the nearest ancestor section.\n   * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n   * The referenced document is not part of the same site as the current\n   * document. An icon will be rendered next to the text if this value is\n   * specified.\n   * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n   * Link to context-sensitive help.\n   * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n   * Indicates that the main content of the current document is covered by the\n   * copyright license described by the referenced document.\n   * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n   * Indicates that the current document represents the person who owns the\n   * linked content.\n   * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n   * Indicates that the current document is a part of a series and that the\n   * next document in the series is the referenced document.\n   * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n   * Indicates that the current document's original author or publisher does\n   * not endorse the referenced document.\n   * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n   * Creates a top-level browsing context that is not an auxiliary browsing\n   * context if the hyperlink would create either of those, to begin with (i.e.,\n   * has an appropriate `target` attribute value).\n   * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n   * No `Referer` header will be included. Additionally, has the same effect as\n   * `noopener`.\n   * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n   * Creates an auxiliary browsing context if the hyperlink would otherwise\n   * create a top-level browsing context that is not an auxiliary browsing\n   * context (i.e., has \"`_blank`\" as `target` attribute value).\n   * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n   * Indicates that the current document is a part of a series and that the\n   * previous document in the series is the referenced document.\n   * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n   * Gives a link to a resource that can be used to search through the current\n   * document and its related pages.\n   * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n   * Gives a tag (identified by the given address) that applies to the current\n   * document.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target: LiteralUnion<Target, string> = '_self'\n\n  /**\n   * Emitted when the inline link loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the inline link gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsInlineLinkElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get computedTabIndex(): number {\n    const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex, 10)\n    return Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      <a\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        class=\"inline-link\"\n        download={this.download}\n        href={this.href}\n        hrefLang={this.hreflang}\n        onBlur={this.onBlur}\n        onFocus={this.onFocus}\n        referrerPolicy={this.referrerPolicy}\n        rel={this.rel}\n        target={this.target}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n        tabIndex={this.disabled ? -1 : this.computedTabIndex}\n      >\n        <slot />\n        <qds-icon class=\"external\" library=\"core\" name=\"external-link\" />\n      </a>\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}
+{"file":"qds-inline-link.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,+uBAA+uB;;MCkCxvB,UAAU;;;;;;;IAqMb,wBAAmB,GAAe,EAAE,CAAA;IA6C3B,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;oBAnPyD,KAAK;;;;;;kBAgLA,OAAO;;EAkBtE,IAAY,gBAAgB;IAC1B,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;IAC1E,OAAO,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;GACnD;EAGS,OAAO,CAAC,KAAiB;IACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,KAAK,CAAC,cAAc,EAAE,CAAA;MACtB,KAAK,CAAC,eAAe,EAAE,CAAA;KACxB;GACF;EAEM,iBAAiB;IACtB,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,QACE,0BACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,KAEf,IAAI,CAAC,mBAAmB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,IAEpD,eAAQ,EACR,gBAAU,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAG,CACnE,EACL;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/inline-link/inline-link.css?tag=qds-inline-link&encapsulation=shadow","src/components/inline-link/inline-link.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.qds-external {\n  display: none;\n  height: 1.25em;\n  margin-inline-start: var(--qds-text-icon-gap);\n  vertical-align: text-top;\n  width: 1.25em;\n}\n\n.qds-inline-link {\n  border-radius: var(--qds-focus-border-radius);\n  color: var(--qds-theme-link-default);\n\n  &[rel~='external'] > .qds-external {\n    display: inline-block;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n  }\n\n  &:visited {\n    color: var(--qds-theme-link-visited);\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\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'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  pickFocusEventAttributes,\n} from '../../helpers'\n\nexport type Target = '_blank' | '_parent' | '_self' | '_top'\n\n/**\n * `<qds-inline-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-inline-link>` *should* indicate the inline link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-inline-link>` element will activate it.\n *\n * @slot Content to display for the inline link.\n * @see https://quartz.se.com/build/components/inline-link\n */\n@Component({\n  tag: 'qds-inline-link',\n  shadow: { delegatesFocus: true },\n  styleUrl: 'inline-link.css',\n})\nexport class InlineLink implements ComponentInterface {\n  /**\n   * Prevents the inline link from being interacted with: it cannot be pressed\n   * or focused.\n   */\n  @Prop({ mutable: true, reflect: true }) public disabled = false\n\n  /**\n   * Causes the browser to treat the linked URL as a download. Can be used with\n   * or without a `filename` value:\n   *\n   * - Without a value, the browser will suggest a filename/extension,\n   * generated from various sources:\n   *\n   *   - The\n   *   [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n   *   HTTP header\n   *   - The final segment in the URL\n   *   [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n   *   - The\n   *   [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n   *   (from the\n   *   [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n   *   header, the start of a\n   *   [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n   *   or\n   *   [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n   *   for a\n   *   [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n   * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n   * characters are converted to underscores (`_`). Filesystems may forbid\n   * other characters in filenames, so browsers will adjust the suggested name\n   * if necessary.\n   *\n   * @webnative\n   */\n  @Prop() public readonly download?: boolean | string\n\n  /**\n   * The URL that the inline link points to. Inline links are not restricted to\n   * HTTP-based URLs — they can use any URL scheme supported by browsers:\n   *\n   * - Sections of a page with document fragments\n   * - Specific text portions with\n   * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n   * - Pieces of media files with media fragments\n   * - Telephone numbers with `tel:` URLs\n   * - Email addresses with `mailto:` URLs\n   * - While web browsers may not support other URL schemes, websites can with\n   * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n   *\n   * @webnative\n   */\n  @Prop() public readonly href?: string\n\n  /**\n   * Hints at the human language of the linked URL. No built-in functionality.\n   * Allowed values are the same as\n   * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n   *\n   * @webnative\n   */\n  @Prop() public readonly hreflang?: string\n\n  /**\n   * How much of the\n   * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * to send when following the inline link.\n   *\n   * - `no-referrer`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent.\n   * - `no-referrer-when-downgrade`: The\n   * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n   * header will not be sent to\n   * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n   * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n   * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n   * - `origin`: The sent referrer will be limited to the origin of the\n   * referring page: its\n   * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n   * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n   * [port](https://developer.mozilla.org/docs/Glossary/Port).\n   * - `origin-when-cross-origin`: The referrer sent to other origins will be\n   * limited to the scheme, the host, and the port. Navigations on the same\n   * origin will still include the path.\n   * - `same-origin`: A referrer will be sent for\n   * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n   * but cross-origin requests will contain no referrer information.\n   * - `strict-origin`: Only send the origin of the document as the referrer\n   * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n   * send it to a less secure destination (HTTPS→HTTP).\n   * - `strict-origin-when-cross-origin` (default): Send a full URL when\n   * performing a same-origin request, only send the origin when the protocol\n   * security level stays the same (HTTPS→HTTPS), and send no header to a less\n   * secure destination (HTTPS→HTTP).\n   * - `unsafe-url`: The referrer will include the origin and the path (but not the\n   * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n   * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n   * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n   * **This value is unsafe** because it leaks origins and paths from\n   * TLS-protected resources to insecure origins.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'referrerpolicy' })\n  public readonly referrerPolicy?: ReferrerPolicy\n\n  /**\n   * The relationship of the linked URL as space-separated\n   * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n   *\n   * The following list includes some of the most important existing keywords.\n   * Every keyword within a space-separated value should be unique within that\n   * value.\n   *\n   * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n   * Alternate representations of the current document.\n   * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n   * Author of the current document or article.\n   * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n   * Permalink for the nearest ancestor section.\n   * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n   * The referenced document is not part of the same site as the current\n   * document. An icon will be rendered next to the text if this value is\n   * specified.\n   * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n   * Link to context-sensitive help.\n   * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n   * Indicates that the main content of the current document is covered by the\n   * copyright license described by the referenced document.\n   * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n   * Indicates that the current document represents the person who owns the\n   * linked content.\n   * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n   * Indicates that the current document is a part of a series and that the\n   * next document in the series is the referenced document.\n   * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n   * Indicates that the current document's original author or publisher does\n   * not endorse the referenced document.\n   * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n   * Creates a top-level browsing context that is not an auxiliary browsing\n   * context if the hyperlink would create either of those, to begin with (i.e.,\n   * has an appropriate `target` attribute value).\n   * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n   * No `Referer` header will be included. Additionally, has the same effect as\n   * `noopener`.\n   * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n   * Creates an auxiliary browsing context if the hyperlink would otherwise\n   * create a top-level browsing context that is not an auxiliary browsing\n   * context (i.e., has \"`_blank`\" as `target` attribute value).\n   * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n   * Indicates that the current document is a part of a series and that the\n   * previous document in the series is the referenced document.\n   * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n   * Gives a link to a resource that can be used to search through the current\n   * document and its related pages.\n   * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n   * Gives a tag (identified by the given address) that applies to the current\n   * document.\n   *\n   * @webnative\n   */\n  @Prop() public readonly rel?: string\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a\n   * tab, window, or\n   * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n   * The following keywords have special meanings for where to load the URL:\n   *\n   * - `_blank`: usually a new tab, but users can configure browsers to open a new\n   *   window instead.\n   * - `_parent`: the parent browsing context of the current one. If no parent,\n   *   behaves as `_self`.\n   * - `_self`: the current browsing context.\n   * - `_top`: the topmost browsing context (the \"highest\" context that's an\n   *   ancestor of the current one). If no ancestors, behaves as `_self`.\n   *\n   * @webnative\n   */\n  @Prop() public readonly target: LiteralUnion<Target, string> = '_self'\n\n  /**\n   * Emitted when the inline link loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the inline link gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsInlineLinkElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private get computedTabIndex(): number {\n    const parsedValue = Number.parseInt(this.inheritedAttributes.tabindex, 10)\n    return Number.isNaN(parsedValue) ? 0 : parsedValue\n  }\n\n  @Listen('click')\n  protected onClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      <a\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        class=\"qds-inline-link\"\n        download={this.download}\n        href={this.href}\n        hrefLang={this.hreflang}\n        onBlur={this.onBlur}\n        onFocus={this.onFocus}\n        referrerPolicy={this.referrerPolicy}\n        rel={this.rel}\n        target={this.target}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n        tabIndex={this.disabled ? -1 : this.computedTabIndex}\n      >\n        <slot />\n        <qds-icon class=\"qds-external\" library=\"core\" name=\"external-link\" />\n      </a>\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-input.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { p as pickFocusEventAttributes, a as invariant, e as pickInputEventAttributes, i as inheritAriaAttributes, b as inheritAttributes } from './helpers.js';
 
-const inputCss = ".sc-qds-input-h{box-sizing:border-box}[hidden].sc-qds-input-h{display:none !important}.sc-qds-input-h *.sc-qds-input,.sc-qds-input-h *.sc-qds-input::before,.sc-qds-input-h *.sc-qds-input::after{box-sizing:inherit}.sc-qds-input-h{display:inline-block}.input.sc-qds-input{-webkit-appearance:textfield;appearance:textfield;padding:0;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-control-text-standard);gap:var(--qds-control-input-gap-internal);padding-inline:var(--qds-control-input-padding-horizontal);width:100%}.input[aria-invalid='true'].sc-qds-input:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.input[type='color'].sc-qds-input{-webkit-appearance:none;appearance:none;min-width:50px;padding-block:var(--qds-control-input-padding-horizontal);cursor:pointer}.input[type='color'].sc-qds-input::-webkit-color-swatch-wrapper{padding:0}.input[type='color'].sc-qds-input::-webkit-color-swatch{border:var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.input[type='color'].sc-qds-input::-moz-color-swatch{border:var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.input[type='color'].sc-qds-input:hover{background-color:var(--qds-theme-interactive-background-hover)}.input[type='color'].sc-qds-input:active{background-color:var(--qds-theme-interactive-background-pressed)}.input.sc-qds-input:disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.input.sc-qds-input:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.input.sc-qds-input:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}[data-size='small'].sc-qds-input{font:var(--qds-control-small-text);height:var(--qds-control-small-height)}[data-size='standard'].sc-qds-input{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}[data-size='large'].sc-qds-input{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}";
+const inputCss = ".sc-qds-input-h{box-sizing:border-box}[hidden].sc-qds-input-h{display:none !important}.sc-qds-input-h *.sc-qds-input,.sc-qds-input-h *.sc-qds-input::before,.sc-qds-input-h *.sc-qds-input::after{box-sizing:inherit}.sc-qds-input-h{display:inline-block}.qds-input.sc-qds-input{-webkit-appearance:textfield;appearance:textfield;padding:0;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-control-text-standard);gap:var(--qds-control-input-gap-internal);padding-inline:var(--qds-control-input-padding-horizontal);width:100%}.qds-input[aria-invalid='true'].sc-qds-input:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-input[type='color'].sc-qds-input{-webkit-appearance:none;appearance:none;min-width:50px;padding-block:var(--qds-control-input-padding-horizontal);cursor:pointer}.qds-input[type='color'].sc-qds-input::-webkit-color-swatch-wrapper{padding:0}.qds-input[type='color'].sc-qds-input::-webkit-color-swatch{border:var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type='color'].sc-qds-input::-moz-color-swatch{border:var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius)}.qds-input[type='color'].sc-qds-input:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-input[type='color'].sc-qds-input:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-input.sc-qds-input:disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-input.sc-qds-input:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-input.sc-qds-input:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}[data-size='small'].sc-qds-input{font:var(--qds-control-small-text);height:var(--qds-control-small-height)}[data-size='standard'].sc-qds-input{font:var(--qds-control-standard-text);height:var(--qds-control-standard-height)}[data-size='large'].sc-qds-input{font:var(--qds-control-large-text);height:var(--qds-control-large-height)}";
 
 let autoIncrementingId = 1;
 const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
@@ -181,7 +181,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
   render() {
     return (h("input", { "aria-invalid": this.invalid ?? false ? 'true' : 'false', autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
       // eslint-disable-next-line jsx-a11y/no-autofocus
-      autoFocus: this.autoFocus, class: "input", "data-size": this.size, disabled: this.disabled, enterKeyHint: this.enterkeyhint, form: this.form, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, onInvalid: this.onInvalid, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readOnly, ref: this.ref, required: this.required, spellcheck: this.spellCheck, step: this.step, type: this.type, value: this.value ?? undefined, ...this.inheritedAttributes }));
+      autoFocus: this.autoFocus, class: "qds-input", "data-size": this.size, disabled: this.disabled, enterKeyHint: this.enterkeyhint, form: this.form, inputMode: this.inputmode, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, onInvalid: this.onInvalid, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readOnly, ref: this.ref, required: this.required, spellcheck: this.spellCheck, step: this.step, type: this.type, value: this.value ?? undefined, ...this.inheritedAttributes }));
   }
   get element() { return this; }
   static get watchers() { return {

package/components/qds-input.js.map

@@ -1 +1 @@
-{"file":"qds-input.js","mappings":"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","names":[],"sources":["src/components/input/input.css?tag=qds-input&encapsulation=scoped","src/components/input/input.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.input {\n  appearance: textfield;\n  padding: 0;\n  background-color: var(--qds-theme-control-input-background);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  border-radius: var(--qds-control-border-radius);\n  color: var(--qds-theme-control-text-standard);\n  gap: var(--qds-control-input-gap-internal);\n  padding-inline: var(--qds-control-input-padding-horizontal);\n  width: 100%;\n\n  &:not(:focus)[aria-invalid='true'] {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &[type='color'] {\n    appearance: none;\n    min-width: 50px;\n    padding-block: var(--qds-control-input-padding-horizontal);\n\n    &::-webkit-color-swatch-wrapper {\n      padding: 0;\n    }\n\n    &::-webkit-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n    &::-moz-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n\n  &:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: none;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  height: var(--qds-control-small-height);\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  height: var(--qds-control-standard-height);\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  height: var(--qds-control-large-height);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type {\n  AutoCapitalize,\n  EnterKeyHint,\n  InputMode,\n  SelectDirection,\n  Value,\n} from '../controls'\n\nexport type InputAutoComplete =\n  | 'additional-name'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'bday'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-exp'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country-name'\n  | 'country'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization-title'\n  | 'organization'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'tel'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'\nexport type InputType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'email'\n  | 'month'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'time'\n  | 'url'\n  | 'week'\nexport type InputSize = 'large' | 'small' | 'standard'\n\nlet autoIncrementingId = 1\n\n/**\n * The `<qds-input>` element is used to create interactive controls for\n * web-based forms in order to accept data from the user; a wide variety of\n * types of input data and control widgets are available, depending on the\n * device and\n * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).\n *\n * @see https://quartz.se.com/build/components/input\n */\n@Component({\n  tag: 'qds-input',\n  scoped: true,\n  styleUrl: 'input.css',\n})\nexport class Input implements ComponentInterface {\n  /**\n   * Defines if the input is in an invalid state. Validity is determined by\n   * attributes such as `type`, `pattern`, `min`, `max`, `required`, `step`,\n   * `minlength`, and `maxlength` using\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).\n   */\n  @Prop({ mutable: true, reflect: true }) public invalid?: boolean\n\n  /**\n   * The input's size.\n   *\n   * > **_NOTE:_** The native\n   * [`size` HTML attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/size)\n   * is not supported. CSS `width` should be used instead if this functionality\n   * is needed.\n   */\n  @Prop({ reflect: true }) public readonly size: InputSize = 'standard'\n\n  /**\n   * Controls whether and how input is automatically capitalized as it is\n   * entered/edited by the user. Only valid for `search`, `tel`, and `text`\n   * inputs. Possible values:\n   *\n   * - `\"off\"` or `\"none\"`: No auto-capitalization is applied (all letters\n   * default to lowercase).\n   * - `\"on\"` or `\"sentences\"`: The first letter of each sentence defaults to a\n   * capital letter; all other letters default to lowercase.\n   * - `\"words\"`: The first letter of each word defaults to a capital letter;\n   * all other letters default to lowercase.\n   * - `\"characters\"`: All letters default to uppercase.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocapitalize' })\n  public readonly autoCapitalize?: AutoCapitalize\n\n  /**\n   * Indicates whether the value of the input can be automatically completed by\n   * the browser.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocomplete' })\n  public readonly autoComplete?: InputAutoComplete\n\n  /**\n   * Specify whether the input should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Prevents the input 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   * What action label (or icon) to present for the enter key on virtual\n   * keyboards. Possible values:\n   *\n   * - `\"done\"`: Typically meaning there is nothing more to input and the input\n   * method editor (IME) will be closed.\n   * - `\"enter\"`:\tTypically inserting a new line.\n   * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n   * they typed.\n   * - `\"next\"`: \tTypically taking the user to the next field that will accept\n   * text.\n   * - `\"previous\"`: Typically taking the user to the previous field that will\n   * accept text.\n   * - `\"search\"`: Typically taking the user to the results of searching for\n   * the text they have typed.\n   * - `\"send\"`: Typically delivering the text to its target.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n  @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the input with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<qds-input>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-input>` 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   * Provide a hint to browsers as to the type of virtual keyboard\n   * configuration to use when editing this element or its contents.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n  @Prop() public readonly inputmode?: InputMode\n\n  /**\n   * Defines the greatest value in the range of permitted values. If the\n   * `value` entered into the input exceeds this, the input fails\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).\n   * Only valid for `date`, `datetime-local`, `month`, `time`, and `week`\n   * inputs.\n   *\n   * If this value isn't a valid number, then the input has no maximum value.\n   *\n   * @webnative\n   */\n  @Prop() public readonly max?: number | string\n\n  /**\n   * The maximum number of characters (as UTF-16 code units) the user can enter\n   * into the input. This must be an non-negative integer value. If no\n   * `maxlength` is specified, or an invalid value is specified, the input has\n   * no maximum length. Only valid for `email`, `password`, `search`, `tel`,\n   * `text`, and `url` inputs.\n   *\n   * The input will fail\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation)\n   * if the length of the text entered into the field is greater than\n   * `maxlength` UTF-16 code units long. By default, browsers prevent users\n   * from entering more characters than allowed by the `maxlength` attribute. See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n  /**\n   * Defines the most negative value in the range of permitted values. If the\n   * `value` entered into the input is less than this, the input fails\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).\n   * Only valid for `date`, `datetime-local`, `month`, `time`, and `week`\n   * inputs.\n   *\n   * This value must be less than or equal to the value of the `max` attribute.\n   * If this value isn't a valid number, then the input has no minimum value.\n   *\n   * @webnative\n   */\n  @Prop() public readonly min?: number | string\n\n  /**\n   * The minimum number of characters (as UTF-16 code units) the user can enter\n   * into the input. This must be an non-negative integer value smaller than or\n   * equal to the value specified by `maxlength`. If no `minlength` is\n   * specified, or an invalid value is specified, the input has no minimum\n   * length. Only valid for `email`, `password`, `search`, `tel`, `text`, and\n   * `url` inputs.\n   *\n   * The input will fail\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation)\n   * if the length of the text entered into the field is fewer than `minlength`\n   * UTF-16 code units long, preventing form submission. See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n  /**\n   * Specifies if multiple comma-separated email addresses can be entered. Only\n   * valid for `email` inputs.\n   *\n   * @webnative\n   */\n  @Prop() public readonly multiple?: boolean\n\n  /**\n   * The name of the control, which is submitted with the form data. An\n   * incrementing input ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-input-${autoIncrementingId}`\n\n  /**\n   * Defines a regular expression that the input's `value` must match in order\n   * for the value to pass\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).\n   * It must be a valid JavaScript regular expression, as used by the\n   * [`RegExp`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)\n   * type, and as documented in MDN's\n   * [guide on regular expressions](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions);\n   * the `'u'` flag is specified when compiling the regular expression, so that\n   * the pattern is treated as a sequence of Unicode code points, instead of as\n   * ASCII. No forward slashes should be specified around the pattern text.\n   * Only valid for `email`, `password`, `search`, `tel`, `text`, and `url`\n   * inputs.\n   *\n   * If the `pattern` is invalid, no regular expression is applied and this\n   * property is ignored. If the pattern is valid and a non-empty value does\n   * not match the pattern, constraint validation will prevent form submission.\n   *\n   * @webnative\n   */\n  @Prop() public readonly pattern?: string\n\n  /**\n   * Text that appears in the input when it has no value set. Only valid for\n   * `email`, `number`, `password`, `search`, `tel`, `text`, and `url` inputs.\n   *\n   * @webnative\n   */\n  @Prop() public readonly placeholder?: string\n\n  /**\n   * The value of the input cannot be edited. Not valid for `color` inputs.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'readonly' }) public readonly readOnly?: boolean\n\n  /**\n   * A value must be specified for the input before the owning form can be\n   * submitted. Not valid for `color` inputs.\n   *\n   * See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * and the\n   * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * Defines whether the input may be checked for spelling errors.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'spellcheck' }) public readonly spellCheck?: boolean\n\n  /**\n   * Specifies the granularity that the `value` must adhere to. Only valid for\n   * `date`, `datetime-local`, `month`, `number`, `time`, and `week` inputs.\n   *\n   * The value must be a positive number—integer or float—or the special value\n   * `any`, which means no stepping is implied, and any value is allowed\n   * (barring other constraints, such as `min` and `max`).\n   *\n   * If `any` is not explicitly set, valid values for the `number` are the\n   * basis for stepping — the `min` value and increments of the step value, up\n   * to the `max` value, if specified.\n   *\n   * @webnative\n   */\n  @Prop() public readonly step?: number | 'any'\n\n  /**\n   * The type of input to render:\n   *\n   * - `\"date\"`: An input for entering a date (year, month, and day, with no\n   * time). Opens a date picker or numeric wheels for year, month, day when\n   * active in supporting browsers.\n   * - `\"datetime-local\"`: An input for entering a date and time, with no time\n   * zone. Opens a date picker or numeric wheels for date and time components\n   * when active in supporting browsers.\n   * - `\"email\"`: An input for editing an email address. Looks like a `\"text\"`\n   * input, but has validation parameters and relevant keyboard in supporting\n   * browsers and devices with dynamic keyboards.\n   * - `\"month\"`: An input for entering a month and year, with no time zone.\n   * - `\"number\"`: An input for entering a number. Displays a spinner and adds\n   * default validation when supported. Displays a numeric keypad in some\n   * devices with dynamic keypads.\n   * - `\"password\"`: A single-line text input whose value is obscured. Will\n   * alert user if site is not secure.\n   * - `\"search\"`: A single-line text input for entering search strings.\n   * Line-breaks are automatically removed from the input value. May include a\n   * delete icon in supporting browsers that can be used to clear the input.\n   * Displays a search icon instead of enter key on some devices with dynamic\n   * keypads.\n   * - `\"tel\"`: An input for entering a telephone number. Displays a telephone\n   * keypad in some devices with dynamic keypads.\n   * - `\"text\"`: A single-line text input. Line-breaks are automatically\n   * removed from the input value.\n   * - `\"time\"`: An input for entering a time value with no time zone.\n   * - `\"url\"`: An input for entering a URL. Looks like a `\"text\"` input, but\n   * has validation parameters and relevant keyboard in supporting browsers and\n   * devices with dynamic keyboards.\n   * - `\"week\"`: An input for entering a date consisting of a week-year number\n   * and a week number with no time zone.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: InputType\n\n  /**\n   * The value of the input.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when an alteration to the input's value is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the input gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the input's value changes.\n   */\n  @Event({ eventName: 'qdsInput', cancelable: false })\n  private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n  @Element() private readonly element!: HTMLQdsInputElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  /**\n   * Returns true if the element's value passes validity checks; otherwise,\n   * returns false, fires an invalid event at the element, and (if the event\n   * isn't canceled) reports the problem to the user.\n   */\n  @Method()\n  public async reportValidity(): Promise<boolean> {\n    invariant(this.input)\n\n    return this.input.reportValidity()\n  }\n\n  /**\n   * Selects the entire content of the `<qds-input>` element if the element's\n   * content is selectable.\n   */\n  @Method()\n  public async select(): Promise<void> {\n    invariant(this.input)\n\n    this.input.select()\n  }\n\n  /**\n   * Sets a custom validity message for the input. If this message is not the\n   * empty string, then the element is considered invalid.\n   */\n  @Method()\n  public async setCustomValidity(message: string): Promise<void> {\n    invariant(this.input)\n\n    this.input.setCustomValidity(message)\n    this.invalid = !this.input.checkValidity()\n  }\n\n  /**\n   * Sets the contents of the specified range of characters in the input element to a given string.\n   *\n   * @param replacement The string to insert.\n   * @param start The 0-based index of the first character to replace. Defaults to the current selectionStart value (the start of the user's current selection).\n   * @param end The 0-based index of the character _after_ the last character to replace. Defaults to the current selectionEnd value (the end of the user's current selection).\n   * @param selectionMode A string defining how the selection should be set after the text has been replaced. Possible values:\n   *\n   * - `\"select\"` selects the newly inserted text.\n   * - `\"start\"` moves the selection to just before the inserted text.\n   * - `\"end\"` moves the selection to just after the inserted text.\n   * - `\"preserve\"` attempts to preserve the selection.\n   */\n  @Method()\n  public async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectionMode: SelectionMode = 'preserve',\n  ): Promise<void> {\n    invariant(this.input)\n\n    this.input.setRangeText(replacement, start, end, selectionMode)\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value\n      this.inputEmitter.emit()\n      this.changeEmitter.emit()\n    }\n  }\n\n  /**\n   * Selects the specified range of characters within the input.\n   *\n   * @param start The offset into the input for the start of the selection.\n   * @param end The offset into the input for the end of the selection.\n   * @param direction The direction in which the selection is performed.\n   */\n  @Method()\n  public async setSelectionRange(\n    start: number | null,\n    end: number | null,\n    direction?: SelectDirection,\n  ): Promise<void> {\n    invariant(this.input)\n\n    this.input.setSelectionRange(start, end, direction)\n  }\n\n  /**\n   * Decrements the `value` by (`step` * n), where n defaults to 1 if not\n   * specified.\n   *\n   * @param n Amount to decrement the value by.\n   */\n  @Method()\n  public async stepDown(n?: number): Promise<void> {\n    invariant(this.input)\n\n    this.input.stepDown(n)\n  }\n\n  /**\n   * Increments the `value` by (`step` * n), where n defaults to 1 if not\n   * specified.\n   *\n   * @param n Amount to increment the value by.\n   */\n  @Method()\n  public async stepUp(n?: number): Promise<void> {\n    invariant(this.input)\n\n    this.input.stepUp(n)\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    invariant(this.input)\n\n    // Disabled inputs are always valid, so we need to recheck validity when\n    // the state changes.\n    this.input.disabled = this.computedDisabled\n    this.invalid = !this.input.checkValidity()\n  }\n\n  @Watch('step')\n  protected stepChanged(): void {\n    invariant(this.input)\n\n    // If step changes, the value may become invalid so we need to recheck\n    // after the update. We set the new step imperatively so we don't have to\n    // wait for the next render to report the updated validity.\n    this.input.step = String(this.step)\n    this.invalid = !this.input.checkValidity()\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    invariant(this.input)\n\n    this.invalid = !this.input.checkValidity()\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      <input\n        aria-invalid={this.invalid ?? false ? 'true' : 'false'}\n        autoCapitalize={this.autoCapitalize}\n        autoComplete={this.autoComplete}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={this.autoFocus}\n        class=\"input\"\n        data-size={this.size}\n        disabled={this.disabled}\n        enterKeyHint={this.enterkeyhint}\n        form={this.form}\n        inputMode={this.inputmode}\n        max={this.max}\n        maxLength={this.maxLength}\n        min={this.min}\n        minLength={this.minLength}\n        multiple={this.multiple}\n        name={this.name}\n        onBlur={this.onBlur}\n        onChange={this.onChange}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onInput={this.onInput}\n        onInvalid={this.onInvalid}\n        pattern={this.pattern}\n        placeholder={this.placeholder}\n        readOnly={this.readOnly}\n        ref={this.ref}\n        required={this.required}\n        spellcheck={this.spellCheck}\n        step={this.step}\n        type={this.type}\n        value={this.value ?? undefined}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly ref = (input?: HTMLInputElement): void => {\n    this.input = input\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    invariant(this.input)\n\n    this.value = this.input.value\n    this.changeEmitter.emit()\n  }\n\n  private readonly onClick = (event: MouseEvent): void => {\n    if (this.computedDisabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onInput = (event: InputEvent): void => {\n    invariant(this.input)\n\n    this.value = this.input.value\n    this.inputEmitter.emit(pickInputEventAttributes(event))\n  }\n\n  private readonly onInvalid = (): void => {\n    this.invalid = true\n  }\n}\n"],"version":3}
+{"file":"qds-input.js","mappings":"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","names":[],"sources":["src/components/input/input.css?tag=qds-input&encapsulation=scoped","src/components/input/input.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.qds-input {\n  appearance: textfield;\n  padding: 0;\n  background-color: var(--qds-theme-control-input-background);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  border-radius: var(--qds-control-border-radius);\n  color: var(--qds-theme-control-text-standard);\n  gap: var(--qds-control-input-gap-internal);\n  padding-inline: var(--qds-control-input-padding-horizontal);\n  width: 100%;\n\n  &:not(:focus)[aria-invalid='true'] {\n    border-color: var(--qds-theme-feedback-result-failure);\n  }\n\n  &[type='color'] {\n    appearance: none;\n    min-width: 50px;\n    padding-block: var(--qds-control-input-padding-horizontal);\n\n    &::-webkit-color-swatch-wrapper {\n      padding: 0;\n    }\n\n    &::-webkit-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n    &::-moz-color-swatch {\n      border: var(--qds-control-border-width) solid\n        var(--qds-theme-control-border);\n      border-radius: var(--qds-control-border-radius);\n    }\n\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n\n  &:disabled {\n    opacity: var(--qds-theme-disabled);\n    pointer-events: none;\n  }\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &:placeholder-shown {\n    color: var(--qds-theme-control-text-placeholder);\n  }\n}\n\n[data-size='small'] {\n  font: var(--qds-control-small-text);\n  height: var(--qds-control-small-height);\n}\n\n[data-size='standard'] {\n  font: var(--qds-control-standard-text);\n  height: var(--qds-control-standard-height);\n}\n\n[data-size='large'] {\n  font: var(--qds-control-large-text);\n  height: var(--qds-control-large-height);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core'\n\nimport type {\n  Attributes,\n  QdsFocusEventDetail,\n  QdsInputEventDetail,\n} from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n  pickInputEventAttributes,\n} from '../../helpers'\nimport type {\n  AutoCapitalize,\n  EnterKeyHint,\n  InputMode,\n  SelectDirection,\n  Value,\n} from '../controls'\n\nexport type InputAutoComplete =\n  | 'additional-name'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'bday'\n  | 'cc-additional-name'\n  | 'cc-csc'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-exp'\n  | 'cc-family-name'\n  | 'cc-given-name'\n  | 'cc-name'\n  | 'cc-number'\n  | 'cc-type'\n  | 'country-name'\n  | 'country'\n  | 'current-password'\n  | 'email'\n  | 'family-name'\n  | 'given-name'\n  | 'honorific-prefix'\n  | 'honorific-suffix'\n  | 'impp'\n  | 'language'\n  | 'name'\n  | 'new-password'\n  | 'nickname'\n  | 'off'\n  | 'on'\n  | 'one-time-code'\n  | 'organization-title'\n  | 'organization'\n  | 'photo'\n  | 'postal-code'\n  | 'sex'\n  | 'street-address'\n  | 'tel-area-code'\n  | 'tel-country-code'\n  | 'tel-extension'\n  | 'tel-local'\n  | 'tel-national'\n  | 'tel'\n  | 'transaction-amount'\n  | 'transaction-currency'\n  | 'url'\n  | 'username'\nexport type InputType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'email'\n  | 'month'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'time'\n  | 'url'\n  | 'week'\nexport type InputSize = 'large' | 'small' | 'standard'\n\nlet autoIncrementingId = 1\n\n/**\n * The `<qds-input>` element is used to create interactive controls for\n * web-based forms in order to accept data from the user; a wide variety of\n * types of input data and control widgets are available, depending on the\n * device and\n * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).\n *\n * @see https://quartz.se.com/build/components/input\n */\n@Component({\n  tag: 'qds-input',\n  scoped: true,\n  styleUrl: 'input.css',\n})\nexport class Input implements ComponentInterface {\n  /**\n   * Defines if the input is in an invalid state. Validity is determined by\n   * attributes such as `type`, `pattern`, `min`, `max`, `required`, `step`,\n   * `minlength`, and `maxlength` using\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).\n   */\n  @Prop({ mutable: true, reflect: true }) public invalid?: boolean\n\n  /**\n   * The input's size.\n   *\n   * > **_NOTE:_** The native\n   * [`size` HTML attribute](https://developer.mozilla.org/docs/Web/HTML/Attributes/size)\n   * is not supported. CSS `width` should be used instead if this functionality\n   * is needed.\n   */\n  @Prop({ reflect: true }) public readonly size: InputSize = 'standard'\n\n  /**\n   * Controls whether and how input is automatically capitalized as it is\n   * entered/edited by the user. Only valid for `search`, `tel`, and `text`\n   * inputs. Possible values:\n   *\n   * - `\"off\"` or `\"none\"`: No auto-capitalization is applied (all letters\n   * default to lowercase).\n   * - `\"on\"` or `\"sentences\"`: The first letter of each sentence defaults to a\n   * capital letter; all other letters default to lowercase.\n   * - `\"words\"`: The first letter of each word defaults to a capital letter;\n   * all other letters default to lowercase.\n   * - `\"characters\"`: All letters default to uppercase.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocapitalize' })\n  public readonly autoCapitalize?: AutoCapitalize\n\n  /**\n   * Indicates whether the value of the input can be automatically completed by\n   * the browser.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autocomplete' })\n  public readonly autoComplete?: InputAutoComplete\n\n  /**\n   * Specify whether the input should have focus when the page loads.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n  /**\n   * Prevents the input 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   * What action label (or icon) to present for the enter key on virtual\n   * keyboards. Possible values:\n   *\n   * - `\"done\"`: Typically meaning there is nothing more to input and the input\n   * method editor (IME) will be closed.\n   * - `\"enter\"`:\tTypically inserting a new line.\n   * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n   * they typed.\n   * - `\"next\"`: \tTypically taking the user to the next field that will accept\n   * text.\n   * - `\"previous\"`: Typically taking the user to the previous field that will\n   * accept text.\n   * - `\"search\"`: Typically taking the user to the results of searching for\n   * the text they have typed.\n   * - `\"send\"`: Typically delivering the text to its target.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n  @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n  /**\n   * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n   * element to associate the input with (its form owner).\n   *\n   * The value of this attribute must be the id of a `<form>` in the same\n   * document. If this attribute is not set, the `<qds-input>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This attribute lets you associate `<qds-input>` 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   * Provide a hint to browsers as to the type of virtual keyboard\n   * configuration to use when editing this element or its contents.\n   *\n   * @webnative\n   */\n  // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n  @Prop() public readonly inputmode?: InputMode\n\n  /**\n   * Defines the greatest value in the range of permitted values. If the\n   * `value` entered into the input exceeds this, the input fails\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).\n   * Only valid for `date`, `datetime-local`, `month`, `time`, and `week`\n   * inputs.\n   *\n   * If this value isn't a valid number, then the input has no maximum value.\n   *\n   * @webnative\n   */\n  @Prop() public readonly max?: number | string\n\n  /**\n   * The maximum number of characters (as UTF-16 code units) the user can enter\n   * into the input. This must be an non-negative integer value. If no\n   * `maxlength` is specified, or an invalid value is specified, the input has\n   * no maximum length. Only valid for `email`, `password`, `search`, `tel`,\n   * `text`, and `url` inputs.\n   *\n   * The input will fail\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation)\n   * if the length of the text entered into the field is greater than\n   * `maxlength` UTF-16 code units long. By default, browsers prevent users\n   * from entering more characters than allowed by the `maxlength` attribute. See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n  /**\n   * Defines the most negative value in the range of permitted values. If the\n   * `value` entered into the input is less than this, the input fails\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).\n   * Only valid for `date`, `datetime-local`, `month`, `time`, and `week`\n   * inputs.\n   *\n   * This value must be less than or equal to the value of the `max` attribute.\n   * If this value isn't a valid number, then the input has no minimum value.\n   *\n   * @webnative\n   */\n  @Prop() public readonly min?: number | string\n\n  /**\n   * The minimum number of characters (as UTF-16 code units) the user can enter\n   * into the input. This must be an non-negative integer value smaller than or\n   * equal to the value specified by `maxlength`. If no `minlength` is\n   * specified, or an invalid value is specified, the input has no minimum\n   * length. Only valid for `email`, `password`, `search`, `tel`, `text`, and\n   * `url` inputs.\n   *\n   * The input will fail\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation)\n   * if the length of the text entered into the field is fewer than `minlength`\n   * UTF-16 code units long, preventing form submission. See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n  /**\n   * Specifies if multiple comma-separated email addresses can be entered. Only\n   * valid for `email` inputs.\n   *\n   * @webnative\n   */\n  @Prop() public readonly multiple?: boolean\n\n  /**\n   * The name of the control, which is submitted with the form data. An\n   * incrementing input ID is used by default.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name = `qds-input-${autoIncrementingId}`\n\n  /**\n   * Defines a regular expression that the input's `value` must match in order\n   * for the value to pass\n   * [constraint validation](https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation).\n   * It must be a valid JavaScript regular expression, as used by the\n   * [`RegExp`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp)\n   * type, and as documented in MDN's\n   * [guide on regular expressions](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions);\n   * the `'u'` flag is specified when compiling the regular expression, so that\n   * the pattern is treated as a sequence of Unicode code points, instead of as\n   * ASCII. No forward slashes should be specified around the pattern text.\n   * Only valid for `email`, `password`, `search`, `tel`, `text`, and `url`\n   * inputs.\n   *\n   * If the `pattern` is invalid, no regular expression is applied and this\n   * property is ignored. If the pattern is valid and a non-empty value does\n   * not match the pattern, constraint validation will prevent form submission.\n   *\n   * @webnative\n   */\n  @Prop() public readonly pattern?: string\n\n  /**\n   * Text that appears in the input when it has no value set. Only valid for\n   * `email`, `number`, `password`, `search`, `tel`, `text`, and `url` inputs.\n   *\n   * @webnative\n   */\n  @Prop() public readonly placeholder?: string\n\n  /**\n   * The value of the input cannot be edited. Not valid for `color` inputs.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'readonly' }) public readonly readOnly?: boolean\n\n  /**\n   * A value must be specified for the input before the owning form can be\n   * submitted. Not valid for `color` inputs.\n   *\n   * See\n   * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n   * and the\n   * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n   * for more information.\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * Defines whether the input may be checked for spelling errors.\n   *\n   * @webnative\n   */\n  @Prop({ attribute: 'spellcheck' }) public readonly spellCheck?: boolean\n\n  /**\n   * Specifies the granularity that the `value` must adhere to. Only valid for\n   * `date`, `datetime-local`, `month`, `number`, `time`, and `week` inputs.\n   *\n   * The value must be a positive number—integer or float—or the special value\n   * `any`, which means no stepping is implied, and any value is allowed\n   * (barring other constraints, such as `min` and `max`).\n   *\n   * If `any` is not explicitly set, valid values for the `number` are the\n   * basis for stepping — the `min` value and increments of the step value, up\n   * to the `max` value, if specified.\n   *\n   * @webnative\n   */\n  @Prop() public readonly step?: number | 'any'\n\n  /**\n   * The type of input to render:\n   *\n   * - `\"date\"`: An input for entering a date (year, month, and day, with no\n   * time). Opens a date picker or numeric wheels for year, month, day when\n   * active in supporting browsers.\n   * - `\"datetime-local\"`: An input for entering a date and time, with no time\n   * zone. Opens a date picker or numeric wheels for date and time components\n   * when active in supporting browsers.\n   * - `\"email\"`: An input for editing an email address. Looks like a `\"text\"`\n   * input, but has validation parameters and relevant keyboard in supporting\n   * browsers and devices with dynamic keyboards.\n   * - `\"month\"`: An input for entering a month and year, with no time zone.\n   * - `\"number\"`: An input for entering a number. Displays a spinner and adds\n   * default validation when supported. Displays a numeric keypad in some\n   * devices with dynamic keypads.\n   * - `\"password\"`: A single-line text input whose value is obscured. Will\n   * alert user if site is not secure.\n   * - `\"search\"`: A single-line text input for entering search strings.\n   * Line-breaks are automatically removed from the input value. May include a\n   * delete icon in supporting browsers that can be used to clear the input.\n   * Displays a search icon instead of enter key on some devices with dynamic\n   * keypads.\n   * - `\"tel\"`: An input for entering a telephone number. Displays a telephone\n   * keypad in some devices with dynamic keypads.\n   * - `\"text\"`: A single-line text input. Line-breaks are automatically\n   * removed from the input value.\n   * - `\"time\"`: An input for entering a time value with no time zone.\n   * - `\"url\"`: An input for entering a URL. Looks like a `\"text\"` input, but\n   * has validation parameters and relevant keyboard in supporting browsers and\n   * devices with dynamic keyboards.\n   * - `\"week\"`: An input for entering a date consisting of a week-year number\n   * and a week number with no time zone.\n   *\n   * @webnative\n   */\n  @Prop() public readonly type?: InputType\n\n  /**\n   * The value of the input.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when an alteration to the input's value is committed by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the input gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the input's value changes.\n   */\n  @Event({ eventName: 'qdsInput', cancelable: false })\n  private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n  @Element() private readonly element!: HTMLQdsInputElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  /**\n   * Returns true if the element's value passes validity checks; otherwise,\n   * returns false, fires an invalid event at the element, and (if the event\n   * isn't canceled) reports the problem to the user.\n   */\n  @Method()\n  public async reportValidity(): Promise<boolean> {\n    invariant(this.input)\n\n    return this.input.reportValidity()\n  }\n\n  /**\n   * Selects the entire content of the `<qds-input>` element if the element's\n   * content is selectable.\n   */\n  @Method()\n  public async select(): Promise<void> {\n    invariant(this.input)\n\n    this.input.select()\n  }\n\n  /**\n   * Sets a custom validity message for the input. If this message is not the\n   * empty string, then the element is considered invalid.\n   */\n  @Method()\n  public async setCustomValidity(message: string): Promise<void> {\n    invariant(this.input)\n\n    this.input.setCustomValidity(message)\n    this.invalid = !this.input.checkValidity()\n  }\n\n  /**\n   * Sets the contents of the specified range of characters in the input element to a given string.\n   *\n   * @param replacement The string to insert.\n   * @param start The 0-based index of the first character to replace. Defaults to the current selectionStart value (the start of the user's current selection).\n   * @param end The 0-based index of the character _after_ the last character to replace. Defaults to the current selectionEnd value (the end of the user's current selection).\n   * @param selectionMode A string defining how the selection should be set after the text has been replaced. Possible values:\n   *\n   * - `\"select\"` selects the newly inserted text.\n   * - `\"start\"` moves the selection to just before the inserted text.\n   * - `\"end\"` moves the selection to just after the inserted text.\n   * - `\"preserve\"` attempts to preserve the selection.\n   */\n  @Method()\n  public async setRangeText(\n    replacement: string,\n    start: number,\n    end: number,\n    selectionMode: SelectionMode = 'preserve',\n  ): Promise<void> {\n    invariant(this.input)\n\n    this.input.setRangeText(replacement, start, end, selectionMode)\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value\n      this.inputEmitter.emit()\n      this.changeEmitter.emit()\n    }\n  }\n\n  /**\n   * Selects the specified range of characters within the input.\n   *\n   * @param start The offset into the input for the start of the selection.\n   * @param end The offset into the input for the end of the selection.\n   * @param direction The direction in which the selection is performed.\n   */\n  @Method()\n  public async setSelectionRange(\n    start: number | null,\n    end: number | null,\n    direction?: SelectDirection,\n  ): Promise<void> {\n    invariant(this.input)\n\n    this.input.setSelectionRange(start, end, direction)\n  }\n\n  /**\n   * Decrements the `value` by (`step` * n), where n defaults to 1 if not\n   * specified.\n   *\n   * @param n Amount to decrement the value by.\n   */\n  @Method()\n  public async stepDown(n?: number): Promise<void> {\n    invariant(this.input)\n\n    this.input.stepDown(n)\n  }\n\n  /**\n   * Increments the `value` by (`step` * n), where n defaults to 1 if not\n   * specified.\n   *\n   * @param n Amount to increment the value by.\n   */\n  @Method()\n  public async stepUp(n?: number): Promise<void> {\n    invariant(this.input)\n\n    this.input.stepUp(n)\n  }\n\n  @Watch('disabled')\n  protected disabledChanged(): void {\n    invariant(this.input)\n\n    // Disabled inputs are always valid, so we need to recheck validity when\n    // the state changes.\n    this.input.disabled = this.computedDisabled\n    this.invalid = !this.input.checkValidity()\n  }\n\n  @Watch('step')\n  protected stepChanged(): void {\n    invariant(this.input)\n\n    // If step changes, the value may become invalid so we need to recheck\n    // after the update. We set the new step imperatively so we don't have to\n    // wait for the next render to report the updated validity.\n    this.input.step = String(this.step)\n    this.invalid = !this.input.checkValidity()\n  }\n\n  @Watch('value')\n  protected valueChanged(): void {\n    invariant(this.input)\n\n    this.invalid = !this.input.checkValidity()\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      <input\n        aria-invalid={this.invalid ?? false ? 'true' : 'false'}\n        autoCapitalize={this.autoCapitalize}\n        autoComplete={this.autoComplete}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={this.autoFocus}\n        class=\"qds-input\"\n        data-size={this.size}\n        disabled={this.disabled}\n        enterKeyHint={this.enterkeyhint}\n        form={this.form}\n        inputMode={this.inputmode}\n        max={this.max}\n        maxLength={this.maxLength}\n        min={this.min}\n        minLength={this.minLength}\n        multiple={this.multiple}\n        name={this.name}\n        onBlur={this.onBlur}\n        onChange={this.onChange}\n        onClick={this.onClick}\n        onFocus={this.onFocus}\n        onInput={this.onInput}\n        onInvalid={this.onInvalid}\n        pattern={this.pattern}\n        placeholder={this.placeholder}\n        readOnly={this.readOnly}\n        ref={this.ref}\n        required={this.required}\n        spellcheck={this.spellCheck}\n        step={this.step}\n        type={this.type}\n        value={this.value ?? undefined}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...this.inheritedAttributes}\n      />\n    )\n  }\n\n  private readonly ref = (input?: HTMLInputElement): void => {\n    this.input = input\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    invariant(this.input)\n\n    this.value = this.input.value\n    this.changeEmitter.emit()\n  }\n\n  private readonly onClick = (event: MouseEvent): void => {\n    if (this.computedDisabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onInput = (event: InputEvent): void => {\n    invariant(this.input)\n\n    this.value = this.input.value\n    this.inputEmitter.emit(pickInputEventAttributes(event))\n  }\n\n  private readonly onInvalid = (): void => {\n    this.invalid = true\n  }\n}\n"],"version":3}

package/components/qds-radio.js

@@ -8,7 +8,7 @@ import { p as pickFocusEventAttributes, a as invariant, i as inheritAriaAttribut
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './label.js';
 
-const radioCss = ".sc-qds-radio-h{box-sizing:border-box}[hidden].sc-qds-radio-h{display:none !important}.sc-qds-radio-h *.sc-qds-radio,.sc-qds-radio-h *.sc-qds-radio::before,.sc-qds-radio-h *.sc-qds-radio::after{box-sizing:inherit}.sc-qds-radio-h{display:inline-block;line-height:0}.icon.sc-qds-radio{display:none;color:var(--qds-theme-signature-color-contrast);inset-inline-start:0;pointer-events:none;position:absolute}.label.sc-qds-radio{cursor:pointer;display:inline-flex;position:relative}.radio.sc-qds-radio{align-items:center;-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-rounded-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.radio.sc-qds-radio:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.radio.sc-qds-radio::before{border-radius:var(--qds-control-rounded-border-radius);content:'';height:10px;position:absolute;width:10px}.radio.sc-qds-radio:hover::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-hover)}.radio.sc-qds-radio:active::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-pressed)}.radio.sc-qds-radio:checked{background-color:var(--qds-theme-signature-color-default);border-color:transparent}.radio.sc-qds-radio:checked~.icon.sc-qds-radio{display:inline-block}.radio.sc-qds-radio:checked:hover{background-color:var(--qds-theme-signature-color-hover)}.radio.sc-qds-radio:checked:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled='true'].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.icon[data-size='small'].sc-qds-radio,.radio[data-size='small'].sc-qds-radio{width:var(--qds-control-small-icon-size);height:var(--qds-control-small-icon-size)}.inline[data-size='small'].sc-qds-radio{margin-block:var(--qds-control-small-padding-auto-height)}.label[data-size='small'].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related)}.icon[data-size='standard'].sc-qds-radio,.radio[data-size='standard'].sc-qds-radio{width:var(--qds-control-standard-icon-size);height:var(--qds-control-standard-icon-size)}.inline[data-size='standard'].sc-qds-radio{margin-block:var(--qds-control-standard-padding-auto-height)}.label[data-size='standard'].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related)}.icon[data-size='large'].sc-qds-radio,.radio[data-size='large'].sc-qds-radio{width:var(--qds-control-large-icon-size);height:var(--qds-control-large-icon-size)}.inline[data-size='large'].sc-qds-radio{margin-block:var(--qds-control-large-padding-auto-height)}.label[data-size='large'].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related)}";
+const radioCss = ".sc-qds-radio-h{box-sizing:border-box}[hidden].sc-qds-radio-h{display:none !important}.sc-qds-radio-h *.sc-qds-radio,.sc-qds-radio-h *.sc-qds-radio::before,.sc-qds-radio-h *.sc-qds-radio::after{box-sizing:inherit}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-icon.sc-qds-radio{display:none;color:var(--qds-theme-signature-color-contrast);inset-inline-start:0;pointer-events:none;position:absolute}.qds-label.sc-qds-radio{cursor:pointer;display:inline-flex;position:relative}.qds-radio.sc-qds-radio{align-items:center;-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-radius:var(--qds-control-rounded-border-radius);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-radio.sc-qds-radio::before{border-radius:var(--qds-control-rounded-border-radius);content:'';height:10px;position:absolute;width:10px}.qds-radio.sc-qds-radio:hover::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:active::before{box-shadow:inset 1em 1em var(--qds-theme-signature-color-pressed)}.qds-radio.sc-qds-radio:checked{background-color:var(--qds-theme-signature-color-default);border-color:transparent}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{display:inline-block}.qds-radio.sc-qds-radio:checked:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:checked:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled='true'].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-icon[data-size='small'].sc-qds-radio,.qds-radio[data-size='small'].sc-qds-radio{width:var(--qds-control-small-icon-size);height:var(--qds-control-small-icon-size)}.qds-inline[data-size='small'].sc-qds-radio{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size='small'].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related)}.qds-icon[data-size='standard'].sc-qds-radio,.qds-radio[data-size='standard'].sc-qds-radio{width:var(--qds-control-standard-icon-size);height:var(--qds-control-standard-icon-size)}.qds-inline[data-size='standard'].sc-qds-radio{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size='standard'].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related)}.qds-icon[data-size='large'].sc-qds-radio,.qds-radio[data-size='large'].sc-qds-radio{width:var(--qds-control-large-icon-size);height:var(--qds-control-large-icon-size)}.qds-inline[data-size='large'].sc-qds-radio{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size='large'].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related)}";
 
 const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
   constructor() {
@@ -60,9 +60,9 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
     return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
     h("label", { "aria-disabled": this.computedDisabled ? 'true' : 'false', class: {
-        inline: this.inline,
-        label: true,
-      }, "data-size": this.size }, h("input", { checked: this.checked, class: "radio", "data-size": this.size, disabled: this.disabled, form: this.form, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "radio", value: this.value ?? undefined, ...this.inheritedAttributes }), h("qds-icon", { "aria-hidden": "true", class: "icon", "data-size": this.size, library: "core", name: "checked" }), this.hasText && h("qds-label", { size: this.size, text: this.text })));
+        'qds-inline': this.inline,
+        'qds-label': true,
+      }, "data-size": this.size }, h("input", { checked: this.checked, class: "qds-radio", "data-size": this.size, disabled: this.disabled, form: this.form, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "radio", value: this.value ?? undefined, ...this.inheritedAttributes }), h("qds-icon", { "aria-hidden": "true", class: "qds-icon", "data-size": this.size, library: "core", name: "checked" }), this.hasText && h("qds-label", { size: this.size, text: this.text })));
   }
   get element() { return this; }
   static get style() { return radioCss; }

package/components/qds-radio.js.map

@@ -1 +1 @@
-{"file":"qds-radio.js","mappings":";;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,q0FAAq0F;;MCiCz0F,KAAK;;;;;;;IAoGR,wBAAmB,GAAe,EAAE,CAAA;IAkE3B,QAAG,GAAG,CAAC,KAAwB;MAC9C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;KACnB,CAAA;IAEgB,WAAM,GAAG,CAAC,KAAiB;MAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACvD,CAAA;IAEgB,aAAQ,GAAG;MAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;KAC1B,CAAA;IAEgB,YAAO,GAAG,CAAC,KAAiB;MAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACxD,CAAA;kBA7KyC,KAAK;gBAKY,UAAU;;;;;;;;;EA4FrE,IAAY,gBAAgB;IAC1B,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;GAC9B;EAED,IAAY,OAAO;IACjB,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAA;GACnD;EAGS,OAAO;IACf,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAErB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAA;GAClC;EAEM,iBAAiB;IACtB,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,IAEpB,aACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,eACF,IAAI,CAAC,IAAI,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,KAE1B,IAAI,CAAC,mBAAmB,GAC5B,EACF,+BACc,MAAM,EAClB,KAAK,EAAC,MAAM,eACD,IAAI,CAAC,IAAI,EACpB,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,SAAS,GACd,EACD,IAAI,CAAC,OAAO,IAAI,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC1D,EACT;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/radio/radio.css?tag=qds-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n  line-height: 0;\n}\n\n.icon {\n  display: none;\n  color: var(--qds-theme-signature-color-contrast);\n  inset-inline-start: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n.label {\n  cursor: pointer;\n  display: inline-flex;\n  position: relative;\n}\n\n.radio {\n  align-items: center;\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-rounded-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  cursor: pointer;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  margin: 0;\n  print-color-adjust: exact;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &::before {\n    border-radius: var(--qds-control-rounded-border-radius);\n    content: '';\n    height: 10px;\n    position: absolute;\n    width: 10px;\n  }\n\n  &:hover::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-hover);\n  }\n\n  &:active::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-pressed);\n  }\n\n  &:checked {\n    background-color: var(--qds-theme-signature-color-default);\n    border-color: transparent;\n\n    & ~ .icon {\n      display: inline-block;\n    }\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &:is(.icon, .radio) {\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-size='standard'] {\n  &:is(.icon, .radio) {\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n}\n\n[data-size='large'] {\n  &:is(.icon, .radio) {\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n\n  &.inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.label {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\n\nexport type RadioSize = 'large' | 'small' | 'standard'\n\n/**\n * `<qds-radio>` elements are rendered as circles that are filled when\n * selected. They are generally used in **radio groups** — collections of radio\n * buttons describing a set of related options.\n *\n * Only one radio button in a given radio group can be selected at the same\n * time.\n *\n * @see https://quartz.se.com/build/components/radio\n */\n@Component({\n  tag: 'qds-radio',\n  scoped: true,\n  styleUrl: 'radio.css',\n})\nexport class Radio implements ComponentInterface {\n  /**\n   * Adds vertical margin to the radio 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 radio button's size.\n   */\n  @Prop({ reflect: true }) public readonly size: RadioSize = 'standard'\n\n  /**\n   * The radio button's text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly text?: string\n\n  /**\n   * Sets the radio button's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public checked?: boolean\n\n  /**\n   * Prevents the radio button from being interacted with: it cannot be pressed\n   * or 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 radio button 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-radio>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-radio>` 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   * Specify the radio group this radio button belongs to.\n   *\n   * Once a radio group is established, selecting any radio button in that\n   * group automatically deselects any currently-selected radio button in the\n   * same group.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Specify the group the radio button belongs to as required.\n   *\n   * If any radio button in a same-named group of radio buttons has the\n   * `required` attribute, a radio button in that group must be checked,\n   * although it doesn't have to be the one with the attribute applied.\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The value of the radio button, submitted as a name/value pair with form\n   * data.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the radio button is checked by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the radio button gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsRadioElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get hasText(): boolean {\n    return this.text !== undefined && this.text !== ''\n  }\n\n  @Listen('click')\n  protected onClick(): void {\n    invariant(this.input)\n\n    this.checked = this.input.checked\n  }\n\n  public componentWillLoad(): void {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.element),\n      ...inheritAttributes(this.element, ['tabindex']),\n    }\n  }\n\n  public render() {\n    return (\n      // eslint-disable-next-line jsx-a11y/label-has-associated-control\n      <label\n        aria-disabled={this.computedDisabled ? 'true' : 'false'}\n        class={{\n          inline: this.inline,\n          label: true,\n        }}\n        data-size={this.size}\n      >\n        <input\n          checked={this.checked}\n          class=\"radio\"\n          data-size={this.size}\n          disabled={this.disabled}\n          form={this.form}\n          name={this.name}\n          onBlur={this.onBlur}\n          onChange={this.onChange}\n          onFocus={this.onFocus}\n          ref={this.ref}\n          required={this.required}\n          type=\"radio\"\n          value={this.value ?? undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        />\n        <qds-icon\n          aria-hidden=\"true\"\n          class=\"icon\"\n          data-size={this.size}\n          library=\"core\"\n          name=\"checked\"\n        />\n        {this.hasText && <qds-label size={this.size} text={this.text} />}\n      </label>\n    )\n  }\n\n  private readonly ref = (input?: HTMLInputElement): void => {\n    this.input = input\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    this.changeEmitter.emit()\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}
+{"file":"qds-radio.js","mappings":";;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,q6FAAq6F;;MCiCz6F,KAAK;;;;;;;IAoGR,wBAAmB,GAAe,EAAE,CAAA;IAkE3B,QAAG,GAAG,CAAC,KAAwB;MAC9C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;KACnB,CAAA;IAEgB,WAAM,GAAG,CAAC,KAAiB;MAC1C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACvD,CAAA;IAEgB,aAAQ,GAAG;MAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;KAC1B,CAAA;IAEgB,YAAO,GAAG,CAAC,KAAiB;MAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;KACxD,CAAA;kBA7KyC,KAAK;gBAKY,UAAU;;;;;;;;;EA4FrE,IAAY,gBAAgB;IAC1B,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;GAC9B;EAED,IAAY,OAAO;IACjB,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAA;GACnD;EAGS,OAAO;IACf,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAErB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAA;GAClC;EAEM,iBAAiB;IACtB,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,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,WAAW,EAAE,IAAI;OAClB,eACU,IAAI,CAAC,IAAI,IAEpB,aACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,WAAW,eACN,IAAI,CAAC,IAAI,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,KAE1B,IAAI,CAAC,mBAAmB,GAC5B,EACF,+BACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,IAAI,CAAC,IAAI,EACpB,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,SAAS,GACd,EACD,IAAI,CAAC,OAAO,IAAI,iBAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC1D,EACT;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/radio/radio.css?tag=qds-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  display: inline-block;\n  line-height: 0;\n}\n\n.qds-icon {\n  display: none;\n  color: var(--qds-theme-signature-color-contrast);\n  inset-inline-start: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n.qds-label {\n  cursor: pointer;\n  display: inline-flex;\n  position: relative;\n}\n\n.qds-radio {\n  align-items: center;\n  appearance: none;\n  background-color: var(--qds-theme-control-input-background);\n  border-radius: var(--qds-control-rounded-border-radius);\n  border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n  cursor: pointer;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  margin: 0;\n  print-color-adjust: exact;\n\n  &:focus-visible {\n    outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n    outline-offset: var(--qds-focus-border-offset);\n  }\n\n  &::before {\n    border-radius: var(--qds-control-rounded-border-radius);\n    content: '';\n    height: 10px;\n    position: absolute;\n    width: 10px;\n  }\n\n  &:hover::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-hover);\n  }\n\n  &:active::before {\n    box-shadow: inset 1em 1em var(--qds-theme-signature-color-pressed);\n  }\n\n  &:checked {\n    background-color: var(--qds-theme-signature-color-default);\n    border-color: transparent;\n\n    & ~ .qds-icon {\n      display: inline-block;\n    }\n\n    &:hover {\n      background-color: var(--qds-theme-signature-color-hover);\n    }\n\n    &:active {\n      background-color: var(--qds-theme-signature-color-pressed);\n    }\n  }\n}\n\n[aria-disabled='true'] {\n  opacity: var(--qds-theme-disabled);\n  pointer-events: none;\n}\n\n[data-size='small'] {\n  &:is(.qds-icon, .qds-radio) {\n    width: var(--qds-control-small-icon-size);\n    height: var(--qds-control-small-icon-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n}\n\n[data-size='standard'] {\n  &:is(.qds-icon, .qds-radio) {\n    width: var(--qds-control-standard-icon-size);\n    height: var(--qds-control-standard-icon-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n}\n\n[data-size='large'] {\n  &:is(.qds-icon, .qds-radio) {\n    width: var(--qds-control-large-icon-size);\n    height: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n  inheritAriaAttributes,\n  inheritAttributes,\n  invariant,\n  pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\n\nexport type RadioSize = 'large' | 'small' | 'standard'\n\n/**\n * `<qds-radio>` elements are rendered as circles that are filled when\n * selected. They are generally used in **radio groups** — collections of radio\n * buttons describing a set of related options.\n *\n * Only one radio button in a given radio group can be selected at the same\n * time.\n *\n * @see https://quartz.se.com/build/components/radio\n */\n@Component({\n  tag: 'qds-radio',\n  scoped: true,\n  styleUrl: 'radio.css',\n})\nexport class Radio implements ComponentInterface {\n  /**\n   * Adds vertical margin to the radio 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 radio button's size.\n   */\n  @Prop({ reflect: true }) public readonly size: RadioSize = 'standard'\n\n  /**\n   * The radio button's text.\n   */\n  @Prop({ mutable: true, reflect: true }) public readonly text?: string\n\n  /**\n   * Sets the radio button's state.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true, reflect: true }) public checked?: boolean\n\n  /**\n   * Prevents the radio button from being interacted with: it cannot be pressed\n   * or 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 radio button 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-radio>` is associated\n   * with its ancestor `<form>` element, if any.\n   *\n   * This property lets you associate `<qds-radio>` 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   * Specify the radio group this radio button belongs to.\n   *\n   * Once a radio group is established, selecting any radio button in that\n   * group automatically deselects any currently-selected radio button in the\n   * same group.\n   *\n   * @webnative\n   */\n  @Prop() public readonly name?: string\n\n  /**\n   * Specify the group the radio button belongs to as required.\n   *\n   * If any radio button in a same-named group of radio buttons has the\n   * `required` attribute, a radio button in that group must be checked,\n   * although it doesn't have to be the one with the attribute applied.\n   *\n   * @webnative\n   */\n  @Prop() public readonly required?: boolean\n\n  /**\n   * The value of the radio button, submitted as a name/value pair with form\n   * data.\n   *\n   * @webnative\n   */\n  @Prop({ mutable: true }) public value?: Value\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n  private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  /**\n   * Emitted when the radio button is checked by the user.\n   */\n  @Event({ eventName: 'qdsChange', cancelable: false })\n  private readonly changeEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the radio button gains focus.\n   */\n  @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n  private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n  @Element() private readonly element!: HTMLQdsRadioElement\n\n  private inheritedAttributes: Attributes = {}\n\n  private input?: HTMLInputElement\n\n  private get computedDisabled(): boolean {\n    return this.disabled ?? false\n  }\n\n  private get hasText(): boolean {\n    return this.text !== undefined && this.text !== ''\n  }\n\n  @Listen('click')\n  protected onClick(): void {\n    invariant(this.input)\n\n    this.checked = this.input.checked\n  }\n\n  public componentWillLoad(): void {\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          'qds-inline': this.inline,\n          'qds-label': true,\n        }}\n        data-size={this.size}\n      >\n        <input\n          checked={this.checked}\n          class=\"qds-radio\"\n          data-size={this.size}\n          disabled={this.disabled}\n          form={this.form}\n          name={this.name}\n          onBlur={this.onBlur}\n          onChange={this.onChange}\n          onFocus={this.onFocus}\n          ref={this.ref}\n          required={this.required}\n          type=\"radio\"\n          value={this.value ?? undefined}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...this.inheritedAttributes}\n        />\n        <qds-icon\n          aria-hidden=\"true\"\n          class=\"qds-icon\"\n          data-size={this.size}\n          library=\"core\"\n          name=\"checked\"\n        />\n        {this.hasText && <qds-label size={this.size} text={this.text} />}\n      </label>\n    )\n  }\n\n  private readonly ref = (input?: HTMLInputElement): void => {\n    this.input = input\n  }\n\n  private readonly onBlur = (event: FocusEvent): void => {\n    this.blurEmitter.emit(pickFocusEventAttributes(event))\n  }\n\n  private readonly onChange = (): void => {\n    this.changeEmitter.emit()\n  }\n\n  private readonly onFocus = (event: FocusEvent): void => {\n    this.focusEmitter.emit(pickFocusEventAttributes(event))\n  }\n}\n"],"version":3}

package/components/qds-switch.js

@@ -8,7 +8,7 @@ import { p as pickFocusEventAttributes, i as inheritAriaAttributes, b as inherit
 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)}";
+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}.qds-track.sc-qds-switch,.qds-knob.sc-qds-switch{-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-unchecked-text.sc-qds-switch{text-align:end}.qds-icon.sc-qds-switch{color:var(--qds-theme-control-text-standard);flex-shrink:0}.qds-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)}.qds-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}.qds-label.sc-qds-switch{cursor:pointer;display:flex}.qds-switch.sc-qds-switch{-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:0;position:absolute;white-space:nowrap;width:1px}.qds-switch.sc-qds-switch:hover~.qds-track.sc-qds-switch>.qds-knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-hover)}.qds-switch.sc-qds-switch:active~.qds-track.sc-qds-switch>.qds-knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-pressed)}.qds-switch.sc-qds-switch:checked~.qds-track.sc-qds-switch{justify-content:flex-end;background-color:var(--qds-theme-signature-color-default)}.qds-switch.sc-qds-switch:checked~.qds-track.sc-qds-switch>.qds-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)}.qds-switch.sc-qds-switch:checked:hover~.qds-track.sc-qds-switch>.qds-knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-hover)}.qds-switch.sc-qds-switch:checked:active~.qds-track.sc-qds-switch>.qds-knob.sc-qds-switch{background-color:var(--qds-theme-interactive-background-pressed)}.qds-switch.sc-qds-switch:focus-visible~.qds-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}.qds-icon[data-size='small'].sc-qds-switch{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-inline[data-size='small'].sc-qds-switch{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size='small'].sc-qds-switch{gap:var(--qds-control-small-gap-siblings-related)}.qds-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)}.qds-knob[data-size='small'].sc-qds-switch{height:var(--qds-control-slider-knob-small-size);width:var(--qds-control-slider-knob-small-size)}.qds-icon[data-size='standard'].sc-qds-switch{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-inline[data-size='standard'].sc-qds-switch{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size='standard'].sc-qds-switch{gap:var(--qds-control-standard-gap-siblings-related)}.qds-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)}.qds-knob[data-size='standard'].sc-qds-switch{height:var(--qds-control-slider-knob-standard-size);width:var(--qds-control-slider-knob-standard-size)}.qds-icon[data-size='large'].sc-qds-switch{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-inline[data-size='large'].sc-qds-switch{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size='large'].sc-qds-switch{gap:var(--qds-control-large-gap-siblings-related)}.qds-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)}.qds-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 {
@@ -61,13 +61,13 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement
     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", {
+        'qds-inline': this.inline,
+        'qds-label': true,
+      }, "data-size": this.size }, this.textUnchecked !== undefined && this.textUnchecked !== '' && (h("qds-label", { class: "qds-unchecked-text", size: this.size, text: this.textUnchecked })), this.iconUncheckedName !== undefined &&
+      this.iconUncheckedName !== '' && (h("qds-icon", { class: "qds-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 }))));
+      autoFocus: this.autoFocus, checked: this.checked, class: "qds-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: "qds-track", "data-size": this.size }, h("div", { class: "qds-knob", "data-size": this.size })), this.iconCheckedName !== undefined && this.iconCheckedName !== '' && (h("qds-icon", { class: "qds-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; }

package/components/qds-switch.js.map

@@ -1 +1 @@
-{"file":"qds-switch.js","mappings":"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","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'\nimport type { Value } from '../controls'\n\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?: Value\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}
+{"file":"qds-switch.js","mappings":"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","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.qds-track,\n.qds-knob {\n  print-color-adjust: exact;\n}\n\n.qds-unchecked-text {\n  text-align: end;\n}\n\n.qds-icon {\n  color: var(--qds-theme-control-text-standard);\n  flex-shrink: 0;\n}\n\n.qds-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.qds-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.qds-label {\n  cursor: pointer;\n  display: flex;\n}\n\n.qds-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 ~ .qds-track > .qds-knob {\n    background-color: var(--qds-theme-interactive-background-hover);\n  }\n\n  &:active ~ .qds-track > .qds-knob {\n    background-color: var(--qds-theme-interactive-background-pressed);\n  }\n\n  &:checked {\n    & ~ .qds-track {\n      justify-content: flex-end;\n      background-color: var(--qds-theme-signature-color-default);\n\n      & > .qds-knob {\n        border-color: transparent;\n        box-sizing: border-box;\n        margin-inline-end: var(--qds-control-border-width);\n      }\n    }\n\n    &:hover ~ .qds-track > .qds-knob {\n      background-color: var(--qds-theme-interactive-background-hover);\n    }\n\n    &:active ~ .qds-track > .qds-knob {\n      background-color: var(--qds-theme-interactive-background-pressed);\n    }\n  }\n\n  &:focus-visible ~ .qds-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  &.qds-icon {\n    height: var(--qds-control-small-icon-size);\n    width: var(--qds-control-small-icon-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-small-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-small-gap-siblings-related);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-slider-knob-small-size) * 2);\n    height: var(--qds-control-toggle-box-small-size);\n  }\n\n  &.qds-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  &.qds-icon {\n    height: var(--qds-control-standard-icon-size);\n    width: var(--qds-control-standard-icon-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-standard-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-standard-gap-siblings-related);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-slider-knob-standard-size) * 2);\n    height: var(--qds-control-toggle-box-standard-size);\n  }\n\n  &.qds-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  &.qds-icon {\n    height: var(--qds-control-large-icon-size);\n    width: var(--qds-control-large-icon-size);\n  }\n\n  &.qds-inline {\n    margin-block: var(--qds-control-large-padding-auto-height);\n  }\n\n  &.qds-label {\n    gap: var(--qds-control-large-gap-siblings-related);\n  }\n\n  &.qds-track {\n    width: calc(var(--qds-control-slider-knob-large-size) * 2);\n    height: var(--qds-control-toggle-box-large-size);\n  }\n\n  &.qds-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'\nimport type { Value } from '../controls'\n\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?: Value\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          'qds-inline': this.inline,\n          'qds-label': true,\n        }}\n        data-size={this.size}\n      >\n        {this.textUnchecked !== undefined && this.textUnchecked !== '' && (\n          <qds-label\n            class=\"qds-unchecked-text\"\n            size={this.size}\n            text={this.textUnchecked}\n          />\n        )}\n        {this.iconUncheckedName !== undefined &&\n          this.iconUncheckedName !== '' && (\n            <qds-icon\n              class=\"qds-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=\"qds-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=\"qds-track\" data-size={this.size}>\n          <div class=\"qds-knob\" data-size={this.size} />\n        </div>\n        {this.iconCheckedName !== undefined && this.iconCheckedName !== '' && (\n          <qds-icon\n            class=\"qds-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-textarea.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { p as pickFocusEventAttributes, a as invariant, e as pickInputEventAttributes, i as inheritAriaAttributes, b as inheritAttributes } from './helpers.js';
 
-const textareaCss = ".sc-qds-textarea-h{box-sizing:border-box}[hidden].sc-qds-textarea-h{display:none !important}.sc-qds-textarea-h *.sc-qds-textarea,.sc-qds-textarea-h *.sc-qds-textarea::before,.sc-qds-textarea-h *.sc-qds-textarea::after{box-sizing:inherit}.sc-qds-textarea-h{display:inline-block;resize:both}.textarea.sc-qds-textarea{background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-control-text-standard);padding-inline:var(--qds-control-input-padding-horizontal);resize:inherit;width:100%;height:100%}.textarea[aria-invalid='true'].sc-qds-textarea:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.textarea.sc-qds-textarea:disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.textarea.sc-qds-textarea:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.textarea.sc-qds-textarea:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}[data-size='small'].sc-qds-textarea{font:var(--qds-control-small-text);padding-block:var(--qds-control-small-padding-auto-height)}[data-size='standard'].sc-qds-textarea{font:var(--qds-control-standard-text);padding-block:var(--qds-control-standard-padding-auto-height)}[data-size='large'].sc-qds-textarea{font:var(--qds-control-large-text);padding-block:var(--qds-control-large-padding-auto-height)}";
+const textareaCss = ".sc-qds-textarea-h{box-sizing:border-box}[hidden].sc-qds-textarea-h{display:none !important}.sc-qds-textarea-h *.sc-qds-textarea,.sc-qds-textarea-h *.sc-qds-textarea::before,.sc-qds-textarea-h *.sc-qds-textarea::after{box-sizing:inherit}.sc-qds-textarea-h{display:inline-block;resize:both}.qds-textarea.sc-qds-textarea{background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);color:var(--qds-theme-control-text-standard);padding-inline:var(--qds-control-input-padding-horizontal);resize:inherit;width:100%;height:100%}.qds-textarea[aria-invalid='true'].sc-qds-textarea:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-textarea.sc-qds-textarea:disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-textarea.sc-qds-textarea:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-textarea.sc-qds-textarea:placeholder-shown{color:var(--qds-theme-control-text-placeholder)}[data-size='small'].sc-qds-textarea{font:var(--qds-control-small-text);padding-block:var(--qds-control-small-padding-auto-height)}[data-size='standard'].sc-qds-textarea{font:var(--qds-control-standard-text);padding-block:var(--qds-control-standard-padding-auto-height)}[data-size='large'].sc-qds-textarea{font:var(--qds-control-large-text);padding-block:var(--qds-control-large-padding-auto-height)}";
 
 let autoIncrementingId = 1;
 const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends HTMLElement {
@@ -151,7 +151,7 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends HTMLEle
   render() {
     return (h("textarea", { "aria-invalid": this.invalid ?? false ? 'true' : 'false', autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
       // eslint-disable-next-line jsx-a11y/no-autofocus
-      autoFocus: this.autoFocus, class: "textarea", cols: this.cols, "data-size": this.size, disabled: this.disabled, enterKeyHint: this.enterkeyhint, form: this.form, inputMode: this.inputmode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, onInvalid: this.onInvalid, placeholder: this.placeholder, readOnly: this.readOnly, ref: this.ref, required: this.required, rows: this.rows, spellcheck: this.spellCheck, value: this.value ?? undefined, wrap: this.wrap, ...this.inheritedAttributes }));
+      autoFocus: this.autoFocus, class: "qds-textarea", cols: this.cols, "data-size": this.size, disabled: this.disabled, enterKeyHint: this.enterkeyhint, form: this.form, inputMode: this.inputmode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, onInvalid: this.onInvalid, placeholder: this.placeholder, readOnly: this.readOnly, ref: this.ref, required: this.required, rows: this.rows, spellcheck: this.spellCheck, value: this.value ?? undefined, wrap: this.wrap, ...this.inheritedAttributes }));
   }
   get element() { return this; }
   static get watchers() { return {