@brightspace-ui/core 3.52.1 → 3.54.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 (11) hide show
  1. package/components/meter/README.md +2 -0
  2. package/components/meter/demo/meter.html +4 -4
  3. package/components/meter/meter-circle.js +29 -40
  4. package/components/meter/meter-mixin.js +6 -0
  5. package/components/meter/meter-radial.js +12 -41
  6. package/components/meter/meter-styles.js +40 -0
  7. package/components/tabs/README.md +7 -0
  8. package/components/tabs/tab-panel-mixin.js +1 -1
  9. package/custom-elements.json +41 -2
  10. package/mixins/rtl/README.md +2 -0
  11. package/package.json +1 -1
package/components/meter/README.md CHANGED
@@ -85,6 +85,7 @@ Radial meters appear as a half circle. They have more visual weight than a line
85
85
  * `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
86
86
  * `%` in the string will be replaced with percentage value
87
87
  * `x/y` in the string will be replaced with fraction with the proper language support
88
+ * `text-hidden` (Boolean): Hides the text visually
88
89
  <!-- docs: end hidden content -->
89
90
 
90
91
 
@@ -124,4 +125,5 @@ All `meter` components have a `foreground-light` style that ensures accessibl
124
125
  * `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
125
126
  * `%` in the string will be replaced with percentage value
126
127
  * `x/y` in the string will be replaced with fraction with the proper language support
128
+ * `text-hidden` (Boolean): Hides the text visually
127
129
  <!-- docs: end hidden content -->
package/components/meter/demo/meter.html CHANGED
@@ -74,7 +74,7 @@
74
74
  <div class="dark-background">
75
75
  <d2l-meter-radial value="0" max="10" foreground-light></d2l-meter-radial>
76
76
  <d2l-meter-radial value="5" max="13" foreground-light></d2l-meter-radial>
77
- <d2l-meter-radial value="5" max="13" percent foreground-light></d2l-meter-radial>
77
+ <d2l-meter-radial value="5" max="13" percent foreground-light text="Made some progress" text-hidden></d2l-meter-radial>
78
78
  <d2l-meter-radial value="10" max="10" foreground-light></d2l-meter-radial>
79
79
  <d2l-meter-radial value="5" max="10" text="Completed" foreground-light></d2l-meter-radial>
80
80
  <d2l-meter-radial value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-radial>
@@ -90,14 +90,14 @@
90
90
  <d2l-meter-circle value="0" max="10"></d2l-meter-circle>
91
91
  <d2l-meter-circle value="5" max="13"></d2l-meter-circle>
92
92
  <d2l-meter-circle value="5" max="13" percent></d2l-meter-circle>
93
- <d2l-meter-circle value="10" max="10"></d2l-meter-circle>
93
+ <d2l-meter-circle value="10" max="10" text="Completed"></d2l-meter-circle>
94
94
  <d2l-meter-circle value="19" max="26" style="width: 25%;"></d2l-meter-circle>
95
95
  </div>
96
96
  <div class="dark-background">
97
97
  <d2l-meter-circle value="0" max="10" foreground-light></d2l-meter-circle>
98
98
  <d2l-meter-circle value="5" max="13" foreground-light></d2l-meter-circle>
99
- <d2l-meter-circle value="5" max="13" percent foreground-light></d2l-meter-circle>
100
- <d2l-meter-circle value="10" max="10" foreground-light></d2l-meter-circle>
99
+ <d2l-meter-circle value="5" max="13" percent foreground-light text="Made some progress" text-hidden></d2l-meter-circle>
100
+ <d2l-meter-circle value="10" max="10" foreground-light text="Completed"></d2l-meter-circle>
101
101
  <d2l-meter-circle value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-circle>
102
102
  </div>
103
103
  </template>
