@brightspace-ui/core 3.126.1 → 3.126.3

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 (3) hide show
  1. package/components/inputs/input-select-styles.js +60 -53
  2. package/components/typography/styles.js +1 -1
  3. package/package.json +1 -1
package/components/inputs/input-select-styles.js CHANGED
@@ -1,18 +1,23 @@
1
1
  import '../colors/colors.js';
2
- import { css } from 'lit';
2
+ import { css, unsafeCSS } from 'lit';
3
+ import { getFocusPseudoClass } from '../../helpers/focus.js';
4
+
5
+ const focusClass = unsafeCSS(getFocusPseudoClass());
3
6
 
4
7
  export const selectStyles = css`
5
8
  .d2l-input-select {
6
9
  -webkit-appearance: none;
7
10
  -moz-appearance: none;
8
11
  appearance: none;
12
+ background-color: #ffffff;
13
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+");
9
14
  background-origin: border-box;
10
15
  background-position: center right 17px;
11
16
  background-repeat: no-repeat;
12
17
  background-size: 11px 7px;
18
+ border: none;
13
19
  border-radius: 0.3rem;
14
- border-style: solid;
15
- box-sizing: border-box;
20
+ box-shadow: inset 0 2px 0 1px rgba(177, 185, 190, 0.2); /* corundum */
16
21
  color: var(--d2l-color-ferrite);
17
22
  display: inline-block;
18
23
  font-family: inherit;
@@ -23,53 +28,32 @@ export const selectStyles = css`
23
28
  line-height: 1.2rem;
24
29
  margin: 0;
25
30
  max-height: calc(2rem + 2px);
31
+ outline: 1px solid var(--d2l-color-galena);
32
+ outline-offset: -1px;
33
+ padding-block: calc(0.4rem + 1px);
34
+ padding-inline: calc(0.75rem + 1px) calc(2px + 0.8rem + 1px + 11px + 16px + 1px);
26
35
  vertical-align: middle;
27
36
  }
28
37
  :host([dir="rtl"]) .d2l-input-select {
29
38
  background-position: center left 17px;
30
39
  }
