npm - @oiz/stzh-components - Versions diffs - 4.12.1 → 4.13.0-beta1 - Mend

@oiz/stzh-components 4.12.1 → 4.13.0-beta1

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

package/dist/esm/stzh-checkbox.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { h as hasSlot } from './utils-BnOofzDv.js';
-import { S as StzhInputDescription } from './stzh-input-description-CkiDnZXP.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { a as hasDefaultSlotContent, h as hasSlot } from './utils-CnvjJ2wY.js';
+import { S as StzhInputDescription } from './stzh-input-description-BLx_RZxZ.js';
 import './string-utils-BubviQku.js';
 const stzhCheckboxCss = () => `.sc-stzh-checkbox-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-checkbox-h,[stzh-hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-checkbox-h .has-focus.sc-stzh-checkbox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox{outline-style:none !important}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox::-moz-focus-inner{border:0 !important}.sc-stzh-checkbox-h{--label-color:var(--stzh-checkbox-label-color, var(--stzh-base-color));--label-hover-color:var(
@@ -36,6 +36,18 @@ const StzhCheckbox = class {
         this.hideOptional = false;
         /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
         this.a11yDescribedby = "";
+        /**
+         * Whether the component has meaningful default-slot content.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasDefaultSlot = false;
+        /**
+         * Indicates whether default-slot content detection has run at least once.
+         * Used to avoid rendering state-dependent markup before the slot content
+         * has been evaluated.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasResolvedDefaultSlot = false;
         this.focusedByInput = false;
         this.handleReset = async () => {
             this.checked = this.defaultChecked;
@@ -80,6 +92,19 @@ const StzhCheckbox = class {
                 originalEvent: event,
             });
         };
+        /**
+         * Re-evaluates default-slot content and updates the related render state.
+         * Becomes obsolete with implementation of PDESI-1908.
+         */
+        this.updateDefaultSlotState = () => {
+            const hasDefaultSlot = hasDefaultSlotContent(this.element, ["stzh-checkbox"]);
+            if (this.hasDefaultSlot !== hasDefaultSlot) {
+                this.hasDefaultSlot = hasDefaultSlot;
+            }
+            if (!this.hasResolvedDefaultSlot) {
+                this.hasResolvedDefaultSlot = true;
+            }
+        };
     }
     resetListener(event) {
         if (event.target.contains(this.element)) {
@@ -109,6 +134,9 @@ const StzhCheckbox = class {
             this._error = [];
         }
     }
+    componentDidLoad() {
+        this.updateDefaultSlotState();
+    }
     async componentWillLoad() {
         this.inputId = `stzh-checkbox-${checkboxCounter++}`;
         this.errorWatcher(this.error);
@@ -122,6 +150,8 @@ const StzhCheckbox = class {
         const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
         const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
         const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        const labelUsed = !!this.label || this.hasDefaultSlot;
+        const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;
         const classes = {
             "stzh-checkbox": true,
             "stzh-checkbox--has-description": descriptionUsed,
@@ -132,11 +162,11 @@ const StzhCheckbox = class {
             "stzh-checkbox--is-disabled": this.disabled,
             "stzh-checkbox--is-checked": this.checked,
         };
-        return (h(Host, { key: 'ee66a3c7da1690b5154ece2c6878a903d4e75853', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '6d9e3bf14181bc000e06b587d6e113860598c39f', class: classes }, h("label", { key: 'f50c981284786831418c85f6475f977a9e8e6207', class: "stzh-checkbox__field-wrapper" }, h("input", { key: 'e1561366f70753b11e05e2efacc0dcbff347e813', class: "stzh-checkbox__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: 'b4918a2cbc6a25bb16274abe5ae6eef0f9e33547', class: "stzh-checkbox__mark" }, h("div", { key: '79373968d04de3ad500d0930a0ffb4ef18dfd37c', class: "stzh-checkbox__check", "aria-hidden": "true" })), h("div", { key: '3529c5534028f5cee9cb92909e7cbf676cb26168', class: "stzh-checkbox__label" }, this.label ? (this.label) : (h("span", { class: "stzh-checkbox__label-slot" }, h("slot", null))), !this.hideOptional && (h("span", { key: 'e17de9e0483206d674bb6dd866f021d80c523447', class: "stzh-checkbox__marker" }, h("span", { key: '98c33a8020b792b813ecd920dae89afd1cabd636', class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '3cfd0dc2c0ed15c08bb40f0c2f05ab470ee7757f', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '07cd66f1b94915d3fdd5eca263c6760dafb92230', class: classes }, labelWrapperUsed && (h("label", { key: '05cd36db80beec8f0d44bffb22fd1539bfbcb223', class: "stzh-checkbox__field-wrapper" }, h("input", { key: '0600530b2e683548ca91454729c73cee32accccf', class: "stzh-checkbox__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '724fb80111631f195c3fa50a29ae430eaba4fe75', class: "stzh-checkbox__mark" }, h("div", { key: '64d91f126462e6cb445dc0fc5caf30bfcb76e911', class: "stzh-checkbox__check", "aria-hidden": "true" })), h("div", { key: '70ae80340fc89e16ee2b397fc1e7eb3ce21566c4', class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: '5433da8313be87527d78dc91a037c9cc60f90c1b', class: "stzh-checkbox__marker" }, h("span", { key: '0f70171a96236cc6aa0bae7bb71a78ba10e69aef', class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '9c7eb6c0626012609829409767280726a7690966', class: "stzh-checkbox__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'a87b0cf0cfb7909074c13ccf44ca1db121775a3a', class: "stzh-checkbox__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))), descriptionLongUsed && (h(StzhInputDescription, { key: '3e2d4ced637886535accad1eefa81e5d6991e80f', classPrefix: "stzh-checkbox", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '61f5a0b9933453e57783d79d483e2e70c94a9ee5', classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
+            : this.localization.$globals.optionalFieldText))), descriptionLongUsed && (h(StzhInputDescription, { key: '909fd1779b5d72a89783ee90a281805ac0e75b2e', classPrefix: "stzh-checkbox", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false }))))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: 'df4c31068bd0b90a905eaaebd45db84666630c2a', classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-checkbox.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-checkbox.entry.js","sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n --label-hover-color: var(\n --stzh-checkbox-label-hover-color,\n #{$colorPrimary70}\n );\n --label-hover-checked-color: var(\n --stzh-checkbox-label-hover-checked-color,\n #{$colorPrimary90}\n );\n --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n display: inline-block;\n\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-checkbox {\n @include input-description;\n display: grid;\n\n &__field-wrapper {\n @include fontSize(\"milli\");\n position: relative;\n display: flex;\n user-select: none;\n cursor: pointer;\n }\n\n &__input {\n @include visuallyhiddenInput;\n border-radius: $formInputBorderRadius;\n }\n\n &__mark {\n border: 2px solid $colorBlack;\n background-color: $colorWhite;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n border-radius: $formInputBorderRadius;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n transition: border-color $baseTransitionAnimationSpeed;\n position: relative;\n\n @media (forced-colors: active) {\n transition: none;\n border-color: ButtonBorder;\n }\n }\n\n &__check {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%) translateZ(0);\n will-change: opacity;\n opacity: 0;\n transition: opacity 0.15s ease;\n pointer-events: none;\n\n -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n -webkit-mask-size: contain;\n mask-size: contain;\n\n color: var(--check-color);\n background-color: currentColor;\n\n @media (forced-colors: active) {\n transition: none;\n forced-color-adjust: none;\n color: Highlight;\n }\n }\n\n &__label {\n --stzh-base-color: initial;\n color: var(--label-color);\n transition: color $baseTransitionAnimationSpeed;\n display: inline-flex;\n align-items: center;\n gap: space(\"xsmall\");\n margin-left: space(\"small\");\n line-height: 24px;\n\n &:empty {\n display: none;\n }\n }\n\n &__label > &__description-wrapper {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: flex-start;\n margin: 0;\n }\n\n &__label &__error,\n &__label &__description-text {\n display: none;\n }\n\n &__label &__description,\n &__label &__description-long {\n display: inline-flex;\n align-items: flex-start;\n margin: 0;\n }\n\n &__label &__description-long-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n line-height: 1;\n }\n\n &__label stzh-popover &__description-long-icon {\n --size: var(--stzh-icon-size-small);\n display: block;\n line-height: 0;\n color: $colorPrimary70;\n }\n\n &__label-slot {\n display: block;\n }\n\n &__label-slot stzh-text {\n display: block;\n }\n\n &__marker {\n @include fontSize(\"micro\");\n margin-left: calc(-0.25em + #{space(\"xsmall\")});\n }\n\n /* Hover / Focus / Checked /\n\n &:hover &__label,\n &__input:checked ~ &__label {\n color: var(--label-hover-color);\n }\n\n &__input:checked:hover ~ &__label,\n &__input:checked:hover ~ &__mark &__check {\n color: var(--label-hover-checked-color);\n }\n\n &__input:checked:hover ~ &__mark &__check {\n @media (forced-colors: active) {\n color: Highlight;\n }\n }\n\n &:hover &__mark,\n &__input:checked ~ &__mark {\n border-color: var(--label-hover-color);\n\n @media (forced-colors: active) {\n border-color: Highlight;\n }\n }\n\n &__input:checked:hover ~ &__mark {\n border-color: var(--label-hover-checked-color);\n\n @media (forced-colors: active) {\n border-color: Highlight;\n }\n }\n\n &--is-checked .stzh-checkbox__check {\n opacity: 1;\n }\n\n / Invalid /\n\n &--is-invalid &__input ~ &__label,\n &--is-invalid &__input ~ &__mark &__check {\n @media (forced-colors: none) {\n color: var(--invalid-color);\n }\n }\n\n &--is-invalid &__input ~ &__mark {\n @media (forced-colors: none) {\n border-color: var(--invalid-color);\n }\n }\n\n / Disabled /\n\n &--is-disabled &__field-wrapper {\n cursor: not-allowed;\n }\n\n &--is-disabled &__input ~ &__label {\n color: $colorGrey60;\n\n @media (forced-colors: active) {\n color: GrayText;\n }\n }\n\n &--is-disabled &__input ~ &__mark {\n border-color: var(--disabled-color);\n background-color: $colorGrey20;\n\n @media (forced-colors: active) {\n border-color: GrayText;\n }\n }\n\n &--is-disabled &__input ~ &__mark &__check {\n color: var(--disabled-color);\n\n @media (forced-colors: active) {\n color: GrayText;\n }\n }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-checkbox\",\n styleUrl: \"stzh-checkbox.scss\",\n scoped: true,\n})\nexport class StzhCheckbox {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the checkbox is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Name of the input element /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Checked status /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* Default checked (used by reset) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Use the `description-long-title` slot or the `description` property instead.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Element() element: HTMLStzhRadioElement;\n\n private input: HTMLInputElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n };\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n\n this.stzhChange.emit({\n component: \"stzh-checkbox\",\n originalEvent: event,\n value: this.value,\n checked: this.checked,\n });\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-checkbox\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-checkbox\",\n originalEvent: event,\n });\n };\n\n async componentWillLoad() {\n this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n this.errorWatcher(this.error);\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkbox\");\n }\n }\n\n render() {\n const descriptionUsed = hasSlot(this.element, \"description\") \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, \"description-long\") \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, \"error\") \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-checkbox\": true,\n \"stzh-checkbox--has-description\": descriptionUsed,\n \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n \"stzh-checkbox--has-error\": errorUsed,\n \"stzh-checkbox--is-required\": this.required,\n \"stzh-checkbox--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-checkbox--is-disabled\": this.disabled,\n \"stzh-checkbox--is-checked\": this.checked,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <label class=\"stzh-checkbox__field-wrapper\">\n <input\n class=\"stzh-checkbox__input\"\n ref={el => (this.input = el as HTMLInputElement)}\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n checked={this.checked}\n defaultChecked={this.defaultChecked}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <div class=\"stzh-checkbox__mark\">\n <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n </div>\n <div class=\"stzh-checkbox__label\">\n {this.label ? (\n this.label\n ) : (\n <span class=\"stzh-checkbox__label-slot\">\n <slot></slot>\n </span>\n )}\n\n {!this.hideOptional && (\n <span class=\"stzh-checkbox__marker\">\n <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-checkbox__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n\n {descriptionLongUsed && (\n <StzhInputDescription\n classPrefix=\"stzh-checkbox\"\n id={`${this.inputId}-description-long`}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={true}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n showError={false}\n showDescriptionText={false}\n />\n )}\n </div>\n </label>\n {(errorUsed \|\| descriptionUsed) && (\n <StzhInputDescription\n classPrefix=\"stzh-checkbox\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLongUsed={false}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"stzh-checkbox.entry.js","sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n --label-hover-color: var(\n --stzh-checkbox-label-hover-color,\n #{$colorPrimary70}\n );\n --label-hover-checked-color: var(\n --stzh-checkbox-label-hover-checked-color,\n #{$colorPrimary90}\n );\n --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n display: inline-block;\n\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-checkbox {\n @include input-description;\n display: grid;\n\n &__field-wrapper {\n @include fontSize(\"milli\");\n position: relative;\n display: flex;\n user-select: none;\n cursor: pointer;\n }\n\n &__input {\n @include visuallyhiddenInput;\n border-radius: $formInputBorderRadius;\n }\n\n &__mark {\n border: 2px solid $colorBlack;\n background-color: $colorWhite;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n border-radius: $formInputBorderRadius;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n transition: border-color $baseTransitionAnimationSpeed;\n position: relative;\n\n @media (forced-colors: active) {\n transition: none;\n border-color: ButtonBorder;\n }\n }\n\n &__check {\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%) translateZ(0);\n will-change: opacity;\n opacity: 0;\n transition: opacity 0.15s ease;\n pointer-events: none;\n\n -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-position: center;\n mask-position: center;\n -webkit-mask-size: contain;\n mask-size: contain;\n\n color: var(--check-color);\n background-color: currentColor;\n\n @media (forced-colors: active) {\n transition: none;\n forced-color-adjust: none;\n color: Highlight;\n }\n }\n\n &__label {\n --stzh-base-color: initial;\n color: var(--label-color);\n transition: color $baseTransitionAnimationSpeed;\n display: inline-flex;\n align-items: center;\n gap: space(\"xsmall\");\n margin-left: space(\"small\");\n line-height: 24px;\n\n &:empty {\n display: none;\n }\n }\n\n &__label > &__description-wrapper {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: flex-start;\n margin: 0;\n }\n\n &__label &__error,\n &__label &__description-text {\n display: none;\n }\n\n &__label &__description,\n &__label &__description-long {\n display: inline-flex;\n align-items: flex-start;\n margin: 0;\n }\n\n &__label &__description-long-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n line-height: 1;\n }\n\n &__label stzh-popover &__description-long-icon {\n --size: var(--stzh-icon-size-small);\n display: block;\n line-height: 0;\n color: $colorPrimary70;\n }\n\n &__label-slot {\n display: block;\n }\n\n &__label-slot stzh-text {\n display: block;\n }\n\n &__marker {\n @include fontSize(\"micro\");\n margin-left: calc(-0.25em + #{space(\"xsmall\")});\n }\n\n /* Hover / Focus / Checked /\n\n &:hover &__label,\n &__input:checked ~ &__label {\n color: var(--label-hover-color);\n }\n\n &__input:checked:hover ~ &__label,\n &__input:checked:hover ~ &__mark &__check {\n color: var(--label-hover-checked-color);\n }\n\n &__input:checked:hover ~ &__mark &__check {\n @media (forced-colors: active) {\n color: Highlight;\n }\n }\n\n &:hover &__mark,\n &__input:checked ~ &__mark {\n border-color: var(--label-hover-color);\n\n @media (forced-colors: active) {\n border-color: Highlight;\n }\n }\n\n &__input:checked:hover ~ &__mark {\n border-color: var(--label-hover-checked-color);\n\n @media (forced-colors: active) {\n border-color: Highlight;\n }\n }\n\n &--is-checked .stzh-checkbox__check {\n opacity: 1;\n }\n\n / Invalid /\n\n &--is-invalid &__input ~ &__label,\n &--is-invalid &__input ~ &__mark &__check {\n @media (forced-colors: none) {\n color: var(--invalid-color);\n }\n }\n\n &--is-invalid &__input ~ &__mark {\n @media (forced-colors: none) {\n border-color: var(--invalid-color);\n }\n }\n\n / Disabled /\n\n &--is-disabled &__field-wrapper {\n cursor: not-allowed;\n }\n\n &--is-disabled &__input ~ &__label {\n color: $colorGrey60;\n\n @media (forced-colors: active) {\n color: GrayText;\n }\n }\n\n &--is-disabled &__input ~ &__mark {\n border-color: var(--disabled-color);\n background-color: $colorGrey20;\n\n @media (forced-colors: active) {\n border-color: GrayText;\n }\n }\n\n &--is-disabled &__input ~ &__mark &__check {\n color: var(--disabled-color);\n\n @media (forced-colors: active) {\n color: GrayText;\n }\n }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen, State } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasDefaultSlotContent, hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-checkbox\",\n styleUrl: \"stzh-checkbox.scss\",\n scoped: true,\n})\nexport class StzhCheckbox {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the checkbox is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Name of the input element /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Checked status /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /* Default checked (used by reset) /\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Use the `description-long-title` slot or the `description` property instead.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n /* Input blur event /\n @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n /\n Whether the component has meaningful default-slot content.\n * Becomes obsolete with the implementation of PDESI-1908.\n /\n @State() hasDefaultSlot: boolean = false;\n\n /\n Indicates whether default-slot content detection has run at least once.\n * Used to avoid rendering state-dependent markup before the slot content\n * has been evaluated.\n * Becomes obsolete with the implementation of PDESI-1908.\n /\n @State() hasResolvedDefaultSlot: boolean = false;\n\n @Element() element: HTMLStzhRadioElement;\n\n private input: HTMLInputElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n };\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n\n this.stzhChange.emit({\n component: \"stzh-checkbox\",\n originalEvent: event,\n value: this.value,\n checked: this.checked,\n });\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-checkbox\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false,\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-checkbox\",\n originalEvent: event,\n });\n };\n\n /\n Re-evaluates default-slot content and updates the related render state.\n * Becomes obsolete with implementation of PDESI-1908.\n */\n private updateDefaultSlotState = () => {\n const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-checkbox\"]);\n if (this.hasDefaultSlot !== hasDefaultSlot) {\n this.hasDefaultSlot = hasDefaultSlot;\n }\n if (!this.hasResolvedDefaultSlot) {\n this.hasResolvedDefaultSlot = true;\n }\n };\n\n componentDidLoad() {\n this.updateDefaultSlotState();\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n this.errorWatcher(this.error);\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkbox\");\n }\n }\n\n render() {\n const descriptionUsed = hasSlot(this.element, \"description\") \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, \"description-long\") \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, \"error\") \|\| this._error?.length > 0;\n\n const labelUsed = !!this.label \|\| this.hasDefaultSlot;\n const labelWrapperUsed = !this.hasResolvedDefaultSlot \|\| labelUsed \|\| descriptionLongUsed;\n\n const classes = {\n \"stzh-checkbox\": true,\n \"stzh-checkbox--has-description\": descriptionUsed,\n \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n \"stzh-checkbox--has-error\": errorUsed,\n \"stzh-checkbox--is-required\": this.required,\n \"stzh-checkbox--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-checkbox--is-disabled\": this.disabled,\n \"stzh-checkbox--is-checked\": this.checked,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {labelWrapperUsed && (\n <label class=\"stzh-checkbox__field-wrapper\">\n <input\n class=\"stzh-checkbox__input\"\n ref={el => (this.input = el as HTMLInputElement)}\n type=\"checkbox\"\n id={this.inputId}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n checked={this.checked}\n defaultChecked={this.defaultChecked}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <div class=\"stzh-checkbox__mark\">\n <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n </div>\n <div class=\"stzh-checkbox__label\">\n {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n\n {labelUsed && !this.hideOptional && (\n <span class=\"stzh-checkbox__marker\">\n <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker}\n </span>\n <span class=\"stzh-checkbox__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText}\n </span>\n </span>\n )}\n\n {descriptionLongUsed && (\n <StzhInputDescription\n classPrefix=\"stzh-checkbox\"\n id={`${this.inputId}-description-long`}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={true}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n showError={false}\n showDescriptionText={false}\n />\n )}\n </div>\n </label>\n )}\n {(errorUsed \|\| descriptionUsed) && (\n <StzhInputDescription\n classPrefix=\"stzh-checkbox\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLongUsed={false}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/stzh-checkboxgroup.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
-import { h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
+import { h as hasSlot } from './utils-CnvjJ2wY.js';
 import { c as camelCase } from './string-utils-BubviQku.js';
-import { S as StzhInputDescription } from './stzh-input-description-CkiDnZXP.js';
+import { S as StzhInputDescription } from './stzh-input-description-BLx_RZxZ.js';
 const stzhCheckboxgroupCss = () => `.sc-stzh-checkboxgroup-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-checkboxgroup-h,[stzh-hidden].sc-stzh-checkboxgroup-h{display:none}.sc-stzh-checkboxgroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::before,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-checkboxgroup-h .has-focus.sc-stzh-checkboxgroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup{outline-style:none !important}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-checkboxgroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-checkboxgroup__marker-symbol.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-checkboxgroup__marker-text.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup__description-wrapper.sc-stzh-checkboxgroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup{color:var(--stzh-color-error60)}.stzh-checkboxgroup__error-list.sc-stzh-checkboxgroup{list-style:none;margin:0;padding:0}.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-top:0}}.stzh-checkboxgroup__description-long-popover.sc-stzh-checkboxgroup{--width:auto;--max-width:27.3125rem}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-checkboxgroup.sc-stzh-checkboxgroup stzh-icon.stzh-checkboxgroup__description-long-icon.sc-stzh-checkboxgroup{--size:var(--stzh-icon-size-xsmall)}.stzh-checkboxgroup--has-error.sc-stzh-checkboxgroup .stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup--has-description.sc-stzh-checkboxgroup .stzh-checkboxgroup__description.sc-stzh-checkboxgroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-checkboxgroup.sc-stzh-checkboxgroup{margin:0;padding:0;border:none}.stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-heading-color);padding:0;margin-bottom:var(--stzh-space-xsmall);display:flex;align-items:center;gap:var(--stzh-space-xsmall);min-width:0;max-width:100%}.stzh-checkboxgroup__legend-text.sc-stzh-checkboxgroup{min-width:0}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup>.stzh-checkboxgroup__description-wrapper.sc-stzh-checkboxgroup{flex:0 0 auto;display:inline-flex;align-items:flex-start;margin:0}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__description-text.sc-stzh-checkboxgroup{display:none}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__description.sc-stzh-checkboxgroup,.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{display:inline-flex;align-items:flex-start;margin:0}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup stzh-popover.sc-stzh-checkboxgroup .stzh-checkboxgroup__description-long-icon.sc-stzh-checkboxgroup{--size:var(--stzh-icon-size-small);display:block;line-height:0;color:var(--stzh-color-primary70)}.stzh-checkboxgroup--hide-legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup--direction-horizontal.sc-stzh-checkboxgroup .stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-xxlarge)}`;
@@ -187,11 +187,11 @@ const StzhCheckboxgroup = class {
             "stzh-checkboxgroup--hide-legend": this.hideLegend,
             [`stzh-checkboxgroup--direction-${this.direction}`]: !!this.direction,
         };
-        return (h(Host, { key: '2ec75243e3789e09e8a8b49338ab6801a844fd96', "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { key: '3149e4dff13d900c6d644173ea8b5d7f6274df1e', class: classes }, legendUsed && (h("legend", { key: 'a1831fd9f8a697c8f931d029a7787260d10247a8', class: "stzh-checkboxgroup__legend" }, this.legend && (h("span", { key: '89d96b7da45169e1b29a78074424dbe167e0ae35', class: "stzh-checkboxgroup__legend-text" }, this.legend, !this.hideOptional && (h("span", { key: '9dc77fdd2f69bbe67edfe9d2954e6fd4adecdcc3', class: "stzh-checkboxgroup__marker" }, h("span", { key: 'f9a8d707bc34bd1d121f6e0555b937369358f28d', class: "stzh-checkboxgroup__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '720872ca7386fc428b0dc8882817030f3b6dd81d', "is-invalid": this.invalid || this.errorUsed }, h("fieldset", { key: 'fee8021a63f01abe04b22f9d773ed4adbe9754c6', class: classes }, legendUsed && (h("legend", { key: 'c794e19cc927c9114b4fea02ac8835ee2e5676d1', class: "stzh-checkboxgroup__legend" }, this.legend && (h("span", { key: '433880ceb11ca1d84a076fbbd3fe272e611fd039', class: "stzh-checkboxgroup__legend-text" }, this.legend, !this.hideOptional && (h("span", { key: '4d19a918e6ee2101c6215733143184330ad10ba3', class: "stzh-checkboxgroup__marker" }, h("span", { key: 'bdaf281618d6676b96ab78b345ff6bdd8291294c', class: "stzh-checkboxgroup__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '8a3aee7c90442126f3bb79575a656de88fb8b0ce', class: "stzh-checkboxgroup__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '03a501a4db35dda2cfbb808c1ef6dda910be6021', class: "stzh-checkboxgroup__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText))))), descriptionLongUsed && (h(StzhInputDescription, { key: '8fcca62e9d2626369a83bc95c5c0ba435c1ea8fc', classPrefix: "stzh-checkboxgroup", id: `${this.checkboxgroupId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: '7a7862714d84d0e18d55b356516b1354a29c83ca', class: "stzh-checkboxgroup__fields" }, h("slot", { key: '0fb7bbd616158752878038d0d868a8f2321d5bbe' })), (this.errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: 'fb81ec660f839d7d689228289a9643fd13607369', classPrefix: "stzh-checkboxgroup", id: `${this.checkboxgroupId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
+            : this.localization.$globals.optionalFieldText))))), descriptionLongUsed && (h(StzhInputDescription, { key: '4665d6b6604c61dfca4fb8fd8cd49b51cf652fa6', classPrefix: "stzh-checkboxgroup", id: `${this.checkboxgroupId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: '49027931041b7171435c8b0669180c7e943b3b14', class: "stzh-checkboxgroup__fields" }, h("slot", { key: 'bfbf3b35d0db6449788826d3ac63547dd4def04b' })), (this.errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '6e204732081c61ae65e8728dd3fa1d961f4e6dd6', classPrefix: "stzh-checkboxgroup", id: `${this.checkboxgroupId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-chip_2.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement, F as Fragment } from './index-Qb46gVIp.js';
-import { S as StzhInputDescription } from './stzh-input-description-CkiDnZXP.js';
-import { h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement, F as Fragment } from './index-Cd_ra_Ay.js';
+import { S as StzhInputDescription } from './stzh-input-description-BLx_RZxZ.js';
+import { h as hasSlot } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 const stzhChipCss = () => `.sc-stzh-chip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h,[stzh-hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chip-h .has-focus.sc-stzh-chip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip{outline-style:none !important}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip::-moz-focus-inner{border:0 !important}.sc-stzh-chip-h{--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}@media screen and (min-width: 900px){.sc-stzh-chip-h{--outer-height:auto}}.sc-stzh-chip-h{--color:var(--stzh-chip-color, var(--stzh-color-primary70));--remove-color:var(--color);--remove-border-radius:1.5rem;--background-color:var(--stzh-chip-background-color, var(--stzh-color-secondary30));--icon-size:var(--stzh-icon-size-xsmall);--icon-color:var(--color);--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--color);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-chip-hover-color, var(--stzh-color-primary70));--hover-background-color:var(
@@ -124,7 +124,7 @@ const StzhChip = class {
             [`stzh-chip--${this.variant}`]: !!this.variant,
         };
         const Chip = this.nonInteractive ? "div" : this.href ? "a" : "button";
-        return (h(Host, { key: 'c2d6807463fe7613b47d6bd461456e3562895599', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'fc21b4bf6596cbf5af87cbef37c56a8ca368b515', class: classes }, this.removable && (h("button", { key: '9b749e905aa5e1327ed4189d26fb34e62f9fbf17', class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button", "s-object-id": this.removeAnalyticsId || this.removeLabel }, h("stzh-icon", { key: '71156186f893429de5414f2d425fa7067ce0907d', class: "stzh-chip__remove-icon", name: "close-big" }))), this.href ? (h(Chip, { ref: el => (this.chip = el), class: {
+        return (h(Host, { key: 'd6c5c3b59b8ecd7029f2437f932111b60fbbaee5', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'c085e6b54bcbc6bfe7f1db37ddda87f0c2a963c9', class: classes }, this.removable && (h("button", { key: 'c583264824d269d128ef57a953466463b28296d9', class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button", "s-object-id": this.removeAnalyticsId || this.removeLabel }, h("stzh-icon", { key: '9f2b6bc03d112825ee1811a60d15c54c27fec837', class: "stzh-chip__remove-icon", name: "close-big" }))), this.href ? (h(Chip, { ref: el => (this.chip = el), class: {
                 "stzh-chip__button": true,
                 "is-button": !this.nonInteractive && !this.href,
                 "is-link": !this.nonInteractive && !!this.href,
@@ -394,12 +394,12 @@ const StzhChipselect = class {
             "stzh-chipselect--is-required": this.required,
             "stzh-chipselect--has-label-hidden": this.labelHidden,
         };
-        return (h(Host, { key: '6d2c378e763f9846d5bcef6fbdf00f24956046a5', "is-invalid": this.invalid || errorUsed }, h("div", { key: '8c6db8e943fa6c1d9728f895fea83f6e95dd30db', class: classes }, !this.useDropdownOnMobile &&
-            (this.multiple ? (h(Fragment, null, this._value.map(value => (h("input", { type: "hidden", name: this.name, value: value }))))) : (h("input", { type: "hidden", name: this.name, value: this.value }))), !this.useDropdownOnMobile && labelWrapperUsed && (h("div", { key: '939cf90d05cc4a7677287d41992366a9024a1258', class: "stzh-chipselect__label-wrapper" }, h("label", { key: '3e6d0006b9f8b6a5aa696969150aac1342ef6717', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '8072a604dc9304930a2d8b88083a4c3d9ad1e625', class: "stzh-chipselect__marker" }, h("span", { key: 'd5fd00632be1a47cc07ca936133ca1d4d79fc6ab', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '05ab7504d218a6292c49e110130200f0554cdd0a', "is-invalid": this.invalid || errorUsed }, h("div", { key: '9d1ca4121ccf5b0cca470b825a3013eb28678788', class: classes }, !this.useDropdownOnMobile &&
+            (this.multiple ? (h(Fragment, null, this._value.map(value => (h("input", { type: "hidden", name: this.name, value: value }))))) : (h("input", { type: "hidden", name: this.name, value: this.value }))), !this.useDropdownOnMobile && labelWrapperUsed && (h("div", { key: 'd8d8a5a86faf5ada89e69412de983bd4879b0c58', class: "stzh-chipselect__label-wrapper" }, h("label", { key: '25511e529d9bebfe0f2297f679716caca3bdc95b', class: "stzh-chipselect__label", htmlFor: this.id }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '5225daf3a443d28a5da915fb262b288381763c49', class: "stzh-chipselect__marker" }, h("span", { key: 'd0da978f5e09c1f7fa94e02f890989d4b9cd69d9', class: "stzh-chipselect__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'f501bb9f1e8c132f639ed72ca195eb1a669c167c', class: "stzh-chipselect__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'c1bf469c695d35d21969ae80848c3135f46c32d4', class: "stzh-chipselect__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: '9ff27d167b8cbac6770de6c0bfbb9121a329c9ef', classPrefix: "stzh-chipselect", id: `${this.id}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), this._data.length > 0 && (h(Fragment, { key: '130d007cfa576382f900029823900bbc16f5b8b2' }, !this.useDropdownOnMobile ? (h(Fragment, null, h("div", { id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": activeId, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
+            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: '37a97e0660c0a5da100332e96246ba8fb6a29a4d', classPrefix: "stzh-chipselect", id: `${this.id}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), this._data.length > 0 && (h(Fragment, { key: '5d1b7d2738ae981aba22b1c6d46a002598f16e4a' }, !this.useDropdownOnMobile ? (h(Fragment, null, h("div", { id: this.id, class: "stzh-chipselect__chips", role: "listbox", tabindex: "0", "aria-multiselectable": this.multiple ? "true" : "false", "aria-activedescendant": activeId, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, index) => (h("stzh-chip", { role: "option", class: {
                 "stzh-chipselect__chip": true,
                 "is-focused": this.activeFocusOptionIndex === index,
             }, label: data.label, counter: data.counter, icon: data.icon, variant: data.variant || "filter", inverted: data.inverted, size: data.size || "small", disabled: this.disabled || data.disabled, active: this._value.includes(data.value) ||
@@ -412,7 +412,7 @@ const StzhChipselect = class {
                     this.multiple &&
                     (this._value.length === 0 || (this._value.length === 1 && this._value[0] === "")))
                 ? "true"
-                : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))))) : (h("stzh-dropdown", { class: "stzh-chipselect__dropdown", name: this.name, multiple: this.multiple, disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, required: this.required, invalid: this.invalid, items: this.multiple ? this._value : this._value.length > 0 ? [this._value[0]] : [], label: this.label, labelHidden: this.labelHidden, options: this._dataDropdown, hideOptional: this.hideOptional, onStzhChange: this.handleDropdownChange })))), !this.useDropdownOnMobile && (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '74c035663687909bf314c14223de6b16893fd9f7', classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
+                : "false", id: `${this.id}-option-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))))) : (h("stzh-dropdown", { class: "stzh-chipselect__dropdown", name: this.name, multiple: this.multiple, disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, required: this.required, invalid: this.invalid, items: this.multiple ? this._value : this._value.length > 0 ? [this._value[0]] : [], label: this.label, labelHidden: this.labelHidden, options: this._dataDropdown, hideOptional: this.hideOptional, onStzhChange: this.handleDropdownChange })))), !this.useDropdownOnMobile && (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '4614585a3e7594fda4fc34e3d75961750e44e8e3', classPrefix: "stzh-chipselect", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/stzh-chipgroup.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 const stzhChipgroupCss = () => `.sc-stzh-chipgroup-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipgroup-h,[stzh-hidden].sc-stzh-chipgroup-h{display:none}.sc-stzh-chipgroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipgroup-h *.sc-stzh-chipgroup,.sc-stzh-chipgroup-h *.sc-stzh-chipgroup::before,.sc-stzh-chipgroup-h *.sc-stzh-chipgroup::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipgroup-h .has-focus.sc-stzh-chipgroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipgroup-h .stzh-fylingfocus-focused.sc-stzh-chipgroup{outline-style:none !important}.sc-stzh-chipgroup-h .stzh-fylingfocus-focused.sc-stzh-chipgroup::-moz-focus-inner{border:0 !important}.stzh-chipgroup.sc-stzh-chipgroup{display:flex;gap:var(--stzh-space-medium)}`;
@@ -10,7 +10,7 @@ const StzhChipgroup = class {
         const classes = {
             "stzh-chipgroup": true,
         };
-        return (h(Host, { key: 'e4ce274f5c60a037e687c1b1322f59541ddd9177' }, h("div", { key: '037adda0d54be28ecb1e173a12523414104ad1ea', class: classes }, h("slot", { key: '9d3a9fef07bdd1f580e74f4340b3bb137a3c52a3' }))));
+        return (h(Host, { key: '01a9b227482fa146d4ed9c1d5bd984ffcaad9733' }, h("div", { key: 'c3e49714cef6f0edcfbdd903161e485ae5451ba8', class: classes }, h("slot", { key: 'd1c4f5b93ccaf72e6dabeaec0ccd4b2226ff5e94' }))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-clamp.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Qb46gVIp.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Cd_ra_Ay.js';
 const stzhClampCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}stzh-clamp[hidden],stzh-clamp[stzh-hidden]{display:none}stzh-clamp::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-clamp{}stzh-clamp .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-clamp .stzh-fylingfocus-focused{outline-style:none !important}stzh-clamp .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{--current-lines:var(--lines, 0);--trigger-color:var(--stzh-clamp-trigger-color, var(--stzh-link-color));--trigger-color-hover:var(
     --stzh-clamp-trigger-color-hover,
@@ -110,13 +110,13 @@ const StzhClamp = class {
             "stzh-clamp": true,
             "stzh-clamp--is-not-expanded": !this.expanded,
         };
-        return (h(Host, { key: 'ff524cf09a159f9823a87901b572d177595721cc', style: {
+        return (h(Host, { key: 'c1d5b2ffa921e988354b1dda17f382f1b7173d31', style: {
                 "--lines": this.lines ? this.lines.toString() : null,
                 "--lines-small": this.linesSmall ? this.linesSmall.toString() : null,
                 "--lines-medium": this.linesMedium ? this.linesMedium.toString() : null,
                 "--lines-large": this.linesLarge ? this.linesLarge.toString() : null,
                 "--lines-ultra": this.linesUltra ? this.linesUltra.toString() : null,
-            } }, h("div", { key: '173f33b6b07ffa548f52d711743b2e1aae013463', class: classes }, h("div", { key: '3814afd9fa8b81d222c0badce723d1b975c93269', ref: el => (this.textElement = el), class: "stzh-clamp__text" }, h("slot", { key: '0558cbf0c4c2d089e80651f6152eee2c03871e04' })), h("div", { key: 'd6906dc98f1c0d9e9ec767f23cfc379b0832baf7', ref: el => (this.textCloneElement = el), class: "stzh-clamp__text is-clone rs_skip", "aria-hidden": "true" }), this.showExpandLink && this.clamped && (h("stzh-link", { key: 'fa7b9a5ba7e11f162c9c03a1e15fa84a4ea2625f', class: "stzh-clamp__trigger", size: this.expandLinkSize, a11yTabindex: "-1", "aria-hidden": "true", onClick: this.handleExpandClick }, !this.expanded ? this.localization.showMore : this.localization.showLess)))));
+            } }, h("div", { key: '26d6637235068d98826d5da90433533643e8c180', class: classes }, h("div", { key: '90a53859aca1137e4dc627ce136fbf1079f55aae', ref: el => (this.textElement = el), class: "stzh-clamp__text" }, h("slot", { key: 'ad2fee651769a66e5a169e9ef07635f370a60513' })), h("div", { key: '23434246a47527ab57adc83ba6cc63c27c64ced1', ref: el => (this.textCloneElement = el), class: "stzh-clamp__text is-clone rs_skip", "aria-hidden": "true" }), this.showExpandLink && this.clamped && (h("stzh-link", { key: 'd49f2b4e5e2eb1152747de6a4af530c292a57730', class: "stzh-clamp__trigger", size: this.expandLinkSize, a11yTabindex: "-1", "aria-hidden": "true", onClick: this.handleExpandClick }, !this.expanded ? this.localization.showMore : this.localization.showLess)))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-company-logo.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as Host } from './index-Qb46gVIp.js';
+import { r as registerInstance, h, a as Host } from './index-Cd_ra_Ay.js';
 const stzhCompanyLogoCss = () => `.sc-stzh-company-logo-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-company-logo-h,[stzh-hidden].sc-stzh-company-logo-h{display:none}.sc-stzh-company-logo-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-company-logo-h *.sc-stzh-company-logo,.sc-stzh-company-logo-h *.sc-stzh-company-logo::before,.sc-stzh-company-logo-h *.sc-stzh-company-logo::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-company-logo-h .has-focus.sc-stzh-company-logo{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-company-logo-h .stzh-fylingfocus-focused.sc-stzh-company-logo{outline-style:none !important}.sc-stzh-company-logo-h .stzh-fylingfocus-focused.sc-stzh-company-logo::-moz-focus-inner{border:0 !important}.sc-stzh-company-logo-h.sc-stzh-company-logo-s>*,.sc-stzh-company-logo-h .sc-stzh-company-logo-s>*{width:100%}.stzh-company-logo.sc-stzh-company-logo{padding-top:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){.stzh-company-logo.sc-stzh-company-logo{padding-top:var(--stzh-space-big)}}@media screen and (min-width: 900px){.stzh-company-logo.sc-stzh-company-logo{padding-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.stzh-company-logo.sc-stzh-company-logo{padding-top:var(--stzh-space-huge)}}.stzh-company-logo.sc-stzh-company-logo{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-company-logo.sc-stzh-company-logo{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-company-logo.sc-stzh-company-logo{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-company-logo.sc-stzh-company-logo{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-company-logo.sc-stzh-company-logo{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-company-logo.sc-stzh-company-logo{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-company-logo.sc-stzh-company-logo{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-company-logo.sc-stzh-company-logo{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-company-logo.sc-stzh-company-logo{display:flex;justify-content:flex-end;width:inherit}.stzh-company-logo__image.sc-stzh-company-logo{width:9.375rem}@media (forced-colors: active){.stzh-company-logo__image.sc-stzh-company-logo{forced-color-adjust:none;background-color:white}}`;
@@ -10,7 +10,7 @@ const StzhCompanyLogo = class {
         const classes = {
             "stzh-company-logo": true,
         };
-        return (h(Host, { key: 'fa426ca20f1522ddd3466f7c78b20cb91115057f' }, h("div", { key: '3cd9e43b1e6becc48a9992e581fb2ebe6e818c4c', class: classes }, h("div", { key: '637765a75a4222c0892854292567771d6a1ade46', class: "stzh-company-logo__image" }, h("slot", { key: 'a95f57fda633d38df97d6dad11cecd84c37f02d7' })))));
+        return (h(Host, { key: 'd952812b3ee48f1aded0d22cda1931ae0a4432ec' }, h("div", { key: '5a19a6d3e96d18e616da4de2a08606fc0a7dce1d', class: classes }, h("div", { key: 'd42264cada9d7b30d0a523ac85be350e3246214f', class: "stzh-company-logo__image" }, h("slot", { key: '84f31c2dd1cb3cbc4a935a49d98ead81834ce9ae' })))));
     }
 };
 StzhCompanyLogo.style = stzhCompanyLogoCss();