npm - @quartzds/core - Versions diffs - 1.0.0-beta.92 → 1.0.0-beta.93 - Mend

@quartzds/core 1.0.0-beta.92 → 1.0.0-beta.93

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

package/components/{p-b6c04008.js → p-80d5edc6.js} +2 -2
package/components/{p-b6c04008.js.map → p-80d5edc6.js.map} +1 -1
package/components/{p-9ffb4b49.js → p-8a540ec4.js} +2 -2
package/components/{p-9ffb4b49.js.map → p-8a540ec4.js.map} +1 -1
package/components/{p-a529eb5c.js → p-fc31384f.js} +2 -2
package/components/{p-a529eb5c.js.map → p-fc31384f.js.map} +1 -1
package/components/qds-button.js +1 -1
package/components/qds-checkbox.js +1 -1
package/components/qds-input.js +15 -9
package/components/qds-input.js.map +1 -1
package/components/qds-list-item.js +1 -1
package/components/qds-loader.js +1 -1
package/components/qds-progress-bar.js +1 -1
package/components/qds-select.js +1 -1
package/components/qds-tab.js +1 -1
package/components/qds-tabbar.js +1 -1
package/components/qds-title.js +1 -1
package/dist/cjs/qds-button.cjs.entry.js +1 -1
package/dist/cjs/qds-checkbox.cjs.entry.js +1 -1
package/dist/cjs/qds-input.cjs.entry.js +14 -8
package/dist/cjs/qds-input.cjs.entry.js.map +1 -1
package/dist/cjs/qds-loader.cjs.entry.js +1 -1
package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
package/dist/cjs/qds-select.cjs.entry.js +1 -1
package/dist/cjs/qds-tag_2.cjs.entry.js +1 -1
package/dist/custom-elements.json +10 -0
package/dist/docs.json +1 -1
package/dist/esm/qds-button.entry.js +1 -1
package/dist/esm/qds-checkbox.entry.js +1 -1
package/dist/esm/qds-input.entry.js +14 -8
package/dist/esm/qds-input.entry.js.map +1 -1
package/dist/esm/qds-loader.entry.js +1 -1
package/dist/esm/qds-progress-bar.entry.js +1 -1
package/dist/esm/qds-select.entry.js +1 -1
package/dist/esm/qds-tag_2.entry.js +1 -1
package/hydrate/index.js +20 -14
package/hydrate/index.mjs +20 -14
package/package.json +1 -1

package/components/{p-b6c04008.js → p-80d5edc6.js} RENAMED Viewed

@@ -11,7 +11,7 @@ import { d as defineCustomElement$3 } from './p-5570cc30.js';
 import { d as defineCustomElement$2 } from './p-72c09714.js';
 import { d as defineCustomElement$1 } from './p-70d12c72.js';
