@brightspace-ui/core 3.137.0 → 3.137.2
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.
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import '../button/button-icon.js';
|
|
2
2
|
import '../colors/colors.js';
|
|
3
3
|
import { bodySmallStyles, heading4Styles } from '../typography/styles.js';
|
|
4
|
-
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
+
import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
|
|
5
5
|
import { formatDate, getDateTimeDescriptor } from '@brightspace-ui/intl/lib/dateTime.js';
|
|
6
6
|
import { formatDateInISO, getClosestValidDate, getDateFromDateObj, getDateFromISODate, getToday, isDateInRange } from '../../helpers/dateTime.js';
|
|
7
7
|
import { classMap } from 'lit/directives/class-map.js';
|
|
8
8
|
import { findComposedAncestor } from '../../helpers/dom.js';
|
|
9
|
+
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
9
10
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
10
11
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
12
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
@@ -278,6 +279,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
278
279
|
margin-left: auto;
|
|
279
280
|
margin-right: auto;
|
|
280
281
|
opacity: 0;
|
|
282
|
+
outline-offset: -1px;
|
|
281
283
|
padding: 3px;
|
|
282
284
|
position: relative;
|
|
283
285
|
text-align: center;
|
|
@@ -360,57 +362,46 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
360
362
|
background-color: var(--d2l-color-gypsum);
|
|
361
363
|
}
|
|
362
364
|
|
|
363
|
-
td
|
|
364
|
-
td:focus button:not(.d2l-calendar-date-selected):not(:disabled).d2l-calendar-date-hover {
|
|
365
|
-
box-shadow: 0 0 0 2px var(--d2l-color-gypsum), 0 0 0 4px var(--d2l-color-celestine);
|
|
366
|
-
transition: none;
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
td, .d2l-calendar-date:focus {
|
|
365
|
+
td, .d2l-calendar-date:${unsafeCSS(getFocusPseudoClass())} {
|
|
370
366
|
outline: none;
|
|
371
367
|
}
|
|
372
368
|
|
|
373
|
-
td
|
|
374
|
-
|
|
375
|
-
padding: 0;
|
|
369
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date:not(:disabled) {
|
|
370
|
+
outline: 2px solid var(--d2l-color-celestine);
|
|
376
371
|
}
|
|
377
372
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
373
|
+
@keyframes initial-focus {
|
|
374
|
+
from {
|
|
375
|
+
outline: 0 solid var(--d2l-color-celestine);
|
|
376
|
+
padding: 0;
|
|
377
|
+
}
|
|
381
378
|
}
|
|
382
379
|
|
|
383
|
-
td
|
|
384
|
-
|
|
380
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date.d2l-calendar-date-initial {
|
|
381
|
+
animation: 200ms ease-in initial-focus;
|
|
385
382
|
}
|
|
386
383
|
|
|
387
384
|
@media (prefers-reduced-motion: reduce) {
|
|
388
|
-
td
|
|
389
|
-
|
|
385
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date.d2l-calendar-date-initial,
|
|
386
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date-initial.d2l-calendar-date-day-info::after {
|
|
387
|
+
animation: none;
|
|
390
388
|
}
|
|
391
389
|
}
|
|
392
390
|
|
|
393
391
|
.d2l-calendar-date.d2l-calendar-date-selected {
|
|
394
392
|
background-color: var(--d2l-color-celestine-plus-2);
|
|
395
|
-
|
|
396
|
-
padding: 2px;
|
|
393
|
+
outline: 1px solid var(--d2l-color-celestine);
|
|
397
394
|
}
|
|
398
395
|
|
|
399
396
|
.d2l-calendar-date.d2l-calendar-date-selected:disabled {
|
|
400
397
|
background-color: white;
|
|
401
|
-
border-style: none;
|
|
402
398
|
color: rgba(73, 76, 78, 0.5);
|
|
399
|
+
outline: none;
|
|
403
400
|
}
|
|
404
401
|
|
|
405
|
-
td
|
|
406
|
-
border-width: 0;
|
|
407
|
-
box-shadow: 0 0 0 2px var(--d2l-color-celestine-plus-2), 0 0 0 4px var(--d2l-color-celestine);
|
|
408
|
-
padding: 0;
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
td:focus .d2l-calendar-date.d2l-calendar-date-selected:disabled {
|
|
412
|
-
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--d2l-color-celestine);
|
|
402
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date.d2l-calendar-date-selected:disabled {
|
|
413
403
|
opacity: 1;
|
|
404
|
+
outline: 2px solid var(--d2l-color-celestine);
|
|
414
405
|
}
|
|
415
406
|
|
|
416
407
|
.d2l-calendar-date.d2l-calendar-date-today,
|
|
@@ -419,6 +410,16 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
419
410
|
font-weight: 700;
|
|
420
411
|
}
|
|
421
412
|
|
|
413
|
+
@keyframes initial-focus-day-info {
|
|
414
|
+
from {
|
|
415
|
+
bottom: 1px;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date-initial.d2l-calendar-date-day-info::after {
|
|
420
|
+
animation: 200ms ease-in initial-focus-day-info;
|
|
421
|
+
}
|
|
422
|
+
|
|
422
423
|
.d2l-calendar-date-day-info::after {
|
|
423
424
|
background-color: var(--d2l-color-celestine);
|
|
424
425
|
border-radius: 3px;
|
|
@@ -429,11 +430,20 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
429
430
|
position: absolute;
|
|
430
431
|
width: 6px;
|
|
431
432
|
}
|
|
432
|
-
|
|
433
|
-
|
|
433
|
+
|
|
434
|
+
.d2l-calendar-date-selected.d2l-calendar-date-day-info::after,
|
|
435
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date-day-info::after {
|
|
436
|
+
bottom: 3px;
|
|
434
437
|
}
|
|
435
|
-
|
|
436
|
-
|
|
438
|
+
@media (prefers-contrast: more) {
|
|
439
|
+
.d2l-calendar-date-day-info::after {
|
|
440
|
+
background-color: FieldText;
|
|
441
|
+
forced-color-adjust: none;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
td:${unsafeCSS(getFocusPseudoClass())} .d2l-calendar-date {
|
|
445
|
+
outline-color: Highlight !important;
|
|
446
|
+
}
|
|
437
447
|
}
|
|
438
448
|
|
|
439
449
|
`];
|
|
@@ -41,9 +41,9 @@ When provided with a `name`, the group will participate in forms with the `value
|
|
|
41
41
|
import '@brightspace-ui/core/components/inputs/input-radio-group.js';
|
|
42
42
|
</script>
|
|
43
43
|
<d2l-input-radio-group label="Bread" name="bread">
|
|
44
|
-
<d2l-input-radio label="Whole wheat"
|
|
45
|
-
<d2l-input-radio label="Baguette"
|
|
46
|
-
<d2l-input-radio label="Marble Rye"
|
|
44
|
+
<d2l-input-radio label="Whole wheat" value="whole-wheat" checked></d2l-input-radio>
|
|
45
|
+
<d2l-input-radio label="Baguette" value="baguette"></d2l-input-radio>
|
|
46
|
+
<d2l-input-radio label="Marble Rye" value="marble-rye"></d2l-input-radio>
|
|
47
47
|
</d2l-input-radio-group>
|
|
48
48
|
```
|
|
49
49
|
|
|
@@ -80,9 +80,9 @@ The `<d2l-input-radio>` element represents an option within its parent `<d2l-inp
|
|
|
80
80
|
import '@brightspace-ui/core/components/inputs/input-radio-group.js';
|
|
81
81
|
</script>
|
|
82
82
|
<d2l-input-radio-group label="Bread" name="bread">
|
|
83
|
-
<d2l-input-radio label="Whole wheat"
|
|
84
|
-
<d2l-input-radio label="Baguette"
|
|
85
|
-
<d2l-input-radio label="Marble Rye"
|
|
83
|
+
<d2l-input-radio label="Whole wheat" value="whole-wheat" checked></d2l-input-radio>
|
|
84
|
+
<d2l-input-radio label="Baguette" value="baguette"></d2l-input-radio>
|
|
85
|
+
<d2l-input-radio label="Marble Rye" value="marble-rye"></d2l-input-radio>
|
|
86
86
|
</d2l-input-radio-group>
|
|
87
87
|
```
|
|
88
88
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.137.
|
|
3
|
+
"version": "3.137.2",
|
|
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",
|