chore(lumx-core): remove focus-visible polyfill dependency

gcornut · gcornut · commit 626a27f64fda · 2025-09-11T11:48:18.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+-   `@lumx/core`: remove `focus-visible` polyfill dependency
+
 ### Added
 
 -   `@lumx/react/utils`: add `PortalProvider` to customize portal render of tooltip, popover, dialog and lightbox
diff --git a/packages/lumx-angularjs/package.json b/packages/lumx-angularjs/package.json
@@ -8,7 +8,6 @@
     "dependencies": {
         "@lumx/core": "^3.16.0",
         "@lumx/icons": "^3.16.0",
-        "focus-visible": "^5.0.2",
         "lodash": "4.17.21",
         "popper.js": "^1.16.0"
     },
diff --git a/packages/lumx-core/package.json b/packages/lumx-core/package.json
@@ -7,7 +7,6 @@
     },
     "dependencies": {
         "classnames": "^2.3.2",
-        "focus-visible": "^5.0.2",
         "lodash": "4.17.21",
         "sass-mq": "^6.0.0"
     },
diff --git a/packages/lumx-core/src/scss/components/button/_mixins.scss b/packages/lumx-core/src/scss/components/button/_mixins.scss
@@ -184,6 +184,7 @@
         }
     }
 
+    &:focus-visible,
     &[data-focus-visible-added],
     &[class*="--is-focused"] {
         @include lumx-state("state-focus", $emphasis, $color, $theme);
@@ -212,6 +213,7 @@
         @include lumx-state-as-selected("state-active", $theme);
     }
 
+    &:focus-visible,
     &[data-focus-visible-added],
     &[class*="--is-focused"] {
         @include lumx-state-as-selected("state-focus", $theme);
diff --git a/packages/lumx-core/src/scss/components/checkbox/_index.scss b/packages/lumx-core/src/scss/components/checkbox/_index.scss
@@ -96,6 +96,7 @@
                 &:active + #{$self}__input-placeholder #{$self}__input-background {
                     @include lumx-state("state-active", "emphasis-low", $base-color);
                 }
+                &:focus-visible + #{$self}__input-placeholder,
                 &[data-focus-visible-added] + #{$self}__input-placeholder {
                     @include lumx-state("state-focus", "emphasis-low", $base-color);
                 }
@@ -108,6 +109,7 @@
                 &:active + #{$self}__input-placeholder #{$self}__input-indicator {
                     @include lumx-state("state-active", "emphasis-high", "primary", $theme);
                 }
+                &:focus-visible + #{$self}__input-placeholder,
                 &[data-focus-visible-added] + #{$self}__input-placeholder {
                     @include lumx-state("state-focus", "emphasis-high", "primary", $theme);
                 }
diff --git a/packages/lumx-core/src/scss/components/chip/_index.scss b/packages/lumx-core/src/scss/components/chip/_index.scss
@@ -90,6 +90,7 @@
     }
 
     .lumx-chip--color-#{$key} {
+        &:focus-visible,
         &[data-focus-visible-added],
         &.lumx-chip--is-highlighted {
             @include lumx-state("state-focus", "emphasis-medium", $key);
@@ -124,6 +125,7 @@
                 );
             }
 
+            &:focus-visible,
             &[data-focus-visible-added] {
                 @include lumx-state-as-selected(
                     "state-focus",
@@ -160,6 +162,7 @@
                 );
             }
 
