Merge branch 'main' into release

CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.143](https://github.com/telekom/scale/compare/v3.0.0-beta.142...v3.0.0-beta.143) (2023-11-03)
+
+
+### Bug Fixes
+
+* add border radius to focussed nav item ([#2175](https://github.com/telekom/scale/issues/2175)) ([2d9795c](https://github.com/telekom/scale/commit/2d9795cbeba4308cd464e15b3cbdaba3e65b0109))
+* blur behavior ([#2177](https://github.com/telekom/scale/issues/2177)) ([4f86750](https://github.com/telekom/scale/commit/4f86750c0e4ba2ad2dd5c8f9d983d12c907b90d8))
+* set aria-invalid true when invalid ([#2168](https://github.com/telekom/scale/issues/2168)) ([90b8bb9](https://github.com/telekom/scale/commit/90b8bb9a1579fa55f4dc0e84617a37401171fc45))
+* update parent checkbox state when new children are added dynamically ([#2145](https://github.com/telekom/scale/issues/2145)) ([5d8d71f](https://github.com/telekom/scale/commit/5d8d71fbc08db15c2d47784f579e2ec4077aafc0))
+
+
+### Features
+
+* add engines to package.json ([#2185](https://github.com/telekom/scale/issues/2185)) ([e42c984](https://github.com/telekom/scale/commit/e42c984ca509377a7a3c657245c8022b3d847cae))
+
+
+
+
+
 # [3.0.0-beta.142](https://github.com/telekom/scale/compare/v3.0.0-beta.141...v3.0.0-beta.142) (2023-10-09)
 
 

lerna.json

@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.142",
+  "version": "3.0.0-beta.143",
   "command": {
     "version": {
       "allowBranch": "main"

package.json

@@ -32,5 +32,10 @@
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
+  },
+  "engines": {
+    "node": "16.x",
+    "npm": "please-use-yarn",
+    "yarn": "1.x"
   }
 }

packages/components-angular/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.143](https://github.com/telekom/scale/compare/v3.0.0-beta.142...v3.0.0-beta.143) (2023-11-03)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
 # [3.0.0-beta.142](https://github.com/telekom/scale/compare/v3.0.0-beta.141...v3.0.0-beta.142) (2023-10-09)
 
 **Note:** Version bump only for package @telekom/scale-components-angular

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components-angular",
-  "version": "3.0.0-beta.142",
+  "version": "3.0.0-beta.143",
   "description": "Angular specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

packages/components-react/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.143](https://github.com/telekom/scale/compare/v3.0.0-beta.142...v3.0.0-beta.143) (2023-11-03)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
 # [3.0.0-beta.142](https://github.com/telekom/scale/compare/v3.0.0-beta.141...v3.0.0-beta.142) (2023-10-09)
 
 

packages/components-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-react",
   "sideEffects": false,
-  "version": "3.0.0-beta.142",
+  "version": "3.0.0-beta.143",
   "description": "React proxy for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

packages/components-vue/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.143](https://github.com/telekom/scale/compare/v3.0.0-beta.142...v3.0.0-beta.143) (2023-11-03)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
 # [3.0.0-beta.142](https://github.com/telekom/scale/compare/v3.0.0-beta.141...v3.0.0-beta.142) (2023-10-09)
 
 **Note:** Version bump only for package @telekom/scale-components-vue

packages/components-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-vue",
   "sideEffects": false,
-  "version": "3.0.0-beta.142",
+  "version": "3.0.0-beta.143",
   "description": "Vue specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

packages/components/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.143](https://github.com/telekom/scale/compare/v3.0.0-beta.142...v3.0.0-beta.143) (2023-11-03)
+
+
+### Bug Fixes
+
+* add border radius to focussed nav item ([#2175](https://github.com/telekom/scale/issues/2175)) ([2d9795c](https://github.com/telekom/scale/commit/2d9795cbeba4308cd464e15b3cbdaba3e65b0109))
+* blur behavior ([#2177](https://github.com/telekom/scale/issues/2177)) ([4f86750](https://github.com/telekom/scale/commit/4f86750c0e4ba2ad2dd5c8f9d983d12c907b90d8))
+* set aria-invalid true when invalid ([#2168](https://github.com/telekom/scale/issues/2168)) ([90b8bb9](https://github.com/telekom/scale/commit/90b8bb9a1579fa55f4dc0e84617a37401171fc45))
+* update parent checkbox state when new children are added dynamically ([#2145](https://github.com/telekom/scale/issues/2145)) ([5d8d71f](https://github.com/telekom/scale/commit/5d8d71fbc08db15c2d47784f579e2ec4077aafc0))
+
+
+
+
+
 # [3.0.0-beta.142](https://github.com/telekom/scale/compare/v3.0.0-beta.141...v3.0.0-beta.142) (2023-10-09)
 
 

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components",
-  "version": "3.0.0-beta.142",
+  "version": "3.0.0-beta.143",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
@@ -72,8 +72,8 @@
     "@duetds/date-picker": "1.2.0",
     "@floating-ui/dom": "^0.5.4",
     "@stencil/core": "^2.17.0",
-    "@telekom/design-tokens": "1.0.0-beta.8",
-    "@telekom/scale-design-tokens": "^3.0.0-beta.142",
+    "@telekom/design-tokens": "1.0.0-beta.10",
+    "@telekom/scale-design-tokens": "^3.0.0-beta.143",
     "classnames": "^2.2.6",
     "stencil-inline-svg": "^1.0.1"
   }

packages/components/src/components/checkbox-group/checkbox-group.spec.ts

@@ -5,7 +5,7 @@ describe('CheckboxGroup', () => {
   it('should match standard snapshot', async () => {
     const page = await newSpecPage({
       components: [CheckboxGroup],
-      html: ` <scale-checkbox-group>
+      html: `<scale-checkbox-group>
       <div slot="checkbox-header">
         <scale-checkbox
           input-id="header-checkbox"

packages/components/src/components/checkbox-group/checkbox-group.tsx

@@ -27,6 +27,8 @@ import statusNote from '../../utils/status-note';
   shadow: false,
 })
 export class CheckboxGroup {
+  observer: MutationObserver;
+
   @Element() host: HTMLElement;
 
   /** (optional) Input name */
@@ -95,6 +97,24 @@ export class CheckboxGroup {
     }
   }
 
+  componentDidLoad() {
+    this.updateParentCheckboxState();
+    const fieldset = this.host.querySelector('fieldset');
+    const mo = new MutationObserver(() => {
+      this.updateParentCheckboxState();
+    });
+    mo.observe(fieldset, {
+      childList: true,
+    });
+    this.observer = mo;
+  }
+
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
   getChildNodes() {
     return Array.from(
       this.host.querySelector('fieldset').querySelectorAll('scale-checkbox')
@@ -161,8 +181,4 @@ export class CheckboxGroup {
       </Host>
     );
   }
-
-  componentDidLoad() {
-    this.updateParentCheckboxState();
-  }
 }

packages/components/src/components/checkbox/checkbox.tsx

@@ -188,7 +188,7 @@ export class Checkbox {
           indeterminate={this.indeterminate}
           aria-label={this.ariaLabelCheckbox}
           aria-checked={this.indeterminate ? 'mixed' : false}
-          aria-invalid={this.status === 'error' || this.invalid}
+          aria-invalid={this.status === 'error' || this.invalid ? 'true' : null}
           aria-describedBy={helperText.id}
           disabled={this.disabled}
           required={this.required}

packages/components/src/components/dropdown-select/dropdown-select.tsx

@@ -218,7 +218,6 @@ export class DropdownSelect {
   @State() currentIndex: number = -1;
   @State() queryString: string = '';
   @State() queryTimeout: any = null;
-  @State() ignoreBlur: boolean = false;
   @State() hasFocus: boolean = false;
 
   private comboEl: HTMLElement;
@@ -233,9 +232,6 @@ export class DropdownSelect {
   }
 
   connectedCallback() {
-    if (this.hostElement.closest('scale-tab-panel')) {
-      this.ignoreBlur = true;
-    }
     statusNote({ source: this.hostElement, tag: 'beta' });
     this.currentIndex =
       readOptions(this.hostElement).findIndex(
@@ -375,10 +371,6 @@ export class DropdownSelect {
   };
 
   handleBlur = () => {
-    if (this.ignoreBlur) {
-      this.ignoreBlur = false;
-      return;
-    }
     this.setOpen(false);
     emitEvent(this, 'scaleBlur');
   };
@@ -454,7 +446,12 @@ export class DropdownSelect {
               </span>
             </div>
             <div part="listbox-pad" ref={(el) => (this.listboxPadEl = el)}>
-              <div part="listbox-scroll-container">
+              <div
+                part="listbox-scroll-container"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                }}
+              >
                 <div
                   ref={(el) => (this.listboxEl = el)}
                   part="listbox"
@@ -474,9 +471,6 @@ export class DropdownSelect {
                         onClick={(event) => {
                           this.handleOptionClick(event, index);
                         }}
-                        onMouseDown={() => {
-                          this.ignoreBlur = true;
-                        }}
                         {...(value === this.value
                           ? { 'aria-selected': 'true' }
                           : {})}

packages/components/src/components/dropdown/dropdown.tsx

@@ -240,7 +240,7 @@ export class Dropdown {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 

packages/components/src/components/input/__snapshots__/input.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`Input props should reflect attributes 1`] = `
       label
     </label>
     <div class="input__select-wrapper">
-      <select aria-describedby="helper-message-13" aria-invalid="" class="input__select" id="input-13" name="name" required="" value=""></select>
+      <select aria-describedby="helper-message-13" aria-invalid="true" class="input__select" id="input-13" name="name" required="" value=""></select>
     </div>
     <div aria-live="polite" aria-relevant="additions removals" class="input__meta" id="helper-message-13">
       <div class="input__helper-text">

packages/components/src/components/input/input.tsx

@@ -307,7 +307,7 @@ export class Input {
     const Tag = this.type === 'textarea' ? 'textarea' : 'input';
 
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 

packages/components/src/components/radio-button/radio-button.tsx

@@ -122,7 +122,7 @@ export class RadioButton {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 

packages/components/src/components/slider/slider.tsx

@@ -110,6 +110,8 @@ export class Slider {
   private activeRangeThumb: null | 'From' | 'To' = null;
   private readonly internalId = generateUniqueId();
 
+  private lastThumbZIndex: number = 3;
+
   constructor() {
     this.onDragging = this.onDragging.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
@@ -174,7 +176,7 @@ export class Slider {
     }
     this.setActiveRangeThumbFromEvent(event);
     this.onDragStart();
-    this.addGlobalListeners();
+    this.addGlobalListeners(event);
   };
 
   onKeyDown = (event: KeyboardEvent) => {
@@ -312,7 +314,9 @@ export class Slider {
     return Math.min(Math.max(val, min), max);
   };
 
-  addGlobalListeners() {
+  addGlobalListeners(e) {
+    this.lastThumbZIndex = this.lastThumbZIndex + 1;
+    e.target.parentNode.style.zIndex = this.lastThumbZIndex.toString();
     window.addEventListener('mousemove', this.onDragging);
     window.addEventListener('mouseup', this.onDragEnd);
     window.addEventListener('touchmove', this.onDragging);

packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css

@@ -132,6 +132,7 @@
 }
 
 .scale-telekom-nav-item > :where(a, button):focus {
+  border-radius: var(--telekom-radius-extra-small);
   outline: var(--focus-outline);
 }
 

packages/components/src/components/text-field/text-field.tsx

@@ -229,7 +229,7 @@ export class TextField {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
     const ariaDetailedById = { 'aria-details': this.ariaDetailedId };

packages/components/src/components/textarea/__snapshots__/textarea.spec.ts.snap

@@ -19,7 +19,7 @@ exports[`Textarea should match snapshot -> helpertext 1`] = `
 <scale-textarea helper-text="helpertext" invalid="true">
   <div class="textarea textarea--status-error textarea--variant-informational">
     <div class="textarea__wrapper">
-      <label class="textarea__label" htmlfor="input-textarea-1"></label><textarea aria-describedby="helper-message-1" aria-invalid="" class="textarea__control" id="input-textarea-1" value=""></textarea>
+      <label class="textarea__label" htmlfor="input-textarea-1"></label><textarea aria-describedby="helper-message-1" aria-invalid="true" class="textarea__control" id="input-textarea-1" value=""></textarea>
     </div>
     <div aria-live="polite" aria-relevant="additions removals" class="textarea__meta" id="helper-message-1">
       <scale-helper-text helpertext="helpertext" variant="danger"></scale-helper-text>

packages/components/src/components/textarea/textarea.tsx

@@ -171,7 +171,7 @@ export class Textarea {
 
   render() {
     const ariaInvalidAttr =
-      this.status === 'error' || this.invalid ? { 'aria-invalid': true } : {};
+      this.status === 'error' || this.invalid ? { 'aria-invalid': 'true' } : {};
     const helperTextId = `helper-message-${this.internalId}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
     const readonlyAttr = this.readonly ? { readonly: 'readonly' } : {};

packages/components/stencil.config.ts

@@ -18,6 +18,7 @@ export const config: Config = {
       '!**/node_modules/**',
       '!**/*.{d,esm,iife,styles}.ts',
     ],
+    setupFilesAfterEnv: ['./test-setup.ts'],
   },
   namespace: 'scale-components',
   globalScript: 'src/global/scale.ts',

packages/components/test-setup.ts

@@ -0,0 +1,11 @@
+const mutationObserverMock = jest.fn(function MutationObserver(callback) {
+  this.observe = jest.fn();
+  this.disconnect = jest.fn();
+  // // Optionally add a trigger() method to manually trigger a change
+  this.trigger = (mockedMutationsList) => {
+    callback(mockedMutationsList, this);
+  };
+});
+
+// Mock the global MutationObserver object
+global.MutationObserver = mutationObserverMock as jest.Mock;