package/components/meter/meter-circle.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import '../colors/colors.js';
2
- import { css, html, LitElement } from 'lit';
3
- import { bodyStandardStyles } from '../typography/styles.js';
2
+ import { bodySmallStyles, bodyStandardStyles } from '../typography/styles.js';
3
+ import { css, html, LitElement, nothing } from 'lit';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { MeterMixin } from './meter-mixin.js';
6
+ import { meterStyles } from './meter-styles.js';
6
7
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
7
8
 
8
9
  /**
@@ -10,40 +11,21 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
10
11
  */
11
12
  class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
12
13
  static get styles() {
13
- return [ bodyStandardStyles, css`
14
+ return [ bodySmallStyles, bodyStandardStyles, meterStyles, css`
14
15
  :host {
15
16
  display: inline-block;
16
17
  width: 2.4rem;
17
18
  }
18
- .d2l-meter-circle-full-bar,
19
- .d2l-meter-circle-progress-bar {
20
- fill: none;
21
- stroke-linecap: round;
19
+ .d2l-meter-full-bar,
20
+ .d2l-meter-progress-bar {
22
21
  stroke-width: 6;
23
22
  }
24
- .d2l-meter-circle-full-bar {
23
+ .d2l-meter-full-bar {
25
24
  fill: var(--d2l-meter-circle-fill, none);
26
- stroke: var(--d2l-color-gypsum);
27
25
  }
28
- :host([foreground-light]) .d2l-meter-circle-full-bar {
29
- stroke: rgba(255, 255, 255, 0.5);
30
- }
31
- .d2l-meter-circle-progress-bar {
32
- stroke: var(--d2l-color-celestine);
33
- }
34
- :host([foreground-light]) .d2l-meter-circle-progress-bar {
35
- stroke: white;
36
- }
37
- .d2l-meter-circle-text {
38
- fill: var(--d2l-color-ferrite);
26
+ .d2l-meter-text {
39
27
  font-size: 0.55rem;
40
28
  }
41
- :host([foreground-light]) .d2l-meter-circle-text {
42
- fill: white;
43
- }
44
- :host([dir="rtl"]) .d2l-meter-circle-text-ltr {
45
- direction: ltr;
46
- }
47
29
  ` ];
48
30
  }
49
31
 
@@ -58,26 +40,33 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
58
40
  const primary = this._primary(this.value, this.max) || '';
59
41
  const primaryAria = this._primary(this.value, this.max, true) || '';
60
42
  const secondaryAria = this._secondary(this.value, this.max, this.text, true);
43
+ const secondary = this._secondary(this.value, this.max, this.text);
44
+ const secondaryTextElement = this.text && !this.textHidden
45
+ ? html`<div class="d2l-body-small d2l-meter-text">${secondary}</div>`
46
+ : nothing;
61
47
  const textClasses = {
62
- 'd2l-meter-circle-text-ltr': !this.percent,
48
+ 'd2l-meter-text-ltr': !this.percent,
63
49
  'd2l-body-standard': true,
64
- 'd2l-meter-circle-text': true
50
+ 'd2l-meter-text': true
65
51
  };
66
52
 
67
53
  return html`
68
- <svg viewBox="0 0 48 48" shape-rendering="geometricPrecision" role="img" aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
69
- <circle class="d2l-meter-circle-full-bar" cx="24" cy="24" r="21"></circle>
70
- <circle
71
- class="d2l-meter-circle-progress-bar"
72
- cx="24" cy="24" r="21"
73
- stroke-dasharray="${progressFill} ${space}"
74
- stroke-dashoffset="${dashOffset}"
75
- visibility="${visibility}"></circle>
54
+ <div class="d2l-meter-container" aria-label="${this._ariaLabel(primaryAria, secondaryAria)}" role="img">
55
+ <svg viewBox="0 0 48 48" shape-rendering="geometricPrecision">
56
+ <circle class="d2l-meter-full-bar" cx="24" cy="24" r="21"></circle>
57
+ <circle
58
+ class="d2l-meter-progress-bar"
59
+ cx="24" cy="24" r="21"
60
+ stroke-dasharray="${progressFill} ${space}"
61
+ stroke-dashoffset="${dashOffset}"
62
+ visibility="${visibility}"></circle>
76
63
 
77
- <text class=${classMap(textClasses)} x="24" y="28" text-anchor="middle">
78
- ${primary}
79
- </text>
80
- </svg>
64
+ <text class=${classMap(textClasses)} x="24" y="28" text-anchor="middle">
65
+ ${primary}
66
+ </text>
67
+ </svg>
68
+ ${secondaryTextElement}
69
+ </div>
81
70
  `;
82
71
  }
83
72
  }
package/components/meter/meter-mixin.js CHANGED
@@ -21,6 +21,11 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
21
21
  * @type {string}
22
22
  */
23
23
  text: { type: String },
24
+ /**
25
+ * Hides the text visually
26
+ * @type {boolean}
27
+ */
28
+ textHidden: { type: Boolean, attribute: 'text-hidden' },
24
29
  /**
25
30
  * REQUIRED: Current number of completed units.
26
31
  * Valid values: A number between 0 and max
@@ -34,6 +39,7 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
34
39
  super();
35
40
  this.max = 100;
36
41
  this.percent = false;
42
+ this.textHidden = false;
37
43
  this.value = 0;
38
44
 
39
45
  this._namespace = 'components.meter-mixin';
package/components/meter/meter-radial.js CHANGED
@@ -3,6 +3,7 @@ import { bodySmallStyles, heading4Styles } from '../typography/styles.js';
3
3
  import { css, html, LitElement, nothing } from 'lit';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { MeterMixin } from './meter-mixin.js';
6
+ import { meterStyles } from './meter-styles.js';
6
7
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
7
8
 
8
9
  /**
@@ -10,47 +11,15 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
10
11
  */
11
12
  class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
12
13
  static get styles() {
13
- return [ heading4Styles, bodySmallStyles, css`
14
+ return [ heading4Styles, bodySmallStyles, meterStyles, css`
14
15
  :host {
15
16
  display: inline-block;
16
17
  width: 4.2rem;
17
18
  }
18
- .d2l-meter-radial {
19
- display: flex;
20
- flex-direction: column;
21
- justify-content: center;
22
- }
23
- .d2l-meter-radial-full-bar,
24
- .d2l-meter-radial-progress-bar {
25
- fill: none;
26
- stroke-linecap: round;
19
+ .d2l-meter-full-bar,
20
+ .d2l-meter-progress-bar {
27
21
  stroke-width: 9;
28
22
  }
29
- .d2l-meter-radial-full-bar {
30
- stroke: var(--d2l-color-gypsum);
31
- }
32
- :host([foreground-light]) .d2l-meter-radial-full-bar {
33
- stroke: rgba(255, 255, 255, 0.5);
34
- }
35
- .d2l-meter-radial-progress-bar {
36
- stroke: var(--d2l-color-celestine);
37
- }
38
- :host([foreground-light]) .d2l-meter-radial-progress-bar {
39
- stroke: white;
40
- }
41
- .d2l-meter-radial-text {
42
- color: var(--d2l-color-ferrite);
43
- fill: var(--d2l-color-ferrite);
44
- line-height: 0.8rem;
45
- text-align: center;
46
- }
47
- :host([foreground-light]) .d2l-meter-radial-text {
48
- color: white;
49
- fill: white;
50
- }
51
- :host([dir="rtl"]) .d2l-meter-radial-text-ltr {
52
- direction: ltr;
53
- }
54
23
  ` ];
55
24
  }
56
25
 
@@ -63,22 +32,24 @@ class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
63
32
  const secondary = this._secondary(this.value, this.max, this.text);
64
33
  const primaryAria = this._primary(this.value, this.max, true) || '';
65
34
  const secondaryAria = this._secondary(this.value, this.max, this.text, true) || '';
66
- const secondaryTextElement = this.text ? html`<div class="d2l-body-small d2l-meter-radial-text">${secondary}</div>` : nothing;
35
+ const secondaryTextElement = this.text && !this.textHidden
36
+ ? html`<div class="d2l-body-small d2l-meter-text">${secondary}</div>`
37
+ : nothing;
67
38
  const textClasses = {
68
- 'd2l-meter-radial-text-ltr': !this.percent,
39
+ 'd2l-meter-text-ltr': !this.percent,
69
40
  'd2l-heading-4': true,
70
- 'd2l-meter-radial-text': true
41
+ 'd2l-meter-text': true
71
42
  };
72
43
 
73
44
  return html `
74
45
  <div
75
- class="d2l-meter-radial"
46
+ class="d2l-meter-container"
76
47
  role="img"
77
48
  aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
78
49
  <svg viewBox="0 0 84 46">
79
- <path class="d2l-meter-radial-full-bar" d="M5 40a37 35 0 0 1 74 0" />
50
+ <path class="d2l-meter-full-bar" d="M5 40a37 35 0 0 1 74 0" />
80
51
  <path
81
- class="d2l-meter-radial-progress-bar"
52
+ class="d2l-meter-progress-bar"
82
53
  d="M5 40a37 35 0 0 1 74 0"
83
54
  stroke-dasharray="${progressFill} ${lengthOfLine}"
84
55
  stroke-dashoffset="0"
package/components/meter/meter-styles.js ADDED
@@ -0,0 +1,40 @@
1
+ import '../colors/colors.js';
2
+ import { css } from 'lit';
3
+
4
+ export const meterStyles = css`
5
+ .d2l-meter-container {
6
+ display: flex;
7
+ flex-direction: column;
8
+ justify-content: center;
9
+ }
10
+ .d2l-meter-full-bar,
11
+ .d2l-meter-progress-bar {
12
+ fill: none;
13
+ stroke-linecap: round;
14
+ }
15
+ .d2l-meter-full-bar {
16
+ stroke: var(--d2l-color-gypsum);
17
+ }
18
+ :host([foreground-light]) .d2l-meter-full-bar {
19
+ stroke: rgba(255, 255, 255, 0.5);
20
+ }
21
+ .d2l-meter-progress-bar {
22
+ stroke: var(--d2l-color-celestine);
23
+ }
24
+ :host([foreground-light]) .d2l-meter-progress-bar {
25
+ stroke: white;
26
+ }
27
+ .d2l-meter-text {
28
+ color: var(--d2l-color-ferrite);
29
+ fill: var(--d2l-color-ferrite);
30
+ line-height: 0.8rem;
31
+ text-align: center;
32
+ }
33
+ :host([foreground-light]) .d2l-meter-text {
34
+ color: white;
35
+ fill: white;
36
+ }
37
+ :host([dir="rtl"]) .d2l-meter-text-ltr {
38
+ direction: ltr;
39
+ }
40
+ `;
package/components/tabs/README.md CHANGED
@@ -100,3 +100,10 @@ Selecting a tab in the tab bar causes the relevant tab panel to be displayed. Ta
100
100
  ### Events
101
101
  - `d2l-tab-panel-selected`: dispatched when a tab is selected
102
102
  <!-- docs: end hidden content -->
103
+
104
+ ## Accessibility
105
+
106
+ The `tabs` components were built following [W3C best practices for Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) with Manual Activation. Important features include:
107
+ - Following recommended keyboard control patterns (with the exception of the "Optional" Home, End, and Delete key patterns)
108
+ - Using the roles of `tablist` and `tab` appropriately in order to facilitate screen reader information (e.g., "tab, 2 of 7")
109
+ - Using `aria-selected` to indicate `tab` selection state
package/components/tabs/tab-panel-mixin.js CHANGED
@@ -21,7 +21,7 @@ export const TabPanelMixin = superclass => class extends superclass {
21
21
  */
22
22
  selected: { type: Boolean, reflect: true },
23
23
  /**
24
- * REQUIRED: The text used for the tab, as well as labelling the panel
24
+ * ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel
25
25
  * @type {string}
26
26
  */
27
27
  text: { type: String }
package/custom-elements.json CHANGED
@@ -9935,6 +9935,12 @@
9935
9935
  "type": "boolean",
9936
9936
  "default": "false"
9937
9937
  },
9938
+ {
9939
+ "name": "text-hidden",
9940
+ "description": "Hides the text visually",
9941
+ "type": "boolean",
9942
+ "default": "false"
9943
+ },
9938
9944
  {
9939
9945
  "name": "value",
9940
9946
  "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
@@ -9963,6 +9969,13 @@
9963
9969
  "type": "boolean",
9964
9970
  "default": "false"
9965
9971
  },
9972
+ {
9973
+ "name": "textHidden",
9974
+ "attribute": "text-hidden",
9975
+ "description": "Hides the text visually",
9976
+ "type": "boolean",
9977
+ "default": "false"
9978
+ },
9966
9979
  {
9967
9980
  "name": "value",
9968
9981
  "attribute": "value",
@@ -10000,6 +10013,12 @@
10000
10013
  "type": "boolean",
10001
10014
  "default": "false"
10002
10015
  },
10016
+ {
10017
+ "name": "text-hidden",
10018
+ "description": "Hides the text visually",
10019
+ "type": "boolean",
10020
+ "default": "false"
10021
+ },
10003
10022
  {
10004
10023
  "name": "value",
10005
10024
  "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
@@ -10035,6 +10054,13 @@
10035
10054
  "type": "boolean",
10036
10055
  "default": "false"
10037
10056
  },
10057
+ {
10058
+ "name": "textHidden",
10059
+ "attribute": "text-hidden",
10060
+ "description": "Hides the text visually",
10061
+ "type": "boolean",
10062
+ "default": "false"
10063
+ },
10038
10064
  {
10039
10065
  "name": "value",
10040
10066
  "attribute": "value",
@@ -10066,6 +10092,12 @@
10066
10092
  "type": "boolean",
10067
10093
  "default": "false"
10068
10094
  },
10095
+ {
10096
+ "name": "text-hidden",
10097
+ "description": "Hides the text visually",
10098
+ "type": "boolean",
10099
+ "default": "false"
10100
+ },
10069
10101
  {
10070
10102
  "name": "value",
10071
10103
  "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
@@ -10094,6 +10126,13 @@
10094
10126
  "type": "boolean",
10095
10127
  "default": "false"
10096
10128
  },
10129
+ {
10130
+ "name": "textHidden",
10131
+ "attribute": "text-hidden",
10132
+ "description": "Hides the text visually",
10133
+ "type": "boolean",
10134
+ "default": "false"
10135
+ },
10097
10136
  {
10098
10137
  "name": "value",
10099
10138
  "attribute": "value",
@@ -12547,7 +12586,7 @@
12547
12586
  "attributes": [
12548
12587
  {
12549
12588
  "name": "text",
12550
- "description": "REQUIRED: The text used for the tab, as well as labelling the panel",
12589
+ "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel",
12551
12590
  "type": "string"
12552
12591
  },
12553
12592
  {
@@ -12567,7 +12606,7 @@
12567
12606
  {
12568
12607
  "name": "text",
12569
12608
  "attribute": "text",
12570
- "description": "REQUIRED: The text used for the tab, as well as labelling the panel",
12609
+ "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel",
12571
12610
  "type": "string"
12572
12611
  },
12573
12612
  {
package/mixins/rtl/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # RtlMixin
2
2
 
3
+ > **Obsolete:** new uses of `RtlMixin` should not be introduced. Instead, use [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
4
+
3
5
  The `RtlMixin` creates `dir` attributes on host elements based on the document's `dir`, enabling components to define RTL styles for elements within their shadow-DOMs via `:host([dir="rtl"])`. It is possible to opt-out our this behavior by explicitly setting a `dir` attribute (ex. for testing).
4
6
 
5
7
  ## Usage
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.52.1",
3
+ "version": "3.54.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",