+            &:focus-visible,
             &[data-focus-visible-added] {
                 @include lumx-state-as-selected(
                     "state-focus",
diff --git a/packages/lumx-core/src/scss/components/link/_mixins.scss b/packages/lumx-core/src/scss/components/link/_mixins.scss
@@ -19,12 +19,13 @@
 
     &:hover,
     &[data-lumx-hover],
+    &:focus-visible,
     &[data-focus-visible-added] {
         text-decoration: underline;
     }
 
-    &[data-focus-visible-added],
-    &:focus-visible {
+    &:focus-visible,
+    &[data-focus-visible-added] {
         outline: 1px auto currentColor;
         outline-offset: 2px;
     }
diff --git a/packages/lumx-core/src/scss/components/list/_mixins.scss b/packages/lumx-core/src/scss/components/list/_mixins.scss
@@ -29,13 +29,15 @@
 
     cursor: pointer;
 
+    &:focus-visible,
     &[data-focus-visible-added] {
         outline: 2px solid lumx-color-variant("dark", "N");
         outline-offset: -2px;
     }
 
     &:hover,
     &[data-lumx-hover],
+    &:focus-visible,
     &[data-focus-visible-added] {
         @include lumx-state("state-hover", "emphasis-low", "dark");
     }
@@ -61,6 +63,7 @@
 
     &:hover,
     &[data-lumx-hover],
+    &:focus-visible,
     &[data-focus-visible-added] {
         @include lumx-state-as-selected("state-hover", "theme-light", $component);
     }
diff --git a/packages/lumx-core/src/scss/components/mosaic/_index.scss b/packages/lumx-core/src/scss/components/mosaic/_index.scss
@@ -49,7 +49,7 @@
         display: flex;
         flex-direction: column;
 
-        &:has([data-focus-visible-added]) {
+        &:has([data-focus-visible-added], :focus-visible) {
             z-index: 1;
         }
 
diff --git a/packages/lumx-core/src/scss/components/navigation/_index.scss b/packages/lumx-core/src/scss/components/navigation/_index.scss
@@ -71,6 +71,7 @@
             );
 
             // Focus state
+            &:focus-visible,
             &[data-focus-visible-added] {
                 @include lumx-state-as-selected(
                     "state-focus",
diff --git a/packages/lumx-core/src/scss/components/progress-tracker/_index.scss b/packages/lumx-core/src/scss/components/progress-tracker/_index.scss
@@ -108,6 +108,7 @@
 }
 
 // Focus state
+.lumx-progress-tracker-step:focus-visible,
 .lumx-progress-tracker-step[data-focus-visible-added] {
     @include lumx-state("state-focus", "emphasis-low", "dark");
 }
@@ -120,6 +121,7 @@
     outline: none;
 
     // Focus state
+    &:focus-visible,
     &[data-focus-visible-added] {
         @include lumx-state("state-focus", "emphasis-low", "dark");
     }
diff --git a/packages/lumx-core/src/scss/components/radio-button/_index.scss b/packages/lumx-core/src/scss/components/radio-button/_index.scss
@@ -86,12 +86,14 @@
                 &:active + #{$self}__input-placeholder #{$self}__input-background {
                     @include lumx-state("state-active", "emphasis-low", $base-color);
                 }
+                &:focus-visible + #{$self}__input-placeholder,
                 &[data-focus-visible-added] + #{$self}__input-placeholder {
                     @include lumx-state("state-focus", "emphasis-low", $base-color);
                 }
             }
 
             &#{$self}--is-checked #{$self}__input-native {
+                &:focus-visible + #{$self}__input-placeholder,
                 &[data-focus-visible-added] + #{$self}__input-placeholder {
                     @include lumx-state("state-focus", "emphasis-high", "primary", $theme);
                 }
diff --git a/packages/lumx-core/src/scss/components/slider/_index.scss b/packages/lumx-core/src/scss/components/slider/_index.scss
@@ -188,6 +188,7 @@
 }
 
 // Focus state
+.lumx-slider__handle:focus-visible,
 .lumx-slider__handle[data-focus-visible-added] {
     .lumx-slider--theme-light & {
         @include lumx-state(
diff --git a/packages/lumx-core/src/scss/components/slideshow/_index.scss b/packages/lumx-core/src/scss/components/slideshow/_index.scss
@@ -135,6 +135,7 @@
             border-color: lumx-color-variant("dark", "L2");
             border-width: 2px;
 
+            &:focus-visible,
             &[data-focus-visible-added] {
                 @include lumx-state("state-focus", "emphasis-low", "dark");
             }
@@ -150,6 +151,7 @@
                 border-radius: $lumx-border-radius;
                 border-width: 0;
 
+                &:focus-visible,
                 &[data-focus-visible-added] {
                     @include lumx-state("state-focus", "emphasis-low", "primary");
                 }
@@ -159,6 +161,7 @@
         #{$self}--theme-dark & {
             border-color: lumx-color-variant("light", "L2");
 
+            &:focus-visible,
             &[data-focus-visible-added] {
                 @include lumx-state("state-focus", "emphasis-low", "light");
             }
@@ -172,6 +175,7 @@
                 width: $item-size*2;
                 border-radius: $lumx-border-radius;
 
+                &:focus-visible,
                 &[data-focus-visible-added] {
                     @include lumx-state("state-focus", "emphasis-low", "light");
                 }
diff --git a/packages/lumx-core/src/scss/components/switch/_index.scss b/packages/lumx-core/src/scss/components/switch/_index.scss
@@ -103,6 +103,7 @@
                         @include lumx-state("state-active", "emphasis-low", $base-color);
                     }
 
+                    &:focus-visible + #{$self}__input-placeholder,
                     &[data-focus-visible-added] + #{$self}__input-placeholder {
                         @include lumx-state("state-focus", "emphasis-low", $base-color);
                     }
@@ -127,6 +128,7 @@
                         @include lumx-state("state-active", "emphasis-high", "primary", $theme);
                     }
 
