@siemens/ix 5.1.0 → 5.2.0

package/dist/collection/components/badge/badge.status-icon.js

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { iconAlarm, iconAlarmFilled, iconCircleFilled, iconError, iconErrorFilled, iconInfo, iconInfoFilled, iconRhombFilled, iconSuccess, iconSuccessFilled, iconTriangleFilled, iconWarning, iconWarningFilled, iconWarningRhomb, iconWarningRhombFilled, } from "@siemens/ix-icons/icons";
+/** Fallback when the variant has no status glyph. */
+export const BADGE_STATUS_ICON_FALLBACK_VARIANT = 'info';
+/** Status icons by variant (`outline` / `filled` / `plate`). */
+export const BADGE_STATUS_ICON_BY_VARIANT = {
+    alarm: {
+        filled: iconAlarmFilled,
+        outline: iconAlarm,
+        plate: iconCircleFilled,
+    },
+    error: {
+        filled: iconErrorFilled,
+        outline: iconError,
+        plate: iconCircleFilled,
+    },
+    critical: {
+        filled: iconWarningRhombFilled,
+        outline: iconWarningRhomb,
+        plate: iconRhombFilled,
+    },
+    warning: {
+        filled: iconWarningFilled,
+        outline: iconWarning,
+        plate: iconTriangleFilled,
+    },
+    info: {
+        filled: iconInfoFilled,
+        outline: iconInfo,
+        plate: iconCircleFilled,
+    },
+    success: {
+        filled: iconSuccessFilled,
+        outline: iconSuccess,
+        plate: iconCircleFilled,
+    },
+};
+export function isBadgeStatusIconVariant(variant) {
+    return Object.hasOwn(BADGE_STATUS_ICON_BY_VARIANT, variant);
+}
+function resolveStatusIconVariant(variant) {
+    return isBadgeStatusIconVariant(variant)
+        ? variant
+        : BADGE_STATUS_ICON_FALLBACK_VARIANT;
+}
+/** Status glyph for a variant (falls back to **info**). */
+export function getBadgeStatusIcon(variant, outline = false) {
+    const icons = BADGE_STATUS_ICON_BY_VARIANT[resolveStatusIconVariant(variant)];
+    return outline ? icons.outline : icons.filled;
+}
+/** Plate icon for the filled status stack. */
+export function getBadgeStatusIconPlate(variant) {
+    return BADGE_STATUS_ICON_BY_VARIANT[resolveStatusIconVariant(variant)].plate;
+}
+/** Resolved status-icon variant for host classes (falls back to **info**). */
+export function getResolvedStatusIconVariant(variant) {
+    return resolveStatusIconVariant(variant);
+}

package/dist/collection/components/badge/badge.types.js

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export const BADGE_ANATOMY_TYPES = [
+    'label',
+    'counter',
+    'dot',
+    'status-icon',
+];
+/** Pill anatomies share chip semantic variants. */
+export { CHIP_VARIANTS as BADGE_VARIANTS } from '../chip/chip.types';
+export const BADGE_POSITIONS = ['top-after', 'bottom-after'];
+/** Default attached offsets (px) added to **offsetX** / **offsetY**. */
+export const BADGE_ATTACHED_OFFSET_DEFAULTS = {
+    dot: { x: -6, y: -6 },
+    label: { x: -10, y: -10 },
+    counter: { x: -10, y: -10 },
+    'status-icon': { x: -10, y: -10 },
+};

package/dist/collection/components/badge/badge.utils.js

