@brightspace-ui/core 3.127.3 → 3.127.5

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 (4) hide show
  1. package/components/inputs/input-select-styles.js +5 -1
  2. package/components/inputs/input-styles.js +27 -21
  3. package/components/inputs/input-text.js +7 -2
  4. package/package.json +1 -1
package/components/inputs/input-select-styles.js CHANGED
@@ -73,7 +73,7 @@ export const selectStyles = css`
73
73
  color: FieldText;
74
74
  forced-color-adjust: none;
75
75
  height: 2rem;
76
- outline: 1px solid FieldText;
76
+ outline: 1px solid ButtonBorder;
77
77
  padding-inline: 0.6rem 16px;
78
78
  }
79
79
 
@@ -83,6 +83,10 @@ export const selectStyles = css`
83
83
  outline: 2px solid Highlight;
84
84
  }
85
85
 
86
+ .d2l-input-select:disabled {
87
+ outline: 1px solid GrayText;
88
+ }
89
+
86
90
  .d2l-input-select[aria-invalid="true"] {
87
91
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
88
92
  background-position: center right calc(1px + 11px + 17px);
package/components/inputs/input-styles.js CHANGED
@@ -1,5 +1,8 @@
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 inputStyles = css`
5
8
  .d2l-input {
@@ -26,7 +29,7 @@ export const inputStyles = css`
26
29
  }
27
30
  .d2l-input,
28
31
  .d2l-input:hover:disabled,
29
- .d2l-input:focus:disabled,
32
+ .d2l-input:${focusClass}:disabled,
30
33
  [aria-invalid="true"].d2l-input:disabled {
31
34
  border-color: var(--d2l-input-border-color, var(--d2l-color-galena));
32
35
  border-width: 1px;
@@ -44,7 +47,7 @@ export const inputStyles = css`
44
47
  font-weight: 400;
45
48
  }
46
49
  .d2l-input:hover,
47
- .d2l-input:focus,
50
+ .d2l-input:${focusClass},
48
51
  .d2l-input-focus {
49
52
  border-color: var(--d2l-color-celestine);
50
53
  border-width: 2px;
@@ -72,45 +75,48 @@ export const inputStyles = css`
72
75
  }
73
76
  textarea.d2l-input,
74
77
  textarea.d2l-input:hover:disabled,
75
- textarea.d2l-input:focus:disabled,
78
+ textarea.d2l-input:${focusClass}:disabled,
76
79
  textarea[aria-invalid="true"].d2l-input:disabled {
77
- padding-bottom: 0.5rem;
78
- padding-top: 0.5rem;
80
+ padding-block: 0.5rem;
79
81
  }
80
82
  textarea.d2l-input:hover,
