@brightspace-ui/core 3.265.0 → 3.266.0

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 +93 -82
  2. package/custom-elements.json +1 -1
  3. package/package.json +1 -1
package/components/inputs/input-select-styles.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import './input-styles.js';
2
2
  import { css, unsafeCSS } from 'lit';
3
+ import { _isValidCssSelector } from '../../helpers/internal/css.js';
3
4
  import { getFocusPseudoClass } from '../../helpers/focus.js';
4
5
  import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
5
6
 
@@ -12,94 +13,104 @@ registerSemanticVariableForSvgImageUrl(
12
13
  </svg>`
13
14
  );
14
15
 
15
- export const selectStyles = css`
16
- .d2l-input-select {
17
- -webkit-appearance: none;
18
- -moz-appearance: none;
19
- appearance: none;
20
- background-color: var(--d2l-theme-background-color-base);
21
- background-image: var(--d2l-input-select-chevron-image);
22
- background-origin: border-box;
23
- background-position: center var(--d2l-inline-end, right) 17px;
24
- background-repeat: no-repeat;
25
- background-size: 11px 7px;
26
- border: none;
27
- border-radius: 0.3rem;
28
- box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 1px var(--d2l-theme-shadow-inset-color);
29
- color: var(--d2l-theme-text-color-static-standard);
30
- display: inline-block;
31
- font-family: inherit;
32
- font-size: 0.8rem;
33
- font-weight: 400;
34
- height: auto;
35
- letter-spacing: 0.02rem;
36
- line-height: 1.2rem;
37
- margin: 0;
38
- max-height: calc(2rem + 2px);
39
- outline: 1px solid var(--d2l-theme-border-color-emphasized);
40
- outline-offset: -1px;
41
- padding-block: calc(0.4rem + 1px);
42
- padding-inline: calc(0.75rem + 1px) calc(2px + 0.8rem + 1px + 11px + 16px + 1px);
43
- vertical-align: middle;
44
- }
16
+ /**
17
+ * A private helper method that should not be used by general consumers
18
+ */
19
+ export function _generateSelectStyles(selector) {
20
+ if (!_isValidCssSelector(selector)) return '';
21
+ const finalSelector = unsafeCSS(selector);
45
22
 
46
- .d2l-input-select:not([disabled]):hover,
47
- .d2l-input-select:not([disabled]):${focusClass} {
48
- box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 2px var(--d2l-theme-shadow-inset-color);
49
- outline: 2px solid var(--d2l-theme-border-color-focus);
50
- outline-offset: -2px;
51
- }
52
- .d2l-input-select[aria-invalid="true"] {
53
- background-image: var(--d2l-input-select-chevron-image), var(--d2l-input-invalid-image);
54
- background-position: center var(--d2l-inline-end, right) 17px, center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
55
- background-repeat: no-repeat, no-repeat;
56
- background-size: 11px 7px, 0.8rem 0.8rem;
57
- }
58
- .d2l-input-select[aria-invalid="true"],
59
- .d2l-input-select[aria-invalid="true"]:${focusClass},
60
- .d2l-input-select[aria-invalid="true"]:hover {
61
- outline-color: var(--d2l-theme-status-color-error);
62
- }
63
- .d2l-input-select:disabled {
64
- opacity: var(--d2l-theme-opacity-disabled-control);
65
- }
66
-
67
- @media (prefers-contrast: more) {
68
- .d2l-input-select {
69
- appearance: auto;
70
- background-color: Field;
71
- background-image: none;
23
+ return css`
24
+ ${finalSelector} {
25
+ -webkit-appearance: none;
26
+ -moz-appearance: none;
27
+ appearance: none;
28
+ background-color: var(--d2l-theme-background-color-base);
29
+ background-image: var(--d2l-input-select-chevron-image);
30
+ background-origin: border-box;
31
+ background-position: center var(--d2l-inline-end, right) 17px;
32
+ background-repeat: no-repeat;
33
+ background-size: 11px 7px;
72
34
  border: none;
73
- border-inline-end: 0.75rem solid transparent;
74
- box-shadow: none;
75
- color: FieldText;
76
- forced-color-adjust: none;
77
- height: 2rem;
78
- outline: 1px solid ButtonBorder;
79
- padding-inline: 0.6rem 16px;
35
+ border-radius: 0.3rem;
36
+ box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 1px var(--d2l-theme-shadow-inset-color);
37
+ color: var(--d2l-theme-text-color-static-standard);
38
+ display: inline-block;
39
+ font-family: inherit;
40
+ font-size: 0.8rem;
41
+ font-weight: 400;
42
+ height: auto;
43
+ letter-spacing: 0.02rem;
44
+ line-height: 1.2rem;
45
+ margin: 0;
46
+ max-height: calc(2rem + 2px);
47
+ outline: 1px solid var(--d2l-theme-border-color-emphasized);
48
+ outline-offset: -1px;
49
+ padding-block: calc(0.4rem + 1px);
50
+ padding-inline: calc(0.75rem + 1px) calc(2px + 0.8rem + 1px + 11px + 16px + 1px);
51
+ vertical-align: middle;
80
52
  }
81
53
 
82
- .d2l-input-select:not([disabled]):${focusClass},
83
- .d2l-input-select:not([disabled]):hover {
84
- box-shadow: none;
85
- outline: 2px solid Highlight;
54
+ ${finalSelector}:not([disabled]):hover,
55
+ ${finalSelector}:not([disabled]):${focusClass} {
56
+ box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 2px var(--d2l-theme-shadow-inset-color);
57
+ outline: 2px solid var(--d2l-theme-border-color-focus);
58
+ outline-offset: -2px;
86
59
  }
87
-
88
- .d2l-input-select:disabled {
89
- outline: 1px solid GrayText;
60
+ ${finalSelector}[aria-invalid="true"] {
61
+ background-image: var(--d2l-input-select-chevron-image), var(--d2l-input-invalid-image);
62
+ background-position: center var(--d2l-inline-end, right) 17px, center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
63
+ background-repeat: no-repeat, no-repeat;
64
+ background-size: 11px 7px, 0.8rem 0.8rem;
90
65
  }
91
-
92
- .d2l-input-select[aria-invalid="true"] {
93
- background-image: var(--d2l-input-invalid-image);
94
- background-position: center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
95
- background-repeat: no-repeat;
96
- background-size: 0.8rem 0.8rem;
66
+ ${finalSelector}[aria-invalid="true"],
67
+ ${finalSelector}[aria-invalid="true"]:${focusClass},
68
+ ${finalSelector}[aria-invalid="true"]:hover {
69
+ outline-color: var(--d2l-theme-status-color-error);
70
+ }
71
+ ${finalSelector}:disabled {
72
+ opacity: var(--d2l-theme-opacity-disabled-control);
97
73
  }
98
74
 
99
- .d2l-input-select[aria-invalid="true"],
100
- .d2l-input-select[aria-invalid="true"]:${focusClass},
101
- .d2l-input-select[aria-invalid="true"]:hover {
102
- outline-color: var(--d2l-theme-status-color-error);
75
+ @media (prefers-contrast: more) {
76
+ ${finalSelector} {
77
+ appearance: auto;
78
+ background-color: Field;
79
+ background-image: none;
80
+ border: none;
81
+ border-inline-end: 0.75rem solid transparent;
82
+ box-shadow: none;
83
+ color: FieldText;
84
+ forced-color-adjust: none;
85
+ height: 2rem;
86
+ outline: 1px solid ButtonBorder;
87
+ padding-inline: 0.6rem 16px;
88
+ }
89
+
90
+ ${finalSelector}:not([disabled]):${focusClass},
91
+ ${finalSelector}:not([disabled]):hover {
92
+ box-shadow: none;
93
+ outline: 2px solid Highlight;
94
+ }
95
+
96
+ ${finalSelector}:disabled {
97
+ outline: 1px solid GrayText;
98
+ }
99
+
100
+ ${finalSelector}[aria-invalid="true"] {
101
+ background-image: var(--d2l-input-invalid-image);
102
+ background-position: center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
103
+ background-repeat: no-repeat;
104
+ background-size: 0.8rem 0.8rem;
105
+ }
106
+
107
+ ${finalSelector}[aria-invalid="true"],
108
+ ${finalSelector}[aria-invalid="true"]:${focusClass},
109
+ ${finalSelector}[aria-invalid="true"]:hover {
110
+ outline-color: var(--d2l-theme-status-color-error);
111
+ }
103
112
  }
104
- }
105
- `;
113
+ `;
114
+ };
115
+
116
+ export const selectStyles = _generateSelectStyles('.d2l-input-select');
package/custom-elements.json CHANGED
@@ -12295,7 +12295,7 @@
12295
12295
  },
12296
12296
  {
12297
12297
  "name": "styles",
12298
- "type": "CSSResult[]",
12298
+ "type": "(string | CSSResult)[]",
12299
12299
  "default": "[\"inputLabelStyles\",\"selectStyles\",\"tableStyles\",null]"
12300
12300
  },
12301
12301
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.265.0",
3
+ "version": "3.266.0",
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",