memorial-ui-component-library 1.0.10-beta.13 → 1.0.10-beta.15

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 (10) hide show
  1. package/dist/memorial-ui-component-library.common.js +53 -27
  2. package/dist/memorial-ui-component-library.common.js.map +1 -1
  3. package/dist/memorial-ui-component-library.css +1 -1
  4. package/dist/memorial-ui-component-library.umd.js +53 -27
  5. package/dist/memorial-ui-component-library.umd.js.map +1 -1
  6. package/dist/memorial-ui-component-library.umd.min.js +3 -3
  7. package/dist/memorial-ui-component-library.umd.min.js.map +1 -1
  8. package/dist/report.html +2 -2
  9. package/package.json +1 -1
  10. package/src/assets/scss/_focus.scss +27 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "memorial-ui-component-library",
3
- "version": "1.0.10-beta.13",
3
+ "version": "1.0.10-beta.15",
4
4
  "private": false,
5
5
  "description": "Memorial Health System Vue UI library.",
6
6
  "author": "Solutions Development",
package/src/assets/scss/_focus.scss CHANGED
@@ -8,56 +8,40 @@
8
8
  --sd-focus-offset-inset: 2px;
9
9
  }
10
10
 
11
- // Hide focus styles by default (for mouse users)
12
- :focus:not(:focus-visible) {
13
- outline: none !important;
14
- box-shadow: none !important;
15
- &::before {
16
- display: none !important;
11
+ // Only show focus when using keyboard navigation
12
+ body:not(.user-is-tabbing) {
13
+ *:focus {
14
+ outline: none !important;
17
15
  }
18
16
  }
19
17
 
20
- // Global focus styles
21
-
22
- // Default focus style for interactive elements
23
- :focus-visible {
24
- outline: var(--sd-focus-width) solid var(--sd-focus-color);
25
- outline-offset: var(--sd-focus-offset);
26
- }
27
-
28
- // Enhanced focus for form controls
29
- input:focus-visible,
30
- select:focus-visible,
31
- textarea:focus-visible,
32
- button:focus-visible,
33
- [role="button"]:focus-visible,
34
- [role="combobox"]:focus-visible,
35
- [tabindex]:focus-visible {
36
- outline: var(--sd-focus-width) solid var(--sd-focus-color);
37
- outline-offset: var(--sd-focus-offset);
38
- }
39
-
40
- // Focus within containers (for composite widgets)
41
- [role="combobox"]:focus-within,
42
- [role="listbox"]:focus-within,
43
- [role="menu"]:focus-within {
44
- outline: var(--sd-focus-width-secondary) solid var(--sd-focus-color);
45
- outline-offset: var(--sd-focus-offset-secondary);
46
- }
47
-
48
- // Focus styles for list items
49
- [role="option"].focus,
50
- [role="menuitem"].focus,
51
- [role="option"]:focus-visible,
52
- [role="menuitem"]:focus-visible {
53
- outline: var(--sd-focus-width) solid var(--sd-focus-color);
54
- outline-offset: var(--sd-focus-offset-inset);
55
- position: relative;
18
+ // Show focus styles when tabbing
19
+ body.user-is-tabbing {
20
+ *:focus {
21
+ outline: var(--sd-focus-width) solid var(--sd-focus-color) !important;
22
+ outline-offset: var(--sd-focus-offset) !important;
23
+ }
24
+
25
+ [role="combobox"]:focus:focus-within,
26
+ [role="listbox"]:focus:focus-within,
27
+ [role="menu"]:focus:focus-within {
28
+ outline: var(--sd-focus-width-secondary) solid var(--sd-focus-color) !important;
29
+ outline-offset: var(--sd-focus-offset-secondary) !important;
30
+ }
31
+
32
+ [role="option"].focus,
33
+ [role="menuitem"].focus,
34
+ [role="option"]:focus,
35
+ [role="menuitem"]:focus {
36
+ outline: var(--sd-focus-width) solid var(--sd-focus-color) !important;
37
+ outline-offset: var(--sd-focus-offset-inset) !important;
38
+ position: relative;
39
+ }
56
40
  }
57
41
 
58
42
  // Support for high contrast mode
59
43
  @media (forced-colors: active) {
60
- :focus-visible {
44
+ :focus {
61
45
  outline: var(--sd-focus-width) solid HighlightText !important;
62
46
  outline-offset: var(--sd-focus-offset) !important;
63
47
  }