npm - @siemens/ix - Versions diffs - 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251204163058 - Mend

@siemens/ix 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251204163058

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1009) hide show

package/dist/collection/components/split-button/split-button.js CHANGED Viewed

@@ -8,6 +8,7 @@
  */
 import { h, Host, } from "@stencil/core";
 import { iconContextMenu } from "@siemens/ix-icons/icons";
+import { makeRef } from "../utils/make-ref";
 export class SplitButton {
     constructor() {
         /**
@@ -22,31 +23,42 @@ export class SplitButton {
          * Disabled
          */
         this.disabled = false;
+        /**
+         * Disables only the main button while keeping the dropdown trigger enabled
+         *
+         *  @since 4.1.0
+         */
+        this.disableButton = false;
+        /**
+         * Disables only the dropdown trigger while keeping the main button enabled
+         *
+         * @since 4.1.0
+         */
+        this.disableDropdownButton = false;
         /**
          * Placement of the dropdown
          */
         this.placement = 'bottom-start';
         this.toggle = false;
+        this.triggerElementRef = makeRef();
     }
-    linkTriggerRef() {
-        if (this.triggerElement && this.dropdownElement) {
-            this.dropdownElement.trigger = this.triggerElement;
-        }
+    get isDisabledButton() {
+        return this.disabled || this.disableButton;
     }
-    componentDidLoad() {
-        this.linkTriggerRef();
+    get isDisabledIcon() {
+        return this.disabled || this.disableDropdownButton;
     }
     render() {
         var _a;
         const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');
-        const buttonAttributes = {
+        const baseAttributes = {
             variant: this.variant,
-            disabled: this.disabled,
-            class: {
-                'left-button-border': !hasOutline,
-            },
         };
-        return (h(Host, { key: 'c0fec74005091e767fabcb3a3f19da5bdd95a43b' }, h("div", { key: '5ed4d1f6ecc27eacb58c101612b6f38d6487e903', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), h("ix-icon-button", Object.assign({ key: '0026fece6601ca9715b259bc2fd67f1c63993a93' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), h("ix-dropdown", { key: 'c6e1fc922c216672d8c9545721b421021408f74f', ref: (r) => (this.dropdownElement = r), closeBehavior: this.closeBehavior }, h("slot", { key: 'ae34c0441b00ef9f29ea8a53308698cda6678468' }))));
+        const buttonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledButton, class: {
+                'left-button-border': !hasOutline,
+            } });
+        const dropdownButtonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledIcon });
+        return (h(Host, { key: '18955e55bbab4f5899f27cf2b38892c60bece302' }, h("div", { key: '8cc32b2686c3e02ee1f2a43d4a5f310cd2930dad', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), h("ix-icon-button", Object.assign({ key: 'ae7a2875314967f3100d1abcef3528a9822b0503' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), h("ix-dropdown", { key: 'd81abc1f01f55f2bc85740898e7f59173e62e182', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent() }, h("slot", { key: '19c2623131a8ab3799e5a9bb75cc356bf500fffd' }))));
     }
     static get is() { return "ix-split-button"; }
     static get encapsulation() { return "shadow"; }
@@ -235,6 +247,52 @@ export class SplitButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "disableButton": {
+                "type": "boolean",
+                "attribute": "disable-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "4.1.0"
+                        }],
+                    "text": "Disables only the main button while keeping the dropdown trigger enabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableDropdownButton": {
+                "type": "boolean",
+                "attribute": "disable-dropdown-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "4.1.0"
+                        }],
+                    "text": "Disables only the dropdown trigger while keeping the main button enabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "placement": {
                 "type": "string",
                 "attribute": "placement",

package/dist/collection/components/split-button/split-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../src/components/split-button/split-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;~~AAS1D~~,MAAM,OAAO,WAAW;IALxB;QAQE;;WAEG;QACK,YAAO,GAAuB,SAAS,CAAC;QAEhD;;WAEG;QACK,kBAAa,GAAkB,MAAM,CAAC;QA+B9C;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB~~;;WAEG~~;QACK,~~cAAS~~,~~GAAqB~~,~~cAAc~~,CAAC;~~QAE5C~~,~~WAAM~~,GAAG,KAAK,CAAC;~~KAkEzB~~;~~IAxDS~~,~~cAAc;QACpB~~,~~IAAI~~,~~IAAI~~,CAAC,~~cAAc~~,~~IAAI~~,~~IAAI~~,CAAC,~~eAAe~~,~~EAAE~~,CAAC;~~YAChD~~,~~IAAI~~,~~CAAC~~,~~eAAe~~,CAAC,~~OAAO~~,~~GAAG~~,IAAI,CAAC,~~cAAc~~,CAAC;~~QACrD~~,CAAC;~~IACH,CAAC;~~IAED,~~gBAAgB~~;~~QACd~~,IAAI,CAAC,~~cAAc~~,~~EAAE~~,CAAC;~~IACxB~~,CAAC;IAED,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC1E,MAAM,~~gBAAgB~~,GAAG;~~YACvB~~,OAAO,EAAE,IAAI,CAAC,OAAO;~~YACrB~~,QAAQ,EAAE,IAAI,CAAC,~~QAAQ;YACvB~~,KAAK,EAAE;gBACL,oBAAoB,EAAE,CAAC,UAAU;aAClC;~~SACF~~,CAAC;~~QACF~~,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,UAAU,EAAE;gBACzD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,iCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,~~KAEvC~~,IAAI,CAAC,KAAK,CACD,CACb,CAAC,CAAC,CAAC,CACF,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,gBAC5B,IAAI,CAAC,eAAe,IAChB,CACnB;gBACD,uFACM,~~gBAAgB~~,~~IACpB~~,GAAG,EAAE,~~CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,~~IAAI,CAAC,~~cAAc~~,~~GAAG~~,~~CAAC,CAAC,EACrC,~~KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,eAAe,gBAC3B,IAAI,CAAC,wBAAwB,IACzB,CACd;YAEN,oEACE,~~GAAG~~,EAAE,~~CAAC~~,CAAC,~~EAAE~~,~~EAAE~~,~~CAAC~~,~~CAAC~~,IAAI,CAAC,~~eAAe~~,~~GAAG,~~CAAC,~~CAAC~~,~~EACtC,aAAa,~~EAAE~~,IAAI,CAAC,aAAa~~;~~gBAEjC~~,8DAAa,CACD,CACT,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\nimport { CloseBehavior } from '../dropdown/dropdown-controller';\nimport type { SplitButtonVariant } from './split-button.types';\n\n@Component({\n tag: 'ix-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n @Element() hostElement!: HTMLIxSplitButtonElement;\n\n /\n Color variant of button\n /\n @Prop() variant: SplitButtonVariant = 'primary';\n\n /\n Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n /\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /\n Button label\n /\n @Prop() label?: string;\n\n /\n ARIA label for the button (use if no label and icon button)\n \n @since 3.2.0\n /\n @Prop() ariaLabelButton?: string;\n\n /\n Button icon\n /\n @Prop() icon?: string;\n\n /\n Icon of the button on the right\n /\n @Prop() splitIcon?: string;\n\n /\n ARIA label for the split icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelSplitIconButton?: string;\n\n /\n Disabled\n /\n @Prop() disabled = false;\n\n /\n Placement of the dropdown\n /\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n @State() toggle = false;\n\n /\n Button clicked\n */\n @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n private ~~triggerElement?:~~ ~~HTMLElement;\n private~~ ~~dropdownElement?:~~ ~~HTMLIxDropdownElement~~;\n\n private ~~linkTriggerRef~~() {\n if (this.~~triggerElement~~ && this.~~dropdownElement) {\n this.dropdownElement.trigger = this.triggerElement~~;\n ~~}\n~~ }\n\n ~~componentDidLoad~~() {\n this.~~linkTriggerRef()~~;\n }\n\n render() {\n const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');\n const ~~buttonAttributes~~ = {\n variant: this.variant,\n disabled: this.~~disabled~~,\n class: {\n 'left-button-border': !hasOutline,\n },\n };\n return (\n <Host>\n <div class={{ 'btn-group': true, 'middle-gap': !hasOutline }}>\n {this.label ? (\n <ix-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n >\n {this.label}\n </ix-button>\n ) : (\n <ix-icon-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n ></ix-icon-button>\n )}\n <ix-icon-button\n {...~~buttonAttributes~~}\n ref={~~(r) => (~~this.~~triggerElement = r)~~}\n class={'anchor'}\n icon={this.splitIcon ?? iconContextMenu}\n aria-label={this.ariaLabelSplitIconButton}\n ></ix-icon-button>\n </div>\n\n <ix-dropdown\n ~~ref~~={~~(r) => (~~this.~~dropdownElement = r)~~}\n ~~closeBehavior~~={this.~~closeBehavior~~}\n >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../src/components/split-button/split-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,MAAM,OAAO,WAAW;IALxB;QAQE;;WAEG;QACK,YAAO,GAAuB,SAAS,CAAC;QAEhD;;WAEG;QACK,kBAAa,GAAkB,MAAM,CAAC;QA+B9C;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;;;WAIG;QACK,kBAAa,GAAG,KAAK,CAAC;QAE9B;;;;WAIG;QACK,0BAAqB,GAAG,KAAK,CAAC;QAEtC;;WAEG;QACK,cAAS,GAAqB,cAAc,CAAC;QAE5C,WAAM,GAAG,KAAK,CAAC;QAOP,sBAAiB,GAAG,OAAO,EAAe,CAAC;KAmE7D;IAjEC,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC;IAC7C,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,qBAAqB,CAAC;IACrD,CAAC;IAED,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC1E,MAAM,cAAc,GAAG;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;QAEF,MAAM,gBAAgB,mCACjB,cAAc,KACjB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,KAAK,EAAE;gBACL,oBAAoB,EAAE,CAAC,UAAU;aAClC,GACF,CAAC;QAEF,MAAM,wBAAwB,mCACzB,cAAc,KACjB,QAAQ,EAAE,IAAI,CAAC,cAAc,GAC9B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,UAAU,EAAE;gBACzD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,iCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,gBAC5B,IAAI,CAAC,eAAe,KAE/B,IAAI,CAAC,KAAK,CACD,CACb,CAAC,CAAC,CAAC,CACF,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,gBAC5B,IAAI,CAAC,eAAe,IAChB,CACnB;gBACD,uFACM,wBAAwB,IAC5B,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,eAAe,gBAC3B,IAAI,CAAC,wBAAwB,IACzB,CACd;YAEN,oEACE,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE;gBAEhD,8DAAa,CACD,CACT,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\nimport { CloseBehavior } from '../dropdown/dropdown-controller';\nimport type { SplitButtonVariant } from './split-button.types';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n @Element() hostElement!: HTMLIxSplitButtonElement;\n\n /\n Color variant of button\n /\n @Prop() variant: SplitButtonVariant = 'primary';\n\n /\n Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n /\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /\n Button label\n /\n @Prop() label?: string;\n\n /\n ARIA label for the button (use if no label and icon button)\n \n @since 3.2.0\n /\n @Prop() ariaLabelButton?: string;\n\n /\n Button icon\n /\n @Prop() icon?: string;\n\n /\n Icon of the button on the right\n /\n @Prop() splitIcon?: string;\n\n /\n ARIA label for the split icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelSplitIconButton?: string;\n\n /\n Disabled\n /\n @Prop() disabled = false;\n\n /\n Disables only the main button while keeping the dropdown trigger enabled\n \n @since 4.1.0\n /\n @Prop() disableButton = false;\n\n /\n Disables only the dropdown trigger while keeping the main button enabled\n \n @since 4.1.0\n /\n @Prop() disableDropdownButton = false;\n\n /\n Placement of the dropdown\n /\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n @State() toggle = false;\n\n /\n Button clicked\n */\n @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n private readonly triggerElementRef = makeRef<HTMLElement>();\n\n private get isDisabledButton() {\n return this.disabled \|\| this.disableButton;\n }\n\n private get isDisabledIcon() {\n return this.disabled \|\| this.disableDropdownButton;\n }\n\n render() {\n const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');\n const baseAttributes = {\n variant: this.variant,\n };\n\n const buttonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledButton,\n class: {\n 'left-button-border': !hasOutline,\n },\n };\n\n const dropdownButtonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledIcon,\n };\n\n return (\n <Host>\n <div class={{ 'btn-group': true, 'middle-gap': !hasOutline }}>\n {this.label ? (\n <ix-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n >\n {this.label}\n </ix-button>\n ) : (\n <ix-icon-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n ></ix-icon-button>\n )}\n <ix-icon-button\n {...dropdownButtonAttributes}\n ref={this.triggerElementRef}\n class={'anchor'}\n icon={this.splitIcon ?? iconContextMenu}\n aria-label={this.ariaLabelSplitIconButton}\n ></ix-icon-button>\n </div>\n\n <ix-dropdown\n closeBehavior={this.closeBehavior}\n trigger={this.triggerElementRef.waitForCurrent()}\n >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tab-item/tab-item.css CHANGED Viewed

@@ -167,7 +167,7 @@
   z-index: 1;
   height: 16px;
   width: auto;
-  background-color: var(--theme-pill-outline--background);
+  background-color: var(--theme-color-1);
   border: 1px solid var(--theme-tab-pill--border-color);
   border-radius: 100px;
   bottom: 6px;

package/dist/collection/components/tab-item/tab-item.js CHANGED Viewed

@@ -51,7 +51,7 @@ export class TabItem {
         };
     }
     render() {
-        return (h(Host, { key: '2eaa9ee3ba9488210877fa4ed43595e1f9d9a8dd', class: this.tabItemClasses({
+        return (h(Host, { key: 'f703b9ed1db79ae154acd43425ac44993a13e99e', class: this.tabItemClasses({
                 selected: this.selected,
                 disabled: this.disabled,
                 small: this.small,
@@ -68,12 +68,12 @@ export class TabItem {
                 if (clientEvent.defaultPrevented) {
                     event.stopPropagation();
                 }
-            } }, h("div", { key: 'a3592b79e11a50056834d1920aa666a6989f7be9', class: {
+            } }, h("div", { key: '5d9f5fa0c5a9c2f057ff8e3e960a5b15499ec84b', class: {
                 circle: this.rounded,
                 text: !this.rounded,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("slot", { key: '6bdd7252b0906f1d47257c6bc0fd4bff91a7eb3b' })), h("div", { key: '876c31b1ee2c454887434a99b65435d1511676e1', class: {
+            } }, h("slot", { key: 'd0c87e92e0ad1a4664024b7d79900e8bb36a6ba6' })), h("div", { key: '1812905c3f08a70565e1aea166fa372a07344a76', class: {
                 counter: true,
                 selected: this.selected,
                 hidden: !(this.rounded && this.counter !== undefined),

package/dist/collection/components/tabs/tabs.js CHANGED Viewed

@@ -240,13 +240,13 @@ export class Tabs {
         });
     }
     render() {
-        return (h(Host, { key: '4c58b26f100793ee93715ddf2d71cd85c7a77394' }, this.showArrowPrevious && (h("button", { key: '88b2aa246f44f6fca988e8cc95d5c69f973b5626', class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, h("ix-icon", { key: '0a6bdb7e2edafe47e7a2c3a09c860df3b8e8c73f', name: iconChevronLeftSmall }))), h("div", { key: 'd06c37c4aae268d43ada257185256163c54668bf', class: {
+        return (h(Host, { key: 'd7fad8d23dafced6cf713108107c54d02f372b6b' }, this.showArrowPrevious && (h("button", { key: 'dde7a217502a5a157e32bb34327398dba8968d34', class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, h("ix-icon", { key: '08c3d49892d6955a7877bac4968fac25fe8c9742', name: iconChevronLeftSmall }))), h("div", { key: 'deb8492643ab4b49cb7848c9229805d26b0a4c99', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
                 'shadow-left': this.showArrowPrevious,
                 'shadow-right': this.showArrowNext,
                 'shadow-both': this.showArrowNext && this.showArrowPrevious,
-            } }, h("div", { key: 'b2636001520d9d9c63173f35a45c3f38217f949f', class: "items-content" }, h("slot", { key: 'd29d939ea9c1053d79b7670c7c54d9e6ec483dce' }))), this.showArrowNext && (h("button", { key: '91b68bb75e979fdab0643a479300371e67a0174f', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, h("ix-icon", { key: '735a473ee7bd00e299530b09c166b111cd8f04cd', name: iconChevronRightSmall })))));
+            } }, h("div", { key: '8b888d4ac1c0e957155028d8508e0cb5862c5cb4', class: "items-content" }, h("slot", { key: 'fd39c749b7aaeaec5c65ee72b0c466dbf7d8fa7b' }))), this.showArrowNext && (h("button", { key: '028b079e241b9fc3af1cba531ae2c055f1c47d32', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, h("ix-icon", { key: '8047e16eadc4ec22f44d70004fe9a663f74c4e01', name: iconChevronRightSmall })))));
     }
     static get is() { return "ix-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tile/tile.js CHANGED Viewed

@@ -23,17 +23,17 @@ export class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'aa9ab71b723ec68685a2d0a37b53d9edcfe82cd6', class: {
+        return (h(Host, { key: 'f5c50da791dcbdfeb884d33071b6d557360c1a60', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: 'fdbc231e60e607c9a5c60d66138f87d563d3a1d1', class: {
+            } }, h("div", { key: '651e393dbd8f7f7cd55373c3bdadc195dfc88cbd', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: 'f881aa65ee46aa1f8ea7991d94e934fed4fe5e6a', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '3a7603fe58fd66c7309a9ec743839f6df1db88d3', class: "tile-subheader" }, h("slot", { key: '846def8a0c20dba9c4d929a10ffad9ad2da73128', name: "subheader" })), h("div", { key: '1a1c7830c296988a0928d76b2af53c14d999e2ac', class: "tile-content" }, h("slot", { key: '5450f27247704ac16db78f1c6507ea9319c367c4' })), h("div", { key: '0464f19054f1c1e15c06fdab283d72f17ab0b9cd', class: {
+            } }, h("slot", { key: '1b94a241077664e5bcb535321f816b3b3faa9fad', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: 'd2ce3123c9ffa767e07edf25248567ee9406fc95', class: "tile-subheader" }, h("slot", { key: '025ac544a3750fbfb145d1350e7091e969c2e369', name: "subheader" })), h("div", { key: '6ce8df1e1b426df28b42f490db11dc1d951715e6', class: "tile-content" }, h("slot", { key: '7bb66b49df63f613c3b7be8ff0da64bc16dde6b9' })), h("div", { key: '55f6e978190c3c8581310559a7a46ec6c4cc0e2f', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'ce04db8085fda4bb5faaa170895cad9c8f850555', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: 'd63334865e6a32a6bb082939b44f3bf0b041b93a', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     static get is() { return "ix-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/time-input/time-input.js CHANGED Viewed

@@ -20,8 +20,8 @@ import { iconClock } from "@siemens/ix-icons/icons";
 import { Host, h, } from "@stencil/core";
 import { DateTime } from "luxon";
 import { SlotEnd, SlotStart } from "../input/input.fc";
-import { addDisposableChangesAndVisibilityObservers, adjustPaddingForStartAndEnd, } from "../input/input.util";
-import { HookValidationLifecycle, createClassMutationObserver, } from "../utils/input";
+import { addDisposableChangesAndVisibilityObservers, adjustPaddingForStartAndEnd, handleSubmitOnEnterKeydown, } from "../input/input.util";
+import { HookValidationLifecycle, createClassMutationObserver, getValidationText, } from "../utils/input";
 import { makeRef } from "../utils/make-ref";
 import { closeDropdown as closeDropdownUtil, createValidityState, handleIconClick, openDropdown as openDropdownUtil, } from "../utils/input/picker-input.util";
 /**
@@ -96,12 +96,21 @@ export class TimeInput {
          */
         // eslint-disable-next-line @stencil-community/decorators-style
         this.i18nMillisecondColumnHeader = 'ms';
+        /**
+         * If false, pressing Enter will submit the form (if inside a form).
+         * Set to true to suppress submit on Enter.
+         */
+        this.suppressSubmitOnEnter = false;
         /**
          * Hides the header of the picker.
          *
          * @since 4.0.0
          */
         this.hideHeader = false;
+        /**
+         * Text alignment within the time input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
+         */
+        this.textAlignment = 'start';
         this.show = false;
         this.time = null;
         this.isInputInvalid = false;
@@ -120,6 +129,9 @@ export class TimeInput {
     watchValuePropHandler(newValue) {
         this.onInput(newValue);
     }
+    handleInputKeyDown(event) {
+        handleSubmitOnEnterKeydown(event, this.suppressSubmitOnEnter, this.formInternals.form);
+    }
     updateFormInternalValue(value) {
         this.formInternals.setFormValue(value);
         this.value = value;
@@ -204,6 +216,8 @@ export class TimeInput {
     renderInput() {
         return (h("div", { class: "input-wrapper" }, h(SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h("input", { autoComplete: "off", class: {
                 'is-invalid': this.isInputInvalid,
+            }, style: {
+                textAlign: this.textAlignment,
             }, disabled: this.disabled, readOnly: this.readonly, required: this.required, ref: this.inputElementRef, type: "text", value: this.value, placeholder: this.placeholder, name: this.name, onInput: (event) => {
                 const target = event.target;
                 this.onInput(target.value);
@@ -218,7 +232,7 @@ export class TimeInput {
             }, onBlur: () => {
                 this.ixBlur.emit();
                 this.touched = true;
-            } }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": "Toggle time picker", "aria-expanded": this.show }))));
+            }, onKeyDown: (event) => this.handleInputKeyDown(event) }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": "Toggle time picker", "aria-expanded": this.show }))));
     }
     hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
@@ -258,15 +272,13 @@ export class TimeInput {
     }
     render() {
         var _a;
-        const invalidText = this.isInputInvalid
-            ? this.i18nErrorTimeUnparsable
-            : this.invalidText;
-        return (h(Host, { key: '09ce97a9605c6b22a872712c038a2628e5b0b81a', class: {
+        const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorTimeUnparsable);
+        return (h(Host, { key: 'aff9b793fae69ba2eb713ae3b1bd2222b548fb25', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '7885db329aa8632cfaeb55d427ba4d142a8b6ec6', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: 'e1e55b1d1b48ba6b90e9181814c7d01e1fcd8bae', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            } }, h("ix-field-wrapper", { key: '5e927fa4c2eeb94dba26b1f4ad1879a6a80ed823', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: '0b48b3c8574b0aafe42db74c990f1d269037bd82', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
-            } }, h("ix-time-picker", { key: '7c3b0350de27af8fe8633478ce1100fd62f75976', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
+            } }, h("ix-time-picker", { key: 'b3b5536c702fc45c9fc5f323282149c2c2ccb542', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
                 this.onInput(event.detail);
                 this.show = false;
             } }))));
@@ -776,6 +788,26 @@ export class TimeInput {
                 "reflect": false,
                 "defaultValue": "'ms'"
             },
+            "suppressSubmitOnEnter": {
+                "type": "boolean",
+                "attribute": "suppress-submit-on-enter",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If false, pressing Enter will submit the form (if inside a form).\nSet to true to suppress submit on Enter."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "hideHeader": {
                 "type": "boolean",
                 "attribute": "hide-header",
@@ -798,6 +830,26 @@ export class TimeInput {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "textAlignment": {
+                "type": "string",
+                "attribute": "text-alignment",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text alignment within the time input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'start'"
             }
         };
     }

package/dist/collection/components/time-input/time-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-input.js","sourceRoot":"","sources":["../../../src/components/time-input/time-input.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2025 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { iconClock } from '@siemens/ix-icons/icons';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { SlotEnd, SlotStart } from '../input/input.fc';\nimport {\n DisposableChangesAndVisibilityObservers,\n addDisposableChangesAndVisibilityObservers,\n adjustPaddingForStartAndEnd,\n} from '../input/input.util';\nimport {\n ClassMutationObserver,\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n createClassMutationObserver,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { IxTimePickerCustomEvent } from '../../components';\nimport type { TimeInputValidityState } from './time-input.types';\nimport {\n closeDropdown as closeDropdownUtil,\n createValidityState,\n handleIconClick,\n openDropdown as openDropdownUtil,\n} from '../utils/input/picker-input.util';\n\n/\n @since 3.2.0\n * @form-ready\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n /\n@Component({\n tag: 'ix-time-input',\n styleUrl: 'time-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class TimeInput implements IxInputFieldComponent<string> {\n @Element() hostElement!: HTMLIxTimeInputElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n Name of the input element\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n Placeholder of the input element\n /\n @Prop({ reflect: true }) placeholder?: string;\n\n /\n Value of the input element\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @Watch('value') watchValuePropHandler(newValue: string) {\n this.onInput(newValue);\n }\n\n /\n Format of time string\n * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n /\n @Prop() format: string = 'TT';\n\n /\n Required attribute\n /\n @Prop() required?: boolean;\n\n /\n Helper text below the input field\n /\n @Prop() helperText?: string;\n\n /\n Label of the input field\n /\n @Prop() label?: string;\n\n /\n Error text below the input field\n /\n @Prop({ reflect: true }) invalidText?: string;\n\n /\n Readonly attribute\n /\n @Prop() readonly: boolean = false;\n\n /\n Disabled attribute\n /\n @Prop() disabled: boolean = false;\n\n /\n Info text below the input field\n /\n @Prop() infoText?: string;\n\n /\n Warning text below the input field\n /\n @Prop() warningText?: string;\n\n /\n Valid text below the input field\n /\n @Prop() validText?: string;\n\n /\n Show text as tooltip\n /\n @Prop() showTextAsTooltip?: boolean;\n\n /\n I18n string for the error message when the time is not parsable\n /\n @Prop({ attribute: 'i18n-error-time-unparsable' }) i18nErrorTimeUnparsable =\n 'Time is not valid';\n\n /\n Interval for hour selection\n /\n @Prop() hourInterval: number = 1;\n\n /\n Interval for minute selection\n /\n @Prop() minuteInterval: number = 1;\n\n /\n Interval for second selection\n /\n @Prop() secondInterval: number = 1;\n\n /\n Interval for millisecond selection\n /\n @Prop() millisecondInterval: number = 100;\n\n /\n Text of time-picker time select button\n /\n @Prop({ attribute: 'i18n-select-time' }) i18nSelectTime: string = 'Confirm';\n\n /\n Text for time-picker top label\n /\n @Prop({ attribute: 'i18n-time' }) i18nTime: string = 'Time';\n\n /\n Text for time-picker hour column header\n /\n @Prop({ attribute: 'i18n-hour-column-header' }) i18nHourColumnHeader: string =\n 'hr';\n\n /\n Text for time-picker minute column header\n /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Prop({ attribute: 'i18n-minute-column-header' })\n i18nMinuteColumnHeader: string = 'min';\n\n /\n Text for time-picker second column header\n /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Prop({ attribute: 'i18n-second-column-header' })\n i18nSecondColumnHeader: string = 'sec';\n\n /\n Text for time-picker millisecond column header\n /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Prop({ attribute: 'i18n-millisecond-column-header' })\n i18nMillisecondColumnHeader: string = 'ms';\n\n /\n Hides the header of the picker.\n \n @since 4.0.0\n /\n @Prop() hideHeader: boolean = false;\n\n /\n Input change event.\n /\n @Event({ cancelable: false }) valueChange!: EventEmitter<string>;\n\n /\n Validation state change event.\n /\n @Event() validityStateChange!: EventEmitter<TimeInputValidityState>;\n\n /* @internal /\n @Event() ixFocus!: EventEmitter<void>;\n\n /* @internal /\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() show = false;\n @State() time: string \| null = null;\n @State() isInputInvalid = false;\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() focus = false;\n\n private readonly slotStartRef = makeRef<HTMLDivElement>();\n private readonly slotEndRef = makeRef<HTMLDivElement>();\n\n private readonly timePickerRef = makeRef<HTMLIxTimePickerElement>();\n\n private readonly inputElementRef = makeRef<HTMLInputElement>();\n private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();\n private classObserver?: ClassMutationObserver;\n private invalidReason?: string;\n private touched = false;\n\n private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n updateFormInternalValue(value: string): void {\n this.formInternals.setFormValue(value);\n this.value = value;\n }\n\n connectedCallback(): void {\n this.classObserver = createClassMutationObserver(this.hostElement, () =>\n this.checkClassList()\n );\n\n this.disposableChangesAndVisibilityObservers =\n addDisposableChangesAndVisibilityObservers(\n this.hostElement,\n this.updatePaddings.bind(this)\n );\n }\n\n componentWillLoad(): void {\n if (!this.value) {\n const now = DateTime.now();\n if (now.isValid) {\n this.value = now.toFormat(this.format);\n }\n }\n\n this.onInput(this.value);\n if (this.isInputInvalid) {\n this.time = null;\n } else {\n this.watchValue();\n }\n\n this.checkClassList();\n this.updateFormInternalValue(this.value);\n }\n\n private updatePaddings() {\n adjustPaddingForStartAndEnd(\n this.slotStartRef.current,\n this.slotEndRef.current,\n this.inputElementRef.current\n );\n }\n\n disconnectedCallback(): void {\n this.classObserver?.destroy();\n this.disposableChangesAndVisibilityObservers?.();\n }\n\n @Watch('value')\n watchValue() {\n this.time = this.value;\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /* @internal /\n @Method()\n getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return Promise.resolve(this.formInternals.form);\n }\n\n async onInput(value: string) {\n this.value = value;\n if (!value) {\n this.isInputInvalid = false;\n this.updateFormInternalValue(value);\n this.valueChange.emit(value);\n return;\n }\n\n if (!this.format) {\n return;\n }\n\n const time = DateTime.fromFormat(value, this.format);\n if (time.isValid) {\n this.isInputInvalid = false;\n } else {\n this.isInputInvalid = true;\n this.invalidReason = time.invalidReason;\n }\n\n this.updateFormInternalValue(value);\n this.valueChange.emit(value);\n }\n\n onTimeIconClick(event: Event) {\n handleIconClick(\n event,\n this.show,\n () => this.openDropdown(),\n this.inputElementRef\n );\n }\n\n async openDropdown() {\n // keep picker in sync with input\n this.time = this.value;\n\n return openDropdownUtil(this.dropdownElementRef);\n }\n\n async closeDropdown() {\n return closeDropdownUtil(this.dropdownElementRef);\n }\n\n private checkClassList() {\n this.isInvalid = this.hostElement.classList.contains('ix-invalid');\n }\n\n private renderInput() {\n return (\n <div class=\"input-wrapper\">\n <SlotStart\n slotStartRef={this.slotStartRef}\n onSlotChange={() => this.updatePaddings()}\n ></SlotStart>\n <input\n autoComplete=\"off\"\n class={{\n 'is-invalid': this.isInputInvalid,\n }}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n ref={this.inputElementRef}\n type=\"text\"\n value={this.value}\n placeholder={this.placeholder}\n name={this.name}\n onInput={(event) => {\n const target = event.target as HTMLInputElement;\n this.onInput(target.value);\n }}\n onClick={(event) => {\n if (this.show) {\n event.stopPropagation();\n event.preventDefault();\n }\n }}\n onFocus={async () => {\n this.openDropdown();\n this.ixFocus.emit();\n }}\n onBlur={() => {\n this.ixBlur.emit();\n this.touched = true;\n }}\n ></input>\n <SlotEnd\n slotEndRef={this.slotEndRef}\n onSlotChange={() => this.updatePaddings()}\n >\n <ix-icon-button\n data-testid=\"open-time-picker\"\n class={{ 'time-icon-hidden': this.disabled \|\| this.readonly }}\n variant=\"subtle-tertiary\"\n icon={iconClock}\n onClick={(event) => this.onTimeIconClick(event)}\n aria-label=\"Toggle time picker\"\n aria-expanded={this.show}\n ></ix-icon-button>\n </SlotEnd>\n </div>\n );\n }\n\n @HookValidationLifecycle()\n hookValidationLifecycle({\n isInfo,\n isInvalid,\n isInvalidByRequired,\n isValid,\n isWarning,\n }: ValidationResults) {\n this.isInvalid = isInvalid \|\| isInvalidByRequired \|\| this.isInputInvalid;\n this.isInfo = isInfo;\n this.isValid = isValid;\n this.isWarning = isWarning;\n }\n\n @Watch('isInputInvalid')\n async onInputValidationChange() {\n const state = await this.getValidityState();\n this.validityStateChange.emit({\n patternMismatch: state.patternMismatch,\n invalidReason: this.invalidReason,\n });\n }\n\n /* @internal /\n @Method()\n getValidityState(): Promise<ValidityState> {\n return Promise.resolve(\n createValidityState(this.isInputInvalid, !!this.required, this.value)\n );\n }\n\n /\n Get the native input element\n /\n @Method()\n getNativeInputElement(): Promise<HTMLInputElement> {\n return this.inputElementRef.waitForCurrent();\n }\n\n /\n Focuses the input field\n /\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n /\n Returns whether the text field has been touched.\n * @internal\n */\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n render() {\n const invalidText = this.isInputInvalid\n ? this.i18nErrorTimeUnparsable\n : this.invalidText;\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n >\n <ix-field-wrapper\n label={this.label}\n helperText={this.helperText}\n isInvalid={this.isInvalid}\n invalidText={invalidText}\n infoText={this.infoText}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n warningText={this.warningText}\n isValid={this.isValid}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n required={this.required}\n controlRef={this.inputElementRef}\n >\n {this.renderInput()}\n </ix-field-wrapper>\n <ix-dropdown\n data-testid=\"time-dropdown\"\n trigger={this.inputElementRef.waitForCurrent()}\n ref={this.dropdownElementRef}\n closeBehavior=\"outside\"\n suppressOverflowBehavior={true}\n show={this.show}\n onShowChanged={(event) => {\n this.show = event.detail;\n }}\n >\n <ix-time-picker\n ref={this.timePickerRef}\n format={this.format}\n time={this.time ?? ''}\n hourInterval={this.hourInterval}\n minuteInterval={this.minuteInterval}\n secondInterval={this.secondInterval}\n millisecondInterval={this.millisecondInterval}\n embedded\n hideHeader={this.hideHeader}\n i18nConfirmTime={this.i18nSelectTime}\n i18nHeader={this.i18nTime}\n i18nHourColumnHeader={this.i18nHourColumnHeader}\n i18nSecondColumnHeader={this.i18nSecondColumnHeader}\n i18nMinuteColumnHeader={this.i18nMinuteColumnHeader}\n i18nMillisecondColumnHeader={this.i18nMillisecondColumnHeader}\n onTimeSelect={(event: IxTimePickerCustomEvent<string>) => {\n this.onInput(event.detail);\n\n this.show = false;\n }}\n ></ix-time-picker>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"time-input.js","sourceRoot":"","sources":["../../../src/components/time-input/time-input.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2025 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { iconClock } from '@siemens/ix-icons/icons';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { SlotEnd, SlotStart } from '../input/input.fc';\nimport {\n DisposableChangesAndVisibilityObservers,\n addDisposableChangesAndVisibilityObservers,\n adjustPaddingForStartAndEnd,\n handleSubmitOnEnterKeydown,\n} from '../input/input.util';\nimport {\n ClassMutationObserver,\n HookValidationLifecycle,\n IxInputFieldComponent,\n ValidationResults,\n createClassMutationObserver,\n getValidationText,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { IxTimePickerCustomEvent } from '../../components';\nimport type { TimeInputValidityState } from './time-input.types';\nimport {\n closeDropdown as closeDropdownUtil,\n createValidityState,\n handleIconClick,\n openDropdown as openDropdownUtil,\n} from '../utils/input/picker-input.util';\n\n/\n @since 3.2.0\n * @form-ready\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n /\n@Component({\n tag: 'ix-time-input',\n styleUrl: 'time-input.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class TimeInput implements IxInputFieldComponent<string> {\n @Element() hostElement!: HTMLIxTimeInputElement;\n @AttachInternals() formInternals!: ElementInternals;\n\n /\n Name of the input element\n /\n @Prop({ reflect: true }) name?: string;\n\n /\n Placeholder of the input element\n /\n @Prop({ reflect: true }) placeholder?: string;\n\n /\n Value of the input element\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n @Watch('value') watchValuePropHandler(newValue: string) {\n this.onInput(newValue);\n }\n\n /\n Format of time string\n * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n /\n @Prop() format: string = 'TT';\n\n /\n Required attribute\n /\n @Prop() required?: boolean;\n\n /\n Helper text below the input field\n /\n @Prop() helperText?: string;\n\n /\n Label of the input field\n /\n @Prop() label?: string;\n\n /\n Error text below the input field\n /\n @Prop({ reflect: true }) invalidText?: string;\n\n /\n Readonly attribute\n /\n @Prop() readonly: boolean = false;\n\n /\n Disabled attribute\n /\n @Prop() disabled: boolean = false;\n\n /\n Info text below the input field\n /\n @Prop() infoText?: string;\n\n /\n Warning text below the input field\n /\n @Prop() warningText?: string;\n\n /\n Valid text below the input field\n /\n @Prop() validText?: string;\n\n /\n Show text as tooltip\n /\n @Prop() showTextAsTooltip?: boolean;\n\n /\n I18n string for the error message when the time is not parsable\n /\n @Prop({ attribute: 'i18n-error-time-unparsable' }) i18nErrorTimeUnparsable =\n 'Time is not valid';\n\n /\n Interval for hour selection\n /\n @Prop() hourInterval: number = 1;\n\n /\n Interval for minute selection\n /\n @Prop() minuteInterval: number = 1;\n\n /\n Interval for second selection\n /\n @Prop() secondInterval: number = 1;\n\n /\n Interval for millisecond selection\n /\n @Prop() millisecondInterval: number = 100;\n\n /\n Text of time-picker time select button\n /\n @Prop({ attribute: 'i18n-select-time' }) i18nSelectTime: string = 'Confirm';\n\n /\n Text for time-picker top label\n /\n @Prop({ attribute: 'i18n-time' }) i18nTime: string = 'Time';\n\n /\n Text for time-picker hour column header\n /\n @Prop({ attribute: 'i18n-hour-column-header' }) i18nHourColumnHeader: string =\n 'hr';\n\n /\n Text for time-picker minute column header\n /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Prop({ attribute: 'i18n-minute-column-header' })\n i18nMinuteColumnHeader: string = 'min';\n\n /\n Text for time-picker second column header\n /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Prop({ attribute: 'i18n-second-column-header' })\n i18nSecondColumnHeader: string = 'sec';\n\n /\n Text for time-picker millisecond column header\n /\n // eslint-disable-next-line @stencil-community/decorators-style\n @Prop({ attribute: 'i18n-millisecond-column-header' })\n i18nMillisecondColumnHeader: string = 'ms';\n\n /\n If false, pressing Enter will submit the form (if inside a form).\n * Set to true to suppress submit on Enter.\n /\n @Prop({ reflect: true }) suppressSubmitOnEnter: boolean = false;\n\n /\n Hides the header of the picker.\n \n @since 4.0.0\n /\n @Prop() hideHeader: boolean = false;\n\n /\n Text alignment within the time input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.\n /\n @Prop() textAlignment: 'start' \| 'end' = 'start';\n\n /\n Input change event.\n /\n @Event({ cancelable: false }) valueChange!: EventEmitter<string>;\n\n /\n Validation state change event.\n /\n @Event() validityStateChange!: EventEmitter<TimeInputValidityState>;\n\n /* @internal /\n @Event() ixFocus!: EventEmitter<void>;\n\n /* @internal /\n @Event() ixBlur!: EventEmitter<void>;\n\n @State() show = false;\n @State() time: string \| null = null;\n @State() isInputInvalid = false;\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n @State() focus = false;\n\n private readonly slotStartRef = makeRef<HTMLDivElement>();\n private readonly slotEndRef = makeRef<HTMLDivElement>();\n\n private readonly timePickerRef = makeRef<HTMLIxTimePickerElement>();\n\n private readonly inputElementRef = makeRef<HTMLInputElement>();\n private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();\n private classObserver?: ClassMutationObserver;\n private invalidReason?: string;\n private touched = false;\n\n private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n private handleInputKeyDown(event: KeyboardEvent) {\n handleSubmitOnEnterKeydown(\n event,\n this.suppressSubmitOnEnter,\n this.formInternals.form\n );\n }\n\n updateFormInternalValue(value: string): void {\n this.formInternals.setFormValue(value);\n this.value = value;\n }\n\n connectedCallback(): void {\n this.classObserver = createClassMutationObserver(this.hostElement, () =>\n this.checkClassList()\n );\n\n this.disposableChangesAndVisibilityObservers =\n addDisposableChangesAndVisibilityObservers(\n this.hostElement,\n this.updatePaddings.bind(this)\n );\n }\n\n componentWillLoad(): void {\n if (!this.value) {\n const now = DateTime.now();\n if (now.isValid) {\n this.value = now.toFormat(this.format);\n }\n }\n\n this.onInput(this.value);\n if (this.isInputInvalid) {\n this.time = null;\n } else {\n this.watchValue();\n }\n\n this.checkClassList();\n this.updateFormInternalValue(this.value);\n }\n\n private updatePaddings() {\n adjustPaddingForStartAndEnd(\n this.slotStartRef.current,\n this.slotEndRef.current,\n this.inputElementRef.current\n );\n }\n\n disconnectedCallback(): void {\n this.classObserver?.destroy();\n this.disposableChangesAndVisibilityObservers?.();\n }\n\n @Watch('value')\n watchValue() {\n this.time = this.value;\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(!!this.value);\n }\n\n /* @internal /\n @Method()\n getAssociatedFormElement(): Promise<HTMLFormElement \| null> {\n return Promise.resolve(this.formInternals.form);\n }\n\n async onInput(value: string) {\n this.value = value;\n if (!value) {\n this.isInputInvalid = false;\n this.updateFormInternalValue(value);\n this.valueChange.emit(value);\n return;\n }\n\n if (!this.format) {\n return;\n }\n\n const time = DateTime.fromFormat(value, this.format);\n if (time.isValid) {\n this.isInputInvalid = false;\n } else {\n this.isInputInvalid = true;\n this.invalidReason = time.invalidReason;\n }\n\n this.updateFormInternalValue(value);\n this.valueChange.emit(value);\n }\n\n onTimeIconClick(event: Event) {\n handleIconClick(\n event,\n this.show,\n () => this.openDropdown(),\n this.inputElementRef\n );\n }\n\n async openDropdown() {\n // keep picker in sync with input\n this.time = this.value;\n\n return openDropdownUtil(this.dropdownElementRef);\n }\n\n async closeDropdown() {\n return closeDropdownUtil(this.dropdownElementRef);\n }\n\n private checkClassList() {\n this.isInvalid = this.hostElement.classList.contains('ix-invalid');\n }\n\n private renderInput() {\n return (\n <div class=\"input-wrapper\">\n <SlotStart\n slotStartRef={this.slotStartRef}\n onSlotChange={() => this.updatePaddings()}\n ></SlotStart>\n <input\n autoComplete=\"off\"\n class={{\n 'is-invalid': this.isInputInvalid,\n }}\n style={{\n textAlign: this.textAlignment,\n }}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n ref={this.inputElementRef}\n type=\"text\"\n value={this.value}\n placeholder={this.placeholder}\n name={this.name}\n onInput={(event) => {\n const target = event.target as HTMLInputElement;\n this.onInput(target.value);\n }}\n onClick={(event) => {\n if (this.show) {\n event.stopPropagation();\n event.preventDefault();\n }\n }}\n onFocus={async () => {\n this.openDropdown();\n this.ixFocus.emit();\n }}\n onBlur={() => {\n this.ixBlur.emit();\n this.touched = true;\n }}\n onKeyDown={(event) => this.handleInputKeyDown(event)}\n ></input>\n <SlotEnd\n slotEndRef={this.slotEndRef}\n onSlotChange={() => this.updatePaddings()}\n >\n <ix-icon-button\n data-testid=\"open-time-picker\"\n class={{ 'time-icon-hidden': this.disabled \|\| this.readonly }}\n variant=\"subtle-tertiary\"\n icon={iconClock}\n onClick={(event) => this.onTimeIconClick(event)}\n aria-label=\"Toggle time picker\"\n aria-expanded={this.show}\n ></ix-icon-button>\n </SlotEnd>\n </div>\n );\n }\n\n @HookValidationLifecycle()\n hookValidationLifecycle({\n isInfo,\n isInvalid,\n isInvalidByRequired,\n isValid,\n isWarning,\n }: ValidationResults) {\n this.isInvalid = isInvalid \|\| isInvalidByRequired \|\| this.isInputInvalid;\n this.isInfo = isInfo;\n this.isValid = isValid;\n this.isWarning = isWarning;\n }\n\n @Watch('isInputInvalid')\n async onInputValidationChange() {\n const state = await this.getValidityState();\n this.validityStateChange.emit({\n patternMismatch: state.patternMismatch,\n invalidReason: this.invalidReason,\n });\n }\n\n /* @internal /\n @Method()\n getValidityState(): Promise<ValidityState> {\n return Promise.resolve(\n createValidityState(this.isInputInvalid, !!this.required, this.value)\n );\n }\n\n /\n Get the native input element\n /\n @Method()\n getNativeInputElement(): Promise<HTMLInputElement> {\n return this.inputElementRef.waitForCurrent();\n }\n\n /\n Focuses the input field\n /\n @Method()\n async focusInput(): Promise<void> {\n return (await this.getNativeInputElement()).focus();\n }\n\n /\n Returns whether the text field has been touched.\n * @internal\n */\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n render() {\n const invalidText = getValidationText(\n this.isInputInvalid,\n this.invalidText,\n this.i18nErrorTimeUnparsable\n );\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n readonly: this.readonly,\n }}\n >\n <ix-field-wrapper\n label={this.label}\n helperText={this.helperText}\n isInvalid={this.isInvalid}\n invalidText={invalidText}\n infoText={this.infoText}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n warningText={this.warningText}\n isValid={this.isValid}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n required={this.required}\n controlRef={this.inputElementRef}\n >\n {this.renderInput()}\n </ix-field-wrapper>\n <ix-dropdown\n data-testid=\"time-dropdown\"\n trigger={this.inputElementRef.waitForCurrent()}\n ref={this.dropdownElementRef}\n closeBehavior=\"outside\"\n suppressOverflowBehavior={true}\n show={this.show}\n onShowChanged={(event) => {\n this.show = event.detail;\n }}\n >\n <ix-time-picker\n ref={this.timePickerRef}\n format={this.format}\n time={this.time ?? ''}\n hourInterval={this.hourInterval}\n minuteInterval={this.minuteInterval}\n secondInterval={this.secondInterval}\n millisecondInterval={this.millisecondInterval}\n embedded\n hideHeader={this.hideHeader}\n i18nConfirmTime={this.i18nSelectTime}\n i18nHeader={this.i18nTime}\n i18nHourColumnHeader={this.i18nHourColumnHeader}\n i18nSecondColumnHeader={this.i18nSecondColumnHeader}\n i18nMinuteColumnHeader={this.i18nMinuteColumnHeader}\n i18nMillisecondColumnHeader={this.i18nMillisecondColumnHeader}\n onTimeSelect={(event: IxTimePickerCustomEvent<string>) => {\n this.onInput(event.detail);\n\n this.show = false;\n }}\n ></ix-time-picker>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/time-picker/time-picker.css CHANGED Viewed

@@ -694,7 +694,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
+  height: 2rem;
 }
 :host .clock {
   display: flex;
@@ -711,7 +711,6 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
-  margin-top: 1px;
 }
 :host .clock .flex .columns .column-header {
   height: 2.5rem;
@@ -723,26 +722,29 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
   overflow: hidden;
   white-space: nowrap;
 }
-:host .clock .flex .column-seperator {
+:host .clock .flex .column-separator {
   display: flex;
   align-items: center;
-  margin: 0 0.125rem;
+  justify-content: center;
   min-height: 100%;
-  margin-top: 3.25rem;
+  margin-top: 3rem;
+  width: 0.5rem;
 }
 :host .clock .element-list {
   list-style-type: none;
   overflow: auto;
-  max-height: 15.375rem;
-  padding-top: 0.125rem;
+  padding: 0.0625rem;
+  margin: -0.0625rem;
+  max-height: 15.75rem;
 }
 :host .clock .element-list button {
   all: unset;
 }
 :host .clock .element-list .element-container {
-  width: 2.375rem;
-  height: 2.375rem;
-  margin: 0.125rem;
+  box-sizing: border-box;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-bottom: 0.125rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -752,21 +754,24 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
 :host .clock .element-list .element-container:hover {
   background-color: var(--theme-datepicker-day--background--hover);
 }
-:host .clock .element-list .element-container:focus {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: 1px;
+:host .clock .element-list .element-container:focus-visible {
+  box-shadow: 0 0 0 1px var(--theme-color-focus-bdr);
 }
 :host .clock .element-list .selected {
   background-color: var(--theme-datepicker-day--background--selected);
   color: var(--theme-datepicker-day--color--selected);
+  font-weight: var(--theme-font-weight-bold);
 }
 :host .clock .element-list .selected:hover {
   background-color: var(--theme-datepicker-day--background--selected-hover);
 }
+:host .clock .element-list .selected:focus-visible {
+  border: 0.0625rem solid var(--theme-color-inv-contrast-text);
+}
 :host .clock .element-list .element-list-padding {
   width: 2.5rem;
-  height: 12.563rem;
-  min-height: 12.563rem;
+  height: 13.125rem;
+  min-height: 13.125rem;
 }
 :host .clock div.element-list {
   scrollbar-width: none;
@@ -791,46 +796,9 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active {
 :host .footer--compact .confirm-button {
   margin-left: initial;
 }
-:host .footer .time-ref-buttons--datetime-picker-appearance {
-  margin-left: auto;
-}
-:host .footer .time-ref-buttons button {
-  all: unset;
-  width: 2.625rem;
-  height: 1.875rem;
-  text-align: center;
-  border: 1px solid var(--theme-color-primary);
-  color: var(--theme-color-primary);
-  background-color: var(--theme-color-secondary);
-  font-weight: 700;
-}
-:host .footer .time-ref-buttons button:focus {
-  outline: 1px solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-btn--focus--outline-offset);
-}
-:host .footer .time-ref-buttons button:hover {
-  cursor: pointer;
-  background-color: var(--theme-color-secondary-hover);
-  border-color: var(--theme-btn-primary--background--hover);
-}
-:host .footer .time-ref-buttons button.selected {
-  color: var(--theme-color-secondary);
-  background-color: var(--theme-btn-primary--background);
-}
-:host .footer .time-ref-buttons button.selected:hover {
-  background-color: var(--theme-btn-primary--background--hover);
-  border-color: var(--theme-btn-primary--background--hover);
-}
 :host .default-space {
   margin-left: 1rem;
 }
 :host .text-align {
   text-align: center;
-}
-:host .hidden {
-  display: none;
-}
-:host .time-reference {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
 }