@siemens/ix 4.4.0 → 5.0.0

package/dist/collection/components/breadcrumb-item/breadcrumb-item.js

@@ -6,48 +6,79 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Fragment, h, Host, } from "@stencil/core";
-import { animate } from "animejs";
+import { Fragment, h, Host, Mixin, } from "@stencil/core";
 import { BaseButton } from "../button/base-button";
-import { a11yHostAttributes } from "../utils/a11y";
 import { iconChevronRightSmall } from "@siemens/ix-icons/icons";
-import Animation from "../utils/animation";
-export class BreadcrumbItem {
+import { DefaultMixins } from "../utils/internal/component";
+import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
+export class BreadcrumbItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
-        /**
-         * Specifies where to open the linked document when href is provided.
-         *
-         * @since 4.0.0
-         */
-        this.target = '_self';
-        /**@internal */
-        this.subtle = false;
-        /**@internal */
-        this.invisible = false;
-        /**@internal */
-        this.hideChevron = false;
-        /** @internal */
-        this.isDropdownTrigger = false;
-    }
-    componentDidLoad() {
-        this.animationFadeIn();
+        super();
     }
+    hostElement;
+    /**
+     * Breadcrumb label
+     */
+    label;
+    /**
+     * Icon to be displayed next ot the label
+     */
+    icon;
+    /**
+     * URL for the button link. When provided, the button will render as an anchor tag.
+     *
+     * @since 4.0.0
+     */
+    href;
+    /**
+     * Specifies where to open the linked document when href is provided.
+     *
+     * @since 4.0.0
+     */
+    target = '_self';
+    /**
+     * Will be used as the key for the breadcrumb item, which will be emitted in the itemClick event when the breadcrumb item is clicked.
+     *
+     * @since 5.0.0
+     */
+    breadcrumbKey;
+    /**
+     * Specifies the relationship between the current document and the linked document when href is provided.
+     *
+     * @since 4.0.0
+     */
+    rel;
+    /**@internal */
+    subtle = false;
+    /**@internal */
+    invisible = false;
+    /**@internal */
+    hideChevron = false;
+    /** @internal */
+    isDropdownTrigger = false;
+    /** @internal */
+    isCurrentPage = false;
+    /**@internal */
+    itemClick;
     componentWillLoad() {
-        this.a11y = a11yHostAttributes(this.hostElement, [
-            'aria-describedby',
-            'aria-controls',
-            'aria-expanded',
-        ]);
+        super.componentWillLoad();
+        this.validateProps();
     }
-    animationFadeIn() {
-        animate(this.hostElement, {
-            duration: Animation.defaultTime,
-            opacity: [0, 1],
-            translateX: ['-100%', '0%'],
-            easing: 'linear',
-        });
+    validateProps() {
+        if (!this.breadcrumbKey) {
+            console.warn('[IxBreadcrumbItem] The "breadcrumbKey" prop is required for breadcrumb items to function properly.', this.hostElement);
+        }
     }
     render() {
+        if (this.invisible) {
+            return h(Host, { class: 'invisible', "aria-hidden": true });
+        }
+        const fallbackAriaLabel = this.label ?? this.hostElement.textContent?.trim();
+        const ariaAttributes = {
+            ...this.inheritAriaAttributes,
+            'aria-label': this.inheritAriaAttributes['aria-label'] ?? fallbackAriaLabel,
+            ...(this.isCurrentPage ? { 'aria-current': 'page' } : {}),
+        };
         const props = {
             variant: this.subtle ? 'subtle-primary' : 'tertiary',
             iconOnly: false,
@@ -62,17 +93,17 @@ export class BreadcrumbItem {
             extraClasses: {
                 'dropdown-trigger': this.isDropdownTrigger,
             },
-            ariaAttributes: Object.assign(Object.assign({}, this.a11y), { 'aria-label': this.ariaLabelButton }),
+            ariaAttributes,
             href: this.href,
             target: this.target,
             rel: this.rel,
         };
-        if (this.invisible) {
-            return h(Host, { class: 'invisible' });
-        }
         return (h(Host, { class: {
                 'hide-chevron': this.hideChevron,
-            }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, !this.hideChevron && (h("ix-icon", { name: iconChevronRightSmall, size: "16", class: 'chevron' }))) }), this.label, h("slot", null)))));
+            }, onClick: () => this.itemClick.emit({
+                breadcrumbKey: this.breadcrumbKey,
+                label: this.label ?? this.hostElement.textContent?.trim() ?? '',
+            }) }, h(BaseButton, { ...props, afterContent: h(Fragment, null, !this.hideChevron && (h("ix-icon", { name: iconChevronRightSmall, size: "16", class: 'chevron' }))) }, this.label, h("slot", null))));
     }
     static get is() { return "ix-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }
@@ -88,28 +119,6 @@ export class BreadcrumbItem {
     }
     static get properties() {
         return {
-            "ariaLabelButton": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "3.2.0"
-                        }],
-                    "text": "ARIA label for the button\nWill be set as aria-label for the nested HTML button element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "aria-label-button"
-            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -200,6 +209,28 @@ export class BreadcrumbItem {
                 "attribute": "target",
                 "defaultValue": "'_self'"
             },
+            "breadcrumbKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Will be used as the key for the breadcrumb item, which will be emitted in the itemClick event when the breadcrumb item is clicked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "breadcrumb-key"
+            },
             "rel": {
                 "type": "string",
                 "mutable": false,
@@ -313,14 +344,32 @@ export class BreadcrumbItem {
                 "reflect": false,
                 "attribute": "is-dropdown-trigger",
                 "defaultValue": "false"
+            },
+            "isCurrentPage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-current-page",
+                "defaultValue": "false"
             }
         };
     }