+                    &:focus-visible + #{$self}__input-placeholder,
                     &[data-focus-visible-added] + #{$self}__input-placeholder {
                         @include lumx-state("state-focus", "emphasis-high", "primary", $theme);
                     }
diff --git a/packages/lumx-core/src/scss/components/table/_index.scss b/packages/lumx-core/src/scss/components/table/_index.scss
@@ -108,6 +108,7 @@
         }
 
         #{$self}__cell--is-sortable #{$self}__cell-wrapper:hover &,
+        #{$self}__cell--is-sortable #{$self}__cell-wrapper:focus-visible &,
         #{$self}__cell--is-sortable #{$self}__cell-wrapper[data-focus-visible-added] & {
             text-decoration: underline;
         }
diff --git a/packages/lumx-core/src/scss/components/table/_mixins.scss b/packages/lumx-core/src/scss/components/table/_mixins.scss
@@ -27,6 +27,7 @@
         }
     }
 
+    &:focus-visible,
     &[data-focus-visible-added] {
         @if $theme == "theme-light" {
             @include lumx-state(
diff --git a/packages/lumx-core/src/scss/components/tabs/_index.scss b/packages/lumx-core/src/scss/components/tabs/_index.scss
@@ -98,6 +98,7 @@
     outline: none;
 
     // Focus state
+    &:focus-visible,
     &[data-focus-visible-added] {
         @include lumx-state("state-focus", "emphasis-low", "dark");
     }
diff --git a/packages/lumx-core/src/scss/components/tabs/_mixins.scss b/packages/lumx-core/src/scss/components/tabs/_mixins.scss
@@ -88,6 +88,7 @@
         }
     }
 
+    &:focus-visible,
     &[data-focus-visible-added] {
         @if $theme == "theme-light" {
             @include lumx-state-low("state-focus", "dark");
diff --git a/packages/lumx-core/src/scss/components/thumbnail/_index.scss b/packages/lumx-core/src/scss/components/thumbnail/_index.scss
@@ -194,20 +194,23 @@
 
 /* Focused (variant rounded) */
 .lumx-thumbnail--variant-rounded.lumx-thumbnail--is-clickable {
+    &:focus-visible::after,
     &[data-focus-visible-added]::after {
         border-radius: var(--lumx-border-radius);
     }
 }
 
 /* Focused (light theme) */
 .lumx-thumbnail--theme-light.lumx-thumbnail--is-clickable {
+    &:focus-visible::after,
     &[data-focus-visible-added]::after {
         @include lumx-state("state-focus", "emphasis-low", "dark");
     }
 }
 
 /* Focused (dark theme) */
 .lumx-thumbnail--theme-dark.lumx-thumbnail--is-clickable {
+    &:focus-visible::after,
     &[data-focus-visible-added]::after {
         @include lumx-state("state-focus", "emphasis-low", "light");
     }
diff --git a/packages/lumx-core/src/scss/components/uploader/_index.scss b/packages/lumx-core/src/scss/components/uploader/_index.scss
@@ -24,6 +24,7 @@
             @include lumx-state("state-active", "emphasis-medium", "dark");
         }
 
+        &:focus-visible,
         &[data-focus-visible-added],
         &:focus-within {
             @include lumx-state("state-focus", "emphasis-medium", "dark");
@@ -41,6 +42,7 @@
             @include lumx-state("state-active", "emphasis-medium", "light");
         }
 
+        &:focus-visible,
         &[data-focus-visible-added],
         &:focus-within {
             @include lumx-state("state-focus", "emphasis-medium", "light");
diff --git a/packages/lumx-react/.storybook/story-block/StoryBlock.tsx b/packages/lumx-react/.storybook/story-block/StoryBlock.tsx
@@ -7,8 +7,6 @@ import { ThemeProvider } from '@lumx/react';
 import '@lumx/core/scss/lumx.scss';
 import './index.scss';
 
-import 'focus-visible';
-
 interface StoryBlockProps {
     Story: ElementType;
     context: any;
diff --git a/packages/lumx-react/package.json b/packages/lumx-react/package.json
@@ -50,7 +50,6 @@
         "babel-loader": "^8.0.6",
         "chromatic": "^13.1.4",
         "core-js": "^3.6.4",
-        "focus-visible": "^5.0.2",
         "glob": "^7.1.6",
         "install-peers-cli": "^2.2.0",
         "is-ci": "^2.0.0",
diff --git a/packages/site-demo/package.json b/packages/site-demo/package.json
@@ -28,7 +28,6 @@
         "@mdx-js/react": "^1.6.22",
         "@reach/router": "^1.2.1",
         "classnames": "^2.3.2",
-        "focus-visible": "^5.2.0",
         "gatsby": "latest-v3",
         "gatsby-image": "^3.11.0",
         "gatsby-plugin-copy-files-enhanced": "^1.1.1",
diff --git a/packages/site-demo/src/style/index.scss b/packages/site-demo/src/style/index.scss
@@ -5,6 +5,6 @@
    Base
    ========================================================================== */
 
-*:not(.focus-visible) {
+*:not(:focus-visible) {
     outline: none;
 }
diff --git a/packages/site-demo/src/wrapRootElement.tsx b/packages/site-demo/src/wrapRootElement.tsx
@@ -4,7 +4,6 @@ import { PropTable } from '@lumx/demo/components/content/PropTable/PropTable';
 import { Link } from '@lumx/demo/components/base/Link';
 
 import { MDXProvider } from '@mdx-js/react';
-import 'focus-visible';
 import 'intersection-observer';
 import React from 'react';
 
diff --git a/yarn.lock b/yarn.lock
@@ -3517,7 +3517,6 @@ __metadata:
     clean-webpack-plugin: ^4.0.0
     copy-webpack-plugin: ^11.0.0
     core-js: ^3.6.4
-    focus-visible: ^5.0.2
     html-loader: ^4.2.0
     lodash: 4.17.21
     popper.js: ^1.16.0
@@ -3540,7 +3539,6 @@ __metadata:
     "@rollup/plugin-typescript": ^12.1.4
     autoprefixer: ^9.7.4
     classnames: ^2.3.2
-    focus-visible: ^5.0.2
     glob: ^7.1.6
     lodash: 4.17.21
     postcss: ^8.5.6
@@ -3639,7 +3637,6 @@ __metadata:
     chromatic: ^13.1.4
     classnames: ^2.3.2
     core-js: ^3.6.4
-    focus-visible: ^5.0.2
     glob: ^7.1.6
     install-peers-cli: ^2.2.0
     is-ci: ^2.0.0
@@ -13363,13 +13360,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"focus-visible@npm:^5.0.2, focus-visible@npm:^5.2.0":
-  version: 5.2.0
-  resolution: "focus-visible@npm:5.2.0"
-  checksum: 876f646ef453680d3d34e9f9b23961527ffd5ccaed8690f423d4fbfa37ff023d98a490972bc1387850e37ec2e44958c81f6096ef95b67462e5c4b5404cf1dbb9
-  languageName: node
-  linkType: hard
-
 "follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0":
   version: 1.15.11
   resolution: "follow-redirects@npm:1.15.11"
@@ -18972,7 +18962,6 @@ __metadata:
     "@types/reach__router": ^1.3.6
     "@types/react-helmet": ^6.1.0
     classnames: ^2.3.2
-    focus-visible: ^5.2.0
     gatsby: latest-v3
     gatsby-image: ^3.11.0
     gatsby-plugin-copy-files-enhanced: ^1.1.1

Original file line number	Diff line number	Diff line change
`@@ -184,6 +184,7 @@`
`184`	`184`	`}`
`185`	`185`	`}`
`186`	`186`
	`187`	`+ &:focus-visible,`
`187`	`188`	`&[data-focus-visible-added],`
`188`	`189`	`&[class*="--is-focused"] {`
`189`	`190`	`@include lumx-state("state-focus", $emphasis, $color, $theme);`
`@@ -212,6 +213,7 @@`
`212`	`213`	`@include lumx-state-as-selected("state-active", $theme);`
`213`	`214`	`}`
`214`	`215`
	`216`	`+ &:focus-visible,`
`215`	`217`	`&[data-focus-visible-added],`
`216`	`218`	`&[class*="--is-focused"] {`
`217`	`219`	`@include lumx-state-as-selected("state-focus", $theme);`
Original file line number	Diff line number	Diff line change
`@@ -96,6 +96,7 @@`
`96`	`96`	`&:active + #{$self}__input-placeholder #{$self}__input-background {`
`97`	`97`	`@include lumx-state("state-active", "emphasis-low", $base-color);`
`98`	`98`	`}`
	`99`	`+ &:focus-visible + #{$self}__input-placeholder,`
`99`	`100`	`&[data-focus-visible-added] + #{$self}__input-placeholder {`
`100`	`101`	`@include lumx-state("state-focus", "emphasis-low", $base-color);`
`101`	`102`	`}`
`@@ -108,6 +109,7 @@`
`108`	`109`	`&:active + #{$self}__input-placeholder #{$self}__input-indicator {`
`109`	`110`	`@include lumx-state("state-active", "emphasis-high", "primary", $theme);`
`110`	`111`	`}`
	`112`	`+ &:focus-visible + #{$self}__input-placeholder,`
`111`	`113`	`&[data-focus-visible-added] + #{$self}__input-placeholder {`
`112`	`114`	`@include lumx-state("state-focus", "emphasis-high", "primary", $theme);`
`113`	`115`	`}`
Original file line number	Diff line number	Diff line change
`@@ -90,6 +90,7 @@`
`90`	`90`	`}`
`91`	`91`
`92`	`92`	`.lumx-chip--color-#{$key} {`
	`93`	`+ &:focus-visible,`
`93`	`94`	`&[data-focus-visible-added],`
`94`	`95`	`&.lumx-chip--is-highlighted {`
`95`	`96`	`@include lumx-state("state-focus", "emphasis-medium", $key);`
`@@ -124,6 +125,7 @@`
`124`	`125`	`);`
`125`	`126`	`}`
`126`	`127`
	`128`	`+ &:focus-visible,`
`127`	`129`	`&[data-focus-visible-added] {`
`128`	`130`	`@include lumx-state-as-selected(`
`129`	`131`	`"state-focus",`
`@@ -160,6 +162,7 @@`
`160`	`162`	`);`
`161`	`163`	`}`
`162`	`164`
	`165`	`+ &:focus-visible,`
`163`	`166`	`&[data-focus-visible-added] {`
`164`	`167`	`@include lumx-state-as-selected(`
`165`	`168`	`"state-focus",`
Original file line number	Diff line number	Diff line change
`@@ -19,12 +19,13 @@`
`19`	`19`
`20`	`20`	`&:hover,`
`21`	`21`	`&[data-lumx-hover],`
	`22`	`+ &:focus-visible,`
`22`	`23`	`&[data-focus-visible-added] {`
`23`	`24`	`text-decoration: underline;`
`24`	`25`	`}`
`25`	`26`
`26`		`- &[data-focus-visible-added],`
`27`		`- &:focus-visible {`
	`27`	`+ &:focus-visible,`
	`28`	`+ &[data-focus-visible-added] {`
`28`	`29`	`outline: 1px auto currentColor;`
`29`	`30`	`outline-offset: 2px;`
`30`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,13 +29,15 @@`
`29`	`29`
`30`	`30`	`cursor: pointer;`
`31`	`31`
	`32`	`+ &:focus-visible,`
`32`	`33`	`&[data-focus-visible-added] {`
`33`	`34`	`outline: 2px solid lumx-color-variant("dark", "N");`
`34`	`35`	`outline-offset: -2px;`
`35`	`36`	`}`
`36`	`37`
`37`	`38`	`&:hover,`
`38`	`39`	`&[data-lumx-hover],`
	`40`	`+ &:focus-visible,`
`39`	`41`	`&[data-focus-visible-added] {`
`40`	`42`	`@include lumx-state("state-hover", "emphasis-low", "dark");`
`41`	`43`	`}`
`@@ -61,6 +63,7 @@`
`61`	`63`
`62`	`64`	`&:hover,`
`63`	`65`	`&[data-lumx-hover],`
	`66`	`+ &:focus-visible,`
`64`	`67`	`&[data-focus-visible-added] {`
`65`	`68`	`@include lumx-state-as-selected("state-hover", "theme-light", $component);`
`66`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@`
`49`	`49`	`display: flex;`
`50`	`50`	`flex-direction: column;`
`51`	`51`
`52`		`- &:has([data-focus-visible-added]) {`
	`52`	`+ &:has([data-focus-visible-added], :focus-visible) {`
`53`	`53`	`z-index: 1;`
`54`	`54`	`}`
`55`	`55`