@fluentui/web-components 3.0.0-beta.85 → 3.0.0-beta.87

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 (36) hide show
  1. package/CHANGELOG.md +21 -2
  2. package/dist/dts/dropdown/dropdown.base.d.ts +23 -0
  3. package/dist/dts/dropdown/dropdown.d.ts +0 -32
  4. package/dist/dts/tree/index.d.ts +1 -0
  5. package/dist/dts/tree/tree.base.d.ts +68 -0
  6. package/dist/dts/tree/tree.d.ts +7 -67
  7. package/dist/dts/tree-item/index.d.ts +1 -0
  8. package/dist/dts/tree-item/tree-item.base.d.ts +99 -0
  9. package/dist/dts/tree-item/tree-item.d.ts +5 -88
  10. package/dist/dts/tree-item/tree-item.options.d.ts +2 -2
  11. package/dist/esm/dropdown/dropdown.base.js +50 -0
  12. package/dist/esm/dropdown/dropdown.base.js.map +1 -1
  13. package/dist/esm/dropdown/dropdown.js +12 -72
  14. package/dist/esm/dropdown/dropdown.js.map +1 -1
  15. package/dist/esm/tree/index.js +1 -0
  16. package/dist/esm/tree/index.js.map +1 -1
  17. package/dist/esm/tree/tree.base.js +232 -0
  18. package/dist/esm/tree/tree.base.js.map +1 -0
  19. package/dist/esm/tree/tree.js +10 -229
  20. package/dist/esm/tree/tree.js.map +1 -1
  21. package/dist/esm/tree/tree.template.js +3 -2
  22. package/dist/esm/tree/tree.template.js.map +1 -1
  23. package/dist/esm/tree-item/index.js +1 -0
  24. package/dist/esm/tree-item/index.js.map +1 -1
  25. package/dist/esm/tree-item/tree-item.base.js +165 -0
  26. package/dist/esm/tree-item/tree-item.base.js.map +1 -0
  27. package/dist/esm/tree-item/tree-item.js +13 -149
  28. package/dist/esm/tree-item/tree-item.js.map +1 -1
  29. package/dist/esm/tree-item/tree-item.styles.js +8 -21
  30. package/dist/esm/tree-item/tree-item.styles.js.map +1 -1
  31. package/dist/esm/tree-item/tree-item.template.js +5 -7
  32. package/dist/esm/tree-item/tree-item.template.js.map +1 -1
  33. package/dist/web-components.d.ts +127 -120
  34. package/dist/web-components.js +981 -940
  35. package/dist/web-components.min.js +229 -229
  36. package/package.json +1 -1
package/dist/esm/tree/tree.template.js CHANGED
@@ -1,4 +1,5 @@
1
- import { children, elements, html } from '@microsoft/fast-element';
1
+ import { children, html } from '@microsoft/fast-element';
2
+ import { isTreeItem } from '../tree-item/tree-item.options';
2
3
  export const template = html `
3
4
  <template
4
5
  tabindex="0"
@@ -9,7 +10,7 @@ export const template = html `
9
10
  @change="${(x, c) => x.changeHandler(c.event)}"
10
11
  ${children({
11
12
  property: 'childTreeItems',
12
- filter: elements(),
13
+ filter: node => isTreeItem(node),
13
14
  })}
14
15
  >
15
16
  <slot></slot>
