npm - @quartzds/core - Versions diffs - 1.0.0-beta.34 → 1.0.0-beta.35 - Mend

@quartzds/core 1.0.0-beta.34 → 1.0.0-beta.35

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 (16) hide show

package/components/qds-button.js +1 -1
package/components/qds-button.js.map +1 -1
package/components/qds-list-item.js +1 -1
package/components/qds-list-item.js.map +1 -1
package/dist/cjs/qds-button.cjs.entry.js +1 -1
package/dist/cjs/qds-button.cjs.entry.js.map +1 -1
package/dist/cjs/qds-list-item.cjs.entry.js +1 -1
package/dist/cjs/qds-list-item.cjs.entry.js.map +1 -1
package/dist/docs.json +1 -1
package/dist/esm/qds-button.entry.js +1 -1
package/dist/esm/qds-button.entry.js.map +1 -1
package/dist/esm/qds-list-item.entry.js +1 -1
package/dist/esm/qds-list-item.entry.js.map +1 -1
package/hydrate/index.js +2 -2
package/package.json +1 -1
package/styles/core.css +74 -10

package/components/qds-button.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size='small']{width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size='large']{width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-button[data-importance='standard'],.qds-button[data-importance='emphasized'],.qds-button[data-variant='destructive']{border-radius:var(--qds-control-border-radius)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']{padding-inline:0}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border:var(--qds-control-border-width) solid\n      var(--qds-theme-control-border)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);height:var(--qds-control-hero-height)}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-icon-only[data-variant='hero']{width:var(--qds-control-hero-height)}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-icon-only[data-size='small'],.qds-icon-only[data-size='standard'],.qds-icon-only[data-size='large'],.qds-icon-only[data-variant='hero']{padding-inline:0}";
+const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size='small']{width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size='large']{width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-button[data-importance='standard'],.qds-button[data-importance='emphasized'],.qds-button[data-variant='destructive']{border-radius:var(--qds-control-border-radius)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']{padding-inline:0;border-block-end:var(--qds-control-border-width) solid transparent}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border:var(--qds-control-border-width) solid\n      var(--qds-theme-control-border)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);height:var(--qds-control-hero-height)}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-icon-only[data-variant='hero']{width:var(--qds-control-hero-height)}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-icon-only[data-size='small'],.qds-icon-only[data-size='standard'],.qds-icon-only[data-size='large'],.qds-icon-only[data-variant='hero']{padding-inline:0}";
 const QdsButtonStyle0 = buttonCss;
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {

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

	@@ -1 +1 @@
1	- {"file":"qds-button.js","mappings":"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","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.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}\n\n.qds-action {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-button {\n align-items: center;\n appearance: none;\n background-color: initial;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding-block: 0;\n print-color-adjust: exact;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-badge {\n border-radius: var(--qds-control-rounded-border-radius);\n font: var(--qds-badge-text);\n height: var(--qds-badge-height);\n padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-button {\n gap: var(--qds-control-small-gap-internal);\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-small-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-button {\n gap: var(--qds-control-standard-gap-internal);\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-standard-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-button {\n gap: var(--qds-control-large-gap-internal);\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-large-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'],\n[data-variant='destructive'] {\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &.qds-icon-only {\n color: var(--qds-theme-control-text-standard);\n }\n\n &.qds-button {\n padding-inline: 0;\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);\n color: var(--qds-theme-link-standard-hover);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-hover);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-hover);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);\n color: var(--qds-theme-link-standard-pressed);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-pressed);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-pressed);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n\n &.qds-button {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n}\n\n[data-importance='emphasized'] {\n &.qds-badge {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-pressed);\n }\n }\n }\n}\n\n[data-variant='destructive'] {\n &.qds-badge {\n background-color: var(--qds-theme-feedback-action-destructive-contrast);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n }\n }\n}\n\n[data-variant='hero'] {\n &.qds-button {\n border-radius: var(--qds-control-hero-border-radius);\n font: var(--qds-control-hero-text);\n gap: var(--qds-control-hero-gap-internal);\n height: var(--qds-control-hero-height);\n }\n\n &.qds-button:not([data-importance='subdued']) {\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-hero-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'],\n[data-variant='hero'] {\n &.qds-icon-only {\n padding-inline: 0;\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 { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' \| 'dropdown' \| 'next'\nexport type ButtonTarget = '_blank' \| '_parent' \| '_self' \| '_top'\nexport type ButtonType = 'button' \| 'reset' \| 'submit'\nexport type FormMethod = 'dialog' \| 'get' \| 'post'\nexport type ButtonVariant = 'destructive' \| 'hero'\n\n/\n The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n \n @see https://quartz.se.com/build/components/button\n /\n@Component({\n tag: 'qds-button',\n shadow: { delegatesFocus: true },\n styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n /\n The name of the action icon to render.\n /\n @Prop() public readonly action?: Action\n\n /\n The button's badge text.\n /\n @Prop() public readonly badge?: string\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 The button's importance.\n /\n @Prop() public readonly importance?: Importance = 'standard'\n\n /\n The button's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n The button's text.\n /\n @Prop() public readonly text?: string\n\n /\n The button's variant.\n /\n @Prop() public readonly variant?: ButtonVariant\n\n /\n Prevents the button from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop()\n public readonly disabled?: boolean\n\n /\n Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n \n @webnative\n /\n @Prop() public readonly download?: string\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the button with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<button>` is associated with\n * its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<button>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n @webnative\n /\n @Prop() public readonly form?: string\n\n /\n The URL that processes the information submitted by the button. Overrides\n * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n * attribute of the button's form owner. Does nothing if there is no form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n /\n If the button is a submit button (it's inside/associated with a `<form>`\n * and doesn't have `type=\"button\"`), this attribute specifies the\n * [HTTP method][] used to submit the form, or `dialog` which won't submit\n * the form. Possible values:\n \n - `get`: The form data are appended to the form's action URL, with a ? as\n * a separator, and the resulting URL is sent to the server. Use this method\n * when the form has no side effects, like search forms.\n * - `post`: The data from the form are included in the body of the HTTP\n * request when sent to the server. Use when the form contains information\n * that shouldn't be public, like login credentials.\n * - `dialog`: Close the dialog box in which the button finds itself, if any,\n * and do not submit the button's form owner.\n \n If specified, this attribute overrides the `method` attribute of the\n * button's form owner.\n \n [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n \n @webnative\n /\n @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n /\n If the button is a submit button, this attribute specifies that the form\n * is not to be\n * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n * when it is submitted. If this attribute is specified, it overrides the\n * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n * attribute of the button's form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formnovalidate' })\n public readonly formNoValidate: boolean = false\n\n /\n If the button is a submit button, this attribute is an author-defined name\n * or standardized, underscore-prefixed keyword indicating where to display\n * the response from submitting the form. This is the `name` of, or keyword\n * for, a browsing context (a tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n * If this attribute is specified, it overrides the\n * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n * attribute of the button's form owner. The following keywords have special\n * meanings:\n \n - `_blank`: Load the response into a new unnamed browsing context — usually\n * a new tab or window, depending on the user's browser settings.\n * - `_parent`: Load the response into the parent browsing context of the\n * current one. If there is no parent, this option behaves the same way as\n * `_self`.\n * - `_self`: Load the response into the same browsing context as the current\n * one.\n * - `_top`: Load the response into the top-level browsing context (that is,\n * the browsing context that is an ancestor of the current one, and has no\n * parent). If there is no parent, this option behaves the same way as\n * `_self`.\n \n @webnative\n /\n @Prop({ attribute: 'formtarget' })\n public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n /\n When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n \n @webnative\n /\n @Prop() public readonly href?: string\n\n /\n The name of the button, submitted as a pair with the button's `value` as\n * part of the form data, when that button is used to submit the form.\n * Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n \n - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n \n @webnative\n /\n @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n /\n The type of button.\n \n `button`: The button has no default behavior, and does nothing when\n * pressed by default. It can have client-side scripts listen to the\n * element's events, which are triggered when the events occur.\n \n `submit`: The button submits the form data to the server. This is the\n * default if the attribute is not specified for buttons associated with a\n * `<form>`, or if the attribute is an empty or invalid value.\n \n `reset`: The button resets all the controls to their initial values.\n \n @webnative\n /\n @Prop() public readonly type?: ButtonType\n\n /\n Defines the value associated with the button's `name` when it's submitted\n * with the form data. This value is passed to the server in params when the\n * form is submitted using this button. Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly value?: string\n\n /\n Emitted when the button loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsButtonElement\n\n private inheritedAttributes: Attributes = {}\n\n private get formElement(): HTMLElement \| null {\n return this.form !== undefined && this.form !== ''\n ? document.querySelector(`#${this.form}`)\n : this.element.closest('form')\n }\n\n private get buttonType(): ButtonType {\n if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n return this.type\n }\n\n private get iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n const hasNoLabel = this.text === undefined \|\| this.text === ''\n\n return hasIcon && hasNoLabel\n }\n\n private get computedAction(): Action \| undefined {\n switch (this.action) {\n case 'dropdown':\n case 'dropdown-close':\n case 'next': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedImportance(): Importance \| undefined {\n if (this.variant === 'destructive') return undefined\n\n switch (this.importance) {\n case 'emphasized':\n case 'subdued': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedSize(): Size \| undefined {\n if (this.variant === 'hero') return undefined\n\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 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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.buttonType === 'button' \|\| !this.formElement) return\n event.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.buttonType\n if (this.name !== undefined) fakeButton.name = this.name\n if (this.value !== undefined) fakeButton.value = this.value\n if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n fakeButton.formNoValidate = this.formNoValidate\n fakeButton.formTarget = this.formTarget\n fakeButton.style.display = 'none'\n\n this.formElement.append(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n\n return (\n <Tag\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-button': true,\n 'qds-icon-only': this.iconOnly,\n }}\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n data-variant={this.variant}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n role={Tag === 'a' ? 'button' : undefined}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.buttonType}\n value={Tag === 'a' ? undefined : this.value}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n data-variant={this.variant}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text}\n {this.badge !== undefined && this.badge !== '' && (\n <div\n class=\"qds-badge\"\n data-importance={this.computedImportance}\n data-variant={this.variant}\n >\n {this.badge}\n </div>\n )}\n {this.computedAction !== undefined && (\n <qds-icon\n class=\"qds-icon qds-action\"\n library=\"core\"\n name={this.computedAction}\n />\n )}\n </Tag>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1	+ {"file":"qds-button.js","mappings":"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","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.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}\n\n.qds-action {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-button {\n align-items: center;\n appearance: none;\n background-color: initial;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding-block: 0;\n print-color-adjust: exact;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-badge {\n border-radius: var(--qds-control-rounded-border-radius);\n font: var(--qds-badge-text);\n height: var(--qds-badge-height);\n padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-button {\n gap: var(--qds-control-small-gap-internal);\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-small-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-button {\n gap: var(--qds-control-standard-gap-internal);\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-standard-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-button {\n gap: var(--qds-control-large-gap-internal);\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-large-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'],\n[data-variant='destructive'] {\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &.qds-icon-only {\n color: var(--qds-theme-control-text-standard);\n }\n\n &.qds-button {\n padding-inline: 0;\n border-block-end: var(--qds-control-border-width) solid transparent;\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);\n color: var(--qds-theme-link-standard-hover);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-hover);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-hover);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);\n color: var(--qds-theme-link-standard-pressed);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-pressed);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-pressed);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n\n &.qds-button {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n}\n\n[data-importance='emphasized'] {\n &.qds-badge {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-pressed);\n }\n }\n }\n}\n\n[data-variant='destructive'] {\n &.qds-badge {\n background-color: var(--qds-theme-feedback-action-destructive-contrast);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n }\n }\n}\n\n[data-variant='hero'] {\n &.qds-button {\n border-radius: var(--qds-control-hero-border-radius);\n font: var(--qds-control-hero-text);\n gap: var(--qds-control-hero-gap-internal);\n height: var(--qds-control-hero-height);\n }\n\n &.qds-button:not([data-importance='subdued']) {\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-hero-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'],\n[data-variant='hero'] {\n &.qds-icon-only {\n padding-inline: 0;\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 { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' \| 'dropdown' \| 'next'\nexport type ButtonTarget = '_blank' \| '_parent' \| '_self' \| '_top'\nexport type ButtonType = 'button' \| 'reset' \| 'submit'\nexport type FormMethod = 'dialog' \| 'get' \| 'post'\nexport type ButtonVariant = 'destructive' \| 'hero'\n\n/\n The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n \n @see https://quartz.se.com/build/components/button\n /\n@Component({\n tag: 'qds-button',\n shadow: { delegatesFocus: true },\n styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n /\n The name of the action icon to render.\n /\n @Prop() public readonly action?: Action\n\n /\n The button's badge text.\n /\n @Prop() public readonly badge?: string\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 The button's importance.\n /\n @Prop() public readonly importance?: Importance = 'standard'\n\n /\n The button's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n The button's text.\n /\n @Prop() public readonly text?: string\n\n /\n The button's variant.\n /\n @Prop() public readonly variant?: ButtonVariant\n\n /\n Prevents the button from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop()\n public readonly disabled?: boolean\n\n /\n Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n \n @webnative\n /\n @Prop() public readonly download?: string\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the button with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<button>` is associated with\n * its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<button>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n @webnative\n /\n @Prop() public readonly form?: string\n\n /\n The URL that processes the information submitted by the button. Overrides\n * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n * attribute of the button's form owner. Does nothing if there is no form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n /\n If the button is a submit button (it's inside/associated with a `<form>`\n * and doesn't have `type=\"button\"`), this attribute specifies the\n * [HTTP method][] used to submit the form, or `dialog` which won't submit\n * the form. Possible values:\n \n - `get`: The form data are appended to the form's action URL, with a ? as\n * a separator, and the resulting URL is sent to the server. Use this method\n * when the form has no side effects, like search forms.\n * - `post`: The data from the form are included in the body of the HTTP\n * request when sent to the server. Use when the form contains information\n * that shouldn't be public, like login credentials.\n * - `dialog`: Close the dialog box in which the button finds itself, if any,\n * and do not submit the button's form owner.\n \n If specified, this attribute overrides the `method` attribute of the\n * button's form owner.\n \n [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n \n @webnative\n /\n @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n /\n If the button is a submit button, this attribute specifies that the form\n * is not to be\n * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n * when it is submitted. If this attribute is specified, it overrides the\n * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n * attribute of the button's form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formnovalidate' })\n public readonly formNoValidate: boolean = false\n\n /\n If the button is a submit button, this attribute is an author-defined name\n * or standardized, underscore-prefixed keyword indicating where to display\n * the response from submitting the form. This is the `name` of, or keyword\n * for, a browsing context (a tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n * If this attribute is specified, it overrides the\n * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n * attribute of the button's form owner. The following keywords have special\n * meanings:\n \n - `_blank`: Load the response into a new unnamed browsing context — usually\n * a new tab or window, depending on the user's browser settings.\n * - `_parent`: Load the response into the parent browsing context of the\n * current one. If there is no parent, this option behaves the same way as\n * `_self`.\n * - `_self`: Load the response into the same browsing context as the current\n * one.\n * - `_top`: Load the response into the top-level browsing context (that is,\n * the browsing context that is an ancestor of the current one, and has no\n * parent). If there is no parent, this option behaves the same way as\n * `_self`.\n \n @webnative\n /\n @Prop({ attribute: 'formtarget' })\n public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n /\n When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n \n @webnative\n /\n @Prop() public readonly href?: string\n\n /\n The name of the button, submitted as a pair with the button's `value` as\n * part of the form data, when that button is used to submit the form.\n * Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n \n - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n \n @webnative\n /\n @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n /\n The type of button.\n \n `button`: The button has no default behavior, and does nothing when\n * pressed by default. It can have client-side scripts listen to the\n * element's events, which are triggered when the events occur.\n \n `submit`: The button submits the form data to the server. This is the\n * default if the attribute is not specified for buttons associated with a\n * `<form>`, or if the attribute is an empty or invalid value.\n \n `reset`: The button resets all the controls to their initial values.\n \n @webnative\n /\n @Prop() public readonly type?: ButtonType\n\n /\n Defines the value associated with the button's `name` when it's submitted\n * with the form data. This value is passed to the server in params when the\n * form is submitted using this button. Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly value?: string\n\n /\n Emitted when the button loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsButtonElement\n\n private inheritedAttributes: Attributes = {}\n\n private get formElement(): HTMLElement \| null {\n return this.form !== undefined && this.form !== ''\n ? document.querySelector(`#${this.form}`)\n : this.element.closest('form')\n }\n\n private get buttonType(): ButtonType {\n if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n return this.type\n }\n\n private get iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n const hasNoLabel = this.text === undefined \|\| this.text === ''\n\n return hasIcon && hasNoLabel\n }\n\n private get computedAction(): Action \| undefined {\n switch (this.action) {\n case 'dropdown':\n case 'dropdown-close':\n case 'next': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedImportance(): Importance \| undefined {\n if (this.variant === 'destructive') return undefined\n\n switch (this.importance) {\n case 'emphasized':\n case 'subdued': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedSize(): Size \| undefined {\n if (this.variant === 'hero') return undefined\n\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 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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.buttonType === 'button' \|\| !this.formElement) return\n event.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.buttonType\n if (this.name !== undefined) fakeButton.name = this.name\n if (this.value !== undefined) fakeButton.value = this.value\n if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n fakeButton.formNoValidate = this.formNoValidate\n fakeButton.formTarget = this.formTarget\n fakeButton.style.display = 'none'\n\n this.formElement.append(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n\n return (\n <Tag\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-button': true,\n 'qds-icon-only': this.iconOnly,\n }}\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n data-variant={this.variant}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n role={Tag === 'a' ? 'button' : undefined}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.buttonType}\n value={Tag === 'a' ? undefined : this.value}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n data-variant={this.variant}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text}\n {this.badge !== undefined && this.badge !== '' && (\n <div\n class=\"qds-badge\"\n data-importance={this.computedImportance}\n data-variant={this.variant}\n >\n {this.badge}\n </div>\n )}\n {this.computedAction !== undefined && (\n <qds-icon\n class=\"qds-icon qds-action\"\n library=\"core\"\n name={this.computedAction}\n />\n )}\n </Tag>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}

package/components/qds-list-item.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers.js';
 import { d as defineCustomElement$2 } from './icon.js';
-const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-disabled{opacity:var(--qds-theme-disabled)}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
+const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
 const QdsListItemStyle0 = listItemCss;
 const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLElement {

package/components/qds-list-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"qds-list-item.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.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-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\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 Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/\n \n \n @see https://quartz.se.com/build/components/list-item\n /\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /\n Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n /\n @Prop() public readonly disabled: boolean = false\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 Whether or not this list item denotes a navigation action.\n /\n @Prop() public readonly navigation: boolean = false\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n /\n The list items's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Whether or not the list item is selected.\n /\n @Prop() public readonly selected: boolean = false\n\n /\n Text to display for the subtext.\n /\n @Prop() public readonly subtext?: string\n\n /\n Primary text to display.\n /\n @Prop() public readonly text!: string\n\n /\n Emitted when the list item loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1	+ {"file":"qds-list-item.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.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-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &:not(.qds-selected) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\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 Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/\n \n \n @see https://quartz.se.com/build/components/list-item\n /\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /\n Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n /\n @Prop() public readonly disabled: boolean = false\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 Whether or not this list item denotes a navigation action.\n /\n @Prop() public readonly navigation: boolean = false\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n /\n The list items's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Whether or not the list item is selected.\n /\n @Prop() public readonly selected: boolean = false\n\n /\n Text to display for the subtext.\n /\n @Prop() public readonly subtext?: string\n\n /\n Primary text to display.\n /\n @Prop() public readonly text!: string\n\n /\n Emitted when the list item loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}

package/dist/cjs/qds-button.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 buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size='small']{width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size='large']{width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-button[data-importance='standard'],.qds-button[data-importance='emphasized'],.qds-button[data-variant='destructive']{border-radius:var(--qds-control-border-radius)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']{padding-inline:0}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border:var(--qds-control-border-width) solid\n      var(--qds-theme-control-border)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);height:var(--qds-control-hero-height)}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-icon-only[data-variant='hero']{width:var(--qds-control-hero-height)}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-icon-only[data-size='small'],.qds-icon-only[data-size='standard'],.qds-icon-only[data-size='large'],.qds-icon-only[data-variant='hero']{padding-inline:0}";
+const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size='small']{width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size='large']{width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-button[data-importance='standard'],.qds-button[data-importance='emphasized'],.qds-button[data-variant='destructive']{border-radius:var(--qds-control-border-radius)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']{padding-inline:0;border-block-end:var(--qds-control-border-width) solid transparent}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border:var(--qds-control-border-width) solid\n      var(--qds-theme-control-border)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);height:var(--qds-control-hero-height)}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-icon-only[data-variant='hero']{width:var(--qds-control-hero-height)}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-icon-only[data-size='small'],.qds-icon-only[data-size='standard'],.qds-icon-only[data-size='large'],.qds-icon-only[data-variant='hero']{padding-inline:0}";
 const QdsButtonStyle0 = buttonCss;
 const Button = class {

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

	@@ -1 +1 @@
1	- {"file":"qds-button.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.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}\n\n.qds-action {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-button {\n align-items: center;\n appearance: none;\n background-color: initial;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding-block: 0;\n print-color-adjust: exact;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-badge {\n border-radius: var(--qds-control-rounded-border-radius);\n font: var(--qds-badge-text);\n height: var(--qds-badge-height);\n padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-button {\n gap: var(--qds-control-small-gap-internal);\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-small-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-button {\n gap: var(--qds-control-standard-gap-internal);\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-standard-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-button {\n gap: var(--qds-control-large-gap-internal);\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-large-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'],\n[data-variant='destructive'] {\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &.qds-icon-only {\n color: var(--qds-theme-control-text-standard);\n }\n\n &.qds-button {\n padding-inline: 0;\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);\n color: var(--qds-theme-link-standard-hover);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-hover);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-hover);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);\n color: var(--qds-theme-link-standard-pressed);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-pressed);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-pressed);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n\n &.qds-button {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n}\n\n[data-importance='emphasized'] {\n &.qds-badge {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-pressed);\n }\n }\n }\n}\n\n[data-variant='destructive'] {\n &.qds-badge {\n background-color: var(--qds-theme-feedback-action-destructive-contrast);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n }\n }\n}\n\n[data-variant='hero'] {\n &.qds-button {\n border-radius: var(--qds-control-hero-border-radius);\n font: var(--qds-control-hero-text);\n gap: var(--qds-control-hero-gap-internal);\n height: var(--qds-control-hero-height);\n }\n\n &.qds-button:not([data-importance='subdued']) {\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-hero-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'],\n[data-variant='hero'] {\n &.qds-icon-only {\n padding-inline: 0;\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 { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' \| 'dropdown' \| 'next'\nexport type ButtonTarget = '_blank' \| '_parent' \| '_self' \| '_top'\nexport type ButtonType = 'button' \| 'reset' \| 'submit'\nexport type FormMethod = 'dialog' \| 'get' \| 'post'\nexport type ButtonVariant = 'destructive' \| 'hero'\n\n/\n The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n \n @see https://quartz.se.com/build/components/button\n /\n@Component({\n tag: 'qds-button',\n shadow: { delegatesFocus: true },\n styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n /\n The name of the action icon to render.\n /\n @Prop() public readonly action?: Action\n\n /\n The button's badge text.\n /\n @Prop() public readonly badge?: string\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 The button's importance.\n /\n @Prop() public readonly importance?: Importance = 'standard'\n\n /\n The button's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n The button's text.\n /\n @Prop() public readonly text?: string\n\n /\n The button's variant.\n /\n @Prop() public readonly variant?: ButtonVariant\n\n /\n Prevents the button from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop()\n public readonly disabled?: boolean\n\n /\n Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n \n @webnative\n /\n @Prop() public readonly download?: string\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the button with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<button>` is associated with\n * its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<button>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n @webnative\n /\n @Prop() public readonly form?: string\n\n /\n The URL that processes the information submitted by the button. Overrides\n * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n * attribute of the button's form owner. Does nothing if there is no form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n /\n If the button is a submit button (it's inside/associated with a `<form>`\n * and doesn't have `type=\"button\"`), this attribute specifies the\n * [HTTP method][] used to submit the form, or `dialog` which won't submit\n * the form. Possible values:\n \n - `get`: The form data are appended to the form's action URL, with a ? as\n * a separator, and the resulting URL is sent to the server. Use this method\n * when the form has no side effects, like search forms.\n * - `post`: The data from the form are included in the body of the HTTP\n * request when sent to the server. Use when the form contains information\n * that shouldn't be public, like login credentials.\n * - `dialog`: Close the dialog box in which the button finds itself, if any,\n * and do not submit the button's form owner.\n \n If specified, this attribute overrides the `method` attribute of the\n * button's form owner.\n \n [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n \n @webnative\n /\n @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n /\n If the button is a submit button, this attribute specifies that the form\n * is not to be\n * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n * when it is submitted. If this attribute is specified, it overrides the\n * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n * attribute of the button's form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formnovalidate' })\n public readonly formNoValidate: boolean = false\n\n /\n If the button is a submit button, this attribute is an author-defined name\n * or standardized, underscore-prefixed keyword indicating where to display\n * the response from submitting the form. This is the `name` of, or keyword\n * for, a browsing context (a tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n * If this attribute is specified, it overrides the\n * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n * attribute of the button's form owner. The following keywords have special\n * meanings:\n \n - `_blank`: Load the response into a new unnamed browsing context — usually\n * a new tab or window, depending on the user's browser settings.\n * - `_parent`: Load the response into the parent browsing context of the\n * current one. If there is no parent, this option behaves the same way as\n * `_self`.\n * - `_self`: Load the response into the same browsing context as the current\n * one.\n * - `_top`: Load the response into the top-level browsing context (that is,\n * the browsing context that is an ancestor of the current one, and has no\n * parent). If there is no parent, this option behaves the same way as\n * `_self`.\n \n @webnative\n /\n @Prop({ attribute: 'formtarget' })\n public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n /\n When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n \n @webnative\n /\n @Prop() public readonly href?: string\n\n /\n The name of the button, submitted as a pair with the button's `value` as\n * part of the form data, when that button is used to submit the form.\n * Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n \n - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n \n @webnative\n /\n @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n /\n The type of button.\n \n `button`: The button has no default behavior, and does nothing when\n * pressed by default. It can have client-side scripts listen to the\n * element's events, which are triggered when the events occur.\n \n `submit`: The button submits the form data to the server. This is the\n * default if the attribute is not specified for buttons associated with a\n * `<form>`, or if the attribute is an empty or invalid value.\n \n `reset`: The button resets all the controls to their initial values.\n \n @webnative\n /\n @Prop() public readonly type?: ButtonType\n\n /\n Defines the value associated with the button's `name` when it's submitted\n * with the form data. This value is passed to the server in params when the\n * form is submitted using this button. Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly value?: string\n\n /\n Emitted when the button loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsButtonElement\n\n private inheritedAttributes: Attributes = {}\n\n private get formElement(): HTMLElement \| null {\n return this.form !== undefined && this.form !== ''\n ? document.querySelector(`#${this.form}`)\n : this.element.closest('form')\n }\n\n private get buttonType(): ButtonType {\n if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n return this.type\n }\n\n private get iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n const hasNoLabel = this.text === undefined \|\| this.text === ''\n\n return hasIcon && hasNoLabel\n }\n\n private get computedAction(): Action \| undefined {\n switch (this.action) {\n case 'dropdown':\n case 'dropdown-close':\n case 'next': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedImportance(): Importance \| undefined {\n if (this.variant === 'destructive') return undefined\n\n switch (this.importance) {\n case 'emphasized':\n case 'subdued': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedSize(): Size \| undefined {\n if (this.variant === 'hero') return undefined\n\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 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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.buttonType === 'button' \|\| !this.formElement) return\n event.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.buttonType\n if (this.name !== undefined) fakeButton.name = this.name\n if (this.value !== undefined) fakeButton.value = this.value\n if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n fakeButton.formNoValidate = this.formNoValidate\n fakeButton.formTarget = this.formTarget\n fakeButton.style.display = 'none'\n\n this.formElement.append(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n\n return (\n <Tag\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-button': true,\n 'qds-icon-only': this.iconOnly,\n }}\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n data-variant={this.variant}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n role={Tag === 'a' ? 'button' : undefined}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.buttonType}\n value={Tag === 'a' ? undefined : this.value}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n data-variant={this.variant}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text}\n {this.badge !== undefined && this.badge !== '' && (\n <div\n class=\"qds-badge\"\n data-importance={this.computedImportance}\n data-variant={this.variant}\n >\n {this.badge}\n </div>\n )}\n {this.computedAction !== undefined && (\n <qds-icon\n class=\"qds-icon qds-action\"\n library=\"core\"\n name={this.computedAction}\n />\n )}\n </Tag>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1	+ {"file":"qds-button.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.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}\n\n.qds-action {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-button {\n align-items: center;\n appearance: none;\n background-color: initial;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding-block: 0;\n print-color-adjust: exact;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-badge {\n border-radius: var(--qds-control-rounded-border-radius);\n font: var(--qds-badge-text);\n height: var(--qds-badge-height);\n padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-button {\n gap: var(--qds-control-small-gap-internal);\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-small-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-button {\n gap: var(--qds-control-standard-gap-internal);\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-standard-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-button {\n gap: var(--qds-control-large-gap-internal);\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-large-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'],\n[data-variant='destructive'] {\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &.qds-icon-only {\n color: var(--qds-theme-control-text-standard);\n }\n\n &.qds-button {\n padding-inline: 0;\n border-block-end: var(--qds-control-border-width) solid transparent;\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);\n color: var(--qds-theme-link-standard-hover);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-hover);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-hover);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);\n color: var(--qds-theme-link-standard-pressed);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-pressed);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-pressed);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n\n &.qds-button {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n}\n\n[data-importance='emphasized'] {\n &.qds-badge {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-pressed);\n }\n }\n }\n}\n\n[data-variant='destructive'] {\n &.qds-badge {\n background-color: var(--qds-theme-feedback-action-destructive-contrast);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n }\n }\n}\n\n[data-variant='hero'] {\n &.qds-button {\n border-radius: var(--qds-control-hero-border-radius);\n font: var(--qds-control-hero-text);\n gap: var(--qds-control-hero-gap-internal);\n height: var(--qds-control-hero-height);\n }\n\n &.qds-button:not([data-importance='subdued']) {\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-hero-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'],\n[data-variant='hero'] {\n &.qds-icon-only {\n padding-inline: 0;\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 { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' \| 'dropdown' \| 'next'\nexport type ButtonTarget = '_blank' \| '_parent' \| '_self' \| '_top'\nexport type ButtonType = 'button' \| 'reset' \| 'submit'\nexport type FormMethod = 'dialog' \| 'get' \| 'post'\nexport type ButtonVariant = 'destructive' \| 'hero'\n\n/\n The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n \n @see https://quartz.se.com/build/components/button\n /\n@Component({\n tag: 'qds-button',\n shadow: { delegatesFocus: true },\n styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n /\n The name of the action icon to render.\n /\n @Prop() public readonly action?: Action\n\n /\n The button's badge text.\n /\n @Prop() public readonly badge?: string\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 The button's importance.\n /\n @Prop() public readonly importance?: Importance = 'standard'\n\n /\n The button's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n The button's text.\n /\n @Prop() public readonly text?: string\n\n /\n The button's variant.\n /\n @Prop() public readonly variant?: ButtonVariant\n\n /\n Prevents the button from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop()\n public readonly disabled?: boolean\n\n /\n Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n \n @webnative\n /\n @Prop() public readonly download?: string\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the button with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<button>` is associated with\n * its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<button>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n @webnative\n /\n @Prop() public readonly form?: string\n\n /\n The URL that processes the information submitted by the button. Overrides\n * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n * attribute of the button's form owner. Does nothing if there is no form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n /\n If the button is a submit button (it's inside/associated with a `<form>`\n * and doesn't have `type=\"button\"`), this attribute specifies the\n * [HTTP method][] used to submit the form, or `dialog` which won't submit\n * the form. Possible values:\n \n - `get`: The form data are appended to the form's action URL, with a ? as\n * a separator, and the resulting URL is sent to the server. Use this method\n * when the form has no side effects, like search forms.\n * - `post`: The data from the form are included in the body of the HTTP\n * request when sent to the server. Use when the form contains information\n * that shouldn't be public, like login credentials.\n * - `dialog`: Close the dialog box in which the button finds itself, if any,\n * and do not submit the button's form owner.\n \n If specified, this attribute overrides the `method` attribute of the\n * button's form owner.\n \n [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n \n @webnative\n /\n @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n /\n If the button is a submit button, this attribute specifies that the form\n * is not to be\n * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n * when it is submitted. If this attribute is specified, it overrides the\n * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n * attribute of the button's form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formnovalidate' })\n public readonly formNoValidate: boolean = false\n\n /\n If the button is a submit button, this attribute is an author-defined name\n * or standardized, underscore-prefixed keyword indicating where to display\n * the response from submitting the form. This is the `name` of, or keyword\n * for, a browsing context (a tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n * If this attribute is specified, it overrides the\n * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n * attribute of the button's form owner. The following keywords have special\n * meanings:\n \n - `_blank`: Load the response into a new unnamed browsing context — usually\n * a new tab or window, depending on the user's browser settings.\n * - `_parent`: Load the response into the parent browsing context of the\n * current one. If there is no parent, this option behaves the same way as\n * `_self`.\n * - `_self`: Load the response into the same browsing context as the current\n * one.\n * - `_top`: Load the response into the top-level browsing context (that is,\n * the browsing context that is an ancestor of the current one, and has no\n * parent). If there is no parent, this option behaves the same way as\n * `_self`.\n \n @webnative\n /\n @Prop({ attribute: 'formtarget' })\n public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n /\n When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n \n @webnative\n /\n @Prop() public readonly href?: string\n\n /\n The name of the button, submitted as a pair with the button's `value` as\n * part of the form data, when that button is used to submit the form.\n * Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n \n - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n \n @webnative\n /\n @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n /\n The type of button.\n \n `button`: The button has no default behavior, and does nothing when\n * pressed by default. It can have client-side scripts listen to the\n * element's events, which are triggered when the events occur.\n \n `submit`: The button submits the form data to the server. This is the\n * default if the attribute is not specified for buttons associated with a\n * `<form>`, or if the attribute is an empty or invalid value.\n \n `reset`: The button resets all the controls to their initial values.\n \n @webnative\n /\n @Prop() public readonly type?: ButtonType\n\n /\n Defines the value associated with the button's `name` when it's submitted\n * with the form data. This value is passed to the server in params when the\n * form is submitted using this button. Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly value?: string\n\n /\n Emitted when the button loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsButtonElement\n\n private inheritedAttributes: Attributes = {}\n\n private get formElement(): HTMLElement \| null {\n return this.form !== undefined && this.form !== ''\n ? document.querySelector(`#${this.form}`)\n : this.element.closest('form')\n }\n\n private get buttonType(): ButtonType {\n if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n return this.type\n }\n\n private get iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n const hasNoLabel = this.text === undefined \|\| this.text === ''\n\n return hasIcon && hasNoLabel\n }\n\n private get computedAction(): Action \| undefined {\n switch (this.action) {\n case 'dropdown':\n case 'dropdown-close':\n case 'next': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedImportance(): Importance \| undefined {\n if (this.variant === 'destructive') return undefined\n\n switch (this.importance) {\n case 'emphasized':\n case 'subdued': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedSize(): Size \| undefined {\n if (this.variant === 'hero') return undefined\n\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 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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.buttonType === 'button' \|\| !this.formElement) return\n event.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.buttonType\n if (this.name !== undefined) fakeButton.name = this.name\n if (this.value !== undefined) fakeButton.value = this.value\n if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n fakeButton.formNoValidate = this.formNoValidate\n fakeButton.formTarget = this.formTarget\n fakeButton.style.display = 'none'\n\n this.formElement.append(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n\n return (\n <Tag\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-button': true,\n 'qds-icon-only': this.iconOnly,\n }}\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n data-variant={this.variant}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n role={Tag === 'a' ? 'button' : undefined}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.buttonType}\n value={Tag === 'a' ? undefined : this.value}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n data-variant={this.variant}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text}\n {this.badge !== undefined && this.badge !== '' && (\n <div\n class=\"qds-badge\"\n data-importance={this.computedImportance}\n data-variant={this.variant}\n >\n {this.badge}\n </div>\n )}\n {this.computedAction !== undefined && (\n <qds-icon\n class=\"qds-icon qds-action\"\n library=\"core\"\n name={this.computedAction}\n />\n )}\n </Tag>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}

package/dist/cjs/qds-list-item.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 listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-disabled{opacity:var(--qds-theme-disabled)}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
+const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
 const QdsListItemStyle0 = listItemCss;
 const ListItem = class {

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

	@@ -1 +1 @@
1	- {"file":"qds-list-item.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.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-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\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 Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/\n \n \n @see https://quartz.se.com/build/components/list-item\n /\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /\n Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n /\n @Prop() public readonly disabled: boolean = false\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 Whether or not this list item denotes a navigation action.\n /\n @Prop() public readonly navigation: boolean = false\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n /\n The list items's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Whether or not the list item is selected.\n /\n @Prop() public readonly selected: boolean = false\n\n /\n Text to display for the subtext.\n /\n @Prop() public readonly subtext?: string\n\n /\n Primary text to display.\n /\n @Prop() public readonly text!: string\n\n /\n Emitted when the list item loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1	+ {"file":"qds-list-item.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.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-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &:not(.qds-selected) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\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 Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/\n \n \n @see https://quartz.se.com/build/components/list-item\n /\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /\n Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n /\n @Prop() public readonly disabled: boolean = false\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 Whether or not this list item denotes a navigation action.\n /\n @Prop() public readonly navigation: boolean = false\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n /\n The list items's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Whether or not the list item is selected.\n /\n @Prop() public readonly selected: boolean = false\n\n /\n Text to display for the subtext.\n /\n @Prop() public readonly subtext?: string\n\n /\n Primary text to display.\n /\n @Prop() public readonly text!: string\n\n /\n Emitted when the list item loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}

package/dist/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-02-17T02:20:14",
+  "timestamp": "2024-03-15T01:29:33",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.12.0",

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

@@ -6,7 +6,7 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-8135df23.js';
 import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers-ff47826f.js';
-const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size='small']{width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size='large']{width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-button[data-importance='standard'],.qds-button[data-importance='emphasized'],.qds-button[data-variant='destructive']{border-radius:var(--qds-control-border-radius)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']{padding-inline:0}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border:var(--qds-control-border-width) solid\n      var(--qds-theme-control-border)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);height:var(--qds-control-hero-height)}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-icon-only[data-variant='hero']{width:var(--qds-control-hero-height)}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-icon-only[data-size='small'],.qds-icon-only[data-size='standard'],.qds-icon-only[data-size='large'],.qds-icon-only[data-variant='hero']{padding-inline:0}";
+const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size='small']{width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size='standard']{width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size='large']{width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}.qds-button[data-importance='standard'],.qds-button[data-importance='emphasized'],.qds-button[data-variant='destructive']{border-radius:var(--qds-control-border-radius)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-icon-only[data-importance='subdued']{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']{padding-inline:0;border-block-end:var(--qds-control-border-width) solid transparent}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border:var(--qds-control-border-width) solid\n      var(--qds-theme-control-border)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);height:var(--qds-control-hero-height)}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-icon-only[data-variant='hero']{width:var(--qds-control-hero-height)}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-icon-only[data-size='small'],.qds-icon-only[data-size='standard'],.qds-icon-only[data-size='large'],.qds-icon-only[data-variant='hero']{padding-inline:0}";
 const QdsButtonStyle0 = buttonCss;
 const Button = class {

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

	@@ -1 +1 @@
1	- {"file":"qds-button.entry.js","mappings":"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","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.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}\n\n.qds-action {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-button {\n align-items: center;\n appearance: none;\n background-color: initial;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding-block: 0;\n print-color-adjust: exact;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-badge {\n border-radius: var(--qds-control-rounded-border-radius);\n font: var(--qds-badge-text);\n height: var(--qds-badge-height);\n padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-button {\n gap: var(--qds-control-small-gap-internal);\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-small-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-button {\n gap: var(--qds-control-standard-gap-internal);\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-standard-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-button {\n gap: var(--qds-control-large-gap-internal);\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-large-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'],\n[data-variant='destructive'] {\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &.qds-icon-only {\n color: var(--qds-theme-control-text-standard);\n }\n\n &.qds-button {\n padding-inline: 0;\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);\n color: var(--qds-theme-link-standard-hover);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-hover);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-hover);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);\n color: var(--qds-theme-link-standard-pressed);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-pressed);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-pressed);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n\n &.qds-button {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n}\n\n[data-importance='emphasized'] {\n &.qds-badge {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-pressed);\n }\n }\n }\n}\n\n[data-variant='destructive'] {\n &.qds-badge {\n background-color: var(--qds-theme-feedback-action-destructive-contrast);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n }\n }\n}\n\n[data-variant='hero'] {\n &.qds-button {\n border-radius: var(--qds-control-hero-border-radius);\n font: var(--qds-control-hero-text);\n gap: var(--qds-control-hero-gap-internal);\n height: var(--qds-control-hero-height);\n }\n\n &.qds-button:not([data-importance='subdued']) {\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-hero-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'],\n[data-variant='hero'] {\n &.qds-icon-only {\n padding-inline: 0;\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 { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' \| 'dropdown' \| 'next'\nexport type ButtonTarget = '_blank' \| '_parent' \| '_self' \| '_top'\nexport type ButtonType = 'button' \| 'reset' \| 'submit'\nexport type FormMethod = 'dialog' \| 'get' \| 'post'\nexport type ButtonVariant = 'destructive' \| 'hero'\n\n/\n The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n \n @see https://quartz.se.com/build/components/button\n /\n@Component({\n tag: 'qds-button',\n shadow: { delegatesFocus: true },\n styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n /\n The name of the action icon to render.\n /\n @Prop() public readonly action?: Action\n\n /\n The button's badge text.\n /\n @Prop() public readonly badge?: string\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 The button's importance.\n /\n @Prop() public readonly importance?: Importance = 'standard'\n\n /\n The button's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n The button's text.\n /\n @Prop() public readonly text?: string\n\n /\n The button's variant.\n /\n @Prop() public readonly variant?: ButtonVariant\n\n /\n Prevents the button from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop()\n public readonly disabled?: boolean\n\n /\n Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n \n @webnative\n /\n @Prop() public readonly download?: string\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the button with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<button>` is associated with\n * its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<button>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n @webnative\n /\n @Prop() public readonly form?: string\n\n /\n The URL that processes the information submitted by the button. Overrides\n * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n * attribute of the button's form owner. Does nothing if there is no form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n /\n If the button is a submit button (it's inside/associated with a `<form>`\n * and doesn't have `type=\"button\"`), this attribute specifies the\n * [HTTP method][] used to submit the form, or `dialog` which won't submit\n * the form. Possible values:\n \n - `get`: The form data are appended to the form's action URL, with a ? as\n * a separator, and the resulting URL is sent to the server. Use this method\n * when the form has no side effects, like search forms.\n * - `post`: The data from the form are included in the body of the HTTP\n * request when sent to the server. Use when the form contains information\n * that shouldn't be public, like login credentials.\n * - `dialog`: Close the dialog box in which the button finds itself, if any,\n * and do not submit the button's form owner.\n \n If specified, this attribute overrides the `method` attribute of the\n * button's form owner.\n \n [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n \n @webnative\n /\n @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n /\n If the button is a submit button, this attribute specifies that the form\n * is not to be\n * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n * when it is submitted. If this attribute is specified, it overrides the\n * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n * attribute of the button's form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formnovalidate' })\n public readonly formNoValidate: boolean = false\n\n /\n If the button is a submit button, this attribute is an author-defined name\n * or standardized, underscore-prefixed keyword indicating where to display\n * the response from submitting the form. This is the `name` of, or keyword\n * for, a browsing context (a tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n * If this attribute is specified, it overrides the\n * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n * attribute of the button's form owner. The following keywords have special\n * meanings:\n \n - `_blank`: Load the response into a new unnamed browsing context — usually\n * a new tab or window, depending on the user's browser settings.\n * - `_parent`: Load the response into the parent browsing context of the\n * current one. If there is no parent, this option behaves the same way as\n * `_self`.\n * - `_self`: Load the response into the same browsing context as the current\n * one.\n * - `_top`: Load the response into the top-level browsing context (that is,\n * the browsing context that is an ancestor of the current one, and has no\n * parent). If there is no parent, this option behaves the same way as\n * `_self`.\n \n @webnative\n /\n @Prop({ attribute: 'formtarget' })\n public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n /\n When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n \n @webnative\n /\n @Prop() public readonly href?: string\n\n /\n The name of the button, submitted as a pair with the button's `value` as\n * part of the form data, when that button is used to submit the form.\n * Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n \n - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n \n @webnative\n /\n @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n /\n The type of button.\n \n `button`: The button has no default behavior, and does nothing when\n * pressed by default. It can have client-side scripts listen to the\n * element's events, which are triggered when the events occur.\n \n `submit`: The button submits the form data to the server. This is the\n * default if the attribute is not specified for buttons associated with a\n * `<form>`, or if the attribute is an empty or invalid value.\n \n `reset`: The button resets all the controls to their initial values.\n \n @webnative\n /\n @Prop() public readonly type?: ButtonType\n\n /\n Defines the value associated with the button's `name` when it's submitted\n * with the form data. This value is passed to the server in params when the\n * form is submitted using this button. Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly value?: string\n\n /\n Emitted when the button loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsButtonElement\n\n private inheritedAttributes: Attributes = {}\n\n private get formElement(): HTMLElement \| null {\n return this.form !== undefined && this.form !== ''\n ? document.querySelector(`#${this.form}`)\n : this.element.closest('form')\n }\n\n private get buttonType(): ButtonType {\n if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n return this.type\n }\n\n private get iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n const hasNoLabel = this.text === undefined \|\| this.text === ''\n\n return hasIcon && hasNoLabel\n }\n\n private get computedAction(): Action \| undefined {\n switch (this.action) {\n case 'dropdown':\n case 'dropdown-close':\n case 'next': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedImportance(): Importance \| undefined {\n if (this.variant === 'destructive') return undefined\n\n switch (this.importance) {\n case 'emphasized':\n case 'subdued': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedSize(): Size \| undefined {\n if (this.variant === 'hero') return undefined\n\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 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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.buttonType === 'button' \|\| !this.formElement) return\n event.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.buttonType\n if (this.name !== undefined) fakeButton.name = this.name\n if (this.value !== undefined) fakeButton.value = this.value\n if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n fakeButton.formNoValidate = this.formNoValidate\n fakeButton.formTarget = this.formTarget\n fakeButton.style.display = 'none'\n\n this.formElement.append(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n\n return (\n <Tag\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-button': true,\n 'qds-icon-only': this.iconOnly,\n }}\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n data-variant={this.variant}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n role={Tag === 'a' ? 'button' : undefined}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.buttonType}\n value={Tag === 'a' ? undefined : this.value}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n data-variant={this.variant}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text}\n {this.badge !== undefined && this.badge !== '' && (\n <div\n class=\"qds-badge\"\n data-importance={this.computedImportance}\n data-variant={this.variant}\n >\n {this.badge}\n </div>\n )}\n {this.computedAction !== undefined && (\n <qds-icon\n class=\"qds-icon qds-action\"\n library=\"core\"\n name={this.computedAction}\n />\n )}\n </Tag>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1	+ {"file":"qds-button.entry.js","mappings":"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","names":[],"sources":["src/components/button/button.css?tag=qds-button&encapsulation=shadow","src/components/button/button.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}\n\n.qds-action {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-button {\n align-items: center;\n appearance: none;\n background-color: initial;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n padding-block: 0;\n print-color-adjust: exact;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-badge {\n border-radius: var(--qds-control-rounded-border-radius);\n font: var(--qds-badge-text);\n height: var(--qds-badge-height);\n padding-inline: var(--qds-badge-padding-horizontal);\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-button {\n gap: var(--qds-control-small-gap-internal);\n height: var(--qds-control-small-height);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-small-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-button {\n gap: var(--qds-control-standard-gap-internal);\n height: var(--qds-control-standard-height);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-standard-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-button {\n gap: var(--qds-control-large-gap-internal);\n height: var(--qds-control-large-height);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-large-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-importance='standard'],\n[data-importance='emphasized'],\n[data-variant='destructive'] {\n &.qds-button {\n border-radius: var(--qds-control-border-radius);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &.qds-icon-only {\n color: var(--qds-theme-control-text-standard);\n }\n\n &.qds-button {\n padding-inline: 0;\n border-block-end: var(--qds-control-border-width) solid transparent;\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);\n color: var(--qds-theme-link-standard-hover);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-hover);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-hover);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);\n color: var(--qds-theme-link-standard-pressed);\n\n .qds-badge {\n background-color: var(--qds-theme-link-standard-pressed);\n }\n\n &.qds-icon-only {\n background-color: var(--qds-theme-interactive-background-pressed);\n border: none;\n color: var(--qds-theme-control-text-standard);\n }\n }\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n\n &.qds-badge {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n\n &.qds-button {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n\n .qds-badge {\n color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n}\n\n[data-importance='emphasized'] {\n &.qds-badge {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n\n .qds-badge {\n color: var(--qds-theme-signature-color-pressed);\n }\n }\n }\n}\n\n[data-variant='destructive'] {\n &.qds-badge {\n background-color: var(--qds-theme-feedback-action-destructive-contrast);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &.qds-button {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-hover);\n }\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n\n .qds-badge {\n color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n }\n }\n}\n\n[data-variant='hero'] {\n &.qds-button {\n border-radius: var(--qds-control-hero-border-radius);\n font: var(--qds-control-hero-text);\n gap: var(--qds-control-hero-gap-internal);\n height: var(--qds-control-hero-height);\n }\n\n &.qds-button:not([data-importance='subdued']) {\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n }\n\n &.qds-icon-only {\n width: var(--qds-control-hero-height);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'],\n[data-variant='hero'] {\n &.qds-icon-only {\n padding-inline: 0;\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 { Component, Element, Event, h, Listen, Prop } from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' \| 'dropdown' \| 'next'\nexport type ButtonTarget = '_blank' \| '_parent' \| '_self' \| '_top'\nexport type ButtonType = 'button' \| 'reset' \| 'submit'\nexport type FormMethod = 'dialog' \| 'get' \| 'post'\nexport type ButtonVariant = 'destructive' \| 'hero'\n\n/\n The `<qds-button>` element is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it then performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n \n @see https://quartz.se.com/build/components/button\n /\n@Component({\n tag: 'qds-button',\n shadow: { delegatesFocus: true },\n styleUrl: 'button.css',\n})\nexport class Button implements ComponentInterface {\n /\n The name of the action icon to render.\n /\n @Prop() public readonly action?: Action\n\n /\n The button's badge text.\n /\n @Prop() public readonly badge?: string\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 The button's importance.\n /\n @Prop() public readonly importance?: Importance = 'standard'\n\n /\n The button's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n The button's text.\n /\n @Prop() public readonly text?: string\n\n /\n The button's variant.\n /\n @Prop() public readonly variant?: ButtonVariant\n\n /\n Prevents the button from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop()\n public readonly disabled?: boolean\n\n /\n Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n \n @webnative\n /\n @Prop() public readonly download?: string\n\n /\n The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the button with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<button>` is associated with\n * its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<button>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n \n @webnative\n /\n @Prop() public readonly form?: string\n\n /\n The URL that processes the information submitted by the button. Overrides\n * the [`action`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-formaction)\n * attribute of the button's form owner. Does nothing if there is no form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formaction' }) public readonly formAction?: string\n\n /\n If the button is a submit button (it's inside/associated with a `<form>`\n * and doesn't have `type=\"button\"`), this attribute specifies the\n * [HTTP method][] used to submit the form, or `dialog` which won't submit\n * the form. Possible values:\n \n - `get`: The form data are appended to the form's action URL, with a ? as\n * a separator, and the resulting URL is sent to the server. Use this method\n * when the form has no side effects, like search forms.\n * - `post`: The data from the form are included in the body of the HTTP\n * request when sent to the server. Use when the form contains information\n * that shouldn't be public, like login credentials.\n * - `dialog`: Close the dialog box in which the button finds itself, if any,\n * and do not submit the button's form owner.\n \n If specified, this attribute overrides the `method` attribute of the\n * button's form owner.\n \n [HTTP method]: https://developer.mozilla.org/docs/Web/HTTP/Methods\n \n @webnative\n /\n @Prop({ attribute: 'formmethod' }) public readonly formMethod?: FormMethod\n\n /\n If the button is a submit button, this attribute specifies that the form\n * is not to be\n * [validated](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)\n * when it is submitted. If this attribute is specified, it overrides the\n * [`novalidate`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-novalidate)\n * attribute of the button's form owner.\n \n @webnative\n /\n @Prop({ attribute: 'formnovalidate' })\n public readonly formNoValidate: boolean = false\n\n /\n If the button is a submit button, this attribute is an author-defined name\n * or standardized, underscore-prefixed keyword indicating where to display\n * the response from submitting the form. This is the `name` of, or keyword\n * for, a browsing context (a tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe)).\n * If this attribute is specified, it overrides the\n * [`target`](https://developer.mozilla.org/docs/Web/HTML/Element/form#attr-target)\n * attribute of the button's form owner. The following keywords have special\n * meanings:\n \n - `_blank`: Load the response into a new unnamed browsing context — usually\n * a new tab or window, depending on the user's browser settings.\n * - `_parent`: Load the response into the parent browsing context of the\n * current one. If there is no parent, this option behaves the same way as\n * `_self`.\n * - `_self`: Load the response into the same browsing context as the current\n * one.\n * - `_top`: Load the response into the top-level browsing context (that is,\n * the browsing context that is an ancestor of the current one, and has no\n * parent). If there is no parent, this option behaves the same way as\n * `_self`.\n \n @webnative\n /\n @Prop({ attribute: 'formtarget' })\n public readonly formTarget: LiteralUnion<ButtonTarget, string> = '_self'\n\n /\n When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n \n @webnative\n /\n @Prop() public readonly href?: string\n\n /\n The name of the button, submitted as a pair with the button's `value` as\n * part of the form data, when that button is used to submit the form.\n * Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n \n - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n \n @webnative\n /\n @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n /\n The type of button.\n \n `button`: The button has no default behavior, and does nothing when\n * pressed by default. It can have client-side scripts listen to the\n * element's events, which are triggered when the events occur.\n \n `submit`: The button submits the form data to the server. This is the\n * default if the attribute is not specified for buttons associated with a\n * `<form>`, or if the attribute is an empty or invalid value.\n \n `reset`: The button resets all the controls to their initial values.\n \n @webnative\n /\n @Prop() public readonly type?: ButtonType\n\n /\n Defines the value associated with the button's `name` when it's submitted\n * with the form data. This value is passed to the server in params when the\n * form is submitted using this button. Ignored when `href` is set.\n \n @webnative\n /\n @Prop() public readonly value?: string\n\n /\n Emitted when the button loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsButtonElement\n\n private inheritedAttributes: Attributes = {}\n\n private get formElement(): HTMLElement \| null {\n return this.form !== undefined && this.form !== ''\n ? document.querySelector(`#${this.form}`)\n : this.element.closest('form')\n }\n\n private get buttonType(): ButtonType {\n if (this.type === undefined) return this.formElement ? 'submit' : 'button'\n return this.type\n }\n\n private get iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n const hasNoLabel = this.text === undefined \|\| this.text === ''\n\n return hasIcon && hasNoLabel\n }\n\n private get computedAction(): Action \| undefined {\n switch (this.action) {\n case 'dropdown':\n case 'dropdown-close':\n case 'next': {\n return this.action\n }\n default: {\n return undefined\n }\n }\n }\n\n private get computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n private get computedImportance(): Importance \| undefined {\n if (this.variant === 'destructive') return undefined\n\n switch (this.importance) {\n case 'emphasized':\n case 'subdued': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n private get computedSize(): Size \| undefined {\n if (this.variant === 'hero') return undefined\n\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 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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.buttonType === 'button' \|\| !this.formElement) return\n event.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.buttonType\n if (this.name !== undefined) fakeButton.name = this.name\n if (this.value !== undefined) fakeButton.value = this.value\n if (this.formAction !== undefined) fakeButton.formAction = this.formAction\n if (this.formMethod !== undefined) fakeButton.formMethod = this.formMethod\n fakeButton.formNoValidate = this.formNoValidate\n fakeButton.formTarget = this.formTarget\n fakeButton.style.display = 'none'\n\n this.formElement.append(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n\n return (\n <Tag\n aria-disabled={this.computedDisabled.toString()}\n class={{\n 'qds-button': true,\n 'qds-icon-only': this.iconOnly,\n }}\n data-importance={this.computedImportance}\n data-size={this.computedSize}\n data-variant={this.variant}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n rel={Tag === 'a' ? 'noreferrer noopener' : undefined}\n role={Tag === 'a' ? 'button' : undefined}\n tabIndex={this.computedDisabled ? -1 : this.computedTabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.buttonType}\n value={Tag === 'a' ? undefined : this.value}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n data-variant={this.variant}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.text}\n {this.badge !== undefined && this.badge !== '' && (\n <div\n class=\"qds-badge\"\n data-importance={this.computedImportance}\n data-variant={this.variant}\n >\n {this.badge}\n </div>\n )}\n {this.computedAction !== undefined && (\n <qds-icon\n class=\"qds-icon qds-action\"\n library=\"core\"\n name={this.computedAction}\n />\n )}\n </Tag>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}

package/dist/esm/qds-list-item.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-8135df23.js';
 import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './helpers-ff47826f.js';
-const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-disabled{opacity:var(--qds-theme-disabled)}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
+const listItemCss = ":host([hidden]){display:none !important}:host{display:block}.qds-draggable,.qds-button,.qds-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-draggable,.qds-button{align-items:center}.qds-text,.qds-navigation{color:var(--qds-theme-title)}.qds-button{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-draggable{color:var(--qds-theme-control-text-standard);justify-content:center}.qds-list-item{border-block-end:var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard)}.qds-navigation{transform:scaleX(var(--qds-direction-factor, 1))}.qds-texts{flex-direction:column}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker);order:-1}.qds-button[data-size='small']{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size='small']>.qds-draggable{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}[data-size='small'] .qds-control-icon{font-size:var(--qds-control-small-icon-size)}[data-size='small']>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size='small']>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size='small'] .qds-text{font:var(--qds-list-item-small-title)}[data-size='small'] .qds-subtext{font:var(--qds-list-item-small-subtitle)}[data-size='small'] .qds-kicker{font:var(--qds-list-item-small-kicker)}.qds-button[data-size='standard']{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size='standard']>.qds-draggable{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}[data-size='standard'] .qds-control-icon{font-size:var(--qds-control-standard-icon-size)}[data-size='standard']>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size='standard']>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title)}[data-size='standard'] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}[data-size='standard'] .qds-kicker{font:var(--qds-list-item-standard-kicker)}.qds-button[data-size='large']{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size='large']>.qds-draggable{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}[data-size='large'] .qds-control-icon{font-size:var(--qds-control-large-icon-size)}[data-size='large']>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size='large']>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size='large'] .qds-text{font:var(--qds-list-item-large-title)}[data-size='large'] .qds-subtext{font:var(--qds-list-item-large-subtitle)}[data-size='large'] .qds-kicker{font:var(--qds-list-item-large-kicker)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size='small'] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size='standard'] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size='large'] .qds-text{font:var(--qds-list-item-large-title-emphasized)}:is([data-size='small'],[data-size='standard'],[data-size='large']).qds-draggable{padding-inline-start:0}";
 const QdsListItemStyle0 = listItemCss;
 const ListItem = class {

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

	@@ -1 +1 @@
1	- {"file":"qds-list-item.entry.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.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-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\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 Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/\n \n \n @see https://quartz.se.com/build/components/list-item\n /\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /\n Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n /\n @Prop() public readonly disabled: boolean = false\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 Whether or not this list item denotes a navigation action.\n /\n @Prop() public readonly navigation: boolean = false\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n /\n The list items's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Whether or not the list item is selected.\n /\n @Prop() public readonly selected: boolean = false\n\n /\n Text to display for the subtext.\n /\n @Prop() public readonly subtext?: string\n\n /\n Primary text to display.\n /\n @Prop() public readonly text!: string\n\n /\n Emitted when the list item loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1	+ {"file":"qds-list-item.entry.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.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-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts {\n display: flex;\n}\n\n.qds-button,\n.qds-texts {\n flex: 1 0;\n}\n\n.qds-draggable,\n.qds-button {\n align-items: center;\n}\n\n.qds-text,\n.qds-navigation {\n color: var(--qds-theme-title);\n}\n\n.qds-button {\n appearance: none;\n background: none;\n border-radius: var(--qds-focus-border-radius);\n border: none;\n cursor: pointer;\n text-align: initial;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n }\n\n &:not(.qds-selected) {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-draggable {\n color: var(--qds-theme-control-text-standard);\n justify-content: center;\n}\n\n.qds-list-item {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-navigation {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-texts {\n flex-direction: column;\n}\n\n.qds-subtext {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n[data-size='small'] {\n &.qds-button {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline: var(--qds-list-item-small-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-small-height);\n height: var(--qds-control-small-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-small-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-small-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n}\n\n[data-size='standard'] {\n &.qds-button {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline: var(--qds-list-item-standard-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-standard-height);\n height: var(--qds-control-standard-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-standard-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-standard-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n}\n\n[data-size='large'] {\n &.qds-button {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline: var(--qds-list-item-large-padding-horizontal);\n }\n\n & > .qds-draggable {\n width: var(--qds-control-large-height);\n height: var(--qds-control-large-height);\n }\n\n & .qds-control-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n & > .qds-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n & > .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n & .qds-text {\n font: var(--qds-list-item-large-title);\n }\n\n & .qds-subtext {\n font: var(--qds-list-item-large-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-text {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-text {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-text {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:is(\n [data-size='small'],\n [data-size='standard'],\n [data-size='large']\n ).qds-draggable {\n padding-inline-start: 0;\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 Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\n/\n \n \n @see https://quartz.se.com/build/components/list-item\n /\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /\n Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n /\n @Prop() public readonly disabled: boolean = false\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 Whether or not this list item denotes a navigation action.\n /\n @Prop() public readonly navigation: boolean = false\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n /\n The list items's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n Whether or not the list item is selected.\n /\n @Prop() public readonly selected: boolean = false\n\n /\n Text to display for the subtext.\n /\n @Prop() public readonly subtext?: string\n\n /\n Primary text to display.\n /\n @Prop() public readonly text!: string\n\n /\n Emitted when the list item loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly element!: HTMLQdsListItemElement\n\n @State() private draggable = false\n\n @State() private tabIndex = 0\n\n private inheritedAttributes: Attributes = {}\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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('draggable')\n protected draggableChanged(): void {\n this.draggable = this.element.draggable\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n this.draggable = this.element.draggable\n\n const tabindex = this.element.getAttribute('tabindex') ?? '0'\n const parsedValue = Number.parseInt(tabindex, 10)\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n public render() {\n return (\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-selected': this.selected,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <button\n class={{\n 'qds-button': true,\n 'qds-draggable': this.draggable,\n 'qds-selected': this.selected,\n }}\n data-size={this.computedSize}\n disabled={this.disabled}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n tabIndex={this.tabIndex}\n type=\"button\"\n >\n {this.draggable && (\n <div class=\"qds-draggable\">\n <qds-icon\n class=\"qds-control-icon\"\n library=\"core\"\n name=\"draggable\"\n />\n </div>\n )}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div class=\"qds-texts\">\n <div class=\"qds-text\">{this.text}</div>\n {this.subtext !== undefined && this.subtext !== '' && (\n <div class=\"qds-subtext\">{this.subtext}</div>\n )}\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n </div>\n {this.navigation && (\n <qds-icon\n class=\"qds-control-icon qds-navigation\"\n library=\"core\"\n name=\"navigation\"\n />\n )}\n </button>\n </li>\n )\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}

package/hydrate/index.js CHANGED Viewed

@@ -7716,7 +7716,7 @@ const roundByDPR = (value) => {
     return Math.round(value * dpr) / dpr;
 };
-const buttonCss = "/*!@:host([hidden])*/[hidden].sc-qds-button-h{display:none !important}/*!@:host*/.sc-qds-button-h{display:inline-block}/*!@.qds-action*/.qds-action.sc-qds-button{transform:scaleX(var(--qds-direction-factor, 1))}/*!@.qds-button*/.qds-button.sc-qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}/*!@.qds-button:any-link*/.qds-button.sc-qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}/*!@.qds-button:focus-visible*/.qds-button.sc-qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}/*!@.qds-badge*/.qds-badge.sc-qds-button{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}/*!@[aria-disabled='true']*/[aria-disabled='true'].sc-qds-button{opacity:var(--qds-theme-disabled);pointer-events:none}/*!@[data-size='small']*/[data-size='small'].sc-qds-button{font:var(--qds-control-small-text)}/*!@.qds-button[data-size='small']*/.qds-button[data-size='small'].sc-qds-button{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}/*!@.qds-icon-only[data-size='small']*/.qds-icon-only[data-size='small'].sc-qds-button{width:var(--qds-control-small-height)}/*!@.qds-icon[data-size='small']*/.qds-icon[data-size='small'].sc-qds-button{font-size:var(--qds-control-small-icon-size)}/*!@[data-size='standard']*/[data-size='standard'].sc-qds-button{font:var(--qds-control-standard-text)}/*!@.qds-button[data-size='standard']*/.qds-button[data-size='standard'].sc-qds-button{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}/*!@.qds-icon-only[data-size='standard']*/.qds-icon-only[data-size='standard'].sc-qds-button{width:var(--qds-control-standard-height)}/*!@.qds-icon[data-size='standard']*/.qds-icon[data-size='standard'].sc-qds-button{font-size:var(--qds-control-standard-icon-size)}/*!@[data-size='large']*/[data-size='large'].sc-qds-button{font:var(--qds-control-large-text)}/*!@.qds-button[data-size='large']*/.qds-button[data-size='large'].sc-qds-button{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}/*!@.qds-icon-only[data-size='large']*/.qds-icon-only[data-size='large'].sc-qds-button{width:var(--qds-control-large-height)}/*!@.qds-icon[data-size='large']*/.qds-icon[data-size='large'].sc-qds-button{font-size:var(--qds-control-large-icon-size)}/*!@.qds-button[data-importance='standard'], .qds-button[data-importance='emphasized'], .qds-button[data-variant='destructive']*/.qds-button[data-importance='standard'].sc-qds-button,.qds-button[data-importance='emphasized'].sc-qds-button,.qds-button[data-variant='destructive'].sc-qds-button{border-radius:var(--qds-control-border-radius)}/*!@[data-importance='subdued']*/[data-importance='subdued'].sc-qds-button{color:var(--qds-theme-link-standard-default)}/*!@.qds-badge[data-importance='subdued']*/.qds-badge[data-importance='subdued'].sc-qds-button{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}/*!@.qds-icon-only[data-importance='subdued']*/.qds-icon-only[data-importance='subdued'].sc-qds-button{color:var(--qds-theme-control-text-standard)}/*!@.qds-button[data-importance='subdued']*/.qds-button[data-importance='subdued'].sc-qds-button{padding-inline:0}/*!@.qds-button[data-importance='subdued']:hover*/.qds-button[data-importance='subdued'].sc-qds-button:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}/*!@.qds-button[data-importance='subdued']:hover .qds-badge*/.qds-button[data-importance='subdued'].sc-qds-button:hover .qds-badge.sc-qds-button{background-color:var(--qds-theme-link-standard-hover)}/*!@.qds-button.qds-icon-only[data-importance='subdued']:hover*/.qds-button.qds-icon-only[data-importance='subdued'].sc-qds-button:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}/*!@.qds-button[data-importance='subdued']:active*/.qds-button[data-importance='subdued'].sc-qds-button:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}/*!@.qds-button[data-importance='subdued']:active .qds-badge*/.qds-button[data-importance='subdued'].sc-qds-button:active .qds-badge.sc-qds-button{background-color:var(--qds-theme-link-standard-pressed)}/*!@.qds-button.qds-icon-only[data-importance='subdued']:active*/.qds-button.qds-icon-only[data-importance='subdued'].sc-qds-button:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}/*!@[data-importance='standard']*/[data-importance='standard'].sc-qds-button{color:var(--qds-theme-control-text-standard)}/*!@.qds-badge[data-importance='standard']*/.qds-badge[data-importance='standard'].sc-qds-button{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}/*!@.qds-button[data-importance='standard']*/.qds-button[data-importance='standard'].sc-qds-button{border:var(--qds-control-border-width) solid\n      var(--qds-theme-control-border)}/*!@.qds-button[data-importance='standard']:hover*/.qds-button[data-importance='standard'].sc-qds-button:hover{background-color:var(--qds-theme-interactive-background-hover)}/*!@.qds-button[data-importance='standard']:hover .qds-badge*/.qds-button[data-importance='standard'].sc-qds-button:hover .qds-badge.sc-qds-button{color:var(--qds-theme-interactive-background-hover)}/*!@.qds-button[data-importance='standard']:active*/.qds-button[data-importance='standard'].sc-qds-button:active{background-color:var(--qds-theme-interactive-background-pressed)}/*!@.qds-button[data-importance='standard']:active .qds-badge*/.qds-button[data-importance='standard'].sc-qds-button:active .qds-badge.sc-qds-button{color:var(--qds-theme-interactive-background-pressed)}/*!@.qds-badge[data-importance='emphasized']*/.qds-badge[data-importance='emphasized'].sc-qds-button{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}/*!@.qds-button[data-importance='emphasized']*/.qds-button[data-importance='emphasized'].sc-qds-button{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}/*!@.qds-button[data-importance='emphasized']:hover*/.qds-button[data-importance='emphasized'].sc-qds-button:hover{background-color:var(--qds-theme-signature-color-hover)}/*!@.qds-button[data-importance='emphasized']:hover .qds-badge*/.qds-button[data-importance='emphasized'].sc-qds-button:hover .qds-badge.sc-qds-button{color:var(--qds-theme-signature-color-hover)}/*!@.qds-button[data-importance='emphasized']:active*/.qds-button[data-importance='emphasized'].sc-qds-button:active{background-color:var(--qds-theme-signature-color-pressed)}/*!@.qds-button[data-importance='emphasized']:active .qds-badge*/.qds-button[data-importance='emphasized'].sc-qds-button:active .qds-badge.sc-qds-button{color:var(--qds-theme-signature-color-pressed)}/*!@.qds-badge[data-variant='destructive']*/.qds-badge[data-variant='destructive'].sc-qds-button{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}/*!@.qds-button[data-variant='destructive']*/.qds-button[data-variant='destructive'].sc-qds-button{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}/*!@.qds-button[data-variant='destructive']:hover*/.qds-button[data-variant='destructive'].sc-qds-button:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}/*!@.qds-button[data-variant='destructive']:hover .qds-badge*/.qds-button[data-variant='destructive'].sc-qds-button:hover .qds-badge.sc-qds-button{color:var(--qds-theme-feedback-action-destructive-hover)}/*!@.qds-button[data-variant='destructive']:active*/.qds-button[data-variant='destructive'].sc-qds-button:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}/*!@.qds-button[data-variant='destructive']:active .qds-badge*/.qds-button[data-variant='destructive'].sc-qds-button:active .qds-badge.sc-qds-button{color:var(--qds-theme-feedback-action-destructive-pressed)}/*!@.qds-button[data-variant='hero']*/.qds-button[data-variant='hero'].sc-qds-button{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);height:var(--qds-control-hero-height)}/*!@.qds-button[data-variant='hero']:not([data-importance='subdued'])*/.qds-button[data-variant='hero'].sc-qds-button:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}/*!@.qds-icon-only[data-variant='hero']*/.qds-icon-only[data-variant='hero'].sc-qds-button{width:var(--qds-control-hero-height)}/*!@.qds-icon[data-variant='hero']*/.qds-icon[data-variant='hero'].sc-qds-button{font-size:var(--qds-control-hero-icon-size)}/*!@.qds-icon-only[data-size='small'], .qds-icon-only[data-size='standard'], .qds-icon-only[data-size='large'], .qds-icon-only[data-variant='hero']*/.qds-icon-only[data-size='small'].sc-qds-button,.qds-icon-only[data-size='standard'].sc-qds-button,.qds-icon-only[data-size='large'].sc-qds-button,.qds-icon-only[data-variant='hero'].sc-qds-button{padding-inline:0}";
+const buttonCss = "/*!@:host([hidden])*/[hidden].sc-qds-button-h{display:none !important}/*!@:host*/.sc-qds-button-h{display:inline-block}/*!@.qds-action*/.qds-action.sc-qds-button{transform:scaleX(var(--qds-direction-factor, 1))}/*!@.qds-button*/.qds-button.sc-qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:nowrap;width:100%}/*!@.qds-button:any-link*/.qds-button.sc-qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}/*!@.qds-button:focus-visible*/.qds-button.sc-qds-button:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}/*!@.qds-badge*/.qds-badge.sc-qds-button{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}/*!@[aria-disabled='true']*/[aria-disabled='true'].sc-qds-button{opacity:var(--qds-theme-disabled);pointer-events:none}/*!@[data-size='small']*/[data-size='small'].sc-qds-button{font:var(--qds-control-small-text)}/*!@.qds-button[data-size='small']*/.qds-button[data-size='small'].sc-qds-button{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}/*!@.qds-icon-only[data-size='small']*/.qds-icon-only[data-size='small'].sc-qds-button{width:var(--qds-control-small-height)}/*!@.qds-icon[data-size='small']*/.qds-icon[data-size='small'].sc-qds-button{font-size:var(--qds-control-small-icon-size)}/*!@[data-size='standard']*/[data-size='standard'].sc-qds-button{font:var(--qds-control-standard-text)}/*!@.qds-button[data-size='standard']*/.qds-button[data-size='standard'].sc-qds-button{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}/*!@.qds-icon-only[data-size='standard']*/.qds-icon-only[data-size='standard'].sc-qds-button{width:var(--qds-control-standard-height)}/*!@.qds-icon[data-size='standard']*/.qds-icon[data-size='standard'].sc-qds-button{font-size:var(--qds-control-standard-icon-size)}/*!@[data-size='large']*/[data-size='large'].sc-qds-button{font:var(--qds-control-large-text)}/*!@.qds-button[data-size='large']*/.qds-button[data-size='large'].sc-qds-button{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}/*!@.qds-icon-only[data-size='large']*/.qds-icon-only[data-size='large'].sc-qds-button{width:var(--qds-control-large-height)}/*!@.qds-icon[data-size='large']*/.qds-icon[data-size='large'].sc-qds-button{font-size:var(--qds-control-large-icon-size)}/*!@.qds-button[data-importance='standard'], .qds-button[data-importance='emphasized'], .qds-button[data-variant='destructive']*/.qds-button[data-importance='standard'].sc-qds-button,.qds-button[data-importance='emphasized'].sc-qds-button,.qds-button[data-variant='destructive'].sc-qds-button{border-radius:var(--qds-control-border-radius)}/*!@[data-importance='subdued']*/[data-importance='subdued'].sc-qds-button{color:var(--qds-theme-link-standard-default)}/*!@.qds-badge[data-importance='subdued']*/.qds-badge[data-importance='subdued'].sc-qds-button{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}/*!@.qds-icon-only[data-importance='subdued']*/.qds-icon-only[data-importance='subdued'].sc-qds-button{color:var(--qds-theme-control-text-standard)}/*!@.qds-button[data-importance='subdued']*/.qds-button[data-importance='subdued'].sc-qds-button{padding-inline:0;border-block-end:var(--qds-control-border-width) solid transparent}/*!@.qds-button[data-importance='subdued']:hover*/.qds-button[data-importance='subdued'].sc-qds-button:hover{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}/*!@.qds-button[data-importance='subdued']:hover .qds-badge*/.qds-button[data-importance='subdued'].sc-qds-button:hover .qds-badge.sc-qds-button{background-color:var(--qds-theme-link-standard-hover)}/*!@.qds-button.qds-icon-only[data-importance='subdued']:hover*/.qds-button.qds-icon-only[data-importance='subdued'].sc-qds-button:hover{background-color:var(--qds-theme-interactive-background-hover);border:none;color:var(--qds-theme-control-text-standard)}/*!@.qds-button[data-importance='subdued']:active*/.qds-button[data-importance='subdued'].sc-qds-button:active{border-block-end:var(--qds-control-border-width) solid\n        var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}/*!@.qds-button[data-importance='subdued']:active .qds-badge*/.qds-button[data-importance='subdued'].sc-qds-button:active .qds-badge.sc-qds-button{background-color:var(--qds-theme-link-standard-pressed)}/*!@.qds-button.qds-icon-only[data-importance='subdued']:active*/.qds-button.qds-icon-only[data-importance='subdued'].sc-qds-button:active{background-color:var(--qds-theme-interactive-background-pressed);border:none;color:var(--qds-theme-control-text-standard)}/*!@[data-importance='standard']*/[data-importance='standard'].sc-qds-button{color:var(--qds-theme-control-text-standard)}/*!@.qds-badge[data-importance='standard']*/.qds-badge[data-importance='standard'].sc-qds-button{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}/*!@.qds-button[data-importance='standard']*/.qds-button[data-importance='standard'].sc-qds-button{border:var(--qds-control-border-width) solid\n      var(--qds-theme-control-border)}/*!@.qds-button[data-importance='standard']:hover*/.qds-button[data-importance='standard'].sc-qds-button:hover{background-color:var(--qds-theme-interactive-background-hover)}/*!@.qds-button[data-importance='standard']:hover .qds-badge*/.qds-button[data-importance='standard'].sc-qds-button:hover .qds-badge.sc-qds-button{color:var(--qds-theme-interactive-background-hover)}/*!@.qds-button[data-importance='standard']:active*/.qds-button[data-importance='standard'].sc-qds-button:active{background-color:var(--qds-theme-interactive-background-pressed)}/*!@.qds-button[data-importance='standard']:active .qds-badge*/.qds-button[data-importance='standard'].sc-qds-button:active .qds-badge.sc-qds-button{color:var(--qds-theme-interactive-background-pressed)}/*!@.qds-badge[data-importance='emphasized']*/.qds-badge[data-importance='emphasized'].sc-qds-button{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}/*!@.qds-button[data-importance='emphasized']*/.qds-button[data-importance='emphasized'].sc-qds-button{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}/*!@.qds-button[data-importance='emphasized']:hover*/.qds-button[data-importance='emphasized'].sc-qds-button:hover{background-color:var(--qds-theme-signature-color-hover)}/*!@.qds-button[data-importance='emphasized']:hover .qds-badge*/.qds-button[data-importance='emphasized'].sc-qds-button:hover .qds-badge.sc-qds-button{color:var(--qds-theme-signature-color-hover)}/*!@.qds-button[data-importance='emphasized']:active*/.qds-button[data-importance='emphasized'].sc-qds-button:active{background-color:var(--qds-theme-signature-color-pressed)}/*!@.qds-button[data-importance='emphasized']:active .qds-badge*/.qds-button[data-importance='emphasized'].sc-qds-button:active .qds-badge.sc-qds-button{color:var(--qds-theme-signature-color-pressed)}/*!@.qds-badge[data-variant='destructive']*/.qds-badge[data-variant='destructive'].sc-qds-button{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}/*!@.qds-button[data-variant='destructive']*/.qds-button[data-variant='destructive'].sc-qds-button{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}/*!@.qds-button[data-variant='destructive']:hover*/.qds-button[data-variant='destructive'].sc-qds-button:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}/*!@.qds-button[data-variant='destructive']:hover .qds-badge*/.qds-button[data-variant='destructive'].sc-qds-button:hover .qds-badge.sc-qds-button{color:var(--qds-theme-feedback-action-destructive-hover)}/*!@.qds-button[data-variant='destructive']:active*/.qds-button[data-variant='destructive'].sc-qds-button:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}/*!@.qds-button[data-variant='destructive']:active .qds-badge*/.qds-button[data-variant='destructive'].sc-qds-button:active .qds-badge.sc-qds-button{color:var(--qds-theme-feedback-action-destructive-pressed)}/*!@.qds-button[data-variant='hero']*/.qds-button[data-variant='hero'].sc-qds-button{border-radius:var(--qds-control-hero-border-radius);font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);height:var(--qds-control-hero-height)}/*!@.qds-button[data-variant='hero']:not([data-importance='subdued'])*/.qds-button[data-variant='hero'].sc-qds-button:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}/*!@.qds-icon-only[data-variant='hero']*/.qds-icon-only[data-variant='hero'].sc-qds-button{width:var(--qds-control-hero-height)}/*!@.qds-icon[data-variant='hero']*/.qds-icon[data-variant='hero'].sc-qds-button{font-size:var(--qds-control-hero-icon-size)}/*!@.qds-icon-only[data-size='small'], .qds-icon-only[data-size='standard'], .qds-icon-only[data-size='large'], .qds-icon-only[data-variant='hero']*/.qds-icon-only[data-size='small'].sc-qds-button,.qds-icon-only[data-size='standard'].sc-qds-button,.qds-icon-only[data-size='large'].sc-qds-button,.qds-icon-only[data-variant='hero'].sc-qds-button{padding-inline:0}";
 var QdsButtonStyle0 = buttonCss;
 /**
@@ -10616,7 +10616,7 @@ class Label {
     }; }
 }
-const listItemCss = "/*!@:host([hidden])*/[hidden].sc-qds-list-item-h{display:none !important}/*!@:host*/.sc-qds-list-item-h{display:block}/*!@.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts*/.qds-draggable.sc-qds-list-item,.qds-button.sc-qds-list-item,.qds-list-item.sc-qds-list-item,.qds-texts.sc-qds-list-item{display:flex}/*!@.qds-button,\n.qds-texts*/.qds-button.sc-qds-list-item,.qds-texts.sc-qds-list-item{flex:1 0}/*!@.qds-draggable,\n.qds-button*/.qds-draggable.sc-qds-list-item,.qds-button.sc-qds-list-item{align-items:center}/*!@.qds-text,\n.qds-navigation*/.qds-text.sc-qds-list-item,.qds-navigation.sc-qds-list-item{color:var(--qds-theme-title)}/*!@.qds-button*/.qds-button.sc-qds-list-item{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;text-align:initial}/*!@.qds-button:focus-visible*/.qds-button.sc-qds-list-item:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}/*!@.qds-disabled*/.qds-disabled.sc-qds-list-item{opacity:var(--qds-theme-disabled)}/*!@.qds-draggable*/.qds-draggable.sc-qds-list-item{color:var(--qds-theme-control-text-standard);justify-content:center}/*!@.qds-list-item*/.qds-list-item.sc-qds-list-item{border-block-end:var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard)}/*!@.qds-navigation*/.qds-navigation.sc-qds-list-item{transform:scaleX(var(--qds-direction-factor, 1))}/*!@.qds-texts*/.qds-texts.sc-qds-list-item{flex-direction:column}/*!@.qds-subtext*/.qds-subtext.sc-qds-list-item{color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-list-item{color:var(--qds-theme-kicker);order:-1}/*!@.qds-button[data-size='small']*/.qds-button[data-size='small'].sc-qds-list-item{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}/*!@[data-size='small'] > .qds-draggable*/[data-size='small'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}/*!@[data-size='small'] .qds-control-icon*/[data-size='small'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-small-icon-size)}/*!@[data-size='small'] > .qds-icon*/[data-size='small'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-small-icon-size)}/*!@[data-size='small'] > .qds-texts*/[data-size='small'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-small-titles-gap)}/*!@[data-size='small'] .qds-text*/[data-size='small'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-small-title)}/*!@[data-size='small'] .qds-subtext*/[data-size='small'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-small-subtitle)}/*!@[data-size='small'] .qds-kicker*/[data-size='small'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-small-kicker)}/*!@.qds-button[data-size='standard']*/.qds-button[data-size='standard'].sc-qds-list-item{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}/*!@[data-size='standard'] > .qds-draggable*/[data-size='standard'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}/*!@[data-size='standard'] .qds-control-icon*/[data-size='standard'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-standard-icon-size)}/*!@[data-size='standard'] > .qds-icon*/[data-size='standard'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-standard-icon-size)}/*!@[data-size='standard'] > .qds-texts*/[data-size='standard'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-standard-titles-gap)}/*!@[data-size='standard'] .qds-text*/[data-size='standard'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-standard-title)}/*!@[data-size='standard'] .qds-subtext*/[data-size='standard'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-standard-subtitle)}/*!@[data-size='standard'] .qds-kicker*/[data-size='standard'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-standard-kicker)}/*!@.qds-button[data-size='large']*/.qds-button[data-size='large'].sc-qds-list-item{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}/*!@[data-size='large'] > .qds-draggable*/[data-size='large'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}/*!@[data-size='large'] .qds-control-icon*/[data-size='large'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-large-icon-size)}/*!@[data-size='large'] > .qds-icon*/[data-size='large'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-large-icon-size)}/*!@[data-size='large'] > .qds-texts*/[data-size='large'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-large-titles-gap)}/*!@[data-size='large'] .qds-text*/[data-size='large'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-large-title)}/*!@[data-size='large'] .qds-subtext*/[data-size='large'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-large-subtitle)}/*!@[data-size='large'] .qds-kicker*/[data-size='large'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-large-kicker)}/*!@.qds-selected.qds-list-item*/.qds-selected.qds-list-item.sc-qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}/*!@.qds-selected[data-size='small'] .qds-text*/.qds-selected[data-size='small'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-small-title-emphasized)}/*!@.qds-selected[data-size='standard'] .qds-text*/.qds-selected[data-size='standard'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-standard-title-emphasized)}/*!@.qds-selected[data-size='large'] .qds-text*/.qds-selected[data-size='large'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-large-title-emphasized)}/*!@:is(\n    [data-size='small'],\n    [data-size='standard'],\n    [data-size='large']\n  ).qds-draggable*/.sc-qds-list-item:is([data-size='small'].sc-qds-list-item,[data-size='standard'].sc-qds-list-item,[data-size='large'].sc-qds-list-item).qds-draggable.sc-qds-list-item{padding-inline-start:0}";
+const listItemCss = "/*!@:host([hidden])*/[hidden].sc-qds-list-item-h{display:none !important}/*!@:host*/.sc-qds-list-item-h{display:block}/*!@.qds-draggable,\n.qds-button,\n.qds-list-item,\n.qds-texts*/.qds-draggable.sc-qds-list-item,.qds-button.sc-qds-list-item,.qds-list-item.sc-qds-list-item,.qds-texts.sc-qds-list-item{display:flex}/*!@.qds-button,\n.qds-texts*/.qds-button.sc-qds-list-item,.qds-texts.sc-qds-list-item{flex:1 0}/*!@.qds-draggable,\n.qds-button*/.qds-draggable.sc-qds-list-item,.qds-button.sc-qds-list-item{align-items:center}/*!@.qds-text,\n.qds-navigation*/.qds-text.sc-qds-list-item,.qds-navigation.sc-qds-list-item{color:var(--qds-theme-title)}/*!@.qds-button*/.qds-button.sc-qds-list-item{-webkit-appearance:none;appearance:none;background:none;border-radius:var(--qds-focus-border-radius);border:none;cursor:pointer;text-align:initial}/*!@.qds-button:focus-visible*/.qds-button.sc-qds-list-item:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}/*!@.qds-button:not(.qds-selected):hover*/.qds-button.sc-qds-list-item:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}/*!@.qds-button:not(.qds-selected):active*/.qds-button.sc-qds-list-item:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}/*!@.qds-disabled*/.qds-disabled.sc-qds-list-item{opacity:var(--qds-theme-disabled);pointer-events:none}/*!@.qds-draggable*/.qds-draggable.sc-qds-list-item{color:var(--qds-theme-control-text-standard);justify-content:center}/*!@.qds-list-item*/.qds-list-item.sc-qds-list-item{border-block-end:var(--qds-list-border-width) solid\n    var(--qds-theme-divider-standard)}/*!@.qds-navigation*/.qds-navigation.sc-qds-list-item{transform:scaleX(var(--qds-direction-factor, 1))}/*!@.qds-texts*/.qds-texts.sc-qds-list-item{flex-direction:column}/*!@.qds-subtext*/.qds-subtext.sc-qds-list-item{color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-list-item{color:var(--qds-theme-kicker);order:-1}/*!@.qds-button[data-size='small']*/.qds-button[data-size='small'].sc-qds-list-item{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}/*!@[data-size='small'] > .qds-draggable*/[data-size='small'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-small-height);height:var(--qds-control-small-height)}/*!@[data-size='small'] .qds-control-icon*/[data-size='small'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-small-icon-size)}/*!@[data-size='small'] > .qds-icon*/[data-size='small'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-small-icon-size)}/*!@[data-size='small'] > .qds-texts*/[data-size='small'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-small-titles-gap)}/*!@[data-size='small'] .qds-text*/[data-size='small'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-small-title)}/*!@[data-size='small'] .qds-subtext*/[data-size='small'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-small-subtitle)}/*!@[data-size='small'] .qds-kicker*/[data-size='small'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-small-kicker)}/*!@.qds-button[data-size='standard']*/.qds-button[data-size='standard'].sc-qds-list-item{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}/*!@[data-size='standard'] > .qds-draggable*/[data-size='standard'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-standard-height);height:var(--qds-control-standard-height)}/*!@[data-size='standard'] .qds-control-icon*/[data-size='standard'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-standard-icon-size)}/*!@[data-size='standard'] > .qds-icon*/[data-size='standard'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-standard-icon-size)}/*!@[data-size='standard'] > .qds-texts*/[data-size='standard'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-standard-titles-gap)}/*!@[data-size='standard'] .qds-text*/[data-size='standard'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-standard-title)}/*!@[data-size='standard'] .qds-subtext*/[data-size='standard'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-standard-subtitle)}/*!@[data-size='standard'] .qds-kicker*/[data-size='standard'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-standard-kicker)}/*!@.qds-button[data-size='large']*/.qds-button[data-size='large'].sc-qds-list-item{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}/*!@[data-size='large'] > .qds-draggable*/[data-size='large'].sc-qds-list-item>.qds-draggable.sc-qds-list-item{width:var(--qds-control-large-height);height:var(--qds-control-large-height)}/*!@[data-size='large'] .qds-control-icon*/[data-size='large'].sc-qds-list-item .qds-control-icon.sc-qds-list-item{font-size:var(--qds-control-large-icon-size)}/*!@[data-size='large'] > .qds-icon*/[data-size='large'].sc-qds-list-item>.qds-icon.sc-qds-list-item{font-size:var(--qds-list-item-large-icon-size)}/*!@[data-size='large'] > .qds-texts*/[data-size='large'].sc-qds-list-item>.qds-texts.sc-qds-list-item{gap:var(--qds-list-item-large-titles-gap)}/*!@[data-size='large'] .qds-text*/[data-size='large'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-large-title)}/*!@[data-size='large'] .qds-subtext*/[data-size='large'].sc-qds-list-item .qds-subtext.sc-qds-list-item{font:var(--qds-list-item-large-subtitle)}/*!@[data-size='large'] .qds-kicker*/[data-size='large'].sc-qds-list-item .qds-kicker.sc-qds-list-item{font:var(--qds-list-item-large-kicker)}/*!@.qds-selected.qds-list-item*/.qds-selected.qds-list-item.sc-qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}/*!@.qds-selected[data-size='small'] .qds-text*/.qds-selected[data-size='small'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-small-title-emphasized)}/*!@.qds-selected[data-size='standard'] .qds-text*/.qds-selected[data-size='standard'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-standard-title-emphasized)}/*!@.qds-selected[data-size='large'] .qds-text*/.qds-selected[data-size='large'].sc-qds-list-item .qds-text.sc-qds-list-item{font:var(--qds-list-item-large-title-emphasized)}/*!@:is(\n    [data-size='small'],\n    [data-size='standard'],\n    [data-size='large']\n  ).qds-draggable*/.sc-qds-list-item:is([data-size='small'].sc-qds-list-item,[data-size='standard'].sc-qds-list-item,[data-size='large'].sc-qds-list-item).qds-draggable.sc-qds-list-item{padding-inline-start:0}";
 var QdsListItemStyle0 = listItemCss;
 /**

package/package.json CHANGED Viewed

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

package/styles/core.css CHANGED Viewed

@@ -4,40 +4,79 @@
 * SPDX-License-Identifier: Apache-2.0
 */
-figure {
+[dir='rtl'] {
+  --qds-direction-factor: -1;
+}
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  figure {
   display: flex;
   flex-direction: column;
   gap: var(--qds-figure-gap);
 }
-figcaption {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  figcaption {
   color: var(--qds-theme-figure-caption);
   font: var(--qds-figure-caption);
 }
-li,
-p,
-pre {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p, pre) {
   color: var(--qds-theme-text-standard);
 }
-li,
-p {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p) {
   font: var(--qds-text-standard);
 }
-:is(li, p) strong {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p)
+  strong {
   font: var(--qds-text-emphasized);
 }
-pre {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  pre {
   font: var(--qds-code-standard);
 }
-pre strong {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  pre
+  strong {
   font: var(--qds-code-emphasized);
 }
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(menu, ol, ul) {
+  padding-inline-start: var(--qds-list-item-standard-padding-indent-step);
+}
 :is(li, p, span).qds-subdued {
   color: var(--qds-theme-text-subdued);
   font: var(--qds-text-subdued);
@@ -377,3 +416,28 @@ pre strong {
 .qds-controls-jumbo .qds-related {
   gap: var(--qds-control-jumbo-gap-siblings-related);
 }
+.qds-interactive {
+  cursor: pointer;
+  user-select: none;
+}
+:is(
+    .qds-main-subsection,
+    .qds-navigation-subsection,
+    .qds-panel-subsection,
+    .qds-popup-subsection
+  ).qds-interactive:hover {
+  background-color: var(--qds-theme-interactive-background-hover);
+  text-decoration: none;
+}
+:is(
+    .qds-main-subsection,
+    .qds-navigation-subsection,
+    .qds-panel-subsection,
+    .qds-popup-subsection
+  ).qds-interactive:active {
+  background-color: var(--qds-theme-interactive-background-selected);
+  text-decoration: none;
+}