@@ -0,0 +1,57 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export const BADGE_OVERFLOW_THRESHOLD = 99;
+const INTEGER_LABEL_PATTERN = /^-?\d+(\.\d+)?$/;
+const OVERFLOW_LABEL = `${BADGE_OVERFLOW_THRESHOLD}+`;
+/**
+ * Formats badge label text for supported anatomy types.
+ * Returns `null` when the type has no text or the value is invalid.
+ * Counters truncate decimals and cap at `99+`.
+ */
+export function formatBadgeLabel(type, label) {
+    switch (type) {
+        case 'counter':
+            return formatCounterLabel(label);
+        case 'label':
+            return formatTextLabel(label);
+        case 'dot':
+        case 'status-icon':
+            return null;
+    }
+}
+function coerceLabelText(label) {
+    if (label === undefined || label === null) {
+        return '';
+    }
+    return String(label).trim();
+}
+function formatTextLabel(label) {
+    const trimmed = coerceLabelText(label);
+    if (!trimmed) {
+        return null;
+    }
+    return trimmed;
+}
+function formatCounterLabel(label) {
+    const trimmed = coerceLabelText(label);
+    if (!trimmed) {
+        return null;
+    }
+    if (trimmed === OVERFLOW_LABEL) {
+        return OVERFLOW_LABEL;
+    }
+    if (!INTEGER_LABEL_PATTERN.test(trimmed)) {
+        return null;
+    }
+    const intValue = Math.trunc(Number(trimmed));
+    if (intValue > BADGE_OVERFLOW_THRESHOLD) {
+        return OVERFLOW_LABEL;
+    }
+    return String(intValue);
+}

package/dist/collection/components/badge/test/badge.page.js

