npm - @quartzds/core - Versions diffs - 1.0.0-beta.45 → 1.0.0-beta.46 - Mend

@quartzds/core 1.0.0-beta.45 → 1.0.0-beta.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/components/qds-chip.js +4 -2
package/components/qds-chip.js.map +1 -1
package/components/qds-title.js +1 -1
package/components/qds-title.js.map +1 -1
package/dist/cjs/qds-chip.cjs.entry.js +4 -2
package/dist/cjs/qds-chip.cjs.entry.js.map +1 -1
package/dist/cjs/qds-title.cjs.entry.js +1 -1
package/dist/cjs/qds-title.cjs.entry.js.map +1 -1
package/dist/docs.json +1 -1
package/dist/esm/qds-chip.entry.js +4 -2
package/dist/esm/qds-chip.entry.js.map +1 -1
package/dist/esm/qds-title.entry.js +1 -1
package/dist/esm/qds-title.entry.js.map +1 -1
package/hydrate/index.js +5 -3
package/package.json +1 -1

package/components/qds-chip.js CHANGED Viewed

@@ -119,8 +119,10 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
         this.isPressed = false;
         if (this.computedType === 'closable')
             this.closeEmitter.emit();
-        else
+        else {
+            this.checked = !this.computedChecked;
             this.changeEmitter.emit();
+        }
     }
     checkedChanged() {
         this.internals.setFormValue(this.computedChecked && !this.computedDisabled
@@ -171,7 +173,7 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
         };
     }
     render() {
-        return (h(Host, { key: '8898971924de5e4a864a86ae3ccd0d110fcb7347' }, this.computedType === 'closable' && (h("div", { "aria-disabled": this.computedDisabled.toString(), class: {
+        return (h(Host, { key: 'ce7fa84da98ec365b86fd23321c82daa723d0cf2' }, this.computedType === 'closable' && (h("div", { "aria-disabled": this.computedDisabled.toString(), class: {
                 'qds-container': true,
                 'qds-closable-chip': true,
                 'qds-pressed-state': this.isPressed,

package/components/qds-chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-chip.js","mappings":"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","names":[],"sources":["src/components/chip/chip.css?tag=qds-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-target {\n appearance: none;\n display: flex;\n border: none;\n padding: 0;\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n pointer-events: auto;\n\n &:disabled {\n pointer-events: none;\n }\n}\n\n.qds-alignment {\n display: flex;\n align-items: center;\n}\n\n.qds-cursor {\n cursor: pointer;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-closable-chip,\n.qds-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-block: 0;\n user-select: none;\n white-space: nowrap;\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n border-radius: var(--qds-control-rounded-border-radius);\n color: var(--qds-theme-control-text-standard);\n background-color: initial;\n appearance: none;\n}\n\n.qds-closable-chip {\n pointer-events: none;\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\n.qds-container:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n}\n\n.qds-checkbox:active ~ .qds-container,\n.qds-closable-chip:has(.qds-target:active),\n.qds-container.qds-pressed-state {\n background-color: var(--qds-theme-interactive-background-pressed);\n}\n\n.qds-checkbox {\n clip-path: inset(50%);\n margin: 0;\n position: absolute;\n white-space: nowrap;\n\n &:focus-visible ~ .qds-container {\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[data-size='small'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-chip-small-padding-horizontal);\n gap: var(--qds-control-small-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-small-height);\n\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-small-text);\n }\n}\n\n[data-size='standard'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n gap: var(--qds-control-standard-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-standard-height);\n\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-standard-text);\n }\n}\n\n[data-size='large'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-chip-large-padding-horizontal);\n gap: var(--qds-control-large-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-large-height);\n\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-large-text);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} 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'\nimport type { Size } from '../shared'\n\nexport type ChipType = 'closable' \| 'selectable'\n\n/\n `<qds-chip>` elements are interactive elements that represent selections.\n * Chips allow users to make a selection from a list of options or display\n * items like filters or tags.\n \n @see https://quartz.se.com/build/components/chip\n /\n@Component({\n tag: 'qds-chip',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.css',\n})\nexport class Chip implements ComponentInterface {\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n The chip's size.\n /\n @Prop() public readonly size: Size = 'standard'\n\n /\n The chip's type.\n /\n @Prop() public readonly type?: ChipType = 'selectable'\n\n /\n The chip's text.\n /\n @Prop() public readonly text?: string\n\n /\n Sets the selectable chip's state.\n \n @webnative\n /\n @Prop({ mutable: true }) public checked?: boolean\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the chip 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-chip>` is associated\n * with its ancestor `<form>` element, if any.\n \n This property lets you associate `<qds-chip>` 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 Prevents the chip from being interacted with: it cannot be pressed or\n * focused.\n \n /\n @Prop() public readonly disabled?: boolean\n\n /*\n The name of the chip, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Specify whether the chip should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n /\n The value of the chip, submitted as a name/value pair with form data.\n \n @webnative\n /\n @Prop() public readonly value?: Value = 'on'\n\n /\n Emitted when the chip loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip is closed.\n /\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /\n Emitted when a change to the selectable chip's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsChipElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @State() private isPressed = false\n\n private savedTabindex?: string\n\n private inheritedAttributes: Attributes = {}\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedType(): ChipType {\n switch (this.type) {\n case 'selectable':\n case 'closable': {\n return this.type\n }\n default: {\n return 'selectable'\n }\n }\n }\n\n private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n private get computedChecked(): boolean {\n return this.checked ?? false\n }\n\n private get computedValue(): string \| null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n if (this.computedType === 'selectable') {\n this.checked = !this.computedChecked\n this.changeEmitter.emit()\n }\n }\n\n @Listen('keydown')\n protected handleKeyDown(event: KeyboardEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (event.key === ' ') {\n this.isPressed = true\n event.preventDefault()\n } else if (event.key === 'Enter') {\n if (this.internals.form) {\n this.internals.form.requestSubmit()\n event.preventDefault()\n }\n\n if (this.computedType === 'closable') this.closeEmitter.emit()\n }\n }\n\n @Listen('keyup')\n protected handleKeyUp(event: KeyboardEvent): void {\n if (event.key !== ' ') return\n\n this.isPressed = false\n if (this.computedType === 'closable') this.closeEmitter.emit()\n else this.changeEmitter.emit()\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.computedChecked && !this.computedDisabled\n ? this.computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.computedChecked && !this.computedDisabled) {\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: this.savedTabindex,\n }\n this.internals.setFormValue(this.computedValue)\n } else {\n this.savedTabindex = this.inheritedAttributes.tabindex\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: undefined,\n }\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n }\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n if (this.computedDisabled) this.savedTabindex = newValue\n else\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: newValue,\n }\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.computedChecked && !this.computedDisabled)\n this.internals.setFormValue(this.computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n Object.defineProperty(this.element, 'form', {\n enumerable: true,\n get: () => this.internals.form,\n })\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <Host>\n {this.computedType === 'closable' && (\n <div\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-container': true,\n 'qds-closable-chip': true,\n 'qds-pressed-state': this.isPressed,\n }}\n data-size={this.computedSize}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n <button\n aria-label=\"close\"\n class=\"qds-target\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\n onClick={this.onIconClick}\n tabIndex={this.computedDisabled ? -1 : -1}\n type=\"button\"\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"close\"\n />\n </button>\n </div>\n )}\n {this.computedType === 'selectable' && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label aria-disabled={this.computedDisabled.toString()}>\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n checked={this.checked}\n class=\"qds-checkbox\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\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\n class={{\n 'qds-container': true,\n 'qds-pressed-state': this.isPressed,\n 'qds-padding-end': true,\n 'qds-cursor': true,\n }}\n data-size={this.computedSize}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n {(this.checked ?? false) && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"checked\"\n />\n )}\n </div>\n </label>\n )}\n </Host>\n )\n }\n\n private readonly close = (): void => {\n this.closeEmitter.emit()\n }\n\n private readonly onIconClick = (event: MouseEvent): void => {\n if (!event.defaultPrevented && this.computedType === 'closable')\n this.close()\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1	+ {"file":"qds-chip.js","mappings":"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","names":[],"sources":["src/components/chip/chip.css?tag=qds-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-target {\n appearance: none;\n display: flex;\n border: none;\n padding: 0;\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n pointer-events: auto;\n\n &:disabled {\n pointer-events: none;\n }\n}\n\n.qds-alignment {\n display: flex;\n align-items: center;\n}\n\n.qds-cursor {\n cursor: pointer;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-closable-chip,\n.qds-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-block: 0;\n user-select: none;\n white-space: nowrap;\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n border-radius: var(--qds-control-rounded-border-radius);\n color: var(--qds-theme-control-text-standard);\n background-color: initial;\n appearance: none;\n}\n\n.qds-closable-chip {\n pointer-events: none;\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\n.qds-container:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n}\n\n.qds-checkbox:active ~ .qds-container,\n.qds-closable-chip:has(.qds-target:active),\n.qds-container.qds-pressed-state {\n background-color: var(--qds-theme-interactive-background-pressed);\n}\n\n.qds-checkbox {\n clip-path: inset(50%);\n margin: 0;\n position: absolute;\n white-space: nowrap;\n\n &:focus-visible ~ .qds-container {\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[data-size='small'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-chip-small-padding-horizontal);\n gap: var(--qds-control-small-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-small-height);\n\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-small-text);\n }\n}\n\n[data-size='standard'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n gap: var(--qds-control-standard-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-standard-height);\n\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-standard-text);\n }\n}\n\n[data-size='large'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-chip-large-padding-horizontal);\n gap: var(--qds-control-large-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-large-height);\n\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-large-text);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} 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'\nimport type { Size } from '../shared'\n\nexport type ChipType = 'closable' \| 'selectable'\n\n/\n `<qds-chip>` elements are interactive elements that represent selections.\n * Chips allow users to make a selection from a list of options or display\n * items like filters or tags.\n \n @see https://quartz.se.com/build/components/chip\n /\n@Component({\n tag: 'qds-chip',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.css',\n})\nexport class Chip implements ComponentInterface {\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n The chip's size.\n /\n @Prop() public readonly size: Size = 'standard'\n\n /\n The chip's type.\n /\n @Prop() public readonly type?: ChipType = 'selectable'\n\n /\n The chip's text.\n /\n @Prop() public readonly text?: string\n\n /\n Sets the selectable chip's state.\n \n @webnative\n /\n @Prop({ mutable: true }) public checked?: boolean\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the chip 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-chip>` is associated\n * with its ancestor `<form>` element, if any.\n \n This property lets you associate `<qds-chip>` 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 Prevents the chip from being interacted with: it cannot be pressed or\n * focused.\n \n /\n @Prop() public readonly disabled?: boolean\n\n /*\n The name of the chip, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Specify whether the chip should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n /\n The value of the chip, submitted as a name/value pair with form data.\n \n @webnative\n /\n @Prop() public readonly value?: Value = 'on'\n\n /\n Emitted when the chip loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip is closed.\n /\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /\n Emitted when a change to the selectable chip's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsChipElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @State() private isPressed = false\n\n private savedTabindex?: string\n\n private inheritedAttributes: Attributes = {}\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedType(): ChipType {\n switch (this.type) {\n case 'selectable':\n case 'closable': {\n return this.type\n }\n default: {\n return 'selectable'\n }\n }\n }\n\n private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n private get computedChecked(): boolean {\n return this.checked ?? false\n }\n\n private get computedValue(): string \| null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n if (this.computedType === 'selectable') {\n this.checked = !this.computedChecked\n this.changeEmitter.emit()\n }\n }\n\n @Listen('keydown')\n protected handleKeyDown(event: KeyboardEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (event.key === ' ') {\n this.isPressed = true\n event.preventDefault()\n } else if (event.key === 'Enter') {\n if (this.internals.form) {\n this.internals.form.requestSubmit()\n event.preventDefault()\n }\n\n if (this.computedType === 'closable') this.closeEmitter.emit()\n }\n }\n\n @Listen('keyup')\n protected handleKeyUp(event: KeyboardEvent): void {\n if (event.key !== ' ') return\n\n this.isPressed = false\n if (this.computedType === 'closable') this.closeEmitter.emit()\n else {\n this.checked = !this.computedChecked\n this.changeEmitter.emit()\n }\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.computedChecked && !this.computedDisabled\n ? this.computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.computedChecked && !this.computedDisabled) {\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: this.savedTabindex,\n }\n this.internals.setFormValue(this.computedValue)\n } else {\n this.savedTabindex = this.inheritedAttributes.tabindex\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: undefined,\n }\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n }\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n if (this.computedDisabled) this.savedTabindex = newValue\n else\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: newValue,\n }\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.computedChecked && !this.computedDisabled)\n this.internals.setFormValue(this.computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n Object.defineProperty(this.element, 'form', {\n enumerable: true,\n get: () => this.internals.form,\n })\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <Host>\n {this.computedType === 'closable' && (\n <div\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-container': true,\n 'qds-closable-chip': true,\n 'qds-pressed-state': this.isPressed,\n }}\n data-size={this.computedSize}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n <button\n aria-label=\"close\"\n class=\"qds-target\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\n onClick={this.onIconClick}\n tabIndex={this.computedDisabled ? -1 : -1}\n type=\"button\"\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"close\"\n />\n </button>\n </div>\n )}\n {this.computedType === 'selectable' && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label aria-disabled={this.computedDisabled.toString()}>\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n checked={this.checked}\n class=\"qds-checkbox\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\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\n class={{\n 'qds-container': true,\n 'qds-pressed-state': this.isPressed,\n 'qds-padding-end': true,\n 'qds-cursor': true,\n }}\n data-size={this.computedSize}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n {(this.checked ?? false) && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"checked\"\n />\n )}\n </div>\n </label>\n )}\n </Host>\n )\n }\n\n private readonly close = (): void => {\n this.closeEmitter.emit()\n }\n\n private readonly onIconClick = (event: MouseEvent): void => {\n if (!event.defaultPrevented && this.computedType === 'closable')\n this.close()\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}

package/components/qds-title.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { i as inheritAriaAttributes } from './helpers.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n    'title'\n    'subtitle';grid-template-columns:auto 1fr}.qds-has-icon{grid-template-areas:'.    kicker'\n    'icon title'\n    '.    subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}.qds-titles[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-web-main-section-hero);text-align:center;margin:auto}[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}.qds-titles[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-web-main-section-display)}[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection){align-items:center;gap:var(--qds-web-main-subsection-card)}[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-web-main-section-hero)}[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
+const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n    'title'\n    'subtitle';grid-template-columns:auto 1fr}.qds-has-icon{grid-template-areas:'.    kicker'\n    'icon title'\n    '.    subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}.qds-titles[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap);text-align:center;margin:auto}[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}.qds-titles[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection){align-items:center;gap:var(--qds-main-subsection-card-titles-gap)}[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
 const QdsTitleStyle0 = titleCss;
 const Title = /*@__PURE__*/ proxyCustomElement(class Title extends HTMLElement {

package/components/qds-title.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-title.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,qvQAAqvQ,CAAC;AACvwQ,uBAAe,QAAQ;;MC2BV,KAAK;;;;;QAuCR,wBAAmB,GAAe,EAAE,CAAA;;;2BAvBE,SAAS;;qBAOf,MAAM;qBAEN,SAAS;;mBAUb,IAAI;;IAMxC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAE5B,QACE,+EACgB,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS;YAC1B,IAAI,CAAC,QAAQ,KAAK,EAAE;YACpB,IAAI,CAAC,OAAO,KAAK,WAAW,KAC1B,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACI,EACV;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n grid-template-columns: auto 1fr;\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-web-main-section-hero);\n text-align: center;\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-web-main-section-display);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n align-items: center;\n gap: var(--qds-web-main-subsection-card);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-web-main-section-hero);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' \| 'main' \| 'navigation' \| 'panel' \| 'popup'\nexport type Level = 'root' \| 'section' \| 'subsection'\nexport type Tag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\nexport type TitleVariant =\n \| 'web-main-section-display'\n \| 'web-main-section-hero'\n \| 'web-main-subsection-card'\n \| 'web-promo'\n\n/\n @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n /\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /\n The title's variant.\n /\n @Prop() public readonly variant?: TitleVariant\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n\n return (\n <hgroup\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined &&\n this.iconName !== '' &&\n this.variant !== 'web-promo' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
1	+ {"file":"qds-title.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,ixQAAixQ,CAAC;AACnyQ,uBAAe,QAAQ;;MC2BV,KAAK;;;;;QAuCR,wBAAmB,GAAe,EAAE,CAAA;;;2BAvBE,SAAS;;qBAOf,MAAM;qBAEN,SAAS;;mBAUb,IAAI;;IAMxC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAE5B,QACE,+EACgB,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS;YAC1B,IAAI,CAAC,QAAQ,KAAK,EAAE;YACpB,IAAI,CAAC,OAAO,KAAK,WAAW,KAC1B,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACI,EACV;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n grid-template-columns: auto 1fr;\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n text-align: center;\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n align-items: center;\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' \| 'main' \| 'navigation' \| 'panel' \| 'popup'\nexport type Level = 'root' \| 'section' \| 'subsection'\nexport type Tag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\nexport type TitleVariant =\n \| 'web-main-section-display'\n \| 'web-main-section-hero'\n \| 'web-main-subsection-card'\n \| 'web-promo'\n\n/\n @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n /\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /\n The title's variant.\n /\n @Prop() public readonly variant?: TitleVariant\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n\n return (\n <hgroup\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined &&\n this.iconName !== '' &&\n this.variant !== 'web-promo' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}

package/dist/cjs/qds-chip.cjs.entry.js CHANGED Viewed

@@ -126,8 +126,10 @@ const Chip = class {
         this.isPressed = false;
         if (this.computedType === 'closable')
             this.closeEmitter.emit();
-        else
+        else {
+            this.checked = !this.computedChecked;
             this.changeEmitter.emit();
+        }
     }
     checkedChanged() {
         this.internals.setFormValue(this.computedChecked && !this.computedDisabled
@@ -178,7 +180,7 @@ const Chip = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '8898971924de5e4a864a86ae3ccd0d110fcb7347' }, this.computedType === 'closable' && (index.h("div", { "aria-disabled": this.computedDisabled.toString(), class: {
+        return (index.h(index.Host, { key: 'ce7fa84da98ec365b86fd23321c82daa723d0cf2' }, this.computedType === 'closable' && (index.h("div", { "aria-disabled": this.computedDisabled.toString(), class: {
                 'qds-container': true,
                 'qds-closable-chip': true,
                 'qds-pressed-state': this.isPressed,

package/dist/cjs/qds-chip.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-chip.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","inheritAttributes","h","Host"],"sources":["src/components/chip/chip.css?tag=qds-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-target {\n appearance: none;\n display: flex;\n border: none;\n padding: 0;\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n pointer-events: auto;\n\n &:disabled {\n pointer-events: none;\n }\n}\n\n.qds-alignment {\n display: flex;\n align-items: center;\n}\n\n.qds-cursor {\n cursor: pointer;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-closable-chip,\n.qds-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-block: 0;\n user-select: none;\n white-space: nowrap;\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n border-radius: var(--qds-control-rounded-border-radius);\n color: var(--qds-theme-control-text-standard);\n background-color: initial;\n appearance: none;\n}\n\n.qds-closable-chip {\n pointer-events: none;\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\n.qds-container:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n}\n\n.qds-checkbox:active ~ .qds-container,\n.qds-closable-chip:has(.qds-target:active),\n.qds-container.qds-pressed-state {\n background-color: var(--qds-theme-interactive-background-pressed);\n}\n\n.qds-checkbox {\n clip-path: inset(50%);\n margin: 0;\n position: absolute;\n white-space: nowrap;\n\n &:focus-visible ~ .qds-container {\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[data-size='small'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-chip-small-padding-horizontal);\n gap: var(--qds-control-small-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-small-height);\n\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-small-text);\n }\n}\n\n[data-size='standard'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n gap: var(--qds-control-standard-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-standard-height);\n\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-standard-text);\n }\n}\n\n[data-size='large'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-chip-large-padding-horizontal);\n gap: var(--qds-control-large-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-large-height);\n\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-large-text);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} 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'\nimport type { Size } from '../shared'\n\nexport type ChipType = 'closable' \| 'selectable'\n\n/\n `<qds-chip>` elements are interactive elements that represent selections.\n * Chips allow users to make a selection from a list of options or display\n * items like filters or tags.\n \n @see https://quartz.se.com/build/components/chip\n /\n@Component({\n tag: 'qds-chip',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.css',\n})\nexport class Chip implements ComponentInterface {\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n The chip's size.\n /\n @Prop() public readonly size: Size = 'standard'\n\n /\n The chip's type.\n /\n @Prop() public readonly type?: ChipType = 'selectable'\n\n /\n The chip's text.\n /\n @Prop() public readonly text?: string\n\n /\n Sets the selectable chip's state.\n \n @webnative\n /\n @Prop({ mutable: true }) public checked?: boolean\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the chip 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-chip>` is associated\n * with its ancestor `<form>` element, if any.\n \n This property lets you associate `<qds-chip>` 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 Prevents the chip from being interacted with: it cannot be pressed or\n * focused.\n \n /\n @Prop() public readonly disabled?: boolean\n\n /*\n The name of the chip, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Specify whether the chip should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n /\n The value of the chip, submitted as a name/value pair with form data.\n \n @webnative\n /\n @Prop() public readonly value?: Value = 'on'\n\n /\n Emitted when the chip loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip is closed.\n /\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /\n Emitted when a change to the selectable chip's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsChipElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @State() private isPressed = false\n\n private savedTabindex?: string\n\n private inheritedAttributes: Attributes = {}\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedType(): ChipType {\n switch (this.type) {\n case 'selectable':\n case 'closable': {\n return this.type\n }\n default: {\n return 'selectable'\n }\n }\n }\n\n private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n private get computedChecked(): boolean {\n return this.checked ?? false\n }\n\n private get computedValue(): string \| null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n if (this.computedType === 'selectable') {\n this.checked = !this.computedChecked\n this.changeEmitter.emit()\n }\n }\n\n @Listen('keydown')\n protected handleKeyDown(event: KeyboardEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (event.key === ' ') {\n this.isPressed = true\n event.preventDefault()\n } else if (event.key === 'Enter') {\n if (this.internals.form) {\n this.internals.form.requestSubmit()\n event.preventDefault()\n }\n\n if (this.computedType === 'closable') this.closeEmitter.emit()\n }\n }\n\n @Listen('keyup')\n protected handleKeyUp(event: KeyboardEvent): void {\n if (event.key !== ' ') return\n\n this.isPressed = false\n if (this.computedType === 'closable') this.closeEmitter.emit()\n else this.changeEmitter.emit()\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.computedChecked && !this.computedDisabled\n ? this.computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.computedChecked && !this.computedDisabled) {\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: this.savedTabindex,\n }\n this.internals.setFormValue(this.computedValue)\n } else {\n this.savedTabindex = this.inheritedAttributes.tabindex\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: undefined,\n }\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n }\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n if (this.computedDisabled) this.savedTabindex = newValue\n else\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: newValue,\n }\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.computedChecked && !this.computedDisabled)\n this.internals.setFormValue(this.computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n Object.defineProperty(this.element, 'form', {\n enumerable: true,\n get: () => this.internals.form,\n })\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <Host>\n {this.computedType === 'closable' && (\n <div\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-container': true,\n 'qds-closable-chip': true,\n 'qds-pressed-state': this.isPressed,\n }}\n data-size={this.computedSize}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n <button\n aria-label=\"close\"\n class=\"qds-target\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\n onClick={this.onIconClick}\n tabIndex={this.computedDisabled ? -1 : -1}\n type=\"button\"\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"close\"\n />\n </button>\n </div>\n )}\n {this.computedType === 'selectable' && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label aria-disabled={this.computedDisabled.toString()}>\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n checked={this.checked}\n class=\"qds-checkbox\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\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\n class={{\n 'qds-container': true,\n 'qds-pressed-state': this.isPressed,\n 'qds-padding-end': true,\n 'qds-cursor': true,\n }}\n data-size={this.computedSize}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n {(this.checked ?? false) && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"checked\"\n />\n )}\n </div>\n </label>\n )}\n </Host>\n )\n }\n\n private readonly close = (): void => {\n this.closeEmitter.emit()\n }\n\n private readonly onIconClick = (event: MouseEvent): void => {\n if (!event.defaultPrevented && this.computedType === 'closable')\n this.close()\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1	+ {"file":"qds-chip.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","inheritAttributes","h","Host"],"sources":["src/components/chip/chip.css?tag=qds-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-target {\n appearance: none;\n display: flex;\n border: none;\n padding: 0;\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n pointer-events: auto;\n\n &:disabled {\n pointer-events: none;\n }\n}\n\n.qds-alignment {\n display: flex;\n align-items: center;\n}\n\n.qds-cursor {\n cursor: pointer;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-closable-chip,\n.qds-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-block: 0;\n user-select: none;\n white-space: nowrap;\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n border-radius: var(--qds-control-rounded-border-radius);\n color: var(--qds-theme-control-text-standard);\n background-color: initial;\n appearance: none;\n}\n\n.qds-closable-chip {\n pointer-events: none;\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\n.qds-container:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n}\n\n.qds-checkbox:active ~ .qds-container,\n.qds-closable-chip:has(.qds-target:active),\n.qds-container.qds-pressed-state {\n background-color: var(--qds-theme-interactive-background-pressed);\n}\n\n.qds-checkbox {\n clip-path: inset(50%);\n margin: 0;\n position: absolute;\n white-space: nowrap;\n\n &:focus-visible ~ .qds-container {\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[data-size='small'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-chip-small-padding-horizontal);\n gap: var(--qds-control-small-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-small-height);\n\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-small-text);\n }\n}\n\n[data-size='standard'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n gap: var(--qds-control-standard-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-standard-height);\n\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-standard-text);\n }\n}\n\n[data-size='large'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-chip-large-padding-horizontal);\n gap: var(--qds-control-large-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-large-height);\n\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-large-text);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} 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'\nimport type { Size } from '../shared'\n\nexport type ChipType = 'closable' \| 'selectable'\n\n/\n `<qds-chip>` elements are interactive elements that represent selections.\n * Chips allow users to make a selection from a list of options or display\n * items like filters or tags.\n \n @see https://quartz.se.com/build/components/chip\n /\n@Component({\n tag: 'qds-chip',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.css',\n})\nexport class Chip implements ComponentInterface {\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n The chip's size.\n /\n @Prop() public readonly size: Size = 'standard'\n\n /\n The chip's type.\n /\n @Prop() public readonly type?: ChipType = 'selectable'\n\n /\n The chip's text.\n /\n @Prop() public readonly text?: string\n\n /\n Sets the selectable chip's state.\n \n @webnative\n /\n @Prop({ mutable: true }) public checked?: boolean\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the chip 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-chip>` is associated\n * with its ancestor `<form>` element, if any.\n \n This property lets you associate `<qds-chip>` 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 Prevents the chip from being interacted with: it cannot be pressed or\n * focused.\n \n /\n @Prop() public readonly disabled?: boolean\n\n /*\n The name of the chip, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Specify whether the chip should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n /\n The value of the chip, submitted as a name/value pair with form data.\n \n @webnative\n /\n @Prop() public readonly value?: Value = 'on'\n\n /\n Emitted when the chip loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip is closed.\n /\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /\n Emitted when a change to the selectable chip's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsChipElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @State() private isPressed = false\n\n private savedTabindex?: string\n\n private inheritedAttributes: Attributes = {}\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedType(): ChipType {\n switch (this.type) {\n case 'selectable':\n case 'closable': {\n return this.type\n }\n default: {\n return 'selectable'\n }\n }\n }\n\n private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n private get computedChecked(): boolean {\n return this.checked ?? false\n }\n\n private get computedValue(): string \| null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n if (this.computedType === 'selectable') {\n this.checked = !this.computedChecked\n this.changeEmitter.emit()\n }\n }\n\n @Listen('keydown')\n protected handleKeyDown(event: KeyboardEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (event.key === ' ') {\n this.isPressed = true\n event.preventDefault()\n } else if (event.key === 'Enter') {\n if (this.internals.form) {\n this.internals.form.requestSubmit()\n event.preventDefault()\n }\n\n if (this.computedType === 'closable') this.closeEmitter.emit()\n }\n }\n\n @Listen('keyup')\n protected handleKeyUp(event: KeyboardEvent): void {\n if (event.key !== ' ') return\n\n this.isPressed = false\n if (this.computedType === 'closable') this.closeEmitter.emit()\n else {\n this.checked = !this.computedChecked\n this.changeEmitter.emit()\n }\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.computedChecked && !this.computedDisabled\n ? this.computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.computedChecked && !this.computedDisabled) {\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: this.savedTabindex,\n }\n this.internals.setFormValue(this.computedValue)\n } else {\n this.savedTabindex = this.inheritedAttributes.tabindex\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: undefined,\n }\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n }\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n if (this.computedDisabled) this.savedTabindex = newValue\n else\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: newValue,\n }\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.computedChecked && !this.computedDisabled)\n this.internals.setFormValue(this.computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n Object.defineProperty(this.element, 'form', {\n enumerable: true,\n get: () => this.internals.form,\n })\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <Host>\n {this.computedType === 'closable' && (\n <div\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-container': true,\n 'qds-closable-chip': true,\n 'qds-pressed-state': this.isPressed,\n }}\n data-size={this.computedSize}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n <button\n aria-label=\"close\"\n class=\"qds-target\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\n onClick={this.onIconClick}\n tabIndex={this.computedDisabled ? -1 : -1}\n type=\"button\"\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"close\"\n />\n </button>\n </div>\n )}\n {this.computedType === 'selectable' && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label aria-disabled={this.computedDisabled.toString()}>\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n checked={this.checked}\n class=\"qds-checkbox\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\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\n class={{\n 'qds-container': true,\n 'qds-pressed-state': this.isPressed,\n 'qds-padding-end': true,\n 'qds-cursor': true,\n }}\n data-size={this.computedSize}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n {(this.checked ?? false) && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"checked\"\n />\n )}\n </div>\n </label>\n )}\n </Host>\n )\n }\n\n private readonly close = (): void => {\n this.closeEmitter.emit()\n }\n\n private readonly onIconClick = (event: MouseEvent): void => {\n if (!event.defaultPrevented && this.computedType === 'closable')\n this.close()\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}

package/dist/cjs/qds-title.cjs.entry.js CHANGED Viewed

@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-584d4de9.js');
 const helpers = require('./helpers-cc2fda81.js');
-const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n    'title'\n    'subtitle';grid-template-columns:auto 1fr}.qds-has-icon{grid-template-areas:'.    kicker'\n    'icon title'\n    '.    subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}.qds-titles[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-web-main-section-hero);text-align:center;margin:auto}[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}.qds-titles[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-web-main-section-display)}[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection){align-items:center;gap:var(--qds-web-main-subsection-card)}[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-web-main-section-hero)}[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
+const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n    'title'\n    'subtitle';grid-template-columns:auto 1fr}.qds-has-icon{grid-template-areas:'.    kicker'\n    'icon title'\n    '.    subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}.qds-titles[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap);text-align:center;margin:auto}[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}.qds-titles[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection){align-items:center;gap:var(--qds-main-subsection-card-titles-gap)}[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
 const QdsTitleStyle0 = titleCss;
 const Title = class {

package/dist/cjs/qds-title.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-title.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,qvQAAqvQ,CAAC;AACvwQ,uBAAe,QAAQ;;MC2BV,KAAK;;;QAuCR,wBAAmB,GAAe,EAAE,CAAA;;;2BAvBE,SAAS;;qBAOf,MAAM;qBAEN,SAAS;;mBAUb,IAAI;;IAMxC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAGA,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAE5B,QACEC,qFACgB,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5BA,QAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/CA,oEAAQ,CACJ,EACL,IAAI,CAAC,WAAW,IAAIA,eAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAIA,eAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS;YAC1B,IAAI,CAAC,QAAQ,KAAK,EAAE;YACpB,IAAI,CAAC,OAAO,KAAK,WAAW,KAC1BA,sBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACI,EACV;KACF;;;;;;;","names":["inheritAriaAttributes","h"],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n grid-template-columns: auto 1fr;\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-web-main-section-hero);\n text-align: center;\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-web-main-section-display);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n align-items: center;\n gap: var(--qds-web-main-subsection-card);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-web-main-section-hero);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' \| 'main' \| 'navigation' \| 'panel' \| 'popup'\nexport type Level = 'root' \| 'section' \| 'subsection'\nexport type Tag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\nexport type TitleVariant =\n \| 'web-main-section-display'\n \| 'web-main-section-hero'\n \| 'web-main-subsection-card'\n \| 'web-promo'\n\n/\n @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n /\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /\n The title's variant.\n /\n @Prop() public readonly variant?: TitleVariant\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n\n return (\n <hgroup\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined &&\n this.iconName !== '' &&\n this.variant !== 'web-promo' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
1	+ {"file":"qds-title.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,ixQAAixQ,CAAC;AACnyQ,uBAAe,QAAQ;;MC2BV,KAAK;;;QAuCR,wBAAmB,GAAe,EAAE,CAAA;;;2BAvBE,SAAS;;qBAOf,MAAM;qBAEN,SAAS;;mBAUb,IAAI;;IAMxC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAGA,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAE5B,QACEC,qFACgB,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5BA,QAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/CA,oEAAQ,CACJ,EACL,IAAI,CAAC,WAAW,IAAIA,eAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAIA,eAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS;YAC1B,IAAI,CAAC,QAAQ,KAAK,EAAE;YACpB,IAAI,CAAC,OAAO,KAAK,WAAW,KAC1BA,sBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACI,EACV;KACF;;;;;;;","names":["inheritAriaAttributes","h"],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n grid-template-columns: auto 1fr;\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n text-align: center;\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n align-items: center;\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' \| 'main' \| 'navigation' \| 'panel' \| 'popup'\nexport type Level = 'root' \| 'section' \| 'subsection'\nexport type Tag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\nexport type TitleVariant =\n \| 'web-main-section-display'\n \| 'web-main-section-hero'\n \| 'web-main-subsection-card'\n \| 'web-promo'\n\n/\n @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n /\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /\n The title's variant.\n /\n @Prop() public readonly variant?: TitleVariant\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n\n return (\n <hgroup\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined &&\n this.iconName !== '' &&\n this.variant !== 'web-promo' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}

package/dist/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-05-22T12:04:10",
+  "timestamp": "2024-05-22T20:56:33",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.12.0",

package/dist/esm/qds-chip.entry.js CHANGED Viewed

@@ -122,8 +122,10 @@ const Chip = class {
         this.isPressed = false;
         if (this.computedType === 'closable')
             this.closeEmitter.emit();
-        else
+        else {
+            this.checked = !this.computedChecked;
             this.changeEmitter.emit();
+        }
     }
     checkedChanged() {
         this.internals.setFormValue(this.computedChecked && !this.computedDisabled
@@ -174,7 +176,7 @@ const Chip = class {
         };
     }
     render() {
-        return (h(Host, { key: '8898971924de5e4a864a86ae3ccd0d110fcb7347' }, this.computedType === 'closable' && (h("div", { "aria-disabled": this.computedDisabled.toString(), class: {
+        return (h(Host, { key: 'ce7fa84da98ec365b86fd23321c82daa723d0cf2' }, this.computedType === 'closable' && (h("div", { "aria-disabled": this.computedDisabled.toString(), class: {
                 'qds-container': true,
                 'qds-closable-chip': true,
                 'qds-pressed-state': this.isPressed,

package/dist/esm/qds-chip.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-chip.entry.js","mappings":"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","names":[],"sources":["src/components/chip/chip.css?tag=qds-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-target {\n appearance: none;\n display: flex;\n border: none;\n padding: 0;\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n pointer-events: auto;\n\n &:disabled {\n pointer-events: none;\n }\n}\n\n.qds-alignment {\n display: flex;\n align-items: center;\n}\n\n.qds-cursor {\n cursor: pointer;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-closable-chip,\n.qds-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-block: 0;\n user-select: none;\n white-space: nowrap;\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n border-radius: var(--qds-control-rounded-border-radius);\n color: var(--qds-theme-control-text-standard);\n background-color: initial;\n appearance: none;\n}\n\n.qds-closable-chip {\n pointer-events: none;\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\n.qds-container:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n}\n\n.qds-checkbox:active ~ .qds-container,\n.qds-closable-chip:has(.qds-target:active),\n.qds-container.qds-pressed-state {\n background-color: var(--qds-theme-interactive-background-pressed);\n}\n\n.qds-checkbox {\n clip-path: inset(50%);\n margin: 0;\n position: absolute;\n white-space: nowrap;\n\n &:focus-visible ~ .qds-container {\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[data-size='small'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-chip-small-padding-horizontal);\n gap: var(--qds-control-small-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-small-height);\n\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-small-text);\n }\n}\n\n[data-size='standard'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n gap: var(--qds-control-standard-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-standard-height);\n\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-standard-text);\n }\n}\n\n[data-size='large'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-chip-large-padding-horizontal);\n gap: var(--qds-control-large-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-large-height);\n\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-large-text);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} 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'\nimport type { Size } from '../shared'\n\nexport type ChipType = 'closable' \| 'selectable'\n\n/\n `<qds-chip>` elements are interactive elements that represent selections.\n * Chips allow users to make a selection from a list of options or display\n * items like filters or tags.\n \n @see https://quartz.se.com/build/components/chip\n /\n@Component({\n tag: 'qds-chip',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.css',\n})\nexport class Chip implements ComponentInterface {\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n The chip's size.\n /\n @Prop() public readonly size: Size = 'standard'\n\n /\n The chip's type.\n /\n @Prop() public readonly type?: ChipType = 'selectable'\n\n /\n The chip's text.\n /\n @Prop() public readonly text?: string\n\n /\n Sets the selectable chip's state.\n \n @webnative\n /\n @Prop({ mutable: true }) public checked?: boolean\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the chip 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-chip>` is associated\n * with its ancestor `<form>` element, if any.\n \n This property lets you associate `<qds-chip>` 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 Prevents the chip from being interacted with: it cannot be pressed or\n * focused.\n \n /\n @Prop() public readonly disabled?: boolean\n\n /*\n The name of the chip, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Specify whether the chip should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n /\n The value of the chip, submitted as a name/value pair with form data.\n \n @webnative\n /\n @Prop() public readonly value?: Value = 'on'\n\n /\n Emitted when the chip loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip is closed.\n /\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /\n Emitted when a change to the selectable chip's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsChipElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @State() private isPressed = false\n\n private savedTabindex?: string\n\n private inheritedAttributes: Attributes = {}\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedType(): ChipType {\n switch (this.type) {\n case 'selectable':\n case 'closable': {\n return this.type\n }\n default: {\n return 'selectable'\n }\n }\n }\n\n private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n private get computedChecked(): boolean {\n return this.checked ?? false\n }\n\n private get computedValue(): string \| null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n if (this.computedType === 'selectable') {\n this.checked = !this.computedChecked\n this.changeEmitter.emit()\n }\n }\n\n @Listen('keydown')\n protected handleKeyDown(event: KeyboardEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (event.key === ' ') {\n this.isPressed = true\n event.preventDefault()\n } else if (event.key === 'Enter') {\n if (this.internals.form) {\n this.internals.form.requestSubmit()\n event.preventDefault()\n }\n\n if (this.computedType === 'closable') this.closeEmitter.emit()\n }\n }\n\n @Listen('keyup')\n protected handleKeyUp(event: KeyboardEvent): void {\n if (event.key !== ' ') return\n\n this.isPressed = false\n if (this.computedType === 'closable') this.closeEmitter.emit()\n else this.changeEmitter.emit()\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.computedChecked && !this.computedDisabled\n ? this.computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.computedChecked && !this.computedDisabled) {\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: this.savedTabindex,\n }\n this.internals.setFormValue(this.computedValue)\n } else {\n this.savedTabindex = this.inheritedAttributes.tabindex\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: undefined,\n }\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n }\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n if (this.computedDisabled) this.savedTabindex = newValue\n else\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: newValue,\n }\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.computedChecked && !this.computedDisabled)\n this.internals.setFormValue(this.computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n Object.defineProperty(this.element, 'form', {\n enumerable: true,\n get: () => this.internals.form,\n })\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <Host>\n {this.computedType === 'closable' && (\n <div\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-container': true,\n 'qds-closable-chip': true,\n 'qds-pressed-state': this.isPressed,\n }}\n data-size={this.computedSize}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n <button\n aria-label=\"close\"\n class=\"qds-target\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\n onClick={this.onIconClick}\n tabIndex={this.computedDisabled ? -1 : -1}\n type=\"button\"\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"close\"\n />\n </button>\n </div>\n )}\n {this.computedType === 'selectable' && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label aria-disabled={this.computedDisabled.toString()}>\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n checked={this.checked}\n class=\"qds-checkbox\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\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\n class={{\n 'qds-container': true,\n 'qds-pressed-state': this.isPressed,\n 'qds-padding-end': true,\n 'qds-cursor': true,\n }}\n data-size={this.computedSize}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n {(this.checked ?? false) && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"checked\"\n />\n )}\n </div>\n </label>\n )}\n </Host>\n )\n }\n\n private readonly close = (): void => {\n this.closeEmitter.emit()\n }\n\n private readonly onIconClick = (event: MouseEvent): void => {\n if (!event.defaultPrevented && this.computedType === 'closable')\n this.close()\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1	+ {"file":"qds-chip.entry.js","mappings":"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","names":[],"sources":["src/components/chip/chip.css?tag=qds-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-target {\n appearance: none;\n display: flex;\n border: none;\n padding: 0;\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n pointer-events: auto;\n\n &:disabled {\n pointer-events: none;\n }\n}\n\n.qds-alignment {\n display: flex;\n align-items: center;\n}\n\n.qds-cursor {\n cursor: pointer;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-closable-chip,\n.qds-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-block: 0;\n user-select: none;\n white-space: nowrap;\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n border-radius: var(--qds-control-rounded-border-radius);\n color: var(--qds-theme-control-text-standard);\n background-color: initial;\n appearance: none;\n}\n\n.qds-closable-chip {\n pointer-events: none;\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\n.qds-container:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n}\n\n.qds-checkbox:active ~ .qds-container,\n.qds-closable-chip:has(.qds-target:active),\n.qds-container.qds-pressed-state {\n background-color: var(--qds-theme-interactive-background-pressed);\n}\n\n.qds-checkbox {\n clip-path: inset(50%);\n margin: 0;\n position: absolute;\n white-space: nowrap;\n\n &:focus-visible ~ .qds-container {\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[data-size='small'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-chip-small-padding-horizontal);\n gap: var(--qds-control-small-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-small-height);\n\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-small-text);\n }\n}\n\n[data-size='standard'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n gap: var(--qds-control-standard-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-standard-height);\n\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-standard-text);\n }\n}\n\n[data-size='large'] {\n &.qds-closable-chip,\n &.qds-container {\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-chip-large-padding-horizontal);\n gap: var(--qds-control-large-gap-internal);\n }\n\n &.qds-icon {\n --qds-icon-click-target-size: var(--qds-control-large-height);\n\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n\n &.qds-text {\n font: var(--qds-control-large-text);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} 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'\nimport type { Size } from '../shared'\n\nexport type ChipType = 'closable' \| 'selectable'\n\n/\n `<qds-chip>` elements are interactive elements that represent selections.\n * Chips allow users to make a selection from a list of options or display\n * items like filters or tags.\n \n @see https://quartz.se.com/build/components/chip\n /\n@Component({\n tag: 'qds-chip',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'chip.css',\n})\nexport class Chip implements ComponentInterface {\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n The chip's size.\n /\n @Prop() public readonly size: Size = 'standard'\n\n /\n The chip's type.\n /\n @Prop() public readonly type?: ChipType = 'selectable'\n\n /\n The chip's text.\n /\n @Prop() public readonly text?: string\n\n /\n Sets the selectable chip's state.\n \n @webnative\n /\n @Prop({ mutable: true }) public checked?: boolean\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the chip 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-chip>` is associated\n * with its ancestor `<form>` element, if any.\n \n This property lets you associate `<qds-chip>` 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 Prevents the chip from being interacted with: it cannot be pressed or\n * focused.\n \n /\n @Prop() public readonly disabled?: boolean\n\n /*\n The name of the chip, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Specify whether the chip should have focus when the page loads.\n \n @webnative\n /\n @Prop({ attribute: 'autofocus' }) public readonly autoFocus?: boolean\n\n /\n The value of the chip, submitted as a name/value pair with form data.\n \n @webnative\n /\n @Prop() public readonly value?: Value = 'on'\n\n /\n Emitted when the chip loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip gains focus.\n /\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the chip is closed.\n /\n @Event({ eventName: 'qdsClose', cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n /\n Emitted when a change to the selectable chip's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n @Element() private readonly element!: HTMLQdsChipElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n @State() private isPressed = false\n\n private savedTabindex?: string\n\n private inheritedAttributes: Attributes = {}\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedType(): ChipType {\n switch (this.type) {\n case 'selectable':\n case 'closable': {\n return this.type\n }\n default: {\n return 'selectable'\n }\n }\n }\n\n private get computedTabIndex(): number {\n const parsedValue = Number.parseInt(\n this.inheritedAttributes.tabindex ?? '0',\n 10,\n )\n return Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n private get computedChecked(): boolean {\n return this.checked ?? false\n }\n\n private get computedValue(): string \| null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n if (this.computedType === 'selectable') {\n this.checked = !this.computedChecked\n this.changeEmitter.emit()\n }\n }\n\n @Listen('keydown')\n protected handleKeyDown(event: KeyboardEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (event.key === ' ') {\n this.isPressed = true\n event.preventDefault()\n } else if (event.key === 'Enter') {\n if (this.internals.form) {\n this.internals.form.requestSubmit()\n event.preventDefault()\n }\n\n if (this.computedType === 'closable') this.closeEmitter.emit()\n }\n }\n\n @Listen('keyup')\n protected handleKeyUp(event: KeyboardEvent): void {\n if (event.key !== ' ') return\n\n this.isPressed = false\n if (this.computedType === 'closable') this.closeEmitter.emit()\n else {\n this.checked = !this.computedChecked\n this.changeEmitter.emit()\n }\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.computedChecked && !this.computedDisabled\n ? this.computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.computedChecked && !this.computedDisabled) {\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: this.savedTabindex,\n }\n this.internals.setFormValue(this.computedValue)\n } else {\n this.savedTabindex = this.inheritedAttributes.tabindex\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: undefined,\n }\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n }\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n if (this.computedDisabled) this.savedTabindex = newValue\n else\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: newValue,\n }\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.computedChecked && !this.computedDisabled)\n this.internals.setFormValue(this.computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n Object.defineProperty(this.element, 'form', {\n enumerable: true,\n get: () => this.internals.form,\n })\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public render() {\n return (\n <Host>\n {this.computedType === 'closable' && (\n <div\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-container': true,\n 'qds-closable-chip': true,\n 'qds-pressed-state': this.isPressed,\n }}\n data-size={this.computedSize}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n <button\n aria-label=\"close\"\n class=\"qds-target\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\n onClick={this.onIconClick}\n tabIndex={this.computedDisabled ? -1 : -1}\n type=\"button\"\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"close\"\n />\n </button>\n </div>\n )}\n {this.computedType === 'selectable' && (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label aria-disabled={this.computedDisabled.toString()}>\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n checked={this.checked}\n class=\"qds-checkbox\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\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\n class={{\n 'qds-container': true,\n 'qds-pressed-state': this.isPressed,\n 'qds-padding-end': true,\n 'qds-cursor': true,\n }}\n data-size={this.computedSize}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <span class=\"qds-text\" data-size={this.computedSize}>\n {this.text}\n </span>\n {(this.checked ?? false) && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"checked\"\n />\n )}\n </div>\n </label>\n )}\n </Host>\n )\n }\n\n private readonly close = (): void => {\n this.closeEmitter.emit()\n }\n\n private readonly onIconClick = (event: MouseEvent): void => {\n if (!event.defaultPrevented && this.computedType === 'closable')\n this.close()\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}

package/dist/esm/qds-title.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@
 import { r as registerInstance, h, a as getElement } from './index-8135df23.js';
 import { i as inheritAriaAttributes } from './helpers-ff47826f.js';
-const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n    'title'\n    'subtitle';grid-template-columns:auto 1fr}.qds-has-icon{grid-template-areas:'.    kicker'\n    'icon title'\n    '.    subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}.qds-titles[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-web-main-section-hero);text-align:center;margin:auto}[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}.qds-titles[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-web-main-section-display)}[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection){align-items:center;gap:var(--qds-web-main-subsection-card)}[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-web-main-section-hero)}[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
+const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n    'title'\n    'subtitle';grid-template-columns:auto 1fr}.qds-has-icon{grid-template-areas:'.    kicker'\n    'icon title'\n    '.    subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}.qds-titles[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap);text-align:center;margin:auto}[data-variant='web-promo']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}.qds-titles[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant='web-main-section-display']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection){align-items:center;gap:var(--qds-main-subsection-card-titles-gap)}[data-variant='web-main-subsection-card']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant='web-main-section-hero']:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
 const QdsTitleStyle0 = titleCss;
 const Title = class {

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

	@@ -1 +1 @@
1	- {"file":"qds-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,qvQAAqvQ,CAAC;AACvwQ,uBAAe,QAAQ;;MC2BV,KAAK;;;QAuCR,wBAAmB,GAAe,EAAE,CAAA;;;2BAvBE,SAAS;;qBAOf,MAAM;qBAEN,SAAS;;mBAUb,IAAI;;IAMxC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAE5B,QACE,+EACgB,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS;YAC1B,IAAI,CAAC,QAAQ,KAAK,EAAE;YACpB,IAAI,CAAC,OAAO,KAAK,WAAW,KAC1B,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACI,EACV;KACF;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n grid-template-columns: auto 1fr;\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-web-main-section-hero);\n text-align: center;\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-web-main-section-display);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n align-items: center;\n gap: var(--qds-web-main-subsection-card);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-web-main-section-hero);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' \| 'main' \| 'navigation' \| 'panel' \| 'popup'\nexport type Level = 'root' \| 'section' \| 'subsection'\nexport type Tag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\nexport type TitleVariant =\n \| 'web-main-section-display'\n \| 'web-main-section-hero'\n \| 'web-main-subsection-card'\n \| 'web-promo'\n\n/\n @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n /\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /\n The title's variant.\n /\n @Prop() public readonly variant?: TitleVariant\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n\n return (\n <hgroup\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined &&\n this.iconName !== '' &&\n this.variant !== 'web-promo' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
1	+ {"file":"qds-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,ixQAAixQ,CAAC;AACnyQ,uBAAe,QAAQ;;MC2BV,KAAK;;;QAuCR,wBAAmB,GAAe,EAAE,CAAA;;;2BAvBE,SAAS;;qBAOf,MAAM;qBAEN,SAAS;;mBAUb,IAAI;;IAMxC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAE5B,QACE,+EACgB,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS;YAC1B,IAAI,CAAC,QAAQ,KAAK,EAAE;YACpB,IAAI,CAAC,OAAO,KAAK,WAAW,KAC1B,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACI,EACV;KACF;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n grid-template-columns: auto 1fr;\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n text-align: center;\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n align-items: center;\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' \| 'main' \| 'navigation' \| 'panel' \| 'popup'\nexport type Level = 'root' \| 'section' \| 'subsection'\nexport type Tag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\nexport type TitleVariant =\n \| 'web-main-section-display'\n \| 'web-main-section-hero'\n \| 'web-main-subsection-card'\n \| 'web-promo'\n\n/\n @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n /\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /\n The title's variant.\n /\n @Prop() public readonly variant?: TitleVariant\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n\n return (\n <hgroup\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined &&\n this.iconName !== '' &&\n this.variant !== 'web-promo' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}

package/hydrate/index.js CHANGED Viewed

@@ -8237,8 +8237,10 @@ class Chip {
         this.isPressed = false;
         if (this.computedType === 'closable')
             this.closeEmitter.emit();
-        else
+        else {
+            this.checked = !this.computedChecked;
             this.changeEmitter.emit();
+        }
     }
     checkedChanged() {
         this.internals.setFormValue(this.computedChecked && !this.computedDisabled
@@ -8289,7 +8291,7 @@ class Chip {
         };
     }
     render() {
-        return (hAsync(Host, { key: '8898971924de5e4a864a86ae3ccd0d110fcb7347' }, this.computedType === 'closable' && (hAsync("div", { "aria-disabled": this.computedDisabled.toString(), class: {
+        return (hAsync(Host, { key: 'ce7fa84da98ec365b86fd23321c82daa723d0cf2' }, this.computedType === 'closable' && (hAsync("div", { "aria-disabled": this.computedDisabled.toString(), class: {
                 'qds-container': true,
                 'qds-closable-chip': true,
                 'qds-pressed-state': this.isPressed,
@@ -12176,7 +12178,7 @@ class TextArea {
     }; }
 }
-const titleCss = "/*!@:host([hidden])*/[hidden].sc-qds-title-h{display:none !important}/*!@:host*/.sc-qds-title-h{display:block}/*!@.qds-titles*/.qds-titles.sc-qds-title{display:grid;grid-template-areas:'kicker'\n    'title'\n    'subtitle';grid-template-columns:auto 1fr}/*!@.qds-has-icon*/.qds-has-icon.sc-qds-title{grid-template-areas:'.    kicker'\n    'icon title'\n    '.    subtitle'}/*!@.qds-title,\n.qds-subtitle,\n.qds-kicker*/.qds-title.sc-qds-title,.qds-subtitle.sc-qds-title,.qds-kicker.sc-qds-title{margin-block:0}/*!@.qds-title*/.qds-title.sc-qds-title{grid-area:title;color:var(--qds-theme-title)}/*!@.qds-subtitle*/.qds-subtitle.sc-qds-title{grid-area:subtitle;color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-title{grid-area:kicker;color:var(--qds-theme-kicker)}/*!@.qds-icon*/.qds-icon.sc-qds-title{grid-area:icon;color:var(--qds-theme-text-standard)}/*!@.qds-main.qds-section.qds-titles*/.qds-main.qds-section.qds-titles.sc-qds-title{gap:var(--qds-main-section-titles-gap)}/*!@.qds-main.qds-section.qds-has-icon*/.qds-main.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap)}/*!@.qds-main.qds-section .qds-title*/.qds-main.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-title)}/*!@.qds-main.qds-section .qds-subtitle*/.qds-main.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-section-subtitle)}/*!@.qds-main.qds-section .qds-kicker*/.qds-main.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-section-kicker)}/*!@.qds-main.qds-section .qds-icon*/.qds-main.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}/*!@.qds-main.qds-subsection.qds-titles*/.qds-main.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)}/*!@.qds-main.qds-subsection.qds-has-icon*/.qds-main.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap)}/*!@.qds-main.qds-subsection .qds-title*/.qds-main.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-subsection-title)}/*!@.qds-main.qds-subsection .qds-subtitle*/.qds-main.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-subsection-subtitle)}/*!@.qds-main.qds-subsection .qds-kicker*/.qds-main.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-subsection-kicker)}/*!@.qds-main.qds-subsection .qds-icon*/.qds-main.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}/*!@.qds-panel.qds-root.qds-titles*/.qds-panel.qds-root.qds-titles.sc-qds-title{gap:var(--qds-panel-titles-gap)}/*!@.qds-panel.qds-root.qds-has-icon*/.qds-panel.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}/*!@.qds-panel.qds-root .qds-title*/.qds-panel.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-title)}/*!@.qds-panel.qds-root .qds-subtitle*/.qds-panel.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subtitle)}/*!@.qds-panel.qds-root .qds-kicker*/.qds-panel.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-kicker)}/*!@.qds-panel.qds-root .qds-icon*/.qds-panel.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}/*!@.qds-panel.qds-section.qds-titles*/.qds-panel.qds-section.qds-titles.sc-qds-title{gap:var(--qds-panel-section-titles-gap)}/*!@.qds-panel.qds-section.qds-has-icon*/.qds-panel.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap)}/*!@.qds-panel.qds-section .qds-title*/.qds-panel.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-section-title)}/*!@.qds-panel.qds-section .qds-subtitle*/.qds-panel.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-section-subtitle)}/*!@.qds-panel.qds-section .qds-kicker*/.qds-panel.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-section-kicker)}/*!@.qds-panel.qds-section .qds-icon*/.qds-panel.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}/*!@.qds-panel.qds-subsection.qds-titles*/.qds-panel.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)}/*!@.qds-panel.qds-subsection.qds-has-icon*/.qds-panel.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap)}/*!@.qds-panel.qds-subsection .qds-title*/.qds-panel.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-subsection-title)}/*!@.qds-panel.qds-subsection .qds-subtitle*/.qds-panel.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subsection-subtitle)}/*!@.qds-panel.qds-subsection .qds-kicker*/.qds-panel.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-subsection-kicker)}/*!@.qds-panel.qds-subsection .qds-icon*/.qds-panel.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}/*!@.qds-navigation.qds-section.qds-titles*/.qds-navigation.qds-section.qds-titles.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)}/*!@.qds-navigation.qds-section.qds-has-icon*/.qds-navigation.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap)}/*!@.qds-navigation.qds-section .qds-title*/.qds-navigation.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-section-title)}/*!@.qds-navigation.qds-section .qds-subtitle*/.qds-navigation.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-section-subtitle)}/*!@.qds-navigation.qds-section .qds-kicker*/.qds-navigation.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-section-kicker)}/*!@.qds-navigation.qds-section .qds-icon*/.qds-navigation.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}/*!@.qds-navigation.qds-subsection.qds-titles*/.qds-navigation.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)}/*!@.qds-navigation.qds-subsection.qds-has-icon*/.qds-navigation.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap)}/*!@.qds-navigation.qds-subsection .qds-title*/.qds-navigation.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-subsection-title)}/*!@.qds-navigation.qds-subsection .qds-subtitle*/.qds-navigation.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-subsection-subtitle)}/*!@.qds-navigation.qds-subsection .qds-kicker*/.qds-navigation.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-subsection-kicker)}/*!@.qds-navigation.qds-subsection .qds-icon*/.qds-navigation.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}/*!@.qds-popup.qds-root.qds-titles*/.qds-popup.qds-root.qds-titles.sc-qds-title{gap:var(--qds-popup-titles-gap)}/*!@.qds-popup.qds-root.qds-has-icon*/.qds-popup.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}/*!@.qds-popup.qds-root .qds-title*/.qds-popup.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-title)}/*!@.qds-popup.qds-root .qds-subtitle*/.qds-popup.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subtitle)}/*!@.qds-popup.qds-root .qds-kicker*/.qds-popup.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-kicker)}/*!@.qds-popup.qds-root .qds-icon*/.qds-popup.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}/*!@.qds-popup.qds-section.qds-titles*/.qds-popup.qds-section.qds-titles.sc-qds-title{gap:var(--qds-popup-section-titles-gap)}/*!@.qds-popup.qds-section.qds-has-icon*/.qds-popup.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap)}/*!@.qds-popup.qds-section .qds-title*/.qds-popup.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-section-title)}/*!@.qds-popup.qds-section .qds-subtitle*/.qds-popup.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-section-subtitle)}/*!@.qds-popup.qds-section .qds-kicker*/.qds-popup.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-section-kicker)}/*!@.qds-popup.qds-section .qds-icon*/.qds-popup.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}/*!@.qds-popup.qds-subsection.qds-titles*/.qds-popup.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)}/*!@.qds-popup.qds-subsection.qds-has-icon*/.qds-popup.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap)}/*!@.qds-popup.qds-subsection .qds-title*/.qds-popup.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-subsection-title)}/*!@.qds-popup.qds-subsection .qds-subtitle*/.qds-popup.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subsection-subtitle)}/*!@.qds-popup.qds-subsection .qds-kicker*/.qds-popup.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-subsection-kicker)}/*!@.qds-popup.qds-subsection .qds-icon*/.qds-popup.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}/*!@.qds-accessory.qds-root.qds-titles*/.qds-accessory.qds-root.qds-titles.sc-qds-title{gap:var(--qds-accessory-titles-gap)}/*!@.qds-accessory.qds-root.qds-has-icon*/.qds-accessory.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}/*!@.qds-accessory.qds-root .qds-title*/.qds-accessory.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-title)}/*!@.qds-accessory.qds-root .qds-subtitle*/.qds-accessory.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-subtitle)}/*!@.qds-accessory.qds-root .qds-kicker*/.qds-accessory.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-kicker)}/*!@.qds-accessory.qds-root .qds-icon*/.qds-accessory.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}/*!@.qds-accessory.qds-section.qds-titles*/.qds-accessory.qds-section.qds-titles.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)}/*!@.qds-accessory.qds-section.qds-has-icon*/.qds-accessory.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap)}/*!@.qds-accessory.qds-section .qds-title*/.qds-accessory.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-section-title)}/*!@.qds-accessory.qds-section .qds-subtitle*/.qds-accessory.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-section-subtitle)}/*!@.qds-accessory.qds-section .qds-kicker*/.qds-accessory.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-section-kicker)}/*!@.qds-accessory.qds-section .qds-icon*/.qds-accessory.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}/*!@.qds-titles[data-variant='web-promo']:is(.qds-root, .qds-section, .qds-subsection)*/.qds-titles[data-variant='web-promo'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title{gap:var(--qds-web-main-section-hero);text-align:center;margin:auto}/*!@[data-variant='web-promo']:is(.qds-root, .qds-section, .qds-subsection) .qds-title*/[data-variant='web-promo'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-hero-title)}/*!@.qds-titles[data-variant='web-main-section-display']:is(.qds-root, .qds-section, .qds-subsection)*/.qds-titles[data-variant='web-main-section-display'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title{gap:var(--qds-web-main-section-display)}/*!@[data-variant='web-main-section-display']:is(.qds-root, .qds-section, .qds-subsection) .qds-title*/[data-variant='web-main-section-display'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-display-title)}/*!@.qds-titles[data-variant='web-main-subsection-card']:is(.qds-root, .qds-section, .qds-subsection)*/.qds-titles[data-variant='web-main-subsection-card'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title{align-items:center;gap:var(--qds-web-main-subsection-card)}/*!@[data-variant='web-main-subsection-card']:is(.qds-root, .qds-section, .qds-subsection) .qds-title*/[data-variant='web-main-subsection-card'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-subsection-card-title)}/*!@.qds-titles[data-variant='web-main-section-hero']:is(.qds-root, .qds-section, .qds-subsection)*/.qds-titles[data-variant='web-main-section-hero'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title{gap:var(--qds-web-main-section-hero)}/*!@[data-variant='web-main-section-hero']:is(.qds-root, .qds-section, .qds-subsection) .qds-title*/[data-variant='web-main-section-hero'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-hero-title)}";
+const titleCss = "/*!@:host([hidden])*/[hidden].sc-qds-title-h{display:none !important}/*!@:host*/.sc-qds-title-h{display:block}/*!@.qds-titles*/.qds-titles.sc-qds-title{display:grid;grid-template-areas:'kicker'\n    'title'\n    'subtitle';grid-template-columns:auto 1fr}/*!@.qds-has-icon*/.qds-has-icon.sc-qds-title{grid-template-areas:'.    kicker'\n    'icon title'\n    '.    subtitle'}/*!@.qds-title,\n.qds-subtitle,\n.qds-kicker*/.qds-title.sc-qds-title,.qds-subtitle.sc-qds-title,.qds-kicker.sc-qds-title{margin-block:0}/*!@.qds-title*/.qds-title.sc-qds-title{grid-area:title;color:var(--qds-theme-title)}/*!@.qds-subtitle*/.qds-subtitle.sc-qds-title{grid-area:subtitle;color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-title{grid-area:kicker;color:var(--qds-theme-kicker)}/*!@.qds-icon*/.qds-icon.sc-qds-title{grid-area:icon;color:var(--qds-theme-text-standard)}/*!@.qds-main.qds-section.qds-titles*/.qds-main.qds-section.qds-titles.sc-qds-title{gap:var(--qds-main-section-titles-gap)}/*!@.qds-main.qds-section.qds-has-icon*/.qds-main.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-main-section-titles-gap)\n        var(--qds-main-section-titles-icon-gap)}/*!@.qds-main.qds-section .qds-title*/.qds-main.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-title)}/*!@.qds-main.qds-section .qds-subtitle*/.qds-main.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-section-subtitle)}/*!@.qds-main.qds-section .qds-kicker*/.qds-main.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-section-kicker)}/*!@.qds-main.qds-section .qds-icon*/.qds-main.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}/*!@.qds-main.qds-subsection.qds-titles*/.qds-main.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)}/*!@.qds-main.qds-subsection.qds-has-icon*/.qds-main.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)\n        var(--qds-main-subsection-titles-icon-gap)}/*!@.qds-main.qds-subsection .qds-title*/.qds-main.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-subsection-title)}/*!@.qds-main.qds-subsection .qds-subtitle*/.qds-main.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-subsection-subtitle)}/*!@.qds-main.qds-subsection .qds-kicker*/.qds-main.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-subsection-kicker)}/*!@.qds-main.qds-subsection .qds-icon*/.qds-main.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}/*!@.qds-panel.qds-root.qds-titles*/.qds-panel.qds-root.qds-titles.sc-qds-title{gap:var(--qds-panel-titles-gap)}/*!@.qds-panel.qds-root.qds-has-icon*/.qds-panel.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}/*!@.qds-panel.qds-root .qds-title*/.qds-panel.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-title)}/*!@.qds-panel.qds-root .qds-subtitle*/.qds-panel.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subtitle)}/*!@.qds-panel.qds-root .qds-kicker*/.qds-panel.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-kicker)}/*!@.qds-panel.qds-root .qds-icon*/.qds-panel.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}/*!@.qds-panel.qds-section.qds-titles*/.qds-panel.qds-section.qds-titles.sc-qds-title{gap:var(--qds-panel-section-titles-gap)}/*!@.qds-panel.qds-section.qds-has-icon*/.qds-panel.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-panel-section-titles-gap)\n        var(--qds-panel-section-titles-icon-gap)}/*!@.qds-panel.qds-section .qds-title*/.qds-panel.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-section-title)}/*!@.qds-panel.qds-section .qds-subtitle*/.qds-panel.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-section-subtitle)}/*!@.qds-panel.qds-section .qds-kicker*/.qds-panel.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-section-kicker)}/*!@.qds-panel.qds-section .qds-icon*/.qds-panel.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}/*!@.qds-panel.qds-subsection.qds-titles*/.qds-panel.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)}/*!@.qds-panel.qds-subsection.qds-has-icon*/.qds-panel.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)\n        var(--qds-panel-subsection-titles-icon-gap)}/*!@.qds-panel.qds-subsection .qds-title*/.qds-panel.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-subsection-title)}/*!@.qds-panel.qds-subsection .qds-subtitle*/.qds-panel.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subsection-subtitle)}/*!@.qds-panel.qds-subsection .qds-kicker*/.qds-panel.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-subsection-kicker)}/*!@.qds-panel.qds-subsection .qds-icon*/.qds-panel.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}/*!@.qds-navigation.qds-section.qds-titles*/.qds-navigation.qds-section.qds-titles.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)}/*!@.qds-navigation.qds-section.qds-has-icon*/.qds-navigation.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)\n        var(--qds-navigation-section-titles-icon-gap)}/*!@.qds-navigation.qds-section .qds-title*/.qds-navigation.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-section-title)}/*!@.qds-navigation.qds-section .qds-subtitle*/.qds-navigation.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-section-subtitle)}/*!@.qds-navigation.qds-section .qds-kicker*/.qds-navigation.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-section-kicker)}/*!@.qds-navigation.qds-section .qds-icon*/.qds-navigation.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}/*!@.qds-navigation.qds-subsection.qds-titles*/.qds-navigation.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)}/*!@.qds-navigation.qds-subsection.qds-has-icon*/.qds-navigation.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)\n        var(--qds-navigation-subsection-titles-icon-gap)}/*!@.qds-navigation.qds-subsection .qds-title*/.qds-navigation.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-subsection-title)}/*!@.qds-navigation.qds-subsection .qds-subtitle*/.qds-navigation.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-subsection-subtitle)}/*!@.qds-navigation.qds-subsection .qds-kicker*/.qds-navigation.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-subsection-kicker)}/*!@.qds-navigation.qds-subsection .qds-icon*/.qds-navigation.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}/*!@.qds-popup.qds-root.qds-titles*/.qds-popup.qds-root.qds-titles.sc-qds-title{gap:var(--qds-popup-titles-gap)}/*!@.qds-popup.qds-root.qds-has-icon*/.qds-popup.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}/*!@.qds-popup.qds-root .qds-title*/.qds-popup.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-title)}/*!@.qds-popup.qds-root .qds-subtitle*/.qds-popup.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subtitle)}/*!@.qds-popup.qds-root .qds-kicker*/.qds-popup.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-kicker)}/*!@.qds-popup.qds-root .qds-icon*/.qds-popup.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}/*!@.qds-popup.qds-section.qds-titles*/.qds-popup.qds-section.qds-titles.sc-qds-title{gap:var(--qds-popup-section-titles-gap)}/*!@.qds-popup.qds-section.qds-has-icon*/.qds-popup.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-popup-section-titles-gap)\n        var(--qds-popup-section-titles-icon-gap)}/*!@.qds-popup.qds-section .qds-title*/.qds-popup.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-section-title)}/*!@.qds-popup.qds-section .qds-subtitle*/.qds-popup.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-section-subtitle)}/*!@.qds-popup.qds-section .qds-kicker*/.qds-popup.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-section-kicker)}/*!@.qds-popup.qds-section .qds-icon*/.qds-popup.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}/*!@.qds-popup.qds-subsection.qds-titles*/.qds-popup.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)}/*!@.qds-popup.qds-subsection.qds-has-icon*/.qds-popup.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)\n        var(--qds-popup-subsection-titles-icon-gap)}/*!@.qds-popup.qds-subsection .qds-title*/.qds-popup.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-subsection-title)}/*!@.qds-popup.qds-subsection .qds-subtitle*/.qds-popup.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subsection-subtitle)}/*!@.qds-popup.qds-subsection .qds-kicker*/.qds-popup.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-subsection-kicker)}/*!@.qds-popup.qds-subsection .qds-icon*/.qds-popup.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}/*!@.qds-accessory.qds-root.qds-titles*/.qds-accessory.qds-root.qds-titles.sc-qds-title{gap:var(--qds-accessory-titles-gap)}/*!@.qds-accessory.qds-root.qds-has-icon*/.qds-accessory.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}/*!@.qds-accessory.qds-root .qds-title*/.qds-accessory.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-title)}/*!@.qds-accessory.qds-root .qds-subtitle*/.qds-accessory.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-subtitle)}/*!@.qds-accessory.qds-root .qds-kicker*/.qds-accessory.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-kicker)}/*!@.qds-accessory.qds-root .qds-icon*/.qds-accessory.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}/*!@.qds-accessory.qds-section.qds-titles*/.qds-accessory.qds-section.qds-titles.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)}/*!@.qds-accessory.qds-section.qds-has-icon*/.qds-accessory.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)\n        var(--qds-accessory-section-titles-icon-gap)}/*!@.qds-accessory.qds-section .qds-title*/.qds-accessory.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-section-title)}/*!@.qds-accessory.qds-section .qds-subtitle*/.qds-accessory.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-section-subtitle)}/*!@.qds-accessory.qds-section .qds-kicker*/.qds-accessory.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-section-kicker)}/*!@.qds-accessory.qds-section .qds-icon*/.qds-accessory.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}/*!@.qds-titles[data-variant='web-promo']:is(.qds-root, .qds-section, .qds-subsection)*/.qds-titles[data-variant='web-promo'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title{gap:var(--qds-main-section-hero-titles-gap);text-align:center;margin:auto}/*!@[data-variant='web-promo']:is(.qds-root, .qds-section, .qds-subsection) .qds-title*/[data-variant='web-promo'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-hero-title)}/*!@.qds-titles[data-variant='web-main-section-display']:is(.qds-root, .qds-section, .qds-subsection)*/.qds-titles[data-variant='web-main-section-display'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title{gap:var(--qds-main-section-display-titles-gap)}/*!@[data-variant='web-main-section-display']:is(.qds-root, .qds-section, .qds-subsection) .qds-title*/[data-variant='web-main-section-display'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-display-title)}/*!@.qds-titles[data-variant='web-main-subsection-card']:is(.qds-root, .qds-section, .qds-subsection)*/.qds-titles[data-variant='web-main-subsection-card'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title{align-items:center;gap:var(--qds-main-subsection-card-titles-gap)}/*!@[data-variant='web-main-subsection-card']:is(.qds-root, .qds-section, .qds-subsection) .qds-title*/[data-variant='web-main-subsection-card'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-subsection-card-title)}/*!@.qds-titles[data-variant='web-main-section-hero']:is(.qds-root, .qds-section, .qds-subsection)*/.qds-titles[data-variant='web-main-section-hero'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title{gap:var(--qds-main-section-hero-titles-gap)}/*!@[data-variant='web-main-section-hero']:is(.qds-root, .qds-section, .qds-subsection) .qds-title*/[data-variant='web-main-section-hero'].sc-qds-title:is(.qds-root,.qds-section.sc-qds-title,.qds-subsection).sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-hero-title)}";
 var QdsTitleStyle0 = titleCss;
 /**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@quartzds/core",
-  "version": "1.0.0-beta.45",
+  "version": "1.0.0-beta.46",
   "description": "Quartz design system web components",
   "homepage": "https://github.com/quartzds/core-foundations/tree/main/packages/core",
   "bugs": {