@brightspace-ui/core 3.241.1 → 3.243.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.
@@ -0,0 +1,24 @@
1
+ import { css, html, LitElement } from 'lit';
2
+ import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
3
+
4
+ /**
5
+ * Component to be placed in the main default slot of d2l-page, providing a panel with optional header
6
+ * @slot - The main content of the main page panel
7
+ * @slot header-start - Optional start content of the main page header
8
+ * @slot header-end - Optional end content of the main page header
9
+ */
10
+ class PageMain extends PagePanelMixin(LitElement) {
11
+
12
+ static styles = [pagePanelStyles, css`
13
+ .panel-header {
14
+ top: var(--d2l-page-header-height, 0);
15
+ }
16
+ `];
17
+
18
+ render() {
19
+ return this._renderPanel(html`<slot></slot>`);
20
+ }
21
+
22
+ }
23
+
24
+ customElements.define('d2l-page-main', PageMain);
@@ -0,0 +1,74 @@
1
+ import '../colors/colors.js';
2
+ import { css, html } from 'lit';
3
+ import { classMap } from 'lit/directives/class-map.js';
4
+
5
+ export const pagePanelStyles = css`
6
+ .panel-header:not([hidden]) {
7
+ align-items: center;
8
+ display: flex;
9
+ flex-direction: row;
10
+ justify-content: space-between;
11
+ }
12
+ .panel-header {
13
+ background-color: white;
14
+ border-bottom: 1px solid var(--d2l-color-mica);
15
+ height: 70px;
16
+ overflow: hidden;
17
+ padding: 0 30px;
18
+ position: sticky;
19
+ top: 0;
20
+ z-index: 14; /* To be over sticky content of our core components, but not over the header shadow */
21
+ }
22
+
23
+ .header-start,
24
+ .header-end {
25
+ display: flex;
26
+ gap: 6px;
27
+ }
28
+
29
+ .panel {
30
+ padding: 30px;
31
+ }
32
+ `;
33
+
34
+ export const PagePanelMixin = superclass => class extends superclass {
35
+
36
+ static properties = {
37
+ _hasHeader: { state: true },
38
+ _slotVisibility: { state: true }
39
+ };
40
+
41
+ constructor() {
42
+ super();
43
+ this._hasHeader = false;
44
+ this._slotVisibility = {};
45
+ }
46
+
47
+ _renderPanel(content) {
48
+ const panelClasses = {
49
+ 'panel': true,
50
+ 'header-sticky': this._hasHeader
51
+ };
52
+ const header = html`
53
+ <div ?hidden="${!this._hasHeader}" class="panel-header">
54
+ <div class="header-start"><slot name="header-start" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
55
+ <div class="header-end"><slot name="header-end" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
56
+ </div>`;
57
+
58
+ return html`
59
+ <div>
60
+ ${header}
61
+ <div class="${classMap(panelClasses)}">${content}</div>
62
+ </div>
63
+ `;
64
+ }
65
+
66
+ #handleSlotVisibilityChange(e) {
67
+ const key = e.target.name;
68
+ const nodes = e.target.assignedNodes();
69
+ this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 };
70
+
71
+ this._hasHeader = this._slotVisibility['header-start'] || this._slotVisibility['header-end'];
72
+ }
73
+
74
+ };
@@ -0,0 +1,19 @@
1
+ import { html, LitElement } from 'lit';
2
+ import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
3
+
4
+ /**
5
+ * Component to be placed in the side-nav slot of d2l-page, providing a panel with optional header
6
+ * @slot - The main content of the side-nav page panel
7
+ * @slot header-start - Optional start content of the side-nav page header
8
+ * @slot header-end - Optional end content of the side-nav page header
9
+ */
10
+ class PageSideNav extends PagePanelMixin(LitElement) {
11
+
12
+ static styles = [pagePanelStyles];
13
+
14
+ render() {
15
+ return this._renderPanel(html`<slot></slot>`);
16
+ }
17
+ }
18
+
19
+ customElements.define('d2l-page-side-nav', PageSideNav);
@@ -0,0 +1,19 @@
1
+ import { html, LitElement } from 'lit';
2
+ import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
3
+
4
+ /**
5
+ * Component to be placed in the supporting slot of d2l-page, providing a panel with optional header
6
+ * @slot - The main content of the supporting page panel
7
+ * @slot header-start - Optional start content of the supporting page header
8
+ * @slot header-end - Optional end content of the supporting page header
9
+ */
10
+ class PageSupporting extends PagePanelMixin(LitElement) {
11
+
12
+ static styles = [pagePanelStyles];
13
+
14
+ render() {
15
+ return this._renderPanel(html`<slot></slot>`);
16
+ }
17
+ }
18
+
19
+ customElements.define('d2l-page-supporting', PageSupporting);
@@ -44,10 +44,14 @@ class Page extends LocalizeCoreElement(LitElement) {
44
44
  --d2l-page-footer-max-width: 100%;
45
45
  }