@@ -0,0 +1,190 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from "@playwright/test";
+/**
+ * Page Object Model for ix-badge component testing.
+ *
+ * Prefer accessibility locators (`getByRole`, `getByText`, accessible name /
+ * description) for author-facing contracts. Fall back to tag / CSS selectors
+ * for custom-element host state and decorative chrome (e.g. attached
+ * `aria-hidden` indicator) that is intentionally outside the a11y tree.
+ *
+ * Usage:
+ * ```ts
+ * const badge = new BadgePage(page);
+ * await badge.expectHydrated();
+ * await badge.expectVisibleLabel('12');
+ * ```
+ */
+export class BadgePage {
+    page;
+    constructor(page) {
+        this.page = page;
+    }
+    /** First badge on the page (single-badge fixtures without a naming role). */
+    get host() {
+        return this.page.locator('ix-badge').first();
+    }
+    /**
+     * Named standalone badge via host `role` + accessible name.
+     * Prefer this over `host` when the fixture sets `role` / `aria-label`.
+     */
+    getByRole(role, name) {
+        return this.page.getByRole(role, { name });
+    }
+    getButton(name) {
+        return this.page.getByRole('button', { name });
+    }
+    /**
+     * Decorative indicator chrome (often `aria-hidden` when attached).
+     * Structural on purpose — not exposed in the accessibility tree.
+     */
+    get indicator() {
+        return this.host.locator('.indicator');
+    }
+    indicatorOf(badge) {
+        return badge.locator('.indicator');
+    }
+    get label() {
+        return this.host.locator('.label');
+    }
+    get description() {
+        return this.host.locator(`> .description, > [slot="description"]`).first();
+    }
+    get leadingIcon() {
+        return this.indicator.locator('ix-icon.icon');
+    }
+    get statusIconPlate() {
+        return this.indicator.locator('ix-icon.status-icon-plate');
+    }
+    get statusIconGlyph() {
+        return this.indicator.locator('ix-icon.status-icon-glyph');
+    }
+    async expectHydrated(badge = this.host) {
+        await expect(badge).toHaveClass(/\bhydrated\b/);
+    }
+    async expectAttached(badge = this.host) {
+        await expect(badge).toHaveClass(/\battached\b/);
+    }
+    async expectStandalone(badge = this.host) {
+        await expect(badge).not.toHaveClass(/\battached\b/);
+    }
+    async expectHostClass(pattern, badge = this.host) {
+        await expect(badge).toHaveClass(pattern);
+    }
+    async expectNoHostClass(pattern, badge = this.host) {
+        await expect(badge).not.toHaveClass(pattern);
+    }
+    async expectVisibleLabel(text, badge = this.host) {
+        await expect(badge.getByText(text, { exact: true })).toBeVisible();
+    }
+    async expectNoIndicator(badge = this.host) {
+        await expect(this.indicatorOf(badge)).toHaveCount(0);
+    }
+    async expectIndicatorVisible(badge = this.host) {
+        await expect(this.indicatorOf(badge)).toBeVisible();
+    }
+    async expectLeadingIconDecorative() {
+        await expect(this.leadingIcon).toBeVisible();
+        await expect(this.leadingIcon).toHaveAttribute('aria-hidden', 'true');
+    }
+    async expectLeadingIconNamed(ariaLabel) {
+        await expect(this.indicator.getByLabel(ariaLabel)).toBeVisible();
+        await expect(this.leadingIcon).toHaveAttribute('aria-hidden', 'false');
+    }
+    async expectCustomVariantColors(background, color, badge = this.host) {
+        await expect(async () => {
+            const resolvedBackground = await badge.evaluate((el) => el.style.getPropertyValue('--ix-badge-custom-background'));
+            const resolvedColor = await badge.evaluate((el) => el.style.getPropertyValue('--ix-badge-custom-color'));
+            expect(resolvedBackground).toBe(background);
+            expect(resolvedColor).toBe(color);
+        }).toPass();
+    }
+    async expectOffsets(offsetX, offsetY, badge = this.host) {
+        await expect(async () => {
+            const resolvedOffsetX = await badge.evaluate((el) => el.style.getPropertyValue('--ix-badge-offset-x'));
+            const resolvedOffsetY = await badge.evaluate((el) => el.style.getPropertyValue('--ix-badge-offset-y'));
+            expect(resolvedOffsetX).toBe(offsetX);
+            expect(resolvedOffsetY).toBe(offsetY);
+        }).toPass();
+    }
+    async expectAttachedTextLabelA11y(buttonName, descriptionText) {
+        const button = this.getButton(buttonName);
+        const describedBy = await button.getAttribute('aria-describedby');
+        expect(describedBy).toBeTruthy();
+        await expect(this.description).toHaveText(descriptionText);
+        const descriptionId = await this.description.getAttribute('id');
+        expect(descriptionId).toBeTruthy();
+        expect(describedBy.split(/\s+/)).toContain(descriptionId);
+        // Description stays in light DOM for aria-describedby (SR-only chrome is
+        // not always exposed via Playwright's accessible description API).
+        await expect
+            .poll(async () => this.page.evaluate((id) => document.getElementById(id)?.textContent ?? null, descriptionId))
+            .toBe(descriptionText);
+        await expect(this.indicator).toHaveAttribute('aria-hidden', 'true');
+    }
+    async expectDotAttachedNoDescribedBy(buttonName) {
+        const button = this.getButton(buttonName);
+        await expect(button).not.toHaveAttribute('aria-describedby');
+        await expect(this.host).toHaveAttribute('type', 'dot');
+        await expect(this.description).toHaveCount(0);
+    }
+    async expectMergedDescribedBy(buttonName, existingId, descriptionText) {
+        const button = this.getButton(buttonName);
+        const describedBy = await button.getAttribute('aria-describedby');
+        expect(describedBy).toContain(existingId);
+        expect(describedBy?.split(/\s+/).length).toBeGreaterThan(1);
+        await expect(this.description).toHaveText(descriptionText);
+    }
+    async expectStandaloneStaticChrome(options = {}) {
+        await this.expectStandalone();
+        await expect(this.indicator).not.toHaveAttribute('role');
+        await expect(this.indicator).not.toHaveAttribute('aria-live');
+        await expect(this.indicator).not.toHaveAttribute('aria-label');
+        if (options.visibleLabel !== undefined) {
+            await this.expectVisibleLabel(options.visibleLabel);
+        }
+        if (options.hostRole === null) {
+            await expect(this.host).not.toHaveAttribute('role');
+        }
+        else if (options.hostRole !== undefined) {
+            await expect(this.host).toHaveAttribute('role', options.hostRole);
+        }
+        if (options.hostAriaLabel !== undefined) {
+            await expect(this.host).toHaveAttribute('aria-label', options.hostAriaLabel);
+        }
+    }
+    async expectStandaloneHostAria(options) {
+        const named = this.getByRole(options.role, options.ariaLabel);
+        await expect(named).toBeVisible();
+        await this.expectStandalone(named);
+        await expect(this.indicatorOf(named)).not.toHaveAttribute('role');
+        if (options.ariaLive !== undefined) {
+            await expect(named).toHaveAttribute('aria-live', options.ariaLive);
+        }
+    }
+    async setLabel(label, badge = this.host) {
+        await badge.evaluate((el, value) => {
+            el.label = value;
+        }, label);
+    }
+    async disconnectKeepingAnchor(buttonName) {
+        const button = this.getButton(buttonName);
+        await button.evaluate((anchor) => {
+            const badge = anchor.closest('ix-badge');
+            if (badge) {
+                document.body.appendChild(anchor);
+                badge.remove();
+            }
+        });
+    }
+    tooltip(badge = this.host) {
+        return badge.locator('ix-tooltip');
+    }
+}

