diff --git a/.changeset/strong-bears-leave.md b/.changeset/strong-bears-leave.md new file mode 100644 index 0000000000..5863769099 --- /dev/null +++ b/.changeset/strong-bears-leave.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Fixed issue where the focus ring was not appearing on inactive chips. diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss index fa0c61e98f..09e99654f6 100644 --- a/packages/styles/src/components/chip.scss +++ b/packages/styles/src/components/chip.scss @@ -48,6 +48,11 @@ .chip-filter { display: inline-block; + @include utilities.focus-style() { + border-radius: chip.$chip-border-radius; + width: fit-content; + } + &-label { @include chip-mx.chip-styles(); cursor: pointer; @@ -101,12 +106,6 @@ text-decoration-color: initial; } } - - @include utilities.focus-style('+ .chip-filter-label') { - > .chip-text { - text-decoration-color: transparent; - } - } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1a919a5ee9..a4131e50cb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10952,7 +10952,7 @@ snapshots: '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.3.2(@types/node@20.12.7)(less@4.2.0)(sass@1.77.6)(terser@5.29.2)) ansi-colors: 4.1.3 autoprefixer: 10.4.19(postcss@8.4.38) - babel-loader: 9.1.3(@babel/core@7.24.7)(webpack@5.92.1) + babel-loader: 9.1.3(@babel/core@7.24.7)(webpack@5.92.1(esbuild@0.21.5)) browserslist: 4.23.2 copy-webpack-plugin: 12.0.2(webpack@5.92.1(esbuild@0.21.5)) critters: 0.0.24 @@ -11045,7 +11045,7 @@ snapshots: '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.3.2(@types/node@20.14.14)(less@4.2.0)(sass@1.77.6)(terser@5.29.2)) ansi-colors: 4.1.3 autoprefixer: 10.4.19(postcss@8.4.38) - babel-loader: 9.1.3(@babel/core@7.24.7)(webpack@5.92.1) + babel-loader: 9.1.3(@babel/core@7.24.7)(webpack@5.92.1(esbuild@0.21.5)) browserslist: 4.23.2 copy-webpack-plugin: 12.0.2(webpack@5.92.1(esbuild@0.21.5)) critters: 0.0.24 @@ -15872,7 +15872,7 @@ snapshots: transitivePeerDependencies: - supports-color - babel-loader@9.1.3(@babel/core@7.24.7)(webpack@5.92.1): + babel-loader@9.1.3(@babel/core@7.24.7)(webpack@5.92.1(esbuild@0.21.5)): dependencies: '@babel/core': 7.24.7 find-cache-dir: 4.0.0