46
46
 
47
+ .header {
48
+ position: relative;
49
+ z-index: 15; /* To be over sticky content of our core components */
50
+ }
51
+
47
52
  .page.header-sticky .header {
48
53
  position: sticky;
49
54
  top: 0;
50
- z-index: 15; /* To be over sticky content of our core components */
51
55
  }
52
56
 
53
57
  .content {
@@ -86,17 +86,17 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
86
86
  .tag-list-item-container {
87
87
  --d2l-focus-ring-offset: -2px;
88
88
  align-items: center;
89
- background-color: var(--d2l-color-regolith);
89
+ background-color: var(--d2l-theme-background-color-interactive-faint-default);
90
90
  border-radius: 6px;
91
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
91
+ box-shadow: var(--d2l-theme-shadow-attached);
92
92
  box-sizing: border-box;
93
- color: var(--d2l-color-ferrite);
93
+ color: var(--d2l-theme-text-color-static-standard);
94
94
  cursor: pointer;
95
95
  display: flex;
96
96
  line-height: 1rem;
97
97
  max-width: 320px;
98
98
  min-width: 0;
99
- outline: 1px solid var(--d2l-color-gypsum);
99
+ outline: 1px solid var(--d2l-theme-border-color-subtle);
100
100
  outline-offset: -1px;
101
101
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
102
102
  white-space: nowrap;
@@ -113,10 +113,10 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
113
113
  ${getFocusRingStyles(() => focusSelector)}
114
114
  :host(:hover) .tag-list-item-container,
115
115
  ${unsafeCSS(focusSelector)} {
116
- background-color: var(--d2l-color-sylvite);
116
+ background-color: var(--d2l-theme-background-color-interactive-faint-hover);
117
117
  }
118
118
  :host(:hover) .tag-list-item-container:not(${unsafeCSS(focusSelector)}) {
119
- outline-color: var(--d2l-color-mica);
119
+ outline-color: var(--d2l-theme-border-color-standard);
120
120
  }
121
121
 
122
122
  @media (prefers-reduced-motion: reduce) {
@@ -133,7 +133,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
133
133
  --d2l-button-icon-min-width: 1.2rem;
134
134
  }
135
135
  d2l-button-icon:hover {
136
- --d2l-button-icon-fill-color: var(--d2l-color-tungsten);
136
+ --d2l-button-icon-fill-color: var(--d2l-theme-icon-color-standard);
137
137
  }
138
138
  d2l-tooltip ul {
139
139
  list-style: none;
@@ -12270,8 +12270,8 @@
12270
12270
  "properties": [
12271
12271
  {
12272
12272
  "name": "properties",
12273
- "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasSideNavPanel: { type: BooleanConstructor; attribute: string; }; hasSupportingPanel: { ...; }; navType: { ...; }; widthType: { ...; }; _allowThreePanels: { ...; }; }",
12274
- "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true}}"
12273
+ "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasMainHeader: { type: BooleanConstructor; attribute: string; }; ... 7 more ...; _demoDialogOpened: { ...; }; }",
12274
+ "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasMainHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-main-header\"},\"hasSideNavHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-header\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-header\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true},\"_demoDialogOpened\":{\"state\":true}}"
12275
12275
  },
12276
12276
  {
12277
12277
  "name": "styles",
@@ -12288,11 +12288,26 @@
12288
12288
  "type": "boolean",
12289
12289
  "default": "false"
12290
12290
  },
12291
+ {
12292
+ "name": "hasMainHeader",
12293
+ "type": "boolean",
12294
+ "default": "false"
12295
+ },
12296
+ {
12297
+ "name": "hasSideNavHeader",
12298
+ "type": "boolean",
12299
+ "default": "false"
12300
+ },
12291
12301
  {
12292
12302
  "name": "hasSideNavPanel",
12293
12303
  "type": "boolean",
12294
12304
  "default": "false"
12295
12305
  },
12306
+ {
12307
+ "name": "hasSupportingHeader",
12308
+ "type": "boolean",
12309
+ "default": "false"
12310
+ },
12296
12311
  {
12297
12312
  "name": "hasSupportingPanel",
12298
12313
  "type": "boolean",
@@ -12310,6 +12325,99 @@
12310
12325
  }
12311
12326
  ]
12312
12327
  },
12328
+ {
12329
+ "name": "d2l-page-main",
12330
+ "path": "./components/page/page-main.js",
12331
+ "description": "Component to be placed in the main default slot of d2l-page, providing a panel with optional header",
12332
+ "properties": [
12333
+ {
12334
+ "name": "styles",
12335
+ "type": "CSSResult[]",
12336
+ "default": "[\"pagePanelStyles\",null]"
12337
+ },
12338
+ {
12339
+ "name": "properties",
12340
+ "type": "{ _hasHeader: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
12341
+ "default": "{\"_hasHeader\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
12342
+ }
12343
+ ],
12344
+ "slots": [
12345
+ {
12346
+ "name": "",
12347
+ "description": "The main content of the main page panel"
12348
+ },
12349
+ {
12350
+ "name": "header-start",
12351
+ "description": "Optional start content of the main page header"
12352
+ },
12353
+ {
12354
+ "name": "header-end",
12355
+ "description": "Optional end content of the main page header"
12356
+ }
12357
+ ]
12358
+ },
12359
+ {
12360
+ "name": "d2l-page-side-nav",
12361
+ "path": "./components/page/page-side-nav.js",
12362
+ "description": "Component to be placed in the side-nav slot of d2l-page, providing a panel with optional header",
12363
+ "properties": [
12364
+ {
12365
+ "name": "styles",
12366
+ "type": "CSSResult[]",
12367
+ "default": "[\"pagePanelStyles\"]"
12368
+ },
12369
+ {
12370
+ "name": "properties",
12371
+ "type": "{ _hasHeader: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
12372
+ "default": "{\"_hasHeader\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
12373
+ }
12374
+ ],
12375
+ "slots": [
12376
+ {
12377
+ "name": "",
12378
+ "description": "The main content of the side-nav page panel"
12379
+ },
12380
+ {
12381
+ "name": "header-start",
12382
+ "description": "Optional start content of the side-nav page header"
12383
+ },
12384
+ {
12385
+ "name": "header-end",
12386
+ "description": "Optional end content of the side-nav page header"
12387
+ }
12388
+ ]
12389
+ },
12390
+ {
12391
+ "name": "d2l-page-supporting",
12392
+ "path": "./components/page/page-supporting.js",
12393
+ "description": "Component to be placed in the supporting slot of d2l-page, providing a panel with optional header",
12394
+ "properties": [
12395
+ {
12396
+ "name": "styles",
12397
+ "type": "CSSResult[]",
12398
+ "default": "[\"pagePanelStyles\"]"
12399
+ },
12400
+ {
12401
+ "name": "properties",
12402
+ "type": "{ _hasHeader: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
12403
+ "default": "{\"_hasHeader\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
12404
+ }
12405
+ ],
12406
+ "slots": [
12407
+ {
12408
+ "name": "",
12409
+ "description": "The main content of the supporting page panel"
12410
+ },
12411
+ {
12412
+ "name": "header-start",
12413
+ "description": "Optional start content of the supporting page header"
12414
+ },
12415
+ {
12416
+ "name": "header-end",
12417
+ "description": "Optional end content of the supporting page header"
12418
+ }
12419
+ ]
12420
+ },
12313
12421
  {
12314
12422
  "name": "d2l-page",
12315
12423
  "path": "./components/page/page.js",
@@ -12323,7 +12431,7 @@
12323
12431
  {
12324
12432
  "name": "styles",
12325
12433
  "type": "CSSResult",
12326
- "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding: 0.75rem 0;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
12434
+ "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding: 0.75rem 0;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
12327
12435
  },
12328
12436
  {
12329
12437
  "name": "widthType",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.241.1",
3
+ "version": "3.243.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",