package/dist/collection/components/blind/blind.css

@@ -76,7 +76,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -85,37 +85,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .blind-header-wrapper {
@@ -222,6 +222,7 @@
   max-height: 0;
   padding-top: 0px;
   padding-bottom: 0px;
+  border-width: 0;
 }
 :host .header-actions {
   pointer-events: all;
@@ -250,10 +251,19 @@
 :host(.blind-alarm) .header-actions {
   --ix-icon-button-color: var(--theme-color-alarm--contrast);
 }
+:host(.blind-alarm) .blind-content {
+  border-radius: 0 0 var(--theme-blind--border-radius) var(--theme-blind--border-radius);
+  border: solid var(--theme-blind--border-thickness) var(--theme-color-alarm-bdr);
+  border-top: none;
+}
 :host(.blind-alarm) {
   background-color: var(--theme-blind-base--background);
 }
 
+:host(.blind-alarm[collapsed]) .blind-content {
+  border-width: 0;
+}
+
 :host(.blind-critical) .blind-header {
   background-color: var(--theme-color-critical);
 }
@@ -276,10 +286,19 @@
 :host(.blind-critical) .header-actions {
   --ix-icon-button-color: var(--theme-color-critical--contrast);
 }
+:host(.blind-critical) .blind-content {
+  border-radius: 0 0 var(--theme-blind--border-radius) var(--theme-blind--border-radius);
+  border: solid var(--theme-blind--border-thickness) var(--theme-color-critical);
+  border-top: none;
+}
 :host(.blind-critical) {
   background-color: var(--theme-blind-base--background);
 }
 
+:host(.blind-critical[collapsed]) .blind-content {
+  border-width: 0;
+}
+
 :host(.blind-info) .blind-header {
   background-color: var(--theme-color-info);
 }
@@ -302,10 +321,19 @@
 :host(.blind-info) .header-actions {
   --ix-icon-button-color: var(--theme-color-info--contrast);
 }
+:host(.blind-info) .blind-content {
+  border-radius: 0 0 var(--theme-blind--border-radius) var(--theme-blind--border-radius);
+  border: solid var(--theme-blind--border-thickness) var(--theme-color-info);
+  border-top: none;
+}
 :host(.blind-info) {
   background-color: var(--theme-blind-base--background);
 }
 
+:host(.blind-info[collapsed]) .blind-content {
+  border-width: 0;
+}
+
 :host(.blind-neutral) .blind-header {
   background-color: var(--theme-color-neutral);
 }
@@ -328,10 +356,19 @@
 :host(.blind-neutral) .header-actions {
   --ix-icon-button-color: var(--theme-color-neutral--contrast);
 }
+:host(.blind-neutral) .blind-content {
+  border-radius: 0 0 var(--theme-blind--border-radius) var(--theme-blind--border-radius);
+  border: solid var(--theme-blind--border-thickness) var(--theme-color-neutral);
+  border-top: none;
+}
 :host(.blind-neutral) {
   background-color: var(--theme-blind-base--background);
 }
 
+:host(.blind-neutral[collapsed]) .blind-content {
+  border-width: 0;
+}
+
 :host(.blind-filled) .blind-header {
   background-color: var(--theme-color-filled);
 }
@@ -376,10 +413,19 @@
 :host(.blind-success) .header-actions {
   --ix-icon-button-color: var(--theme-color-success--contrast);
 }
+:host(.blind-success) .blind-content {
+  border-radius: 0 0 var(--theme-blind--border-radius) var(--theme-blind--border-radius);
+  border: solid var(--theme-blind--border-thickness) var(--theme-color-success);
+  border-top: none;
+}
 :host(.blind-success) {
   background-color: var(--theme-blind-base--background);
 }
 
+:host(.blind-success[collapsed]) .blind-content {
+  border-width: 0;
+}
+
 :host(.blind-warning) .blind-header {
   background-color: var(--theme-color-warning);
 }
@@ -402,10 +448,19 @@
 :host(.blind-warning) .header-actions {
   --ix-icon-button-color: var(--theme-color-warning--contrast);
 }
+:host(.blind-warning) .blind-content {
+  border-radius: 0 0 var(--theme-blind--border-radius) var(--theme-blind--border-radius);
+  border: solid var(--theme-blind--border-thickness) var(--theme-color-warning-bdr);
+  border-top: none;
+}
 :host(.blind-warning) {
   background-color: var(--theme-blind-base--background);
 }
 
+:host(.blind-warning[collapsed]) .blind-content {
+  border-width: 0;
+}
+
 :host(.blind-primary) .blind-header {
   background-color: var(--theme-color-primary);
 }
@@ -428,13 +483,19 @@
 :host(.blind-primary) .header-actions {
   --ix-icon-button-color: var(--theme-color-primary--contrast);
 }
+:host(.blind-primary) .blind-content {
+  border-radius: 0 0 var(--theme-blind--border-radius) var(--theme-blind--border-radius);
+  border: solid var(--theme-blind--border-thickness) var(--theme-color-primary);
+  border-top: none;
+}
 :host(.blind-primary) {
   background-color: var(--theme-blind-base--background);
 }
 
-:host(.blind-outline) {
-  border: solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);
+:host(.blind-primary[collapsed]) .blind-content {
+  border-width: 0;
 }
+
 :host(.blind-outline) .blind-header {
   background-color: var(--theme-color-ghost);
 }
@@ -453,6 +514,49 @@
 :host(.blind-outline) .header-actions {
   --ix-icon-button-color: var(--theme-color-primary);
 }
-:host(.blind-outline) {
-  border-color: var(--theme-color-soft-bdr);
+:host(.blind-outline) .blind-header-wrapper {
+  border: solid var(--theme-blind--border-thickness) var(--theme-color-soft-bdr);
+  border-bottom: none;
+  border-radius: var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;
+}
+:host(.blind-outline) .blind-header-wrapper:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-outline) .blind-header-wrapper:not(.disabled):not(:disabled):hover, :host(.blind-outline) .blind-header-wrapper:not(.disabled):not(:disabled).hover {
+  border-color: var(--theme-color-ghost--hover);
+}
+:host(.blind-outline) .blind-header-wrapper:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-outline) .blind-header-wrapper:not(.disabled):not(:disabled):active, :host(.blind-outline) .blind-header-wrapper:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-color-ghost--active);
+}
+:host(.blind-outline) .blind-header {
+  border-radius: 0;
+}
+:host(.blind-outline) .blind-content {
+  border-radius: 0 0 var(--theme-blind--border-radius) var(--theme-blind--border-radius);
+  border: solid var(--theme-blind--border-thickness) var(--theme-color-soft-bdr);
+  border-top: none;
+}
+
+:host(.blind-outline[collapsed]) .blind-header-wrapper {
+  box-sizing: border-box;
+  border-bottom: solid var(--theme-blind--border-thickness) var(--theme-color-soft-bdr);
+  border-radius: var(--theme-blind--border-radius);
+}
+:host(.blind-outline[collapsed]) .blind-header-wrapper:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-outline[collapsed]) .blind-header-wrapper:not(.disabled):not(:disabled):hover, :host(.blind-outline[collapsed]) .blind-header-wrapper:not(.disabled):not(:disabled).hover {
+  border-color: var(--theme-color-ghost--hover);
+}
+:host(.blind-outline[collapsed]) .blind-header-wrapper:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host(.blind-outline[collapsed]) .blind-header-wrapper:not(.disabled):not(:disabled):active, :host(.blind-outline[collapsed]) .blind-header-wrapper:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-color-ghost--active);
+}
+:host(.blind-outline[collapsed]) .blind-content {
+  border-width: 0;
 }