package/dist/esm/tree/tree.template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGnE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;;cAGpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;eACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;MAC3C,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,QAAQ,EAAE;CACnB,CAAC;;;;CAIL,CAAC"}
1
+ {"version":3,"file":"tree.template.js","sourceRoot":"","sources":["../../../src/tree/tree.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAM;;;cAGpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;eACrD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;MAC3C,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;CACjC,CAAC;;;;CAIL,CAAC"}
package/dist/esm/tree-item/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { BaseTreeItem } from './tree-item.base.js';
1
2
  export { TreeItem } from './tree-item.js';
2
3
  export { template as TreeItemTemplate } from './tree-item.template.js';
3
4
  export { styles as TreeItemStyles } from './tree-item.styles.js';
package/dist/esm/tree-item/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
package/dist/esm/tree-item/tree-item.base.js ADDED
@@ -0,0 +1,165 @@
1
+ import { __decorate } from "tslib";
2
+ import { attr, css, FASTElement, observable } from '@microsoft/fast-element';
3
+ import { toggleState } from '../utils/element-internals.js';
4
+ import { isTreeItem } from './tree-item.options.js';
5
+ export class BaseTreeItem extends FASTElement {
6
+ constructor() {
7
+ super();
8
+ /**
9
+ * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
10
+ *
11
+ * @internal
12
+ */
13
+ this.elementInternals = this.attachInternals();
14
+ /**
15
+ * When true, the control will be appear expanded by user interaction.
16
+ * @public
17
+ * HTML Attribute: `expanded`
18
+ */
19
+ this.expanded = false;
20
+ /**
21
+ * When true, the control will appear selected by user interaction.
22
+ * @public
23
+ * @remarks
24
+ * HTML Attribute: selected
25
+ */
26
+ this.selected = false;
27
+ /**
28
+ * When true, the control has no child tree items
29
+ * @public
30
+ * HTML Attribute: empty
31
+ */
32
+ this.empty = false;
33
+ this.childTreeItems = [];
34
+ this.elementInternals.role = 'treeitem';
35
+ }
36
+ /**
37
+ * Handles changes to the expanded attribute
38
+ * @param prev - the previous state
39
+ * @param next - the next state
40
+ *
41
+ * @public
42
+ */
43
+ expandedChanged(prev, next) {
44
+ toggleState(this.elementInternals, 'expanded', next);
45
+ if (this.childTreeItems && this.childTreeItems.length > 0) {
46
+ this.elementInternals.ariaExpanded = next ? 'true' : 'false';
47
+ }
48
+ }
49
+ /**
50
+ * Handles changes to the selected attribute
51
+ * @param prev - the previous state
52
+ * @param next - the next state
53
+ *
54
+ * @internal
55
+ */
56
+ selectedChanged(prev, next) {
57
+ this.$emit('change');
58
+ toggleState(this.elementInternals, 'selected', next);
59
+ this.elementInternals.ariaSelected = next ? 'true' : 'false';
60
+ }
61
+ dataIndentChanged(prev, next) {
62
+ if (this.styles !== undefined) {
63
+ this.$fastController.removeStyles(this.styles);
64
+ }
65
+ this.styles = css `
66
+ :host {
67
+ --indent: ${next};
68
+ }
69
+ `;
70
+ this.$fastController.addStyles(this.styles);
71
+ }
72
+ /**
73
+ * Handles changes to the child tree items
74
+ *
75
+ * @public
76
+ */
77
+ childTreeItemsChanged() {
78
+ this.empty = this.childTreeItems?.length === 0;
79
+ this.updateChildTreeItems();
80
+ }
81
+ /**
82
+ * Updates the childrens indent
83
+ *
84
+ * @public
85
+ */
86
+ updateChildTreeItems() {
87
+ if (!this.childTreeItems?.length) {
88
+ return;
89
+ }
90
+ this.childTreeItems.forEach(item => {
91
+ this.setIndent(item);
92
+ });
93
+ }
94
+ /**
95
+ * Sets the indent for each item
96
+ */
97
+ setIndent(item) {
98
+ const indent = this.dataIndent ?? 0;
99
+ item.dataIndent = indent + 1;
100
+ }
101
+ /**
102
+ * Handle focus events
103
+ *
104
+ * @public
105
+ */
106
+ focusHandler(e) {
107
+ if (e.target === this ||
108
+ // In case where the tree-item contains a focusable element, we should not set the tabindex to 0 when the focus is on its child focusable element,
109
+ // so users can shift+tab to navigate to the tree-item from its child focusable element.
110
+ this.contains(e.target)) {
111
+ this.setAttribute('tabindex', '0');
112
+ }
113
+ }
114
+ /**
115
+ * Handle blur events
116
+ *
117
+ * @public
118
+ */
119
+ blurHandler(e) {
120
+ if (e.target === this) {
121
+ this.setAttribute('tabindex', '-1');
122
+ }
123
+ }
124
+ /**
125
+ * Toggle the expansion state of the tree item
126
+ *
127
+ * @public
128
+ */
129
+ toggleExpansion() {
130
+ if (this.childTreeItems?.length) {
131
+ this.expanded = !this.expanded;
132
+ }
133
+ }
134
+ /**
135
+ * Toggle the single selection state of the tree item
136
+ *
137
+ * @public
138
+ */
139
+ toggleSelection() {
140
+ this.selected = !this.selected;
141
+ }
142
+ /**
143
+ * Whether the tree is nested
144
+ * @internal
145
+ */
146
+ get isNestedItem() {
147
+ return isTreeItem(this.parentElement);
148
+ }
149
+ }
150
+ __decorate([
151
+ attr({ mode: 'boolean' })
152
+ ], BaseTreeItem.prototype, "expanded", void 0);
153
+ __decorate([
154
+ attr({ mode: 'boolean' })
155
+ ], BaseTreeItem.prototype, "selected", void 0);
156
+ __decorate([
157
+ attr({ mode: 'boolean' })
158
+ ], BaseTreeItem.prototype, "empty", void 0);
159
+ __decorate([
160
+ attr({ attribute: 'data-indent' })
161
+ ], BaseTreeItem.prototype, "dataIndent", void 0);
162
+ __decorate([
163
+ observable
164
+ ], BaseTreeItem.prototype, "childTreeItems", void 0);
165
+ //# sourceMappingURL=tree-item.base.js.map
package/dist/esm/tree-item/tree-item.base.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":"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"}
package/dist/esm/tree-item/tree-item.js CHANGED
@@ -1,35 +1,10 @@
1
1
  import { __decorate } from "tslib";
2
- import { attr, css, FASTElement, observable } from '@microsoft/fast-element';
3
- import { toggleState } from '../utils/element-internals.js';
4
- import { isTreeItem, TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
5
- export class TreeItem extends FASTElement {
2
+ import { attr } from '@microsoft/fast-element';
3
+ import { TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
4
+ import { BaseTreeItem } from './tree-item.base';
5
+ export class TreeItem extends BaseTreeItem {
6
6
  constructor() {
7
- super();
8
- /**
9
- * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
10
- *
11
- * @internal
12
- */
13
- this.elementInternals = this.attachInternals();
14
- /**
15
- * When true, the control will be appear expanded by user interaction.
16
- * @public
17
- * HTML Attribute: `expanded`
18
- */
19
- this.expanded = false;
20
- /**
21
- * When true, the control will appear selected by user interaction.
22
- * @public
23
- * @remarks
24
- * HTML Attribute: selected
25
- */
26
- this.selected = false;
27
- /**
28
- * When true, the control has no child tree items
29
- * @public
30
- * HTML Attribute: empty
31
- */
32
- this.empty = false;
7
+ super(...arguments);
33
8
  /**
34
9
  * The size of the tree item element
35
10
  * @public
@@ -40,33 +15,6 @@ export class TreeItem extends FASTElement {
40
15
  * @public
41
16
  */
42
17
  this.appearance = TreeItemAppearance.subtle;
43
- this.childTreeItems = [];
44
- this.elementInternals.role = 'treeitem';
45
- }
46
- /**
47
- * Handles changes to the expanded attribute
48
- * @param prev - the previous state
49
- * @param next - the next state
50
- *
51
- * @public
52
- */
53
- expandedChanged(prev, next) {
54
- toggleState(this.elementInternals, 'expanded', next);
55
- if (this.childTreeItems && this.childTreeItems.length > 0) {
56
- this.elementInternals.ariaExpanded = next ? 'true' : 'false';
57
- }
58
- }
59
- /**
60
- * Handles changes to the selected attribute
61
- * @param prev - the previous state
62
- * @param next - the next state
63
- *
64
- * @internal
65
- */
66
- selectedChanged(prev, next) {
67
- this.$emit('change');
68
- toggleState(this.elementInternals, 'selected', next);
69
- this.elementInternals.ariaSelected = next ? 'true' : 'false';
70
18
  }
71
19
  /**
72
20
  * Handles changes to the size attribute
@@ -74,7 +22,7 @@ export class TreeItem extends FASTElement {
74
22
  * @internal
75
23
  */
76
24
  sizeChanged() {
77
- this.updateChildTreeItems();
25
+ this.updateSizeAndAppearance();
78
26
  }
79
27
  /**
80
28
  * Handles changes to the appearance attribute
@@ -82,120 +30,36 @@ export class TreeItem extends FASTElement {
82
30
  * @internal
83
31
  */
84
32
  appearanceChanged() {
85
- this.updateChildTreeItems();
86
- }
87
- dataIndentChanged(prev, next) {
88
- if (this.styles !== undefined) {
89
- this.$fastController.removeStyles(this.styles);
90
- }
91
- this.styles = css `
92
- :host {
93
- --indent: ${next};
94
- }
95
- `;
96
- this.$fastController.addStyles(this.styles);
33
+ this.updateSizeAndAppearance();
97
34
  }
98
35
  /**
99
- * Handles changes to the child tree items
100
- *
36
+ * child tree items supered change event
101
37
  * @internal
102
38
  */
103
39
  childTreeItemsChanged() {
104
- this.empty = this.childTreeItems?.length === 0;
105
- this.updateChildTreeItems();
40
+ super.childTreeItemsChanged();
41
+ this.updateSizeAndAppearance();
106
42
  }
107
43
  /**
108
44
  * 1. Update the child items' size based on the tree's size
109
45
  * 2. Update the child items' appearance based on the tree's appearance
46
+ *
47
+ * @public
110
48
  */
111
- updateChildTreeItems() {
49
+ updateSizeAndAppearance() {
112
50
  if (!this.childTreeItems?.length) {
113
51
  return;
114
52
  }
115
53
  this.childTreeItems.forEach(item => {
116
- if (!isTreeItem(item)) {
117
- return;
118
- }
119
- this.setIndent(item);
120
54
  item.size = this.size;
121
55
  item.appearance = this.appearance;
122
56
  });
123
57
  }
124
- /**
125
- * Sets the indent for each item
126
- */
127
- setIndent(item) {
128
- const indent = this.dataIndent ?? 0;
129
- item.dataIndent = indent + 1;
130
- }
131
- /**
132
- * Handle focus events
133
- *
134
- * @public
135
- */
136
- focusHandler(e) {
137
- if (e.target === this ||
138
- // In case where the tree-item contains a focusable element, we should not set the tabindex to 0 when the focus is on its child focusable element,
139
- // so users can shift+tab to navigate to the tree-item from its child focusable element.
140
- this.contains(e.target)) {
141
- this.setAttribute('tabindex', '0');
142
- }
143
- }
144
- /**
145
- * Handle blur events
146
- *
147
- * @public
148
- */
149
- blurHandler(e) {
150
- if (e.target === this) {
151
- this.setAttribute('tabindex', '-1');
152
- }
153
- }
154
- /**
155
- * Toggle the expansion state of the tree item
156
- *
157
- * @public
158
- */
159
- toggleExpansion() {
160
- if (this.childTreeItems?.length) {
161
- this.expanded = !this.expanded;
162
- }
163
- }
164
- /**
165
- * Toggle the single selection state of the tree item
166
- *
167
- * @public
168
- */
169
- toggleSelection() {
170
- this.selected = !this.selected;
171
- }
172
- /**
173
- * Whether the tree is nested
174
- * @internal
175
- */
176
- get isNestedItem() {
177
- return isTreeItem(this.parentElement);
178
- }
179
58
  }
180
- __decorate([
181
- attr({ mode: 'boolean' })
182
- ], TreeItem.prototype, "expanded", void 0);
183
- __decorate([
184
- attr({ mode: 'boolean' })
185
- ], TreeItem.prototype, "selected", void 0);
186
- __decorate([
187
- attr({ mode: 'boolean' })
188
- ], TreeItem.prototype, "empty", void 0);
189
59
  __decorate([
190
60
  attr
191
61
  ], TreeItem.prototype, "size", void 0);
192
62
  __decorate([
193
63
  attr
194
64
  ], TreeItem.prototype, "appearance", void 0);
195
- __decorate([
196
- attr({ attribute: 'data-indent' })
197
- ], TreeItem.prototype, "dataIndent", void 0);
198
- __decorate([
199
- observable
200
- ], TreeItem.prototype, "childTreeItems", void 0);
201
65
  //# sourceMappingURL=tree-item.js.map
package/dist/esm/tree-item/tree-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QACE;;;WAGG;QAEI,SAAI,GAAiB,YAAY,CAAC,KAAK,CAAC;QAW/C;;;WAGG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,MAAM,CAAC;IAoCpE,CAAC;IAlDC;;;;OAIG;IACK,WAAW;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IASD;;;;OAIG;IACK,iBAAiB;QACvB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;OAGG;IACI,qBAAqB;QAC1B,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAC9B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACI,uBAAuB;QAC5B,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChC,IAAiB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACnC,IAAiB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AApDQ;IADN,IAAI;sCAC0C;AAgBxC;IADN,IAAI;4CAC6D"}
package/dist/esm/tree-item/tree-item.styles.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { borderRadiusMedium, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForeground3Selected, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, curveEasyEaseMax, durationFaster, fontSizeBase300, spacingHorizontalM, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingVerticalNone, spacingVerticalS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, } from '../theme/design-tokens.js';
2
+ import { borderRadiusMedium, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForeground3Selected, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundLightAlphaHover, colorSubtleBackgroundLightAlphaPressed, colorSubtleBackgroundLightAlphaSelected, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, curveEasyEaseMax, durationFaster, fontSizeBase300, lineHeightBase300, spacingHorizontalM, spacingHorizontalXS, spacingHorizontalXXL, spacingHorizontalXXS, spacingVerticalNone, spacingVerticalS, spacingVerticalXXL, spacingVerticalXXS, spacingVerticalXXXL, } from '../theme/design-tokens.js';
3
3
  import { display } from '../utils/display.js';
4
4
  export const styles = css `
5
5
  ${display('block')}
6
6
 
7
7
  :host {
8
8
  outline: none;
9
+ font-size: ${fontSizeBase300};
10
+ line-height: ${lineHeightBase300};
9
11
  }
10
12
 
11
13
  :host(:focus-visible) .positioning-region {
@@ -20,7 +22,7 @@ export const styles = css `
20
22
  */
21
23
  .positioning-region {
22
24
  display: flex;
23
- align-items: stretch;
25
+ align-items: center;
24
26
  justify-content: space-between;
25
27
  cursor: pointer;
26
28
  height: ${spacingVerticalXXXL};
@@ -29,6 +31,7 @@ export const styles = css `
29
31
  border-radius: ${borderRadiusMedium};
30
32
  background-color: ${colorSubtleBackground};
31
33
  color: ${colorNeutralForeground2};
34
+ gap: ${spacingHorizontalXS};
32
35
  }
33
36
 
34
37
  @media (prefers-contrast: more) {
@@ -40,19 +43,16 @@ export const styles = css `
40
43
  .content {
41
44
  display: flex;
42
45
  align-items: center;
43
- font-size: ${fontSizeBase300};
44
- min-width: 0;
46
+ gap: ${spacingHorizontalXS};
45
47
  }
46
48
 
47
49
  .chevron {
48
50
  display: flex;
49
51
  align-items: center;
50
52
  flex-shrink: 0;
51
- min-width: 0;
52
53
  justify-content: center;
53
54
  width: ${spacingHorizontalXXL};
54
55
  height: ${spacingVerticalXXL};
55
- color: ${colorNeutralForeground3};
56
56
  transition: transform ${durationFaster} ${curveEasyEaseMax};
57
57
  transform: rotate(0deg);
58
58
  }
@@ -61,12 +61,9 @@ export const styles = css `
61
61
  transform: rotate(180deg);
62
62
  }
63
63
 
64
- .badging,
65
- .toolbar {
64
+ .aside {
66
65
  display: flex;
67
66
  align-items: center;
68
- min-width: 0;
69
- font-size: ${fontSizeBase300};
70
67
  }
71
68
 
72
69
  .positioning-region:hover {
@@ -74,22 +71,13 @@ export const styles = css `
74
71
  color: ${colorNeutralForeground2Hover};
75
72
  }
76
73
 
77
- .positioning-region:hover .content,
78
- .positioning-region:hover .chevron {
79
- color: ${colorNeutralForeground3Hover};
80
- }
81
-
82
74
  .positioning-region:active {
83
75
  background-color: ${colorSubtleBackgroundPressed};
84
76
  color: ${colorNeutralForeground2Pressed};
85
77
  }
86
78
 
87
- .positioning-region:active .content,
88
- .positioning-region:active .chevron {
89
- color: ${colorNeutralForeground3Pressed};
90
- }
91
-
92
79
  ::slotted([slot='start']),
80
+ ::slotted([slot='end']),
93
81
  ::slotted(:not([slot])) {
94
82
  display: flex;
95
83
  align-items: center;
@@ -98,7 +86,6 @@ export const styles = css `
98
86
 
99
87
  ::slotted([slot='start']) {
100
88
  flex-shrink: 0;
101
- margin-inline-end: ${spacingHorizontalXS};
102
89
  }
103
90
 
104
91
  ::slotted(:not([slot])) {
package/dist/esm/tree-item/tree-item.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tree-item.styles.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,oCAAoC,EACpC,sCAAsC,EACtC,uCAAuC,EACvC,4BAA4B,EAC5B,6BAA6B,EAC7B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;kBAOF,mBAAmB,IAAI,mBAAmB,IAAI,mBAAmB,IAAI,kBAAkB;QACjG,iBAAiB;;;;;;;;;;;;;cAaX,mBAAmB;iDACgB,oBAAoB;0BAC3C,gBAAgB;qBACrB,kBAAkB;wBACf,qBAAqB;aAChC,uBAAuB;;;;;2BAKT,iBAAiB;;;;;;;iBAO3B,eAAe;;;;;;;;;;aAUnB,oBAAoB;cACnB,kBAAkB;aACnB,uBAAuB;4BACR,cAAc,IAAI,gBAAgB;;;;;;;;;;;;;iBAa7C,eAAe;;;;wBAIR,0BAA0B;aACrC,4BAA4B;;;;;aAK5B,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;aAK9B,8BAA8B;;;;;;;;;;;;yBAYlB,mBAAmB;;;;sBAItB,oBAAoB;;;;;;;;;;;;;;;;;wBAiBlB,6BAA6B;aACxC,+BAA+B;;;;;aAK/B,+BAA+B;;;;cAI9B,kBAAkB;iDACiB,kBAAkB;;;;wBAI3C,oCAAoC;;;;wBAIpC,sCAAsC;;;;wBAItC,uCAAuC;aAClD,+BAA+B;;;;wBAIpB,0BAA0B;;;;wBAI1B,+BAA+B;;;;wBAI/B,iCAAiC;;;;wBAIjC,kCAAkC;aAC7C,+BAA+B;;;;;;CAM3C,CAAC"}
1
+ {"version":3,"file":"tree-item.styles.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAI/B,+BAA+B,EAC/B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,oCAAoC,EACpC,sCAAsC,EACtC,uCAAuC,EACvC,4BAA4B,EAC5B,6BAA6B,EAC7B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;iBAIH,eAAe;mBACb,iBAAiB;;;;kBAIlB,mBAAmB,IAAI,mBAAmB,IAAI,mBAAmB,IAAI,kBAAkB;QACjG,iBAAiB;;;;;;;;;;;;;cAaX,mBAAmB;iDACgB,oBAAoB;0BAC3C,gBAAgB;qBACrB,kBAAkB;wBACf,qBAAqB;aAChC,uBAAuB;WACzB,mBAAmB;;;;;2BAKH,iBAAiB;;;;;;;WAOjC,mBAAmB;;;;;;;;aAQjB,oBAAoB;cACnB,kBAAkB;4BACJ,cAAc,IAAI,gBAAgB;;;;;;;;;;;;;;wBActC,0BAA0B;aACrC,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;;;;;;;;;;;;sBAgBrB,oBAAoB;;;;;;;;;;;;;;;;;wBAiBlB,6BAA6B;aACxC,+BAA+B;;;;;aAK/B,+BAA+B;;;;cAI9B,kBAAkB;iDACiB,kBAAkB;;;;wBAI3C,oCAAoC;;;;wBAIpC,sCAAsC;;;;wBAItC,uCAAuC;aAClD,+BAA+B;;;;wBAIpB,0BAA0B;;;;wBAI1B,+BAA+B;;;;wBAI/B,iCAAiC;;;;wBAIjC,kCAAkC;aAC7C,+BAA+B;;;;;;CAM3C,CAAC"}
package/dist/esm/tree-item/tree-item.template.js CHANGED
@@ -1,4 +1,5 @@
1
- import { children, elements, html } from '@microsoft/fast-element';
1
+ import { children, html } from '@microsoft/fast-element';
2
+ import { isTreeItem } from './tree-item.options';
2
3
  const chevronIcon = html `
3
4
  <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
4
5
  <path
@@ -14,7 +15,7 @@ export const template = html `
14
15
  @focusout="${(x, c) => x.blurHandler(c.event)}"
15
16
  ${children({
16
17
  property: 'childTreeItems',
17
- filter: elements(),
18
+ filter: node => isTreeItem(node),
18
19
  })}
19
20
  >
20
21
  <div class="positioning-region" part="positioning-region">
@@ -26,11 +27,8 @@ export const template = html `
26
27
  <slot></slot>
27
28
  <slot name="end"></slot>
28
29
  </div>
29
- <div class="badging" part="badging">
30
- <slot name="badging"></slot>
31
- </div>
32
- <div class="toolbar" part="toolbar">
33
- <slot name="toolbar"></slot>
30
+ <div class="aside" part="aside">
31
+ <slot name="aside"></slot>
34
32
  </div>
35
33
  </div>
36
34
  <div role="group" class="items" part="items">
package/dist/esm/tree-item/tree-item.template.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGnE,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;CAMvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;;YAG1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBACnC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;MACzD,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,QAAQ,EAAE;CACnB,CAAC;;;;;iCAK2B,WAAW;;;;;;;;;;;;;;;;;CAiB3C,CAAC"}
1
+ {"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAY,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;CAMvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;;YAG1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBACnC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;MACzD,QAAQ,CAAC;IACT,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;CACjC,CAAC;;;;;iCAK2B,WAAW;;;;;;;;;;;;;;CAc3C,CAAC"}