Merge branch 'main' into release

telekom · Jul 21, 2023 · ff41187 · ff41187
2 parents f9a1dee + e75bda0
commit ff41187
Show file tree

Hide file tree

Showing 158 changed files with 1,529 additions and 1,130 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,24 @@
 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.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21)
+
+
+### Bug Fixes
+
+* a11y feedback ([#2049](https://github.com/telekom/scale/issues/2049)) ([3db8a8f](https://github.com/telekom/scale/commit/3db8a8fad8f80a7e94831394fb5c37225f0e9562))
+* avoid additional render ([#2057](https://github.com/telekom/scale/issues/2057)) ([537f932](https://github.com/telekom/scale/commit/537f932215578f866115a2599bb0c31d425bb04f))
+
+
+### Features
+
+* adding handler for 100+ percentage ([#2043](https://github.com/telekom/scale/issues/2043)) ([989b89c](https://github.com/telekom/scale/commit/989b89cad9921e4a9f9f0ab9682ffe35b31e4c72))
+* use new spacing tokens ([#2059](https://github.com/telekom/scale/issues/2059)) ([e432efd](https://github.com/telekom/scale/commit/e432efd6754d52bf0ed9a3fe9e28be11f954766a))
+
+
+
+
+
 # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27)
 
 

diff --git a/lerna.json b/lerna.json
@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.136",
+  "version": "3.0.0-beta.137",
   "command": {
     "version": {
       "allowBranch": "main"

diff --git a/packages/components-angular/CHANGELOG.md b/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.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
 # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27)
 
 **Note:** Version bump only for package @telekom/scale-components-angular

diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components-angular",
-  "version": "3.0.0-beta.136",
+  "version": "3.0.0-beta.137",
   "description": "Angular specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components-react/CHANGELOG.md b/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.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
 # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27)
 
 

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-react",
   "sideEffects": false,
-  "version": "3.0.0-beta.136",
+  "version": "3.0.0-beta.137",
   "description": "React proxy for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components-vue/CHANGELOG.md b/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.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
 # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27)
 
 **Note:** Version bump only for package @telekom/scale-components-vue

diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-vue",
   "sideEffects": false,
-  "version": "3.0.0-beta.136",
+  "version": "3.0.0-beta.137",
   "description": "Vue specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -3,6 +3,23 @@
 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.137](https://github.com/telekom/scale/compare/v3.0.0-beta.136...v3.0.0-beta.137) (2023-07-21)
+
+
+### Bug Fixes
+
+* a11y feedback ([#2049](https://github.com/telekom/scale/issues/2049)) ([3db8a8f](https://github.com/telekom/scale/commit/3db8a8fad8f80a7e94831394fb5c37225f0e9562))
+
+
+### Features
+
+* adding handler for 100+ percentage ([#2043](https://github.com/telekom/scale/issues/2043)) ([989b89c](https://github.com/telekom/scale/commit/989b89cad9921e4a9f9f0ab9682ffe35b31e4c72))
+* use new spacing tokens ([#2059](https://github.com/telekom/scale/issues/2059)) ([e432efd](https://github.com/telekom/scale/commit/e432efd6754d52bf0ed9a3fe9e28be11f954766a))
+
+
+
+
+
 # [3.0.0-beta.136](https://github.com/telekom/scale/compare/v3.0.0-beta.135...v3.0.0-beta.136) (2023-06-27)
 
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components",
-  "version": "3.0.0-beta.136",
+  "version": "3.0.0-beta.137",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
@@ -71,8 +71,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.7",
-    "@telekom/scale-design-tokens": "^3.0.0-beta.136",
+    "@telekom/design-tokens": "1.0.0-beta.8",
+    "@telekom/scale-design-tokens": "^3.0.0-beta.137",
     "classnames": "^2.2.6",
     "stencil-inline-svg": "^1.0.1"
   }

diff --git a/packages/components/src/components/breadcrumb/breadcrumb.css b/packages/components/src/components/breadcrumb/breadcrumb.css
@@ -10,14 +10,14 @@
  */
 
 :host {
-  --spacing-left: calc(-1 * var(--telekom-spacing-unit-x2));
+  --spacing-left: calc(-1 * var(--telekom-spacing-composition-space-04));
 
   --font-size-list-item: var(--telekom-typography-font-size-caption);
 
   --color-separator: var(--telekom-color-text-and-icon-additional);
 
-  --spacing-y-item: var(--telekom-spacing-unit-x1);
-  --spacing-x-item: var(--telekom-spacing-unit-x2);
+  --spacing-y-item: var(--telekom-spacing-composition-space-03);
+  --spacing-x-item: var(--telekom-spacing-composition-space-04);
 
   --color-link: var(--telekom-color-text-and-icon-additional);
   --radius-link: var(--telekom-radius-standard);

diff --git a/packages/components/src/components/button/button.css b/packages/components/src/components/button/button.css
@@ -11,29 +11,29 @@
 
 :host {
   --width: auto;
-  --spacing-x-right: var(--telekom-spacing-unit-x5);
-  --spacing-x-left: var(--telekom-spacing-unit-x5);
-  --spacing-x-icon-only: var(--telekom-spacing-unit-x3);
-  --min-height: var(--telekom-spacing-unit-x11);
-  --min-width: var(--telekom-spacing-unit-x11);
+  --spacing-x-right: var(--telekom-spacing-composition-space-07);
+  --spacing-x-left: var(--telekom-spacing-composition-space-07);
+  --spacing-x-icon-only: var(--telekom-spacing-composition-space-05);
+  --min-height: var(--telekom-spacing-composition-space-13);
+  --min-width: var(--telekom-spacing-composition-space-13);
   --radius: var(--telekom-radius-standard);
   --transition: all var(--telekom-motion-duration-transition)
     var(--telekom-motion-easing-standard);
   --color-focus: var(--telekom-color-functional-focus-standard);
   --font-weight: var(--telekom-typography-font-weight-bold);
   --font-size: var(--telekom-typography-font-size-body);
   --line-height: var(--telekom-typography-line-spacing-tight);
-  --spacing-icon-x: var(--telekom-spacing-unit-x2);
+  --spacing-icon-x: var(--telekom-spacing-composition-space-04);
   --vertical-align: middle;
 
   /* size: small */
   --font-size-small: var(--telekom-typography-font-size-caption);
   --line-height-small: 1.125rem;
-  --min-height-small: var(--telekom-spacing-unit-x8);
-  --spacing-x-right-small: var(--telekom-spacing-unit-x4);
-  --spacing-x-left-small: var(--telekom-spacing-unit-x4);
-  --spacing-x-icon-only-small: var(--telekom-spacing-unit-x0);
-  --spacing-icon-x-small: var(--telekom-spacing-unit-x1);
+  --min-height-small: var(--telekom-spacing-composition-space-10);
+  --spacing-x-right-small: var(--telekom-spacing-composition-space-06);
+  --spacing-x-left-small: var(--telekom-spacing-composition-space-06);
+  --spacing-x-icon-only-small: var(--telekom-spacing-composition-space-00);
+  --spacing-icon-x-small: var(--telekom-spacing-composition-space-03);
 
   /* variant: primary */
   --radius-primary: var(--radius);
@@ -46,7 +46,7 @@
 
   /* variant: secondary */
   --radius-secondary: var(--radius);
-  --border-width-secondary: var(--telekom-spacing-unit-x025);
+  --border-width-secondary: var(--telekom-spacing-composition-space-01);
   --background-secondary: transparent;
   --color-secondary: var(--telekom-color-text-and-icon-standard);
   --color-secondary-hover: var(--telekom-color-text-and-icon-standard);
@@ -74,8 +74,8 @@
 
   /* variant: ghost */
   --radius-ghost: var(--radius);
-  --border-width-ghost: var(--telekom-spacing-unit-x025);
-  --spacing-x-ghost: var(--telekom-spacing-unit-x2);
+  --border-width-ghost: var(--telekom-spacing-composition-space-01);
+  --spacing-x-ghost: var(--telekom-spacing-composition-space-04);
   --color-ghost: var(--telekom-color-text-and-icon-primary-standard);
   --color-ghost-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-ghost-active: var(--telekom-color-text-and-icon-primary-pressed);
@@ -121,8 +121,8 @@
 }
 
 .button:not(.button--disabled):focus {
-  outline: var(--telekom-spacing-unit-x05) solid var(--color-focus);
-  outline-offset: var(--telekom-spacing-unit-x025);
+  outline: var(--telekom-line-weight-highlight) solid var(--color-focus);
+  outline-offset: var(--telekom-spacing-composition-space-01);
 }
 
 .button.button--icon-before:not(.button--icon-only) ::slotted(*) {
@@ -155,7 +155,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  border: var(--telekom-spacing-unit-x025) solid transparent;
+  border: var(--telekom-spacing-composition-space-01) solid transparent;
   height: 100%;
   content: '';
   display: block;

diff --git a/packages/components/src/components/callout/callout.css b/packages/components/src/components/callout/callout.css
@@ -2,7 +2,7 @@
   --position: absolute;
   --background: var(--telekom-color-ui-extra-strong);
   --color: var(--telekom-color-text-and-icon-inverted-standard);
-  --spacing: var(--telekom-spacing-unit-x8);
+  --spacing: var(--telekom-spacing-composition-space-10);
   --min-width: 6rem;
   --aspect-ratio: 1 / 1;
   --rotation: 0deg;
@@ -32,6 +32,12 @@
   font: var(--font-medium);
 }
 
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  [part='base'] {
+    border: 1px solid;
+  }
+}
+
 /* Color variants */
 
 :host([variant='primary']) {

diff --git a/packages/components/src/components/card/card.css b/packages/components/src/components/card/card.css
@@ -20,7 +20,7 @@
     var(--telekom-color-functional-focus-standard);
   --box-shadow-active: var(--telekom-shadow-raised-pressed);
 
-  --spacing-body: var(--telekom-spacing-unit-x6);
+  --spacing-body: var(--telekom-spacing-composition-space-08);
 
   --spacing-body-slotted: 0;
   --spacing-body-slotted-interactive: 0;

diff --git a/packages/components/src/components/chart-stack-card/chart-stack-card.css b/packages/components/src/components/chart-stack-card/chart-stack-card.css
@@ -17,22 +17,22 @@
   --scl-chart-stack-card-color: var(--telekom-color-additional-blue-600);
 }
 .chart-stack-card .header {
-  height: var(--telekom-spacing-unit-x6);
+  height: var(--telekom-spacing-composition-space-08);
   font-size: var(--telekom-typography-font-size-headline-3);
   font-weight: var(--telekom-typography-font-weight-extra-bold);
   line-height: var(--telekom-typography-line-spacing-tight);
-  margin-bottom: var(--telekom-spacing-unit-x6);
+  margin-bottom: var(--telekom-spacing-composition-space-08);
 }
 
 .chart-stack-card .bar {
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--telekom-spacing-unit-x4);
+  margin-bottom: var(--telekom-spacing-composition-space-06);
 }
 
 .chart-stack-card .bar__item {
   background-color: var(--scl-chart-stack-card-color);
-  height: var(--telekom-spacing-unit-x8);
+  height: var(--telekom-spacing-composition-space-10);
   flex: 1;
 }
 
@@ -49,10 +49,10 @@
 .chart-stack-card .legend {
   display: flex;
   flex-direction: column;
-  height: calc(var(--telekom-spacing-unit-x4) * 10);
+  height: calc(var(--telekom-spacing-composition-space-06) * 10);
 }
 .chart-stack-card .spacer {
-  padding: 0 var(--telekom-spacing-unit-x2);
+  padding: 0 var(--telekom-spacing-composition-space-04);
 }
 .chart-stack-card .legend .legend__row__item {
   display: flex;
@@ -63,7 +63,7 @@
   justify-content: space-between;
 }
 .chart-stack-card .legend .legend__row:last-child {
-  padding-bottom: var(--telekom-spacing-unit-x8);
+  padding-bottom: var(--telekom-spacing-composition-space-10);
 }
 
 .chart-stack-card .legend .legend__item {
@@ -72,11 +72,11 @@
   background-color: var(--scl-chart-stack-card-color);
   border-radius: 100%;
   align-self: center;
-  margin-right: var(--telekom-spacing-unit-x1);
+  margin-right: var(--telekom-spacing-composition-space-03);
 }
 
 .chart-stack-card .legend .legend__label {
   font-weight: var(--type-weight-bold);
-  font-size: var(--telekom-spacing-unit-x4);
+  font-size: var(--telekom-spacing-composition-space-06);
   line-height: 200%;
 }
diff --git a/packages/components/src/components/checkbox-group/checkbox-group.css b/packages/components/src/components/checkbox-group/checkbox-group.css
@@ -1,13 +1,13 @@
 :host,
 .checkbox-group {
   /* checkbox-group container */
-  --spacing-left-container: var(--telekom-spacing-unit-x8);
+  --spacing-left-container: var(--telekom-spacing-composition-space-10);
 
   /* checkbox-group checkbox */
-  --spacing-left-checkbox: var(--telekom-spacing-unit-x2);
+  --spacing-left-checkbox: var(--telekom-spacing-composition-space-04);
 
   /* slotted item */
-  --spacing-top-slotted-item: var(--telekom-spacing-unit-x3);
+  --spacing-top-slotted-item: var(--telekom-spacing-composition-space-05);
 }
 
 .checkbox-group {