package/dist/collection/components/blind/blind.js

@@ -12,6 +12,11 @@ import { a11yBoolean } from "../utils/a11y";
 import { iconChevronDownSmall } from "@siemens/ix-icons/icons";
 import Animation from "../utils/animation";
 let sequentialInstanceId = 0;
+/**
+ * @slot custom-header - Custom content inside blind header.
+ * @slot header-actions - Actions displayed at the end of the header.
+ * @slot default - Expandable blind content.
+ */
 export class Blind {
     /**
      * Collapsed state
@@ -87,17 +92,17 @@ export class Blind {
         });
     }
     render() {
-        return (h(Host, { key: '013b57ee3c249c67c3ec35bc94924b08a0828723', class: {
+        return (h(Host, { key: 'e4e314d907ffb3d35a2146be4791f740c689a23d', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: 'a03bf76f5ff8628de0958f3f12ae69bfadf68010', class: 'blind-header-wrapper' }, h("button", { key: '48e9d20e1bce06e2b305b856e3c7ec52d882c197', class: {
+            } }, h("div", { key: '4106b62a76f283fcd52a38087391b4ae1eb3566b', class: 'blind-header-wrapper' }, h("button", { key: 'dc53c52cfffaeb1f289d4325d2106f114c873ea7', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '127096b27d461351848650ce43de9016585f8ba2', name: "custom-header" })), h("div", { key: '30976417c051c06aebd99af776d06d8d12289e3a', class: 'blind-header-content' }, h("ix-icon", { key: '4ad41bafea4f5c85625897dd5ac53e8199c0c824', class: "collapse-icon", name: iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '1582e351ade52d3b7402aeaeee6170f723ae3d05', name: "custom-header" })), h("div", { key: '9c020a69d0e4b31d66a4b737e5459b224698dda9', class: 'blind-header-content' }, h("ix-icon", { key: '575e4ba9dfe09f75e3b82dbb45949a0c31fc120c', class: "collapse-icon", name: iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '5aaa92535b30579eecaf2d5af312fe03b7acd6bd', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '54765780ea9d2537110239c9ce5b35e3caef79be', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '10d8459ac5f41b8a09848e3182f68d641d369541', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'f39a05f57e022918dd7cbce8454f9f0aa60d2a79', class: {
+                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '1d50b28b421fb7590c6a1fb74f532f056811b5d9', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'aacf9ff6cb2fb977d69b40d88fa045aab6d7da4f', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -61,7 +61,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -70,37 +70,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .previous-button {