31
- .d2l-input-select,
32
- .d2l-input-select:hover:disabled {
33
- background-color: #ffffff;
34
- border-color: var(--d2l-color-galena);
35
- border-width: 1px;
36
- box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
37
- padding: 0.4rem 0.75rem;
38
- }
39
- .d2l-input-select,
40
- .d2l-input-select:disabled,
41
- .d2l-input-select:hover:disabled,
42
- .d2l-input-select:focus:disabled {
43
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+");
44
- padding-right: calc(2px + 0.8rem + 1px + 11px + 16px);
45
- }
46
- :host([dir="rtl"]) .d2l-input-select,
47
- :host([dir="rtl"]) .d2l-input-select:disabled,
48
- :host([dir="rtl"]) .d2l-input-select:hover:disabled,
49
- :host([dir="rtl"]) .d2l-input-select:focus:disabled {
50
- padding-left: calc(2px + 0.8rem + 1px + 11px + 16px);
51
- padding-right: 0.75rem;
52
- }
53
- .d2l-input-select:hover,
54
- .d2l-input-select:focus {
55
- border-color: var(--d2l-color-celestine);
56
- border-width: 2px;
57
- outline-style: none; /* Safari */
58
- outline-width: 0;
59
- padding: calc(0.4rem - 1px) calc(0.75rem - 1px);
60
- padding-right: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
61
- }
62
- :host([dir="rtl"]) .d2l-input-select:hover,
63
- :host([dir="rtl"]) .d2l-input-select:focus {
64
- padding-left: calc(2px + 0.8rem + 1px + 11px + 16px - 1px);
65
- padding-right: calc(0.75rem - 1px);
40
+
41
+ .d2l-input-select:not([disabled]):hover,
42
+ .d2l-input-select:not([disabled]):${focusClass} {
43
+ box-shadow: inset 0 2px 0 2px rgba(177, 185, 190, 0.2); /* corundum */
44
+ outline: 2px solid var(--d2l-color-celestine);
45
+ outline-offset: -2px;
66
46
  }
67
47
  .d2l-input-select[aria-invalid="true"] {
68
48
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDExIDciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEgMmw0LjUgNE0xMCAyTDUuNSA2IiBzdHJva2U9IiM1NjVBNUMiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+"), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
69
49
  background-position: center right 17px, center right calc(1px + 11px + 17px);
70
50
  background-repeat: no-repeat, no-repeat;
71
51
  background-size: 11px 7px, 0.8rem 0.8rem;
72
- border-color: var(--d2l-color-cinnabar);
52
+ }
53
+ .d2l-input-select[aria-invalid="true"],
54
+ .d2l-input-select[aria-invalid="true"]:${focusClass},
55
+ .d2l-input-select[aria-invalid="true"]:hover {
56
+ outline-color: var(--d2l-color-cinnabar);
73
57
  }
74
58
  :host([dir="rtl"]) .d2l-input-select[aria-invalid="true"] {
75
59
  background-position: center left 17px, center left calc(1px + 11px + 17px);
@@ -77,19 +61,42 @@ export const selectStyles = css`
77
61
  .d2l-input-select:disabled {
78
62
  opacity: 0.5;
79
63
  }
80
- /* IE11 to prevent selection styling */
81
- .d2l-input-select:focus::-ms-value,
82
- .d2l-input-select:hover::-ms-value {
83
- background-color: transparent;
84
- color: var(--d2l-color-ferrite);
85
- }
86
- /* IE11 to hide the native chevron */
87
- .d2l-input-select::-ms-expand {
88
- display: none;
89
- }
90
- /* Prevents dotted outline when focused in Firefox */
91
- .d2l-input-select:-moz-focusring {
92
- color: transparent;
93
- text-shadow: 0 0 0 #000000;
64
+
65
+ @media (prefers-contrast: more) {
66
+ .d2l-input-select {
67
+ appearance: auto;
68
+ background-color: Field;
69
+ background-image: none;
70
+ border: none;
71
+ border-inline-end: 0.75rem solid transparent;
72
+ box-shadow: none;
73
+ color: FieldText;
74
+ forced-color-adjust: none;
75
+ height: 2rem;
76
+ outline: 1px solid FieldText;
77
+ padding-inline: 0.6rem 16px;
78
+ }
79
+
80
+ .d2l-input-select:not([disabled]):${focusClass},
81
+ .d2l-input-select:not([disabled]):hover {
82
+ box-shadow: none;
83
+ outline: 2px solid Highlight;
84
+ }
85
+
86
+ .d2l-input-select[aria-invalid="true"] {
87
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
88
+ background-position: center right calc(1px + 11px + 17px);
89
+ background-repeat: no-repeat;
90
+ background-size: 0.8rem 0.8rem;
91
+ }
92
+
93
+ .d2l-input-select[aria-invalid="true"],
94
+ .d2l-input-select[aria-invalid="true"]:${focusClass},
95
+ .d2l-input-select[aria-invalid="true"]:hover {
96
+ outline-color: var(--d2l-color-cinnabar);
97
+ }
98
+ :host([dir="rtl"]) .d2l-input-select[aria-invalid="true"] {
99
+ background-position: center left calc(1px + 11px + 17px);
100
+ }
94
101
  }
95
102
  `;
package/components/typography/styles.js CHANGED
@@ -306,7 +306,7 @@ export const _generateBlockquoteStyles = (selector) => {
306
306
  inset-block-start: 0;
307
307
  inset-inline-start: 0;
308
308
  position: absolute;
309
- transform: var(--d2l-mirror-transform, ${globalThis.document.dir === 'rtl' ? css`scale(-1, 1)` : css`none`}); /* stylelint-disable-line @stylistic/string-quotes, @stylistic/function-whitespace-after */
309
+ transform: var(--d2l-mirror-transform, ${globalThis.document?.dir === 'rtl' ? css`scale(-1, 1)` : css`none`}); /* stylelint-disable-line @stylistic/string-quotes, @stylistic/function-whitespace-after */
310
310
  }
311
311
  @media (max-width: 615px) {
312
312
  ${selector} {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.126.1",
3
+ "version": "3.126.3",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",