81
- textarea.d2l-input:focus {
83
+ textarea.d2l-input:${focusClass} {
82
84
  padding: var(--d2l-input-padding-focus, calc(0.75rem - 1px));
83
- padding-bottom: calc(0.5rem - 1px);
84
- padding-top: calc(0.5rem - 1px);
85
+ padding-block: calc(0.5rem - 1px);
85
86
  }
86
87
  textarea.d2l-input[aria-invalid="true"] {
87
88
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
88
89
  background-position: top 12px right 18px;
89
90
  background-repeat: no-repeat;
90
91
  background-size: 0.8rem 0.8rem;
91
- padding-right: calc(18px + 0.8rem);
92
+ padding-inline-end: calc(18px + 0.8rem);
92
93
  }
93
94
  textarea.d2l-input[aria-invalid="true"]:hover,
94
- textarea.d2l-input[aria-invalid="true"]:focus {
95
+ textarea.d2l-input[aria-invalid="true"]:${focusClass} {
95
96
  background-position: top calc(12px - 1px) right calc(18px - 1px);
96
- padding-right: calc(18px + 0.8rem - 1px);
97
+ padding-inline-end: calc(18px + 0.8rem - 1px);
97
98
  }
98
99
  :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"] {
99
100
  background-position: top 12px left 18px;
100
- padding: var(--d2l-input-padding, 0.75rem);
101
- padding-bottom: 0.5rem;
102
- padding-left: calc(18px + 0.8rem);
103
- padding-top: 0.5rem;
104
101
  }
105
- :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:focus,
102
+ :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:${focusClass},
106
103
  :host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:hover {
107
104
  background-position: top calc(12px - 1px) left calc(18px - 1px);
108
- padding: var(--d2l-input-padding-focus, calc(0.75rem - 1px));
109
- padding-bottom: calc(0.5rem - 1px);
110
- padding-left: calc(18px + 0.8rem - 1px);
111
- padding-top: calc(0.5rem - 1px);
112
105
  }
113
106
  textarea[aria-invalid="true"].d2l-input:disabled {
114
107
  background-image: none;
115
108
  }
109
+
110
+ @media (prefers-contrast: more) {
111
+ [aria-invalid="true"].d2l-input {
112
+ background-color: Field;
113
+ border-color: var(--d2l-color-cinnabar);
114
+ box-shadow: none;
115
+ color: FieldText;
116
+ forced-color-adjust: none;
117
+ }
118
+ .d2l-input-focus {
119
+ border-color: Highlight;
120
+ }
121
+ }
116
122
  `;
package/components/inputs/input-text.js CHANGED
@@ -258,7 +258,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
258
258
  opacity: 0.5;
259
259
  }
260
260
  .d2l-input-text-invalid-icon {
261
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0wIDBoMjJ2MjJIMHoiLz4KICAgIDxwYXRoIGQ9Ik0xOC44NjQgMTYuNDdMMTIuNjIzIDMuOTg5YTEuNzgzIDEuNzgzIDAgMDAtMy4xOTIgMEwzLjE4OSAxNi40N2ExLjc2MSAxLjc2MSAwIDAwLjA4IDEuNzNjLjMyNS41MjUuODk4Ljc5OCAxLjUxNi43OTloMTIuNDgzYy42MTggMCAxLjE5Mi0uMjczIDEuNTE2LS44LjIzNy0uMzM1LjI2NS0xLjM3LjA4LTEuNzN6IiBmaWxsPSIjQ0QyMDI2IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxwYXRoIGQ9Ik0xMS4wMjcgMTcuMjY0YTEuMzM3IDEuMzM3IDAgMTEwLTIuNjc1IDEuMzM3IDEuMzM3IDAgMDEwIDIuNjc1ek0xMS45IDEyLjk4YS44OTIuODkyIDAgMDEtMS43NDcgMEw5LjI3IDguNTJhLjg5Mi44OTIgMCAwMS44NzQtMS4wNjRoMS43NjhhLjg5Mi44OTIgMCAwMS44NzQgMS4wNjVsLS44ODYgNC40NTh6IiBmaWxsPSIjRkZGIi8+CiAgPC9nPgo8L3N2Zz4K");
261
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0xOC44NjQgMTYuNDdMMTIuNjIzIDMuOTg5YTEuNzgzIDEuNzgzIDAgMDAtMy4xOTIgMEwzLjE4OSAxNi40N2ExLjc2MSAxLjc2MSAwIDAwLjA4IDEuNzNjLjMyNS41MjUuODk4Ljc5OCAxLjUxNi43OTloMTIuNDgzYy42MTggMCAxLjE5Mi0uMjczIDEuNTE2LS44LjIzNy0uMzM1LjI2NS0xLjM3LjA4LTEuNzN6IiBmaWxsPSIjQ0QyMDI2IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz4KICAgIDxwYXRoIGQ9Ik0xMS4wMjcgMTcuMjY0YTEuMzM3IDEuMzM3IDAgMTEwLTIuNjc1IDEuMzM3IDEuMzM3IDAgMDEwIDIuNjc1ek0xMS45IDEyLjk4YS44OTIuODkyIDAgMDEtMS43NDcgMEw5LjI3IDguNTJhLjg5Mi44OTIgMCAwMS44NzQtMS4wNjRoMS43NjhhLjg5Mi44OTIgMCAwMS44NzQgMS4wNjVsLS44ODYgNC40NTh6IiBmaWxsPSIjRkZGIi8+CiAgPC9nPgo8L3N2Zz4=");
262
262
  display: flex;
263
263
  height: 22px;
264
264
  position: absolute;
@@ -437,6 +437,11 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
437
437
  const invalidIconStyles = {
438
438
  [invalidIconSide]: `${invalidIconOffset}px`
439
439
  };
440
+ const showInvalidIcon = !isValid && !this.hideInvalidIcon && !this._focused;
441
+ if (showInvalidIcon) {
442
+ const paddingProperty = invalidIconSide === 'left' ? 'paddingLeft' : 'paddingRight';
443
+ inputStyles[paddingProperty] = `${invalidIconOffset + 22 - (isFocusedOrHovered ? 1 : 0)}px`;
444
+ }
440
445
 
441
446
  const unit = this.unit
442
447
  ? html`<span aria-hidden="true" class="d2l-input-unit" @click="${this._handleUnitClick}">${this.unit}</span>`
@@ -478,7 +483,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
478
483
  type="${this._getType()}">
479
484
  <div class="d2l-input-inside-before" @keypress="${this._suppressEvent}">${this.dir === 'rtl' ? unit : ''}<slot name="${firstSlotName}" @slotchange="${this._handleSlotChange}"></slot></div>
480
485
  <div class="d2l-input-inside-after" @keypress="${this._suppressEvent}">${this.dir !== 'rtl' ? unit : ''}<slot name="${lastSlotName}" @slotchange="${this._handleSlotChange}"></slot></div>
481
- ${ (!isValid && !this.hideInvalidIcon && !this._focused) ? html`<div class="d2l-input-text-invalid-icon" style="${styleMap(invalidIconStyles)}" @click="${this._handleInvalidIconClick}"></div>` : null}
486
+ ${showInvalidIcon ? html`<div class="d2l-input-text-invalid-icon" style="${styleMap(invalidIconStyles)}" @click="${this._handleInvalidIconClick}"></div>` : null}
482
487
  </div><div id="after-slot" class="d2l-skeletize" ?hidden="${!this._hasAfterContent}"><slot name="after" @slotchange="${this._handleAfterSlotChange}"></slot></div>
483
488
  </div>
484
489
  ${this._renderInlineHelp(this._inlineHelpId)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.127.3",
3
+ "version": "3.127.5",
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",