@solid-design-system/components 3.22.1 → 3.22.3

package/dist/versioned-package/components/tab-group/tab-group.js

@@ -29,8 +29,8 @@ let SdTabGroup = class extends SolidElement {
   }
   connectedCallback() {
     const whenAllDefined = Promise.all([
-      customElements.whenDefined("sd-3-22-1-tab"),
-      customElements.whenDefined("sd-3-22-1-tab-panel")
+      customElements.whenDefined("sd-3-22-3-tab"),
+      customElements.whenDefined("sd-3-22-3-tab-panel")
     ]);
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => {
@@ -67,19 +67,19 @@ let SdTabGroup = class extends SolidElement {
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
     return [...slot.assignedElements()].filter((el) => {
-      return options.includeDisabled ? el.tagName.toLowerCase() === "sd-3-22-1-tab" : el.tagName.toLowerCase() === "sd-3-22-1-tab" && !el.disabled;
+      return options.includeDisabled ? el.tagName.toLowerCase() === "sd-3-22-3-tab" : el.tagName.toLowerCase() === "sd-3-22-3-tab" && !el.disabled;
     });
   }
   getAllPanels() {
-    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-3-22-1-tab-panel");
+    return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-3-22-3-tab-panel");
   }
   getActiveTab() {
     return this.tabs.find((t) => t.matches(":focus"));
   }
   handleClick(event) {
     const target = event.target;
-    const tab = target.closest("sd-3-22-1-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-3-22-1-tab-group");
+    const tab = target.closest("sd-3-22-3-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-3-22-3-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -89,8 +89,8 @@ let SdTabGroup = class extends SolidElement {
   }
   handleKeyDown(event) {
     const target = event.target;
-    const tab = target.closest("sd-3-22-1-tab");
-    const tabGroup = tab == null ? void 0 : tab.closest("sd-3-22-1-tab-group");
+    const tab = target.closest("sd-3-22-3-tab");
+    const tabGroup = tab == null ? void 0 : tab.closest("sd-3-22-3-tab-group");
     if (tabGroup !== this) {
       return;
     }
@@ -115,7 +115,7 @@ let SdTabGroup = class extends SolidElement {
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
       const activeEl = this.tabs.find((t) => t.matches(":focus"));
       const isRtl = this.localize.dir() === "rtl";
-      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-3-22-1-tab") {
+      if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-3-22-3-tab") {
         let index = this.tabs.indexOf(activeEl);
         if (event.key === "Home") {
           index = 0;
@@ -210,17 +210,17 @@ let SdTabGroup = class extends SolidElement {
     return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "left-auto right-0"
-    )}" @click="${this.handleScrollToStart}"><sd-3-22-1-icon library="system" name="${isRtl ? "chevron-up" : "chevron-down"}" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-3-22-1-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full h-0.25 bg-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" class="${cx(
+    )}" @click="${this.handleScrollToStart}"><sd-3-22-3-icon library="system" name="${isRtl ? "chevron-up" : "chevron-down"}" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-3-22-3-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full h-0.25 bg-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" class="${cx(
       "sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
       this.localize.dir() === "rtl" && "right-auto left-0"
-    )}" @click="${this.handleScrollToEnd}"><sd-3-22-1-icon library="system" name="${isRtl ? "chevron-down" : "chevron-up"}" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-3-22-1-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
+    )}" @click="${this.handleScrollToEnd}"><sd-3-22-3-icon library="system" name="${isRtl ? "chevron-down" : "chevron-up"}" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-3-22-3-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
   }
 };
 SdTabGroup.styles = [
   SolidElement.styles,
   unsafeCSS(InteractiveStyles),
   componentStyles,
-  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}::slotted(sd-3-22-1-tab-panel){--padding:1rem 0}`
+  css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}::slotted(sd-3-22-3-tab-panel){--padding:1rem 0}`
 ];
 __decorateClass([
   query("[part=base]")
@@ -241,7 +241,7 @@ __decorateClass([
   property()
 ], SdTabGroup.prototype, "activation", 2);
 SdTabGroup = __decorateClass([
-  customElement("sd-3-22-1-tab-group")
+  customElement("sd-3-22-3-tab-group")
 ], SdTabGroup);
 export {
   SdTabGroup as default

package/dist/versioned-package/components/tab-panel/tab-panel.d.ts

@@ -11,6 +11,6 @@ export default class SdTabPanel extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-22-1-tab-panel': SdTabPanel;
+        'sd-3-22-3-tab-panel': SdTabPanel;
     }
 }

package/dist/versioned-package/components/tab-panel/tab-panel.js

@@ -20,7 +20,7 @@ let SdTabPanel = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-3-22-1-tab-panel-${this.attrId}`;
+    this.componentId = `sd-3-22-3-tab-panel-${this.attrId}`;
     this.name = "";
     this.active = false;
   }
@@ -51,7 +51,7 @@ __decorateClass([
   watch("active")
 ], SdTabPanel.prototype, "handleActiveChange", 1);
 SdTabPanel = __decorateClass([
-  customElement("sd-3-22-1-tab-panel")
+  customElement("sd-3-22-3-tab-panel")
 ], SdTabPanel);
 export {
   SdTabPanel as default

package/dist/versioned-package/components/tag/tag.d.ts

@@ -20,6 +20,6 @@ export default class SdTag extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-22-1-tag': SdTag;
+        'sd-3-22-3-tag': SdTag;
     }
 }

package/dist/versioned-package/components/tag/tag.js

@@ -73,7 +73,7 @@ let SdTag = class extends SolidElement {
         lg: "text-base",
         sm: "text-[12px]"
       }[this.size]
-    )}"><sd-3-22-1-icon library="system" name="close" label="remove"></sd-3-22-1-icon></slot>` : ""}</${tag}>`;
+    )}"><sd-3-22-3-icon library="system" name="close" label="remove"></sd-3-22-3-icon></slot>` : ""}</${tag}>`;
   }
 };
 SdTag.styles = [
@@ -105,7 +105,7 @@ __decorateClass([
   property()
 ], SdTag.prototype, "download", 2);
 SdTag = __decorateClass([
-  customElement("sd-3-22-1-tag")
+  customElement("sd-3-22-3-tag")
 ], SdTag);
 export {
   SdTag as default

package/dist/versioned-package/components/teaser/teaser.js

@@ -99,7 +99,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-3-22-1-teaser")
+  customElement("sd-3-22-3-teaser")
 ], SdTeaser);
 export {
   SdTeaser as default

package/dist/versioned-package/components/teaser-media/teaser-media.js

@@ -65,7 +65,7 @@ __decorateClass([
   query('[part="base"]')
 ], SdTeaserMedia.prototype, "teaserMedia", 2);
 SdTeaserMedia = __decorateClass([
-  customElement("sd-3-22-1-teaser-media")
+  customElement("sd-3-22-3-teaser-media")
 ], SdTeaserMedia);
 export {
   SdTeaserMedia as default

package/dist/versioned-package/components/textarea/textarea.d.ts

@@ -66,6 +66,6 @@ export default class SdTextarea extends SolidElement implements SolidFormControl
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-22-1-textarea': SdTextarea;
+        'sd-3-22-3-textarea': SdTextarea;
     }
 }

package/dist/versioned-package/components/textarea/textarea.js

@@ -199,7 +199,7 @@ let SdTextarea = class extends SolidElement {
       "flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-3-22-1-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-3-22-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-3-22-1-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-3-22-1-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-3-22-3-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-3-22-3-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-3-22-3-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-3-22-3-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdTextarea.styles = [
@@ -308,7 +308,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-3-22-1-textarea")
+  customElement("sd-3-22-3-textarea")
 ], SdTextarea);
 export {
   SdTextarea as default

package/dist/versioned-package/components/tooltip/tooltip.d.ts

@@ -36,6 +36,6 @@ export default class SdTooltip extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-22-1-tooltip': SdTooltip;
+        'sd-3-22-3-tooltip': SdTooltip;
     }
 }

package/dist/versioned-package/components/tooltip/tooltip.js

@@ -166,16 +166,16 @@ let SdTooltip = class extends SolidElement {
   render() {
     const isStart = this.placement.endsWith("-start");
     const isEnd = this.placement.endsWith("-end");
-    return html`<sd-3-22-1-popup part="base" exportparts="
+    return html`<sd-3-22-3-popup part="base" exportparts="
           popup:base__popup,
           arrow:base__arrow
-        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" aria-describedby="tooltip" class="${cx(this.size === "lg" ? "text-xl" : "text-base")}"><button class="flex sd-interactive rounded-full"><sd-3-22-1-icon library="system" name="info-circle" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-3-22-1-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-3-22-1-popup>`;
+        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" aria-describedby="tooltip" class="${cx(this.size === "lg" ? "text-xl" : "text-base")}"><button class="flex sd-interactive rounded-full"><sd-3-22-3-icon library="system" name="info-circle" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-3-22-3-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-3-22-3-popup>`;
   }
 };
 SdTooltip.styles = [
   SolidElement.styles,
   unsafeCSS(InteractiveStyles),
-  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-3-22-1-popup{--arrow-color:rgb(var(--sd-color-primary, 0 53 142) / 1);--arrow-size:10px}sd-3-22-1-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-1-popup::part(arrow){--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-1-popup[placement^=top]::part(popup){transform-origin:bottom}sd-3-22-1-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`
+  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-3-22-3-popup{--arrow-color:rgb(var(--sd-color-primary, 0 53 142) / 1);--arrow-size:10px}sd-3-22-3-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-3-popup::part(arrow){--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-3-popup[placement^=top]::part(popup){transform-origin:bottom}sd-3-22-3-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -184,7 +184,7 @@ __decorateClass([
   query("#tooltip")
 ], SdTooltip.prototype, "body", 2);
 __decorateClass([
-  query("sd-3-22-1-popup")
+  query("sd-3-22-3-popup")
 ], SdTooltip.prototype, "popup", 2);
 __decorateClass([
   property()
@@ -217,7 +217,7 @@ __decorateClass([
   watch("disabled")
 ], SdTooltip.prototype, "handleDisabledChange", 1);
 SdTooltip = __decorateClass([
-  customElement("sd-3-22-1-tooltip")
+  customElement("sd-3-22-3-tooltip")
 ], SdTooltip);
 setDefaultAnimation("tooltip.show", {
   keyframes: [

package/dist/versioned-package/components/video/video.d.ts

@@ -19,6 +19,6 @@ export default class SdVideo extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-3-22-1-video': SdVideo;
+        'sd-3-22-3-video': SdVideo;
     }
 }

package/dist/versioned-package/components/video/video.js

@@ -86,7 +86,7 @@ let SdVideo = class extends SolidElement {
       this.playing ? "opacity-0" : "opacity-100",
       this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
       "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition"
-    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-3-22-1-icon id="default-play-icon" library="system" name="start"></sd-3-22-1-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<div part="overlay" id="overlay" role="presentation" class="${cx(
+    )}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-3-22-3-icon id="default-play-icon" library="system" name="start"></sd-3-22-3-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<div part="overlay" id="overlay" role="presentation" class="${cx(
       this.overlay && !this.playing ? "opacity-100" : "opacity-0",
       "bg-[rgba(0,0,0,0.65)] w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition"
     )}"></div><slot></slot></div>`;
@@ -109,7 +109,7 @@ __decorateClass([
   property({ type: Boolean })
 ], SdVideo.prototype, "isBelowBreakpoint", 2);
 SdVideo = __decorateClass([
-  customElement("sd-3-22-1-video")
+  customElement("sd-3-22-3-video")
 ], SdVideo);
 export {
   SdVideo as default

package/dist/versioned-package/internal/form.js

@@ -9,7 +9,7 @@ class FormControlController {
       const disabled = this.options.disabled(this.host);
       const name = this.options.name(this.host);
       const value = this.options.value(this.host);
-      const isButton = this.host.tagName.toLowerCase() === "sd-3-22-1-button";
+      const isButton = this.host.tagName.toLowerCase() === "sd-3-22-3-button";
       if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
         if (Array.isArray(value)) {
           value.forEach((val) => {
@@ -34,7 +34,7 @@ class FormControlController {
         event.stopImmediatePropagation();
         const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
         const sdRadioGroups = Array.from(invalidElements).filter(
-          (element) => element.tagName.toLowerCase() === "sd-3-22-1-radio-group"
+          (element) => element.tagName.toLowerCase() === "sd-3-22-3-radio-group"
         );
         sdRadioGroups.forEach((radioGroup) => {
           var _a2, _b2;
@@ -78,7 +78,7 @@ class FormControlController {
       disabled: (input) => input.disabled ?? false,
       reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
       setValue: (input, value) => input.value = value,
-      assumeInteractionOn: ["sd-3-22-1-input"],
+      assumeInteractionOn: ["sd-3-22-3-input"],
       ...options
     };
   }
@@ -233,6 +233,7 @@ class FormControlController {
       host.removeAttribute("data-valid");
       host.removeAttribute("data-user-invalid");
       host.removeAttribute("data-user-valid");
+      host.removeAttribute("aria-invalid");
     } else {
       host.toggleAttribute("data-required", required);
       host.toggleAttribute("data-optional", !required);
@@ -240,6 +241,7 @@ class FormControlController {
       host.toggleAttribute("data-valid", isValid);
       host.toggleAttribute("data-user-invalid", !isValid && hasInteracted);
       host.toggleAttribute("data-user-valid", isValid && hasInteracted);
+      host.setAttribute("aria-invalid", (!isValid).toString());
     }
   }
   /**

package/dist/versioned-package/internal/longpress.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="node" />
+import { AsyncDirective, type DirectiveParameters, type Part } from 'lit/async-directive.js';
+import { type ElementPart, noChange, nothing } from 'lit';
+interface Callbacks {
+    start: () => void;
+    end: () => void;
+}
+declare class LongPressDirective extends AsyncDirective {
+    host: HTMLButtonElement;
+    observer: MutationObserver;
+    callbacks: Callbacks;
+    interval: NodeJS.Timeout;
+    timeout: NodeJS.Timeout;
+    constructor(part: Part);
+    render(_callback: Callbacks): typeof nothing;
+    update(part: ElementPart, [callbacks]: DirectiveParameters<this>): typeof noChange;
+    protected disconnected(): void;
+    private handlePointerDown;
+    private spinOnLongPressCallback;
+    private handlePointerUp;
+    private stopSpinningAndCleanUp;
+}
+export declare const longPress: (_callback: Callbacks) => import("lit/async-directive").DirectiveResult<typeof LongPressDirective>;
+export type { LongPressDirective };

package/dist/versioned-package/internal/longpress.js

@@ -0,0 +1,80 @@
+import { directive, AsyncDirective, PartType } from "lit/async-directive.js";
+import { nothing, noChange } from "lit";
+class LongPressDirective extends AsyncDirective {
+  constructor(part) {
+    super(part);
+    this.handlePointerDown = (event) => {
+      if (event.button !== 0 || this.host.disabled) {
+        return;
+      }
+      this.spinOnLongPressCallback(event);
+    };
+    this.handlePointerUp = (pointerUp) => {
+      pointerUp == null ? void 0 : pointerUp.preventDefault();
+      pointerUp == null ? void 0 : pointerUp.stopPropagation();
+      if (this.timeout) {
+        this.callbacks.start();
+      }
+      this.stopSpinningAndCleanUp();
+      this.callbacks.end();
+      document.removeEventListener("pointerup", this.handlePointerUp);
+    };
+    if (part.type !== PartType.ELEMENT || !(part.element instanceof HTMLButtonElement)) {
+      throw new Error("The `longPress` directive must be used on an HTMLButtonElement.");
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, class-methods-use-this
+  render(_callback) {
+    return nothing;
+  }
+  update(part, [callbacks]) {
+    if (this.callbacks === void 0 && this.host === void 0) {
+      this.host = part.element;
+      this.callbacks = { ...callbacks };
+      this.host.addEventListener("pointerdown", this.handlePointerDown);
+    }
+    return noChange;
+  }
+  disconnected() {
+    this.stopSpinningAndCleanUp();
+    this.host.removeEventListener("pointerdown", this.handlePointerDown);
+    document.removeEventListener("pointerup", this.handlePointerUp);
+  }
+  /**
+   * Start spinning on long press clicks otherwise handle as single click event
+   */
+  spinOnLongPressCallback(event) {
+    var _a;
+    event.preventDefault();
+    event.stopPropagation();
+    this.timeout = setTimeout(() => {
+      this.timeout = void 0;
+      this.interval = setInterval(() => {
+        this.callbacks.start();
+      }, 50);
+    }, 500);
+    document.addEventListener("pointerup", this.handlePointerUp);
+    (_a = this.observer) == null ? void 0 : _a.disconnect();
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === "disabled") {
+          this.stopSpinningAndCleanUp();
+        }
+      });
+    });
+    this.observer.observe(this.host, { attributes: true });
+  }
+  /**
+   * Stop the spinning and clean up all timer and observer
+   */
+  stopSpinningAndCleanUp() {
+    var _a;
+    clearInterval(this.interval);
+    clearTimeout(this.timeout);
+    (_a = this.observer) == null ? void 0 : _a.disconnect();
+  }
+}
+const longPress = directive(LongPressDirective);
+export {
+  longPress
+};

package/dist/versioned-package/styles/headline/headline.css.js

@@ -1,4 +1,4 @@
-const HeadlineStyles = ".sd-headline,.sd-prose :is(h1,h2,h3,h4,h5){display:flex;font-weight:700;--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}.sd-headline sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5) sd-3-22-1-icon{flex-shrink:0;font-size:3rem;--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}@media (min-width:640px){.sd-headline sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5) sd-3-22-1-icon{margin-top:var(--sd-spacing-2,.5rem)}}.sd-headline.sd-headline,.sd-headline:is(h1):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline){font-size:var(--sd-font-size-3xl,2rem);gap:var(--sd-spacing-4,1rem);line-height:var(--sd-line-height-tight,120%)}@media (min-width:640px){.sd-headline.sd-headline,.sd-headline:is(h1):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline){font-size:var(--sd-font-size-4xl,2.5rem)}}.sd-headline.sd-headline sd-3-22-1-icon,.sd-headline:is(h1):not(.sd-headline) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline) sd-3-22-1-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}@media (min-width:640px){.sd-headline.sd-headline sd-3-22-1-icon,.sd-headline:is(h1):not(.sd-headline) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline) sd-3-22-1-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline.sd-headline--size-3xl,.sd-headline:is(h2):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline){font-size:var(--sd-font-size-2xl,1.75rem);gap:var(--sd-spacing-4,1rem);line-height:var(--sd-line-height-tight,120%)}@media (min-width:640px){.sd-headline.sd-headline--size-3xl,.sd-headline:is(h2):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline){font-size:var(--sd-font-size-3xl,2rem)}}.sd-headline.sd-headline--size-3xl sd-3-22-1-icon,.sd-headline:is(h2):not(.sd-headline) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline) sd-3-22-1-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}@media (min-width:640px){.sd-headline.sd-headline--size-3xl sd-3-22-1-icon,.sd-headline:is(h2):not(.sd-headline) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline) sd-3-22-1-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline.sd-headline--size-base,.sd-headline.sd-headline--size-lg,.sd-headline.sd-headline--size-xl,.sd-headline:is(h3,h4,h5):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h3,h4,h5):not(.sd-headline){gap:var(--sd-spacing-2,.5rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.sd-headline.sd-headline--size-base sd-3-22-1-icon,.sd-headline.sd-headline--size-lg sd-3-22-1-icon,.sd-headline.sd-headline--size-xl sd-3-22-1-icon,.sd-headline:is(h3,h4,h5):not(.sd-headline) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h3,h4,h5):not(.sd-headline) sd-3-22-1-icon{font-size:2rem}.sd-headline.sd-headline--size-xl,.sd-headline:is(h3):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h3):not(.sd-headline){font-size:var(--sd-font-size-xl,1.5rem)}.sd-headline.sd-headline--size-xl sd-3-22-1-icon,.sd-headline:is(h3):not(.sd-headline) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h3):not(.sd-headline) sd-3-22-1-icon{margin-top:var(--sd-spacing-0-5,.125rem)}@media (min-width:640px){.sd-headline.sd-headline--size-xl sd-3-22-1-icon,.sd-headline:is(h3):not(.sd-headline) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h3):not(.sd-headline) sd-3-22-1-icon{margin-top:var(--sd-spacing-0-5,.125rem)}}.sd-headline.sd-headline--size-base,.sd-headline.sd-headline--size-lg,.sd-headline:is(h4,h5):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg,.sd-prose :is(h1,h2,h3,h4,h5):is(h4,h5):not(.sd-headline){line-height:var(--sd-line-height-normal,150%)}.sd-headline.sd-headline--size-lg,.sd-headline:is(h4),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg,.sd-prose :is(h1,h2,h3,h4,h5):is(h4){font-size:var(--sd-font-size-lg,1.25rem)}.sd-headline.sd-headline--size-lg sd-3-22-1-icon,.sd-headline:is(h4) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h4) sd-3-22-1-icon{margin-top:var(--sd-spacing-0,0)}@media (min-width:640px){.sd-headline.sd-headline--size-lg sd-3-22-1-icon,.sd-headline:is(h4) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h4) sd-3-22-1-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline.sd-headline--size-base,.sd-headline:is(h5):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base,.sd-prose :is(h1,h2,h3,h4,h5):is(h5):not(.sd-headline){font-size:var(--sd-font-size-base,1rem)}.sd-headline.sd-headline--size-base sd-3-22-1-icon,.sd-headline:is(h5):not(.sd-headline) sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base sd-3-22-1-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h5):not(.sd-headline) sd-3-22-1-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}.sd-headline.sd-headline--size-base mark,.sd-headline:is(h5):not(.sd-headline) mark,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base mark,.sd-prose :is(h1,h2,h3,h4,h5):is(h5):not(.sd-headline) mark{color:inherit}.sd-headline--inline{display:inline-block}.sd-headline--inline sd-3-22-1-icon{margin-right:var(--sd-spacing-2,.5rem);margin-top:calc(var(--sd-spacing-1, .25rem)*-1);vertical-align:middle}.sd-headline--inline:is(.sd-headline--size-xl,.sd-headline--size-lg,.sd-headline--size-base) sd-3-22-1-icon{margin-right:var(--sd-spacing-0-5,.125rem)}.sd-headline--inverted:not(#\\9),.sd-prose--inverted :is(h1,h2,h3,h4,h5):not(.sd-headline):not(#\\9){--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.sd-headline--inverted:not(#\\9) sd-3-22-1-icon,.sd-prose--inverted :is(h1,h2,h3,h4,h5):not(.sd-headline):not(#\\9) sd-3-22-1-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}";
+const HeadlineStyles = ".sd-headline,.sd-prose :is(h1,h2,h3,h4,h5){display:flex;font-weight:700;--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}.sd-headline sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5) sd-3-22-3-icon{flex-shrink:0;font-size:3rem;--tw-text-opacity:1;color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-text-opacity))}@media (min-width:640px){.sd-headline sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5) sd-3-22-3-icon{margin-top:var(--sd-spacing-2,.5rem)}}.sd-headline.sd-headline,.sd-headline:is(h1):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline){font-size:var(--sd-font-size-3xl,2rem);gap:var(--sd-spacing-4,1rem);line-height:var(--sd-line-height-tight,120%)}@media (min-width:640px){.sd-headline.sd-headline,.sd-headline:is(h1):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline){font-size:var(--sd-font-size-4xl,2.5rem)}}.sd-headline.sd-headline sd-3-22-3-icon,.sd-headline:is(h1):not(.sd-headline) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline) sd-3-22-3-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}@media (min-width:640px){.sd-headline.sd-headline sd-3-22-3-icon,.sd-headline:is(h1):not(.sd-headline) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h1):not(.sd-headline) sd-3-22-3-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline.sd-headline--size-3xl,.sd-headline:is(h2):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline){font-size:var(--sd-font-size-2xl,1.75rem);gap:var(--sd-spacing-4,1rem);line-height:var(--sd-line-height-tight,120%)}@media (min-width:640px){.sd-headline.sd-headline--size-3xl,.sd-headline:is(h2):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline){font-size:var(--sd-font-size-3xl,2rem)}}.sd-headline.sd-headline--size-3xl sd-3-22-3-icon,.sd-headline:is(h2):not(.sd-headline) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline) sd-3-22-3-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}@media (min-width:640px){.sd-headline.sd-headline--size-3xl sd-3-22-3-icon,.sd-headline:is(h2):not(.sd-headline) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-3xl sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h2):not(.sd-headline) sd-3-22-3-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline.sd-headline--size-base,.sd-headline.sd-headline--size-lg,.sd-headline.sd-headline--size-xl,.sd-headline:is(h3,h4,h5):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h3,h4,h5):not(.sd-headline){gap:var(--sd-spacing-2,.5rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity))}.sd-headline.sd-headline--size-base sd-3-22-3-icon,.sd-headline.sd-headline--size-lg sd-3-22-3-icon,.sd-headline.sd-headline--size-xl sd-3-22-3-icon,.sd-headline:is(h3,h4,h5):not(.sd-headline) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h3,h4,h5):not(.sd-headline) sd-3-22-3-icon{font-size:2rem}.sd-headline.sd-headline--size-xl,.sd-headline:is(h3):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl,.sd-prose :is(h1,h2,h3,h4,h5):is(h3):not(.sd-headline){font-size:var(--sd-font-size-xl,1.5rem)}.sd-headline.sd-headline--size-xl sd-3-22-3-icon,.sd-headline:is(h3):not(.sd-headline) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h3):not(.sd-headline) sd-3-22-3-icon{margin-top:var(--sd-spacing-0-5,.125rem)}@media (min-width:640px){.sd-headline.sd-headline--size-xl sd-3-22-3-icon,.sd-headline:is(h3):not(.sd-headline) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-xl sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h3):not(.sd-headline) sd-3-22-3-icon{margin-top:var(--sd-spacing-0-5,.125rem)}}.sd-headline.sd-headline--size-base,.sd-headline.sd-headline--size-lg,.sd-headline:is(h4,h5):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg,.sd-prose :is(h1,h2,h3,h4,h5):is(h4,h5):not(.sd-headline){line-height:var(--sd-line-height-normal,150%)}.sd-headline.sd-headline--size-lg,.sd-headline:is(h4),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg,.sd-prose :is(h1,h2,h3,h4,h5):is(h4){font-size:var(--sd-font-size-lg,1.25rem)}.sd-headline.sd-headline--size-lg sd-3-22-3-icon,.sd-headline:is(h4) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h4) sd-3-22-3-icon{margin-top:var(--sd-spacing-0,0)}@media (min-width:640px){.sd-headline.sd-headline--size-lg sd-3-22-3-icon,.sd-headline:is(h4) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-lg sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h4) sd-3-22-3-icon{margin-top:var(--sd-spacing-0,0)}}.sd-headline.sd-headline--size-base,.sd-headline:is(h5):not(.sd-headline),.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base,.sd-prose :is(h1,h2,h3,h4,h5):is(h5):not(.sd-headline){font-size:var(--sd-font-size-base,1rem)}.sd-headline.sd-headline--size-base sd-3-22-3-icon,.sd-headline:is(h5):not(.sd-headline) sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base sd-3-22-3-icon,.sd-prose :is(h1,h2,h3,h4,h5):is(h5):not(.sd-headline) sd-3-22-3-icon{margin-top:calc(var(--sd-spacing-1, .25rem)*-1)}.sd-headline.sd-headline--size-base mark,.sd-headline:is(h5):not(.sd-headline) mark,.sd-prose :is(h1,h2,h3,h4,h5).sd-headline--size-base mark,.sd-prose :is(h1,h2,h3,h4,h5):is(h5):not(.sd-headline) mark{color:inherit}.sd-headline--inline{display:inline-block}.sd-headline--inline sd-3-22-3-icon{margin-right:var(--sd-spacing-2,.5rem);margin-top:calc(var(--sd-spacing-1, .25rem)*-1);vertical-align:middle}.sd-headline--inline:is(.sd-headline--size-xl,.sd-headline--size-lg,.sd-headline--size-base) sd-3-22-3-icon{margin-right:var(--sd-spacing-0-5,.125rem)}.sd-headline--inverted:not(#\\9),.sd-prose--inverted :is(h1,h2,h3,h4,h5):not(.sd-headline):not(#\\9){--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}.sd-headline--inverted:not(#\\9) sd-3-22-3-icon,.sd-prose--inverted :is(h1,h2,h3,h4,h5):not(.sd-headline):not(#\\9) sd-3-22-3-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-white,255 255 255)/var(--tw-text-opacity))}";
 export {
   HeadlineStyles as default
 };

package/dist/versioned-package/utilities/autocomplete-config.js

@@ -10,7 +10,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
     var _a, _b;
     const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
     ul == null ? void 0 : ul.setAttribute("part", "listbox");
-    const popup = document.createElement("sd-3-22-1-popup");
+    const popup = document.createElement("sd-3-22-3-popup");
     popup.appendChild(ul);
     (_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
     popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
@@ -22,7 +22,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
       popup.anchor = sdInput;
       popup.sync = "width";
     }
-    const styles = css`sd-3-22-1-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll;border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-width:2px;border-top-width:0;--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255) / var(--tw-bg-opacity));padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem);padding-top:var(--sd-spacing-3,.75rem);padding-bottom:var(--sd-spacing-3,.75rem);--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-1-popup li{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}sd-3-22-1-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246) / var(--tw-bg-opacity))}sd-3-22-1-popup li{list-style-type:''}sd-3-22-1-popup li mark{background-color:transparent;font-weight:700}sd-3-22-1-popup li:not(:has(sd-3-22-1-option)){cursor:pointer;padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem);padding-top:var(--sd-spacing-3,.75rem);padding-bottom:var(--sd-spacing-3,.75rem);font-size:var(--sd-font-size-base,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24) / var(--tw-text-opacity))}sd-3-22-1-popup li:not(:has(sd-3-22-1-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233) / var(--tw-bg-opacity))}sd-3-22-1-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233) / var(--tw-bg-opacity))}`;
+    const styles = css`sd-3-22-3-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll;border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-width:2px;border-top-width:0;--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255) / var(--tw-bg-opacity));padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem);padding-top:var(--sd-spacing-3,.75rem);padding-bottom:var(--sd-spacing-3,.75rem);--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-22-3-popup li{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}sd-3-22-3-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246) / var(--tw-bg-opacity))}sd-3-22-3-popup li{list-style-type:''}sd-3-22-3-popup li mark{background-color:transparent;font-weight:700}sd-3-22-3-popup li:not(:has(sd-3-22-3-option)){cursor:pointer;padding-left:var(--sd-spacing-4,1rem);padding-right:var(--sd-spacing-4,1rem);padding-top:var(--sd-spacing-3,.75rem);padding-bottom:var(--sd-spacing-3,.75rem);font-size:var(--sd-font-size-base,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24) / var(--tw-text-opacity))}sd-3-22-3-popup li:not(:has(sd-3-22-3-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233) / var(--tw-bg-opacity))}sd-3-22-3-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233) / var(--tw-bg-opacity))}`;
     const styleSheet = new CSSStyleSheet();
     styleSheet.replaceSync(styles);
     sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
@@ -35,13 +35,13 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
   }
   input.addEventListener("open", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-3-22-1-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-3-22-3-popup")) == null ? void 0 : _b.setAttribute("active", "true");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
   });
   input.addEventListener("close", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-3-22-1-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-3-22-3-popup")) == null ? void 0 : _b.removeAttribute("active");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
   });