-    static get states() {
-        return {
-            "a11y": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "itemClick",
@@ -336,11 +385,24 @@ export class BreadcrumbItem {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "BreadcrumbClick",
+                    "resolved": "{ breadcrumbKey: string; label?: string | undefined; }",
+                    "references": {
+                        "BreadcrumbClick": {
+                            "location": "import",
+                            "path": "../breadcrumb/breadcrumb.types",
+                            "id": "src/components/breadcrumb/breadcrumb.types.ts::BreadcrumbClick",
+                            "referenceLocation": "BreadcrumbClick"
+                        }
+                    }
                 }
             }];
     }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "breadcrumbKey",
+                "methodName": "validateProps"
+            }];
+    }
 }

package/dist/collection/components/button/base-button.js

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h } from "@stencil/core";
+import { a11yBoolean } from "../utils/a11y";
 export const getButtonClasses = (variant, iconOnly = false, iconOval = false, selected, disabled) => {
     return {
         btn: true,
@@ -46,14 +47,17 @@ const isIconDecorative = (ariaAttributes, children) => {
     return hasTextContent || hasAriaLabel;
 };
 export const BaseButton = (props, children) => {
-    var _a, _b, _c;
-    const extraClasses = (_a = props.extraClasses) !== null && _a !== void 0 ? _a : {};
-    const ariaAttributes = (_b = props.ariaAttributes) !== null && _b !== void 0 ? _b : {};
-    if (!ariaAttributes['aria-disabled'] && props.disabled) {
-        ariaAttributes['aria-disabled'] = 'true';
-    }
+    const extraClasses = props.extraClasses ?? {};
+    const ariaAttributes = props.ariaAttributes ?? {};
     const iconIsDecorative = isIconDecorative(ariaAttributes, children);
-    const commonAttributes = Object.assign(Object.assign({}, ariaAttributes), { tabindex: props.disabled ? -1 : ((_c = props.tabIndex) !== null && _c !== void 0 ? _c : 0), class: Object.assign(Object.assign({}, getButtonClasses(props.variant, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading)), extraClasses) });
+    const commonAttributes = {
+        ...ariaAttributes,
+        tabindex: props.disabled ? -1 : (props.tabIndex ?? 0),
+        class: {
+            ...getButtonClasses(props.variant, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading),
+            ...extraClasses,
+        },
+    };
     const buttonContent = [
         props.loading ? (h("ix-spinner", { size: getSpinnerSize(props), hideTrack: true })) : null,
         props.icon && !props.loading ? (h("ix-icon", { class: "icon", name: props.icon, size: props.iconSize, color: props.iconColor, "aria-hidden": iconIsDecorative ? 'true' : undefined })) : null,
@@ -66,8 +70,8 @@ export const BaseButton = (props, children) => {
     ];
     // If href is provided, render as an anchor tag
     if (props.href) {
-        return (h("a", Object.assign({}, commonAttributes, { href: props.disabled ? undefined : props.href, target: props.target, role: "button", rel: props.rel, onClick: (e) => handleOnClick(e, props) }), buttonContent));
+        return (h("a", { ...commonAttributes, "aria-disabled": a11yBoolean(props.disabled), href: props.disabled ? undefined : props.href, target: props.target, role: "button", rel: props.rel, onClick: (e) => handleOnClick(e, props) }, buttonContent));
     }
     // Otherwise, render as a button
-    return (h("button", Object.assign({}, commonAttributes, { onClick: (e) => handleOnClick(e, props), type: props.type }), buttonContent));
+    return (h("button", { ...commonAttributes, "aria-disabled": a11yBoolean(props.disabled), onClick: (e) => handleOnClick(e, props), type: props.type }, buttonContent));
 };

package/dist/collection/components/button/button.css

@@ -166,6 +166,16 @@
   cursor: default;
 }
 
+:host(.ix-focused) .btn {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
+:host .btn:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
 :host {
   --ix-button-border-radius-left: var(--theme-btn--border-radius);
   --ix-button-border-radius-right: var(--theme-btn--border-radius);
@@ -267,13 +277,24 @@
   cursor: default;
 }
 
+:host(.ix-focused) .btn {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
+:host .btn:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+
 :host .btn-primary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-primary, :host .btn-primary.focus, :host .btn-primary:focus-visible {
+:host .btn-primary {
   background-color: var(--theme-btn-primary--background);
   color: var(--theme-btn-primary--color);
   --ix-button-color: var(--theme-btn-primary--color);
@@ -281,10 +302,6 @@
   border-color: var(--theme-btn-primary--border-color);
   border-style: solid;
 }
-:host .btn-primary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-primary.selected {
   background-color: var(--theme-btn-primary--background--pressed);
   color: var(--theme-btn-primary--color--pressed);
@@ -333,12 +350,13 @@
 }
 
 :host .btn-secondary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-secondary, :host .btn-secondary.focus, :host .btn-secondary:focus-visible {
+:host .btn-secondary {
   background-color: var(--theme-btn-secondary--background);
   color: var(--theme-btn-secondary--color);
   --ix-button-color: var(--theme-btn-secondary--color);
@@ -346,10 +364,6 @@
   border-color: var(--theme-btn-secondary--border-color);
   border-style: solid;
 }
-:host .btn-secondary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-secondary.selected {
   background-color: var(--theme-btn-secondary--background--pressed);
   color: var(--theme-btn-secondary--color--pressed);
@@ -398,12 +412,13 @@
 }
 
 :host .btn-tertiary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-tertiary, :host .btn-tertiary.focus, :host .btn-tertiary:focus-visible {
+:host .btn-tertiary {
   background-color: var(--theme-btn-tertiary--background);
   color: var(--theme-btn-tertiary--color);
   --ix-button-color: var(--theme-btn-tertiary--color);
@@ -411,10 +426,6 @@
   border-color: var(--theme-btn-tertiary--border-color);
   border-style: solid;
 }
-:host .btn-tertiary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-tertiary.selected {
   background-color: var(--theme-btn-tertiary--background--pressed);
   color: var(--theme-btn-tertiary--color--pressed);
@@ -463,12 +474,13 @@
 }
 
 :host .btn-subtle-primary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-subtle-primary, :host .btn-subtle-primary.focus, :host .btn-subtle-primary:focus-visible {
+:host .btn-subtle-primary {
   background-color: var(--theme-btn-subtle-primary--background);
   color: var(--theme-btn-subtle-primary--color);
   --ix-button-color: var(--theme-btn-subtle-primary--color);
@@ -476,10 +488,6 @@
   border-color: var(--theme-btn-subtle-primary--border-color);
   border-style: solid;
 }
-:host .btn-subtle-primary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-subtle-primary.selected {
   background-color: var(--theme-btn-subtle-primary--background--pressed);
   color: var(--theme-btn-subtle-primary--color--pressed);
@@ -528,12 +536,13 @@
 }
 
 :host .btn-subtle-secondary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-subtle-secondary, :host .btn-subtle-secondary.focus, :host .btn-subtle-secondary:focus-visible {
+:host .btn-subtle-secondary {
   background-color: var(--theme-btn-subtle-secondary--background);
   color: var(--theme-btn-subtle-secondary--color);
   --ix-button-color: var(--theme-btn-subtle-secondary--color);
@@ -541,10 +550,6 @@
   border-color: var(--theme-btn-subtle-secondary--border-color);
   border-style: solid;
 }
-:host .btn-subtle-secondary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-subtle-secondary.selected {
   background-color: var(--theme-btn-subtle-secondary--background--pressed);
   color: var(--theme-btn-subtle-secondary--color--pressed);
@@ -593,12 +598,13 @@
 }
 
 :host .btn-subtle-tertiary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-subtle-tertiary, :host .btn-subtle-tertiary.focus, :host .btn-subtle-tertiary:focus-visible {
+:host .btn-subtle-tertiary {
   background-color: var(--theme-btn-subtle-tertiary--background);
   color: var(--theme-btn-subtle-tertiary--color);
   --ix-button-color: var(--theme-btn-subtle-tertiary--color);
@@ -606,10 +612,6 @@
   border-color: var(--theme-btn-subtle-tertiary--border-color);
   border-style: solid;
 }
-:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-subtle-tertiary.selected {
   background-color: var(--theme-btn-subtle-tertiary--background--pressed);
   color: var(--theme-btn-subtle-tertiary--color--pressed);
@@ -658,12 +660,13 @@
 }
 
 :host .btn-danger-primary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-danger-primary, :host .btn-danger-primary.focus, :host .btn-danger-primary:focus-visible {
+:host .btn-danger-primary {
   background-color: var(--theme-btn-danger-primary--background);
   color: var(--theme-btn-danger-primary--color);
   --ix-button-color: var(--theme-btn-danger-primary--color);
@@ -671,10 +674,6 @@
   border-color: var(--theme-btn-danger-primary--border-color);
   border-style: solid;
 }
-:host .btn-danger-primary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-danger-primary.selected {
   background-color: var(--theme-btn-danger-primary--background--pressed);
   color: var(--theme-btn-danger-primary--color--pressed);
@@ -723,12 +722,13 @@
 }
 
 :host .btn-danger-secondary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-danger-secondary, :host .btn-danger-secondary.focus, :host .btn-danger-secondary:focus-visible {
+:host .btn-danger-secondary {
   background-color: var(--theme-btn-danger-secondary--background);
   color: var(--theme-btn-danger-secondary--color);
   --ix-button-color: var(--theme-btn-danger-secondary--color);
@@ -736,10 +736,6 @@
   border-color: var(--theme-btn-danger-secondary--border-color);
   border-style: solid;
 }
-:host .btn-danger-secondary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-danger-secondary.selected {
   background-color: var(--theme-btn-danger-secondary--background--pressed);
   color: var(--theme-btn-danger-secondary--color--pressed);
@@ -788,12 +784,13 @@
 }
 
 :host .btn-danger-tertiary {
+  text-align: start;
   border-top-left-radius: var(--ix-button-border-radius-left);
   border-bottom-left-radius: var(--ix-button-border-radius-left);
   border-top-right-radius: var(--ix-button-border-radius-right);
   border-bottom-right-radius: var(--ix-button-border-radius-right);
 }
-:host .btn-danger-tertiary, :host .btn-danger-tertiary.focus, :host .btn-danger-tertiary:focus-visible {
+:host .btn-danger-tertiary {
   background-color: var(--theme-btn-danger-tertiary--background);
   color: var(--theme-btn-danger-tertiary--color);
   --ix-button-color: var(--theme-btn-danger-tertiary--color);
@@ -801,10 +798,6 @@
   border-color: var(--theme-btn-danger-tertiary--border-color);
   border-style: solid;
 }
-:host .btn-danger-tertiary:not(.disabled):not(:disabled):focus-visible {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
 :host .btn-danger-tertiary.selected {
   background-color: var(--theme-btn-danger-tertiary--background--pressed);
   color: var(--theme-btn-danger-tertiary--color--pressed);