-const buttonCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-button:disabled,.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-overflow[data-size=hero]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"b\"}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:b;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:b;justify-content:center;min-width:0;outline:none;padding-block:0;position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;text-align:center;-webkit-user-select:none;user-select:none}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible~.qds-focus-ring{visibility:visible}.qds-icon{flex-shrink:0}.qds-indicator{inset-block-start:0;inset-inline-end:0;position:absolute;transform:translate(50%,-50%)}[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-button.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-button.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-button.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)}[data-size=large],[data-size=small],[data-size=standard]{line-height:normal}.qds-button.qds-icon-only[data-size=large],.qds-button.qds-icon-only[data-size=small],.qds-button.qds-icon-only[data-size=standard]{padding-inline:0}[data-size=hero]{font:var(--qds-control-hero-text)}.qds-button[data-size=hero]{border-radius:var(\n        --qds-control-border-radius-top-left,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-control-border-radius-top-right,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n      );gap:var(--qds-control-hero-gap-internal);padding-block:var(--qds-control-hero-padding-auto-height);padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-button.qds-icon-only[data-size=hero]{height:var(--qds-control-hero-height);padding-inline:0;width:var(--qds-control-hero-height)}.qds-focus-ring[data-size=hero]{border-radius:max(1px,var(\n          --qds-control-border-radius-top-left,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-control-border-radius-top-right,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-control-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-control-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n        ))}.qds-icon[data-size=hero]{font-size:var(--qds-control-hero-icon-size)}[data-importance=subdued]{color:var(--qds-theme-link-standard-default)}.qds-button[data-importance=subdued]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance=subdued]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance=subdued]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued]{border:none;color:var(--qds-theme-control-text-standard)}.qds-button.qds-icon-only[data-importance=subdued]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button.qds-icon-only[data-importance=subdued]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=standard]{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance=standard]{border-color:var(--qds-theme-control-border);border-style:solid;border-width:var(--qds-control-border-width) var(\n        --qds-control-border-width-inline-end,var(--qds-control-border-width)\n      ) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width)}.qds-button[data-importance=standard]:hover{background-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=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]:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance=destructive]{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-importance=destructive]:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=destructive]:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}[data-importance=subdued-destructive]{color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-importance=subdued-destructive]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued-destructive]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-hover);color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=subdued-destructive]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-pressed);color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-importance=subdued-destructive]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued-destructive]{border:none}.qds-button.qds-icon-only[data-importance=subdued-destructive]:hover{background-color:var(--qds-theme-interactive-background-hover);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button.qds-icon-only[data-importance=subdued-destructive]:active{background-color:var(--qds-theme-interactive-background-pressed);color:var(--qds-theme-feedback-action-destructive-default)}:is([data-action=dropdown],[data-action=dropdown-close]) .qds-action{margin-inline-start:auto;transition-duration:.3s;transition-property:transform}[data-importance=standard]:is([data-action=dropdown],[data-action=dropdown-close]){background-color:var(--qds-theme-control-input-background)}:is([data-action=dropdown],[data-action=dropdown-close]):not([data-importance=subdued]):not([data-importance=subdued-destructive]){padding-inline:var(--qds-control-input-padding-horizontal)}[data-action=dropdown-close] .qds-action{transform:rotate(-180deg)}";
+const buttonCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-button:disabled,.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-overflow[data-size=hero]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"g\"}.qds-focus-ring{border-radius:max(1px,var(\n        --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n      )) max(1px,var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n      ));grid-area:g;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n        --qds-control-border-width-inline-end,\n        var(--qds-control-border-width)\n      ))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n      --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n    ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n      --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n    ) var(\n      --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n    );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:g;justify-content:center;min-width:0;outline:none;padding-block:0;position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;text-align:center;-webkit-user-select:none;user-select:none}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-button:focus-visible~.qds-focus-ring{visibility:visible}.qds-icon{flex-shrink:0}.qds-indicator{inset-block-start:0;inset-inline-end:0;position:absolute;transform:translate(50%,-50%)}[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-button.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-button.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-button.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)}[data-size=large],[data-size=small],[data-size=standard]{line-height:normal}.qds-button.qds-icon-only[data-size=large],.qds-button.qds-icon-only[data-size=small],.qds-button.qds-icon-only[data-size=standard]{padding-inline:0}[data-size=hero]{font:var(--qds-control-hero-text)}.qds-button[data-size=hero]{border-radius:var(\n        --qds-control-border-radius-top-left,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-control-border-radius-top-right,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-control-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n      ) var(\n        --qds-control-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n      );gap:var(--qds-control-hero-gap-internal);padding-block:var(--qds-control-hero-padding-auto-height);padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-button.qds-icon-only[data-size=hero]{height:var(--qds-control-hero-height);padding-inline:0;width:var(--qds-control-hero-height)}.qds-focus-ring[data-size=hero]{border-radius:max(1px,var(\n          --qds-control-border-radius-top-left,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-control-border-radius-top-right,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-control-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n        )) max(1px,var(\n          --qds-control-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n        ))}.qds-icon[data-size=hero]{font-size:var(--qds-control-hero-icon-size)}[data-importance=subdued]{color:var(--qds-theme-link-standard-default)}.qds-button[data-importance=subdued]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance=subdued]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance=subdued]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued]{border:none;color:var(--qds-theme-control-text-standard)}.qds-button.qds-icon-only[data-importance=subdued]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button.qds-icon-only[data-importance=subdued]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=standard]{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance=standard]{border-color:var(--qds-theme-control-border);border-style:solid;border-width:var(--qds-control-border-width) var(\n        --qds-control-border-width-inline-end,var(--qds-control-border-width)\n      ) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width)}.qds-button[data-importance=standard]:hover{background-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=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]:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance=destructive]{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-importance=destructive]:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=destructive]:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}[data-importance=subdued-destructive]{color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-importance=subdued-destructive]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued-destructive]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-hover);color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=subdued-destructive]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-pressed);color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-importance=subdued-destructive]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued-destructive]{border:none}.qds-button.qds-icon-only[data-importance=subdued-destructive]:hover{background-color:var(--qds-theme-interactive-background-hover);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button.qds-icon-only[data-importance=subdued-destructive]:active{background-color:var(--qds-theme-interactive-background-pressed);color:var(--qds-theme-feedback-action-destructive-default)}:is([data-action=dropdown],[data-action=dropdown-close]) .qds-action{margin-inline-start:auto;transition-duration:.3s;transition-property:transform}[data-importance=standard]:is([data-action=dropdown],[data-action=dropdown-close]){background-color:var(--qds-theme-control-input-background)}:is([data-action=dropdown],[data-action=dropdown-close]):not([data-importance=subdued]):not([data-importance=subdued-destructive]){padding-inline:var(--qds-control-input-padding-horizontal)}[data-action=dropdown-close] .qds-action{transform:rotate(-180deg)}";
 const QdsButtonStyle0 = buttonCss;
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -409,4 +409,4 @@ function defineCustomElement() {
 export { Button as B, defineCustomElement as d };
-//# sourceMappingURL=p-b6c04008.js.map
+//# sourceMappingURL=p-80d5edc6.js.map

package/components/{p-b6c04008.js.map → p-80d5edc6.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-b6c04008.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-button:disabled,\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-overflow {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &[data-size='hero'] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: normal;\n }\n}\n\n.qds-action {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-container {\n display: grid;\n grid-template-areas: 'button';\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: button;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-button {\n position: relative;\n align-items: center;\n appearance: none;\n\n / Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto /\n min-width: 0;\n background-color: initial;\n border: none;\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n grid-area: button;\n justify-content: center;\n outline: none;\n padding-block: 0;\n print-color-adjust: exact;\n text-align: center;\n user-select: none;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible ~ .qds-focus-ring {\n visibility: visible;\n }\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\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 &.qds-icon-only {\n width: var(--qds-control-small-height);\n }\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 &.qds-icon-only {\n width: var(--qds-control-standard-height);\n }\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 &.qds-icon-only {\n width: var(--qds-control-large-height);\n }\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'] {\n line-height: normal;\n\n &.qds-button.qds-icon-only {\n padding-inline: 0;\n }\n}\n\n[data-size='hero'] {\n font: var(--qds-control-hero-text);\n\n &.qds-button {\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-hero-border-radius)\n );\n gap: var(--qds-control-hero-gap-internal);\n padding-block: var(--qds-control-hero-padding-auto-height);\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n\n &.qds-icon-only {\n height: var(--qds-control-hero-height);\n padding-inline: 0;\n width: var(--qds-control-hero-height);\n }\n }\n\n &.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-hero-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-hero-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-hero-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-hero-border-radius)\n )\n );\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-button {\n border-block-end: var(--qds-control-border-width) solid transparent;\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\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\n &:not(.qds-icon-only) {\n border-radius: 0;\n }\n\n &.qds-icon-only {\n border: none;\n color: var(--qds-theme-control-text-standard);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n\n &.qds-button {\n border-color: var(--qds-theme-control-border);\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n[data-importance='emphasized'] {\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\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[data-importance='destructive'] {\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\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n }\n}\n\n[data-importance='subdued-destructive'] {\n color: var(--qds-theme-feedback-action-destructive-default);\n\n &.qds-button {\n border-block-end: var(--qds-control-border-width) solid transparent;\n padding-inline: 0;\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-feedback-action-destructive-hover);\n color: var(--qds-theme-feedback-action-destructive-hover);\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-feedback-action-destructive-pressed);\n color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n\n &:not(.qds-icon-only) {\n border-radius: 0;\n }\n\n &.qds-icon-only {\n border: none;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n }\n }\n}\n\n:is([data-action='dropdown'], [data-action='dropdown-close']) {\n .qds-action {\n margin-inline-start: auto;\n transition-duration: 0.3s;\n transition-property: transform;\n }\n\n &[data-importance='standard'] {\n background-color: var(--qds-theme-control-input-background);\n }\n\n &:not([data-importance='subdued'], [data-importance='subdued-destructive']) {\n padding-inline: var(--qds-control-input-padding-horizontal);\n }\n}\n\n[data-action='dropdown-close'] .qds-action {\n transform: rotate(-180deg);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { isOverflowing, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' \| 'dropdown' \| 'next'\nexport type ButtonImportance =\n \| Importance\n \| 'destructive'\n \| 'subdued-destructive'\nexport type ButtonSize = Size \| 'hero'\nexport type ButtonTarget = '_blank' \| '_parent' \| '_self' \| '_top'\nexport type ButtonType = 'button' \| 'reset' \| 'submit'\nexport type FormMethod = 'dialog' \| 'get' \| 'post'\n\nconst isCounter = (value: unknown): value is number =>\n typeof value === 'string'\n ? !Number.isNaN(Number.parseFloat(value))\n : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' \| true =>\n value === '' \|\| value === true\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 formAssociated: true,\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 Displays an indicator if `true` or the empty string. Otherwise, displays a\n * counter badge if a number or string representing a number is used.\n \n @webnative\n /\n @Prop() public readonly badge?: number \| string \| true\n\n /\n The indicator or counter badge's accessible text that will be used by\n * screen readers.\n /\n @Prop() public readonly badgeDescription?: string\n\n /\n The indicator's status.\n /\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'neutral'\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?: ButtonImportance = 'standard'\n\n /\n The button's size.\n /\n @Prop() public readonly size?: Size \| 'hero' = 'standard'\n\n /\n The button's text.\n /\n @Prop() public readonly text!: string\n\n /\n Sets if button is icon only.\n /\n @Prop() public readonly iconOnly: boolean = false\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>`][] 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 `<qds-button>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-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 [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\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 Returns a list of the [`<label>`][] elements associated with the\n * `qds-button` element.\n \n [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n \n @readonly\n * @webnative\n /\n @Prop() public readonly labels: ElementInternals['labels'] =\n {} as ElementInternals['labels']\n\n /\n When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n \n @webnative\n /\n @Prop() public readonly rel?: string = 'noopener'\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 The error message that would be shown to the user if the `<qds-button>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-button>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\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 True if `<qds-button>` will be validated when the form is submitted; false\n * otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\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 host!: HTMLQdsButtonElement\n\n @State() private tabIndex?: number\n\n @State() private tooltip = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #button?: HTMLAnchorElement \| HTMLButtonElement\n\n #span?: HTMLSpanElement\n\n #ro?: ResizeObserver\n\n get #buttonType(): ButtonType {\n if (this.type === undefined)\n return this.internals.form ? 'submit' : 'button'\n return this.type\n }\n\n get #iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n return hasIcon && this.iconOnly\n }\n\n 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 get #computedActionIcon(): Exclude<Action, 'dropdown-close'> \| undefined {\n switch (this.action) {\n case 'dropdown':\n case 'next': {\n return this.action\n }\n case 'dropdown-close': {\n return 'dropdown'\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computedImportance(): ButtonImportance {\n switch (this.importance) {\n case 'emphasized':\n case 'subdued':\n case 'destructive':\n case 'subdued-destructive': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): ButtonSize {\n switch (this.size) {\n case 'small':\n case 'large':\n case 'hero': {\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.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.#buttonType === 'button' \|\| !this.internals.form) return\n if (this.#buttonType === 'reset') {\n this.internals.form.reset()\n } else {\n this.internals.form.requestSubmit()\n }\n event.preventDefault()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('text')\n protected textChanged(): void {\n this.internals.ariaLabel = this.text\n\n if (this.#ro) this.#ro.disconnect()\n if (!this.#span) return\n\n const span = this.#span\n readTask(() => {\n this.tooltip = isOverflowing(span)\n })\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isOverflowing(spanEntry.target)\n })\n this.#ro.observe(this.#span)\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'button'\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n this.#defineGetter('labels', () => this.internals.labels)\n\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n }\n\n public disconnectedCallback(): void {\n if (this.#ro) this.#ro.disconnect()\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n const disabledTabIndex = Tag === 'a' ? -1 : undefined\n const hasBadgeProperties =\n this.badgeDescription !== undefined && this.badge !== undefined\n const ariaLabel = hasBadgeProperties\n ? `${this.text} ${this.badge} ${this.badgeDescription}`\n : this.text\n\n return (\n <div class=\"qds-container\" onClick={this.#onClick} aria-hidden=\"true\">\n <Tag\n aria-hidden=\"true\"\n class={{\n 'qds-button': true,\n 'qds-disabled': Tag === 'a' ? this.#computedDisabled : false,\n 'qds-icon-only': this.#iconOnly,\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n data-action={this.#computedAction}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n formAction={this.formAction}\n formMethod={this.formMethod}\n formNoValidate={this.formNoValidate}\n formTarget={this.formTarget}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n ref={this.#buttonRef}\n rel={Tag === 'a' ? this.rel : undefined}\n tabIndex={this.#computedDisabled ? disabledTabIndex : this.tabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.#buttonType}\n value={Tag === 'a' ? undefined : this.value}\n aria-label={this.#iconOnly ? ariaLabel : undefined}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {!this.#iconOnly && (\n <span\n class=\"qds-overflow\"\n data-size={this.#computedSize}\n ref={this.#spanRef}\n >\n {this.text}\n </span>\n )}\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n class=\"qds-indicator\"\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n {isCounter(this.badge) && (\n <qds-badge-counter\n class={{\n 'qds-indicator': this.#iconOnly,\n }}\n description={this.badgeDescription}\n importance={this.#computedImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n {this.#computedActionIcon !== undefined && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-action\"\n data-size={this.#computedSize}\n library=\"core\"\n name={this.#computedActionIcon}\n />\n )}\n </Tag>\n <div\n class={{\n 'qds-focus-ring': true,\n 'qds-icon-only': this.#iconOnly,\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n />\n {this.tooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n {this.text}\n </qds-tooltip>\n )}\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLButtonElement['setCustomValidity'] = (\n error,\n ) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#button)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #buttonRef = (\n button?: HTMLAnchorElement \| HTMLButtonElement,\n ): void => {\n this.#button = button\n }\n\n readonly #spanRef = (span?: HTMLSpanElement): void => {\n this.#span = span\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#button\n }\n\n readonly #onClick = (event: MouseEvent): void => {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n }\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
1	+ {"file":"p-80d5edc6.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-button:disabled,\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-overflow {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &[data-size='hero'] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n white-space: normal;\n }\n}\n\n.qds-action {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-container {\n display: grid;\n grid-template-areas: 'button';\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: button;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-button {\n position: relative;\n align-items: center;\n appearance: none;\n\n / Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto /\n min-width: 0;\n background-color: initial;\n border: none;\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n grid-area: button;\n justify-content: center;\n outline: none;\n padding-block: 0;\n print-color-adjust: exact;\n text-align: center;\n user-select: none;\n\n &:any-link {\n text-decoration: none;\n }\n\n &:focus-visible ~ .qds-focus-ring {\n visibility: visible;\n }\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\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 &.qds-icon-only {\n width: var(--qds-control-small-height);\n }\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 &.qds-icon-only {\n width: var(--qds-control-standard-height);\n }\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 &.qds-icon-only {\n width: var(--qds-control-large-height);\n }\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-size='small'],\n[data-size='standard'],\n[data-size='large'] {\n line-height: normal;\n\n &.qds-button.qds-icon-only {\n padding-inline: 0;\n }\n}\n\n[data-size='hero'] {\n font: var(--qds-control-hero-text);\n\n &.qds-button {\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-hero-border-radius)\n );\n gap: var(--qds-control-hero-gap-internal);\n padding-block: var(--qds-control-hero-padding-auto-height);\n padding-inline: var(--qds-control-button-hero-padding-horizontal);\n\n &.qds-icon-only {\n height: var(--qds-control-hero-height);\n padding-inline: 0;\n width: var(--qds-control-hero-height);\n }\n }\n\n &.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-hero-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-hero-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-hero-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-hero-border-radius)\n )\n );\n }\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-standard-default);\n\n &.qds-button {\n border-block-end: var(--qds-control-border-width) solid transparent;\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\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\n &:not(.qds-icon-only) {\n border-radius: 0;\n }\n\n &.qds-icon-only {\n border: none;\n color: var(--qds-theme-control-text-standard);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n\n &.qds-button {\n border-color: var(--qds-theme-control-border);\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n}\n\n[data-importance='emphasized'] {\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\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[data-importance='destructive'] {\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\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n }\n}\n\n[data-importance='subdued-destructive'] {\n color: var(--qds-theme-feedback-action-destructive-default);\n\n &.qds-button {\n border-block-end: var(--qds-control-border-width) solid transparent;\n padding-inline: 0;\n\n &:hover {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-feedback-action-destructive-hover);\n color: var(--qds-theme-feedback-action-destructive-hover);\n }\n\n &:active {\n border-block-end: var(--qds-control-border-width) solid\n var(--qds-theme-feedback-action-destructive-pressed);\n color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n\n &:not(.qds-icon-only) {\n border-radius: 0;\n }\n\n &.qds-icon-only {\n border: none;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n }\n }\n}\n\n:is([data-action='dropdown'], [data-action='dropdown-close']) {\n .qds-action {\n margin-inline-start: auto;\n transition-duration: 0.3s;\n transition-property: transform;\n }\n\n &[data-importance='standard'] {\n background-color: var(--qds-theme-control-input-background);\n }\n\n &:not([data-importance='subdued'], [data-importance='subdued-destructive']) {\n padding-inline: var(--qds-control-input-padding-horizontal);\n }\n}\n\n[data-action='dropdown-close'] .qds-action {\n transform: rotate(-180deg);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { isOverflowing, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Importance, Size } from '../shared'\n\nexport type Action = 'dropdown-close' \| 'dropdown' \| 'next'\nexport type ButtonImportance =\n \| Importance\n \| 'destructive'\n \| 'subdued-destructive'\nexport type ButtonSize = Size \| 'hero'\nexport type ButtonTarget = '_blank' \| '_parent' \| '_self' \| '_top'\nexport type ButtonType = 'button' \| 'reset' \| 'submit'\nexport type FormMethod = 'dialog' \| 'get' \| 'post'\n\nconst isCounter = (value: unknown): value is number =>\n typeof value === 'string'\n ? !Number.isNaN(Number.parseFloat(value))\n : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' \| true =>\n value === '' \|\| value === true\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 formAssociated: true,\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 Displays an indicator if `true` or the empty string. Otherwise, displays a\n * counter badge if a number or string representing a number is used.\n \n @webnative\n /\n @Prop() public readonly badge?: number \| string \| true\n\n /\n The indicator or counter badge's accessible text that will be used by\n * screen readers.\n /\n @Prop() public readonly badgeDescription?: string\n\n /\n The indicator's status.\n /\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'neutral'\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?: ButtonImportance = 'standard'\n\n /\n The button's size.\n /\n @Prop() public readonly size?: Size \| 'hero' = 'standard'\n\n /\n The button's text.\n /\n @Prop() public readonly text!: string\n\n /\n Sets if button is icon only.\n /\n @Prop() public readonly iconOnly: boolean = false\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>`][] 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 `<qds-button>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-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 [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\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 Returns a list of the [`<label>`][] elements associated with the\n * `qds-button` element.\n \n [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n \n @readonly\n * @webnative\n /\n @Prop() public readonly labels: ElementInternals['labels'] =\n {} as ElementInternals['labels']\n\n /\n When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n \n @webnative\n /\n @Prop() public readonly rel?: string = 'noopener'\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 The error message that would be shown to the user if the `<qds-button>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-button>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\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 True if `<qds-button>` will be validated when the form is submitted; false\n * otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\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 host!: HTMLQdsButtonElement\n\n @State() private tabIndex?: number\n\n @State() private tooltip = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #button?: HTMLAnchorElement \| HTMLButtonElement\n\n #span?: HTMLSpanElement\n\n #ro?: ResizeObserver\n\n get #buttonType(): ButtonType {\n if (this.type === undefined)\n return this.internals.form ? 'submit' : 'button'\n return this.type\n }\n\n get #iconOnly(): boolean {\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n return hasIcon && this.iconOnly\n }\n\n 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 get #computedActionIcon(): Exclude<Action, 'dropdown-close'> \| undefined {\n switch (this.action) {\n case 'dropdown':\n case 'next': {\n return this.action\n }\n case 'dropdown-close': {\n return 'dropdown'\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computedImportance(): ButtonImportance {\n switch (this.importance) {\n case 'emphasized':\n case 'subdued':\n case 'destructive':\n case 'subdued-destructive': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): ButtonSize {\n switch (this.size) {\n case 'small':\n case 'large':\n case 'hero': {\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.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (this.#buttonType === 'button' \|\| !this.internals.form) return\n if (this.#buttonType === 'reset') {\n this.internals.form.reset()\n } else {\n this.internals.form.requestSubmit()\n }\n event.preventDefault()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('text')\n protected textChanged(): void {\n this.internals.ariaLabel = this.text\n\n if (this.#ro) this.#ro.disconnect()\n if (!this.#span) return\n\n const span = this.#span\n readTask(() => {\n this.tooltip = isOverflowing(span)\n })\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isOverflowing(spanEntry.target)\n })\n this.#ro.observe(this.#span)\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'button'\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n this.#defineGetter('labels', () => this.internals.labels)\n\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n }\n\n public disconnectedCallback(): void {\n if (this.#ro) this.#ro.disconnect()\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n const disabledTabIndex = Tag === 'a' ? -1 : undefined\n const hasBadgeProperties =\n this.badgeDescription !== undefined && this.badge !== undefined\n const ariaLabel = hasBadgeProperties\n ? `${this.text} ${this.badge} ${this.badgeDescription}`\n : this.text\n\n return (\n <div class=\"qds-container\" onClick={this.#onClick} aria-hidden=\"true\">\n <Tag\n aria-hidden=\"true\"\n class={{\n 'qds-button': true,\n 'qds-disabled': Tag === 'a' ? this.#computedDisabled : false,\n 'qds-icon-only': this.#iconOnly,\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n data-action={this.#computedAction}\n disabled={Tag === 'a' ? undefined : this.disabled}\n download={Tag === 'a' ? this.download : undefined}\n formAction={this.formAction}\n formMethod={this.formMethod}\n formNoValidate={this.formNoValidate}\n formTarget={this.formTarget}\n href={Tag === 'a' ? this.href : undefined}\n name={Tag === 'a' ? undefined : this.name}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n ref={this.#buttonRef}\n rel={Tag === 'a' ? this.rel : undefined}\n tabIndex={this.#computedDisabled ? disabledTabIndex : this.tabIndex}\n target={Tag === 'a' ? this.target : undefined}\n type={Tag === 'a' ? undefined : this.#buttonType}\n value={Tag === 'a' ? undefined : this.value}\n aria-label={this.#iconOnly ? ariaLabel : undefined}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {!this.#iconOnly && (\n <span\n class=\"qds-overflow\"\n data-size={this.#computedSize}\n ref={this.#spanRef}\n >\n {this.text}\n </span>\n )}\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n class=\"qds-indicator\"\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n {isCounter(this.badge) && (\n <qds-badge-counter\n class={{\n 'qds-indicator': this.#iconOnly,\n }}\n description={this.badgeDescription}\n importance={this.#computedImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n {this.#computedActionIcon !== undefined && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-action\"\n data-size={this.#computedSize}\n library=\"core\"\n name={this.#computedActionIcon}\n />\n )}\n </Tag>\n <div\n class={{\n 'qds-focus-ring': true,\n 'qds-icon-only': this.#iconOnly,\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n />\n {this.tooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n {this.text}\n </qds-tooltip>\n )}\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLButtonElement['setCustomValidity'] = (\n error,\n ) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#button)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #buttonRef = (\n button?: HTMLAnchorElement \| HTMLButtonElement,\n ): void => {\n this.#button = button\n }\n\n readonly #spanRef = (span?: HTMLSpanElement): void => {\n this.#span = span\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#button\n }\n\n readonly #onClick = (event: MouseEvent): void => {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n }\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}

package/components/{p-9ffb4b49.js → p-8a540ec4.js} RENAMED Viewed

@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './p-72c09714.js';
 import { d as defineCustomElement$2 } from './p-b5608061.js';
 import { d as defineCustomElement$1 } from './p-70d12c72.js';
-const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-box,.qds-checkbox,.qds-icon{grid-area:a;place-self:center}.qds-box,.qds-icon{display:none;pointer-events:none}.qds-box{border-radius:var(--qds-control-toggle-indicator-border-radius)}.qds-container{align-self:flex-start;display:grid;grid-template-areas:\"a\"}.qds-icon{color:var(--qds-theme-signature-color-contrast)}.qds-label{cursor:pointer;display:inline-flex;width:inherit}.qds-label-inner{flex:1 1 auto;min-width:0}.qds-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-checkbox:active~.qds-box,.qds-checkbox:hover~.qds-box{display:block}.qds-checkbox:hover~.qds-box{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:active~.qds-box{background-color:var(--qds-theme-signature-color-pressed)}.qds-checkbox:checked~.qds-checked,.qds-checkbox:indeterminate~.qds-indeterminate{display:block}.qds-checkbox:checked,.qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-checkbox:checked:hover,.qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:checked:active,.qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-checkbox[data-size=small]{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small]{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small]{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}.qds-checkbox[data-size=standard]{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard]{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard]{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}.qds-checkbox[data-size=large]{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large]{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large]{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}";
+const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-box,.qds-checkbox,.qds-icon{grid-area:e;place-self:center}.qds-box,.qds-icon{display:none;pointer-events:none}.qds-box{border-radius:var(--qds-control-toggle-indicator-border-radius)}.qds-container{align-self:flex-start;display:grid;grid-template-areas:\"e\"}.qds-icon{color:var(--qds-theme-signature-color-contrast)}.qds-label{cursor:pointer;display:inline-flex;width:inherit}.qds-label-inner{flex:1 1 auto;min-width:0}.qds-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-checkbox:active~.qds-box,.qds-checkbox:hover~.qds-box{display:block}.qds-checkbox:hover~.qds-box{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:active~.qds-box{background-color:var(--qds-theme-signature-color-pressed)}.qds-checkbox:checked~.qds-checked,.qds-checkbox:indeterminate~.qds-indeterminate{display:block}.qds-checkbox:checked,.qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-checkbox:checked:hover,.qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:checked:active,.qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-checkbox[data-size=small]{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small]{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small]{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}.qds-checkbox[data-size=standard]{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard]{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard]{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}.qds-checkbox[data-size=large]{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large]{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large]{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}";
 const QdsCheckboxStyle0 = checkboxCss;
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -269,4 +269,4 @@ function defineCustomElement() {
 export { Checkbox as C, defineCustomElement as d };
-//# sourceMappingURL=p-9ffb4b49.js.map
+//# sourceMappingURL=p-8a540ec4.js.map

package/components/{p-9ffb4b49.js.map → p-8a540ec4.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-9ffb4b49.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n.qds-checkbox,\n.qds-box,\n.qds-icon {\n grid-area: checkbox;\n place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n display: none;\n pointer-events: none;\n}\n\n.qds-box {\n border-radius: var(--qds-control-toggle-indicator-border-radius);\n}\n\n.qds-container {\n display: grid;\n align-self: flex-start;\n grid-template-areas: 'checkbox';\n}\n\n.qds-icon {\n color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n width: inherit;\n}\n\n.qds-label-inner {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.qds-checkbox {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-radius: var(--qds-control-border-radius);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n cursor: pointer;\n margin: 0;\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n\n &:hover ~ .qds-box,\n &:active ~ .qds-box {\n display: block;\n }\n\n &:hover ~ .qds-box {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active ~ .qds-box {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n\n &:checked ~ .qds-checked,\n &:indeterminate ~ .qds-indeterminate {\n display: block;\n }\n\n &:checked,\n &:indeterminate {\n background-color: var(--qds-theme-signature-color-default);\n border-color: transparent;\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-small-size);\n height: var(--qds-control-toggle-box-small-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-small-size);\n height: var(--qds-control-toggle-indicator-small-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n }\n}\n\n[data-size='standard'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-standard-size);\n height: var(--qds-control-toggle-box-standard-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-standard-size);\n height: var(--qds-control-toggle-indicator-standard-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n }\n}\n\n[data-size='large'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-large-size);\n height: var(--qds-control-toggle-box-large-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-large-size);\n height: var(--qds-control-toggle-indicator-large-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type CheckboxValue = number \| string \| null\n\n/\n `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n \n @see https://quartz.se.com/build/components/checkbox\n /\n@Component({\n tag: 'qds-checkbox',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n /\n Adds vertical margin to the checkbox for alignment.\n \n This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n /\n @Prop() public readonly inline: boolean = false\n\n /\n The checkbox's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n The checkbox's text.\n \n Its value will also be used as the `aria-label` value when the\n * `checkbox-only` attribute is specified.\n /\n @Prop() public readonly text!: string\n\n /\n Sets the checkbox's state.\n \n @webnative\n /\n @Prop({ mutable: true }) public checked?: boolean\n\n /\n Prevents the checkbox from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The [`<form>`][] element to associate the checkbox with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-checkbox>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-checkbox>` 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 [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\n\n /\n Sets the checkbox to an indeterminate state. This is usually applied to\n * checkboxes that represent a \"select all/none\" behavior when associated\n * checkboxes have a mix of checked and unchecked states.\n \n @webnative\n /\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /\n The name of the checkbox, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n A value must be specified for the checkbox before the owning form can be\n * submitted.\n \n See\n * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n * and the\n * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n * for more information.\n \n @webnative\n /\n @Prop() public readonly required?: boolean\n\n /\n The error message that would be shown to the user if the `<qds-checkbox>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-checkbox>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /\n The value of the checkbox, submitted as a name/value pair with form data.\n \n @webnative\n /\n @Prop() public readonly value?: CheckboxValue = 'on'\n\n /\n True if `<qds-checkbox>` will be validated when the form is submitted;\n * false otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n /\n Whether or not the text is displayed.\n /\n @Prop() public readonly checkboxOnly: boolean = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when a change to the checkbox's state is committed by the user.\n /\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /\n Emitted when the checkbox gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n get #computedChecked(): boolean {\n return this.checked ?? false\n }\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') \|\| (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n 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 get #computedValue(): string \| null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n get #hasText(): boolean {\n return (this.text !== '' \|\| this.required === true) && !this.checkboxOnly\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n this.checked = this.#computedIndeterminate ? true : !this.#computedChecked\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.#computedChecked && !this.#computedDisabled\n ? this.#computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n // eslint-disable-next-line unicorn/no-null\n else this.internals.setFormValue(null)\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-container\">\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n checked={this.#computedIndeterminate ? false : this.checked}\n class=\"qds-checkbox\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n indeterminate={this.indeterminate}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type=\"checkbox\"\n aria-label={this.checkboxOnly ? this.text : undefined}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-checked': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked\"\n />\n <div class=\"qds-box\" data-size={this.#computedSize} />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-indeterminate': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"indeterminate\"\n />\n </div>\n {this.#hasText && (\n <qds-label\n class=\"qds-label-inner\"\n required={this.required}\n size={this.size}\n text={this.text}\n />\n )}\n </label>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
1	+ {"file":"p-8a540ec4.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n.qds-checkbox,\n.qds-box,\n.qds-icon {\n grid-area: checkbox;\n place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n display: none;\n pointer-events: none;\n}\n\n.qds-box {\n border-radius: var(--qds-control-toggle-indicator-border-radius);\n}\n\n.qds-container {\n display: grid;\n align-self: flex-start;\n grid-template-areas: 'checkbox';\n}\n\n.qds-icon {\n color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n width: inherit;\n}\n\n.qds-label-inner {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.qds-checkbox {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-radius: var(--qds-control-border-radius);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n cursor: pointer;\n margin: 0;\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n\n &:hover ~ .qds-box,\n &:active ~ .qds-box {\n display: block;\n }\n\n &:hover ~ .qds-box {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active ~ .qds-box {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n\n &:checked ~ .qds-checked,\n &:indeterminate ~ .qds-indeterminate {\n display: block;\n }\n\n &:checked,\n &:indeterminate {\n background-color: var(--qds-theme-signature-color-default);\n border-color: transparent;\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-small-size);\n height: var(--qds-control-toggle-box-small-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-small-size);\n height: var(--qds-control-toggle-indicator-small-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n }\n}\n\n[data-size='standard'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-standard-size);\n height: var(--qds-control-toggle-box-standard-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-standard-size);\n height: var(--qds-control-toggle-indicator-standard-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n }\n}\n\n[data-size='large'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-large-size);\n height: var(--qds-control-toggle-box-large-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-large-size);\n height: var(--qds-control-toggle-indicator-large-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type CheckboxValue = number \| string \| null\n\n/\n `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n \n @see https://quartz.se.com/build/components/checkbox\n /\n@Component({\n tag: 'qds-checkbox',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n /\n Adds vertical margin to the checkbox for alignment.\n \n This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n /\n @Prop() public readonly inline: boolean = false\n\n /\n The checkbox's size.\n /\n @Prop() public readonly size?: Size = 'standard'\n\n /\n The checkbox's text.\n \n Its value will also be used as the `aria-label` value when the\n * `checkbox-only` attribute is specified.\n /\n @Prop() public readonly text!: string\n\n /\n Sets the checkbox's state.\n \n @webnative\n /\n @Prop({ mutable: true }) public checked?: boolean\n\n /\n Prevents the checkbox from being interacted with: it cannot be pressed or\n * focused.\n \n @webnative\n /\n @Prop() public readonly disabled?: boolean\n\n /\n The [`<form>`][] element to associate the checkbox with (its form owner).\n \n The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-checkbox>` is associated\n * with its ancestor `<form>` element, if any.\n \n This attribute lets you associate `<qds-checkbox>` 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 [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n \n @readonly\n * @webnative\n /\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] \| string = null\n\n /\n Sets the checkbox to an indeterminate state. This is usually applied to\n * checkboxes that represent a \"select all/none\" behavior when associated\n * checkboxes have a mix of checked and unchecked states.\n \n @webnative\n /\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /\n The name of the checkbox, which is submitted with the form data.\n \n @webnative\n /\n @Prop() public readonly name?: string\n\n /\n A value must be specified for the checkbox before the owning form can be\n * submitted.\n \n See\n * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n * and the\n * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n * for more information.\n \n @webnative\n /\n @Prop() public readonly required?: boolean\n\n /\n The error message that would be shown to the user if the `<qds-checkbox>`\n * was to be checked for validity.\n \n @readonly\n * @webnative\n /\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /\n The [`ValidityState`][] object for this `<qds-checkbox>`.\n \n [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n \n @readonly\n * @webnative\n /\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /\n The value of the checkbox, submitted as a name/value pair with form data.\n \n @webnative\n /\n @Prop() public readonly value?: CheckboxValue = 'on'\n\n /\n True if `<qds-checkbox>` will be validated when the form is submitted;\n * false otherwise.\n \n @readonly\n * @webnative\n /\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n /\n Whether or not the text is displayed.\n /\n @Prop() public readonly checkboxOnly: boolean = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /\n Emitted when a change to the checkbox's state is committed by the user.\n /\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /\n Emitted when the checkbox gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n get #computedChecked(): boolean {\n return this.checked ?? false\n }\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') \|\| (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n 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 get #computedValue(): string \| null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n get #hasText(): boolean {\n return (this.text !== '' \|\| this.required === true) && !this.checkboxOnly\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n this.checked = this.#computedIndeterminate ? true : !this.#computedChecked\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.#computedChecked && !this.#computedDisabled\n ? this.#computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n // eslint-disable-next-line unicorn/no-null\n else this.internals.setFormValue(null)\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 \|\| Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-container\">\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n checked={this.#computedIndeterminate ? false : this.checked}\n class=\"qds-checkbox\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n indeterminate={this.indeterminate}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type=\"checkbox\"\n aria-label={this.checkboxOnly ? this.text : undefined}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-checked': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked\"\n />\n <div class=\"qds-box\" data-size={this.#computedSize} />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-indeterminate': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"indeterminate\"\n />\n </div>\n {this.#hasText && (\n <qds-label\n class=\"qds-label-inner\"\n required={this.required}\n size={this.size}\n text={this.text}\n />\n )}\n </label>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}

package/components/{p-a529eb5c.js → p-fc31384f.js} RENAMED Viewed

@@ -7,7 +7,7 @@ import { p as proxyCustomElement, H, h } from './p-50f85f75.js';
 import { i as inheritAriaAttributes } from './p-8abba29b.js';
 import { d as defineCustomElement$1 } from './p-72c09714.js';
-const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"e\"}.qds-titles.qds-has-kicker{grid-template-areas:\"f\" \"e\"}.qds-titles.qds-has-subtitle{grid-template-areas:\"e\" \"g\"}.qds-titles.qds-has-kicker.qds-has-subtitle{grid-template-areas:\"f\" \"e\" \"g\"}.qds-has-icon{grid-template-areas:\"h e\";grid-template-columns:auto 1fr}.qds-has-icon.qds-has-kicker{grid-template-areas:\". f\" \"h e\"}.qds-has-icon.qds-has-subtitle{grid-template-areas:\"h e\" \". g\"}.qds-has-icon.qds-has-kicker.qds-has-subtitle{grid-template-areas:\". f\" \"h e\" \". g\"}.qds-kicker,.qds-subtitle,.qds-title{margin-block:0}.qds-title{color:var(--qds-theme-title);grid-area:e}.qds-subtitle{color:var(--qds-theme-subtitle);grid-area:g}.qds-kicker{color:var(--qds-theme-kicker);grid-area:f}.qds-icon{align-content:center;color:var(--qds-theme-text-standard);grid-area:h}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap) var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{height:var(--qds-main-section-titles-icon-crop-height);width:var(--qds-main-section-titles-icon-size)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap) var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{height:var(--qds-main-subsection-titles-icon-crop-height);width:var(--qds-main-subsection-titles-icon-size)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{height:var(--qds-panel-titles-icon-crop-height);width:var(--qds-panel-titles-icon-size)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap) var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{height:var(--qds-panel-section-titles-icon-crop-height);width:var(--qds-panel-section-titles-icon-size)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap) var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{height:var(--qds-panel-subsection-titles-icon-crop-height);width:var(--qds-panel-subsection-titles-icon-size)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap) var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{height:var(--qds-navigation-section-titles-icon-crop-height);width:var(--qds-navigation-section-titles-icon-size)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap) var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{height:var(--qds-navigation-subsection-titles-icon-crop-height);width:var(--qds-navigation-subsection-titles-icon-size)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{height:var(--qds-popup-titles-icon-crop-height);width:var(--qds-popup-titles-icon-size)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap) var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{height:var(--qds-popup-section-titles-icon-crop-height);width:var(--qds-popup-section-titles-icon-size)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap) var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{height:var(--qds-popup-subsection-titles-icon-crop-height);width:var(--qds-popup-subsection-titles-icon-size)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{height:var(--qds-accessory-titles-icon-crop-height);width:var(--qds-accessory-titles-icon-size)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap) var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{height:var(--qds-accessory-section-titles-icon-crop-height);width:var(--qds-accessory-section-titles-icon-size)}.qds-titles[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap);margin:auto}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-promo-title)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-subtitle{font:var(--qds-main-section-promo-subtitle)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-kicker{font:var(--qds-main-section-promo-kicker)}.qds-has-icon[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap) var(--qds-main-section-promo-titles-icon-gap)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-icon{height:var(--qds-main-section-promo-titles-icon-crop-height);width:var(--qds-main-section-promo-titles-icon-size)}[data-alignment=start]{text-align:start}[data-alignment=center]{text-align:center}[data-alignment=end]{text-align:end}.qds-titles[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-subsection-card-titles-gap)}[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
+const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"a\"}.qds-titles.qds-has-kicker{grid-template-areas:\"b\" \"a\"}.qds-titles.qds-has-subtitle{grid-template-areas:\"a\" \"c\"}.qds-titles.qds-has-kicker.qds-has-subtitle{grid-template-areas:\"b\" \"a\" \"c\"}.qds-has-icon{grid-template-areas:\"d a\";grid-template-columns:auto 1fr}.qds-has-icon.qds-has-kicker{grid-template-areas:\". b\" \"d a\"}.qds-has-icon.qds-has-subtitle{grid-template-areas:\"d a\" \". c\"}.qds-has-icon.qds-has-kicker.qds-has-subtitle{grid-template-areas:\". b\" \"d a\" \". c\"}.qds-kicker,.qds-subtitle,.qds-title{margin-block:0}.qds-title{color:var(--qds-theme-title);grid-area:a}.qds-subtitle{color:var(--qds-theme-subtitle);grid-area:c}.qds-kicker{color:var(--qds-theme-kicker);grid-area:b}.qds-icon{align-content:center;color:var(--qds-theme-text-standard);grid-area:d}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap) var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{height:var(--qds-main-section-titles-icon-crop-height);width:var(--qds-main-section-titles-icon-size)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap) var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{height:var(--qds-main-subsection-titles-icon-crop-height);width:var(--qds-main-subsection-titles-icon-size)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{height:var(--qds-panel-titles-icon-crop-height);width:var(--qds-panel-titles-icon-size)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap) var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{height:var(--qds-panel-section-titles-icon-crop-height);width:var(--qds-panel-section-titles-icon-size)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap) var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{height:var(--qds-panel-subsection-titles-icon-crop-height);width:var(--qds-panel-subsection-titles-icon-size)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap) var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{height:var(--qds-navigation-section-titles-icon-crop-height);width:var(--qds-navigation-section-titles-icon-size)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap) var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{height:var(--qds-navigation-subsection-titles-icon-crop-height);width:var(--qds-navigation-subsection-titles-icon-size)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{height:var(--qds-popup-titles-icon-crop-height);width:var(--qds-popup-titles-icon-size)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap) var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{height:var(--qds-popup-section-titles-icon-crop-height);width:var(--qds-popup-section-titles-icon-size)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap) var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{height:var(--qds-popup-subsection-titles-icon-crop-height);width:var(--qds-popup-subsection-titles-icon-size)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{height:var(--qds-accessory-titles-icon-crop-height);width:var(--qds-accessory-titles-icon-size)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap) var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{height:var(--qds-accessory-section-titles-icon-crop-height);width:var(--qds-accessory-section-titles-icon-size)}.qds-titles[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap);margin:auto}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-promo-title)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-subtitle{font:var(--qds-main-section-promo-subtitle)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-kicker{font:var(--qds-main-section-promo-kicker)}.qds-has-icon[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap) var(--qds-main-section-promo-titles-icon-gap)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-icon{height:var(--qds-main-section-promo-titles-icon-crop-height);width:var(--qds-main-section-promo-titles-icon-size)}[data-alignment=start]{text-align:start}[data-alignment=center]{text-align:center}[data-alignment=end]{text-align:end}.qds-titles[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-subsection-card-titles-gap)}[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
 const QdsTitleStyle0 = titleCss;
 // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -108,4 +108,4 @@ function defineCustomElement() {
 export { Title as T, defineCustomElement as d };
-//# sourceMappingURL=p-a529eb5c.js.map
+//# sourceMappingURL=p-fc31384f.js.map

package/components/{p-a529eb5c.js.map → p-fc31384f.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-a529eb5c.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,ixSAAixS,CAAC;AACnyS,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MA4Ba,KAAK;IALlB;;;;;;;;QAS0B,cAAS,GAAe,OAAO,CAAA;;;;QAY/B,gBAAW,GAAW,SAAS,CAAA;QAO/B,UAAK,GAAW,MAAM,CAAA;QAEtB,UAAK,GAAW,SAAS,CAAA;;;;QAUzB,QAAG,GAAS,IAAI,CAAA;QASxC,qCAAmC,EAAE,EAAA;KAmDtC;IAzCQ,iBAAiB;QACtB,uBAAA,IAAI,8BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;KAC7D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;QAEnE,QACE,iFACkB,IAAI,CAAC,SAAS,IAAI,OAAO,kBAC3B,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,OAAO;gBACvB,gBAAgB,EAAE,uBAAA,IAAI,8CAAW;gBACjC,kBAAkB,EAAE,uBAAA,IAAI,gDAAa;aACtC,KAEG,uBAAA,IAAI,kCAAqB,IAE7B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,uBAAA,IAAI,8CAAW,IAAI,0DAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EAC1D,uBAAA,IAAI,gDAAa,IAAI,0DAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAChE,OAAO,KACN,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;IA/CC,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;AAC5D,CAAC;IAGC,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;AACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas: 'title';\n\n &.qds-has-kicker {\n grid-template-areas:\n 'kicker'\n 'title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'title'\n 'subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n }\n}\n\n.qds-has-icon {\n grid-template-columns: auto 1fr;\n grid-template-areas: 'icon title';\n\n &.qds-has-kicker {\n grid-template-areas:\n '. kicker'\n 'icon title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'icon title'\n '. subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n }\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n align-content: center;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-main-section-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-promo-titles-gap);\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-promo-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-promo-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-promo-kicker);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-promo-titles-gap)\n var(--qds-main-section-promo-titles-icon-gap);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-promo-titles-icon-size);\n height: var(--qds-main-section-promo-titles-icon-crop-height);\n }\n }\n}\n\n[data-alignment='start'] {\n text-align: start;\n}\n\n[data-alignment='center'] {\n text-align: center;\n}\n\n[data-alignment='end'] {\n text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' \| 'main' \| 'navigation' \| 'panel' \| 'popup'\nexport type Level = 'root' \| 'section' \| 'subsection'\nexport type Tag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\nexport type TitleVariant =\n \| 'web-main-section-display'\n \| 'web-main-section-hero'\n \| 'web-main-section-promo'\n \| 'web-main-subsection-card'\n\nexport type Alignment = 'center' \| 'end' \| 'start'\n\n/\n @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n /\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /\n The alignment of the title.\n /\n @Prop() public readonly alignment?: Alignment = 'start'\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n HTML tag to use to render the title.\n /\n @Prop() public readonly tag?: Tag = 'h2'\n\n /\n The title's variant.\n */\n @Prop() public readonly variant?: TitleVariant\n\n @Element() private readonly host!: HTMLElement\n\n #inheritedAttributes: Attributes = {}\n\n get #hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n get #hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n return (\n <hgroup\n data-alignment={this.alignment ?? 'start'}\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': hasIcon,\n 'qds-has-kicker': this.#hasKicker,\n 'qds-has-subtitle': this.#hasSubtitle,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {hasIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
1	+ {"file":"p-fc31384f.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,ixSAAixS,CAAC;AACnyS,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MA4Ba,KAAK;IALlB;;;;;;;;QAS0B,cAAS,GAAe,OAAO,CAAA;;;;QAY/B,gBAAW,GAAW,SAAS,CAAA;QAO/B,UAAK,GAAW,MAAM,CAAA;QAEtB,UAAK,GAAW,SAAS,CAAA;;;;QAUzB,QAAG,GAAS,IAAI,CAAA;QASxC,qCAAmC,EAAE,EAAA;KAmDtC;IAzCQ,iBAAiB;QACtB,uBAAA,IAAI,8BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;KAC7D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;QAEnE,QACE,iFACkB,IAAI,CAAC,SAAS,IAAI,OAAO,kBAC3B,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,OAAO;gBACvB,gBAAgB,EAAE,uBAAA,IAAI,8CAAW;gBACjC,kBAAkB,EAAE,uBAAA,IAAI,gDAAa;aACtC,KAEG,uBAAA,IAAI,kCAAqB,IAE7B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,uBAAA,IAAI,8CAAW,IAAI,0DAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EAC1D,uBAAA,IAAI,gDAAa,IAAI,0DAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAChE,OAAO,KACN,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;IA/CC,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;AAC5D,CAAC;IAGC,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;AACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: © 2024 Schneider Electric\n \n SPDX-License-Identifier: Apache-2.0\n /\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas: 'title';\n\n &.qds-has-kicker {\n grid-template-areas:\n 'kicker'\n 'title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'title'\n 'subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n }\n}\n\n.qds-has-icon {\n grid-template-columns: auto 1fr;\n grid-template-areas: 'icon title';\n\n &.qds-has-kicker {\n grid-template-areas:\n '. kicker'\n 'icon title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'icon title'\n '. subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n }\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n align-content: center;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-main-section-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-promo-titles-gap);\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-promo-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-promo-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-promo-kicker);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-promo-titles-gap)\n var(--qds-main-section-promo-titles-icon-gap);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-promo-titles-icon-size);\n height: var(--qds-main-section-promo-titles-icon-crop-height);\n }\n }\n}\n\n[data-alignment='start'] {\n text-align: start;\n}\n\n[data-alignment='center'] {\n text-align: center;\n}\n\n[data-alignment='end'] {\n text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' \| 'main' \| 'navigation' \| 'panel' \| 'popup'\nexport type Level = 'root' \| 'section' \| 'subsection'\nexport type Tag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'\nexport type TitleVariant =\n \| 'web-main-section-display'\n \| 'web-main-section-hero'\n \| 'web-main-section-promo'\n \| 'web-main-subsection-card'\n\nexport type Alignment = 'center' \| 'end' \| 'start'\n\n/\n @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n /\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /\n The alignment of the title.\n /\n @Prop() public readonly alignment?: Alignment = 'start'\n\n /\n The name of the icon to render.\n \n Available names depend on the icon library being used.\n /\n @Prop() public readonly iconName?: string\n\n /\n The name of a registered icon library.\n /\n @Prop() public readonly iconLibrary: string = 'default'\n\n /\n Text to display for the kicker.\n /\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /\n Text to display for the subtitle.\n /\n @Prop() public readonly subtitle?: string\n\n /\n HTML tag to use to render the title.\n /\n @Prop() public readonly tag?: Tag = 'h2'\n\n /\n The title's variant.\n */\n @Prop() public readonly variant?: TitleVariant\n\n @Element() private readonly host!: HTMLElement\n\n #inheritedAttributes: Attributes = {}\n\n get #hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n get #hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n return (\n <hgroup\n data-alignment={this.alignment ?? 'start'}\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': hasIcon,\n 'qds-has-kicker': this.#hasKicker,\n 'qds-has-subtitle': this.#hasSubtitle,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {hasIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}

package/components/qds-button.js CHANGED Viewed

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-import { B as Button, d as defineCustomElement$1 } from './p-b6c04008.js';
+import { B as Button, d as defineCustomElement$1 } from './p-80d5edc6.js';
 const QdsButton = Button;
 const defineCustomElement = defineCustomElement$1;

package/components/qds-checkbox.js CHANGED Viewed

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
-import { C as Checkbox, d as defineCustomElement$1 } from './p-9ffb4b49.js';
+import { C as Checkbox, d as defineCustomElement$1 } from './p-8a540ec4.js';
 const QdsCheckbox = Checkbox;
 const defineCustomElement = defineCustomElement$1;