@fluentui/web-components 3.0.0-beta.92 → 3.0.0-beta.93

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 (10) hide show
  1. package/CHANGELOG.md +12 -2
  2. package/dist/dts/tabs/tabs.d.ts +6 -0
  3. package/dist/esm/tabs/tabs.js +25 -8
  4. package/dist/esm/tabs/tabs.js.map +1 -1
  5. package/dist/esm/tree-item/tree-item.base.js +3 -1
  6. package/dist/esm/tree-item/tree-item.base.js.map +1 -1
  7. package/dist/web-components.d.ts +6 -0
  8. package/dist/web-components.js +28 -9
  9. package/dist/web-components.min.js +3 -3
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,22 @@
1
1
  # Change Log - @fluentui/web-components
2
2
 
3
- This log was last generated on Thu, 17 Apr 2025 04:07:18 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 18 Apr 2025 04:06:27 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [3.0.0-beta.93](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.93)
8
+
9
+ Fri, 18 Apr 2025 04:06:27 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.92..@fluentui/web-components_v3.0.0-beta.93)
11
+
12
+ ### Changes
13
+
14
+ - fix tabs animation starting position ([PR #34185](https://github.com/microsoft/fluentui/pull/34185) by 1981616118@qq.com)
15
+ - [fix] only set expanded is expanded is not set ([PR #34282](https://github.com/microsoft/fluentui/pull/34282) by jes@microsoft.com)
16
+
7
17
  ## [3.0.0-beta.92](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.92)
8
18
 
9
- Thu, 17 Apr 2025 04:07:18 GMT
19
+ Thu, 17 Apr 2025 04:07:28 GMT
10
20
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.91..@fluentui/web-components_v3.0.0-beta.92)
11
21
 
12
22
  ### Changes
package/dist/dts/tabs/tabs.d.ts CHANGED
@@ -76,6 +76,12 @@ export declare class Tabs extends BaseTabs {
76
76
  * @internal
77
77
  */
78
78
  private animationLoop;
79
+ /**
80
+ * Gets the position data for a tab element relative to its parent
81
+ * @param tab - The tab element to get position data for
82
+ * @returns The position data for the tab
83
+ */
84
+ private getTabPositionData;
79
85
  /**
80
86
  * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
81
87
  * tab indicator.
package/dist/esm/tabs/tabs.js CHANGED
@@ -96,6 +96,21 @@ export class Tabs extends BaseTabs {
96
96
  // add the css class and active indicator will animate from the previous tab location to its tab location
97
97
  tab.setAttribute('data-animate', 'true');
98
98
  }
99
+ /**
100
+ * Gets the position data for a tab element relative to its parent
101
+ * @param tab - The tab element to get position data for
102
+ * @returns The position data for the tab
103
+ */
104
+ getTabPositionData(tab) {
105
+ const rect = tab.getBoundingClientRect();
106
+ const parentRect = this.getBoundingClientRect();
107
+ return {
108
+ x: rect.x - parentRect.x,
109
+ y: rect.y - parentRect.y,
110
+ height: rect.height,
111
+ width: rect.width,
112
+ };
113
+ }
99
114
  /**
100
115
  * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
101
116
  * tab indicator.
@@ -106,14 +121,7 @@ export class Tabs extends BaseTabs {
106
121
  if (this.tabs && this.tabs.length > 0) {
107
122
  const tabs = this.tabs;
108
123
  const activeTab = this.activetab || tabs[0];
109
- const activeRect = activeTab?.getBoundingClientRect();
110
- const parentRect = this.getBoundingClientRect();
111
- this.activeTabData = {
112
- x: activeRect.x - parentRect.x,
113
- y: activeRect.y - parentRect.y,
114
- height: activeRect.height,
115
- width: activeRect.width,
116
- };
124
+ this.activeTabData = this.getTabPositionData(activeTab);
117
125
  if (this.previousActiveTabData?.x !== this.activeTabData?.x &&
118
126
  this.previousActiveTabData?.y !== this.activeTabData?.y) {
119
127
  this.previousActiveTabData = this.activeTabData;
@@ -137,6 +145,12 @@ export class Tabs extends BaseTabs {
137
145
  this.$fastController.addStyles(this.styles);
138
146
  }
139
147
  activeidChanged(oldValue, newValue) {
148
+ if (oldValue && this.tabs) {
149
+ const oldTab = this.tabs.find(tab => tab.id === oldValue);
150
+ if (oldTab) {
151
+ this.previousActiveTabData = this.getTabPositionData(oldTab);
152
+ }
153
+ }
140
154
  super.activeidChanged(oldValue, newValue);
141
155
  this.setTabData();
142
156
  if (this.activetab) {
@@ -146,6 +160,9 @@ export class Tabs extends BaseTabs {
146
160
  tabsChanged() {
147
161
  super.tabsChanged();
148
162
  this.setTabData();
163
+ if (this.activetab) {
164
+ this.animationLoop(this.activetab);
165
+ }
149
166
  }
150
167
  }
151
168
  __decorate([
package/dist/esm/tabs/tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/tabs/tabs.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/tabs/tabs.ts"],"names":[],"mappings":"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"}
package/dist/esm/tree-item/tree-item.base.js CHANGED
@@ -88,7 +88,9 @@ export class BaseTreeItem extends FASTElement {
88
88
  return;
89
89
  }
90
90
  //If a tree item is nested and initially set to selected expand the tree items so the selected item is visible
91
- this.expanded = Array.from(this.querySelectorAll('*')).some(el => isTreeItem(el) && el.selected);
91
+ if (!this.expanded) {
92
+ this.expanded = Array.from(this.querySelectorAll('[selected]')).some(el => isTreeItem(el));
93
+ }
92
94
  this.childTreeItems.forEach(item => {
93
95
  this.setIndent(item);
94
96
  });
package/dist/esm/tree-item/tree-item.base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tree-item.base.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.base.ts"],"names":[],"mappings":"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"}
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/web-components.d.ts CHANGED
@@ -10191,6 +10191,12 @@ export declare class Tabs extends BaseTabs {
10191
10191
  * @internal
10192
10192
  */
10193
10193
  private animationLoop;
10194
+ /**
10195
+ * Gets the position data for a tab element relative to its parent
10196
+ * @param tab - The tab element to get position data for
10197
+ * @returns The position data for the tab
10198
+ */
10199
+ private getTabPositionData;
10194
10200
  /**
10195
10201
  * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
10196
10202
  * tab indicator.
package/dist/web-components.js CHANGED
@@ -11460,6 +11460,21 @@ class Tabs extends BaseTabs {
11460
11460
  this.applyUpdatedCSSValues(tab);
11461
11461
  tab.setAttribute("data-animate", "true");
11462
11462
  }
11463
+ /**
11464
+ * Gets the position data for a tab element relative to its parent
11465
+ * @param tab - The tab element to get position data for
11466
+ * @returns The position data for the tab
11467
+ */
11468
+ getTabPositionData(tab) {
11469
+ const rect = tab.getBoundingClientRect();
11470
+ const parentRect = this.getBoundingClientRect();
11471
+ return {
11472
+ x: rect.x - parentRect.x,
11473
+ y: rect.y - parentRect.y,
11474
+ height: rect.height,
11475
+ width: rect.width
11476
+ };
11477
+ }
11463
11478
  /**
11464
11479
  * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
11465
11480
  * tab indicator.
@@ -11470,14 +11485,7 @@ class Tabs extends BaseTabs {
11470
11485
  if (this.tabs && this.tabs.length > 0) {
11471
11486
  const tabs = this.tabs;
11472
11487
  const activeTab = this.activetab || tabs[0];
11473
- const activeRect = activeTab?.getBoundingClientRect();
11474
- const parentRect = this.getBoundingClientRect();
11475
- this.activeTabData = {
11476
- x: activeRect.x - parentRect.x,
11477
- y: activeRect.y - parentRect.y,
11478
- height: activeRect.height,
11479
- width: activeRect.width
11480
- };
11488
+ this.activeTabData = this.getTabPositionData(activeTab);
11481
11489
  if (this.previousActiveTabData?.x !== this.activeTabData?.x && this.previousActiveTabData?.y !== this.activeTabData?.y) {
11482
11490
  this.previousActiveTabData = this.activeTabData;
11483
11491
  }
@@ -11494,6 +11502,12 @@ class Tabs extends BaseTabs {
11494
11502
  this.$fastController.addStyles(this.styles);
11495
11503
  }
11496
11504
  activeidChanged(oldValue, newValue) {
11505
+ if (oldValue && this.tabs) {
11506
+ const oldTab = this.tabs.find(tab => tab.id === oldValue);
11507
+ if (oldTab) {
11508
+ this.previousActiveTabData = this.getTabPositionData(oldTab);
11509
+ }
11510
+ }
11497
11511
  super.activeidChanged(oldValue, newValue);
11498
11512
  this.setTabData();
11499
11513
  if (this.activetab) {
@@ -11503,6 +11517,9 @@ class Tabs extends BaseTabs {
11503
11517
  tabsChanged() {
11504
11518
  super.tabsChanged();
11505
11519
  this.setTabData();
11520
+ if (this.activetab) {
11521
+ this.animationLoop(this.activetab);
11522
+ }
11506
11523
  }
11507
11524
  }
11508
11525
  __decorateClass$d([attr], Tabs.prototype, "appearance", 2);
@@ -13589,7 +13606,9 @@ class BaseTreeItem extends FASTElement {
13589
13606
  if (!this.childTreeItems?.length) {
13590
13607
  return;
13591
13608
  }
13592
- this.expanded = Array.from(this.querySelectorAll("*")).some(el => isTreeItem(el) && el.selected);
13609
+ if (!this.expanded) {
13610
+ this.expanded = Array.from(this.querySelectorAll("[selected]")).some(el => isTreeItem(el));
13611
+ }
13593
13612
  this.childTreeItems.forEach(item => {
13594
13613
  this.setIndent(item);
13595
13614
  });
package/dist/web-components.min.js CHANGED
@@ -524,9 +524,9 @@ const p=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
524
524
  ${k("inline-flex")}
525
525
 
526
526
  :host{position:relative;flex-direction:column;cursor:pointer;box-sizing:border-box;justify-content:center;line-height:${O};font-family:${v};font-size:${B};color:${Ie};fill:currentcolor;grid-row:1;padding:${ae} ${ne};border-radius:${C}}:host .tab-content{display:inline-flex;flex-direction:column;padding:0 2px}:host([aria-selected='true']){color:${P};font-weight:${M}}:host .tab-content::after{content:var(--textContent);visibility:hidden;height:0;line-height:${O};font-weight:${M}}:host([aria-selected='true'])::after{background-color:${xt};border-radius:${fe};content:'';inset:0;position:absolute;z-index:2}:host([aria-selected='false']:hover)::after{background-color:${Lt};border-radius:${fe};content:'';inset:0;position:absolute;z-index:1}:host([aria-selected='true'][disabled])::after{background-color:${S}}::slotted([slot='start']),::slotted([slot='end']){display:flex}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}:host([disabled]){cursor:not-allowed;fill:${S};color:${S}}:host([disabled]:hover)::after{background-color:unset}:host(:focus){outline:none}:host(:focus-visible){border-radius:${Oe};box-shadow:0 0 0 3px ${Ce};outline:1px solid ${mi}}`.withBehaviors(Z(u`
527
- :host([aria-selected='true'])::after{background-color:Highlight}`)),Fg=Xi.compose({name:`${p.prefix}-tab`,template:Eg,styles:Ng});Fg.define(p.registry);const Mg={subtle:"subtle",transparent:"transparent"},Or=Se;var Dg=Object.defineProperty,Vg=Object.getOwnPropertyDescriptor,Ar=(o,e,t,r)=>{for(var i=r>1?void 0:r?Vg(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Dg(e,t,i),i};class Bo extends ${constructor(){super(...arguments),this.orientation=Or.horizontal,this.prevActiveTabIndex=0,this.activeTabIndex=0,this.change=()=>{this.$emit("change",this.activetab)},this.isDisabledElement=e=>e.getAttribute("aria-disabled")==="true",this.isHiddenElement=e=>e.hasAttribute("hidden"),this.isFocusableElement=e=>!this.isDisabledElement(e)&&!this.isHiddenElement(e),this.handleTabClick=e=>{const t=e.currentTarget;t.nodeType===1&&this.isFocusableElement(t)&&(this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=this.tabs.indexOf(t),this.setComponent())},this.handleTabKeyDown=e=>{if(this.isHorizontal())switch(e.key){case co:e.preventDefault(),this.adjustBackward(e);break;case ho:e.preventDefault(),this.adjustForward(e);break}else switch(e.key){case uo:e.preventDefault(),this.adjustBackward(e);break;case lo:e.preventDefault(),this.adjustForward(e);break}switch(e.key){case go:e.preventDefault(),this.adjust(-this.activeTabIndex);break;case po:e.preventDefault(),this.adjust(this.tabs.length-this.activeTabIndex-1);break}}}orientationChanged(){this.$fastController.isConnected&&this.setTabs()}activeidChanged(e,t){this.$fastController.isConnected&&this.tabs.length<=this.tabpanels.length&&(this.prevActiveTabIndex=this.tabs.findIndex(r=>r.id===e),this.setTabs())}tabsChanged(){this.$fastController.isConnected&&this.tabs.length<=this.tabpanels.length&&(this.tabIds=this.getTabIds(),this.tabpanelIds=this.getTabPanelIds(),this.setTabs())}tabpanelsChanged(){this.$fastController.isConnected&&this.tabpanels.length<=this.tabs.length&&(this.tabIds=this.getTabIds(),this.tabpanelIds=this.getTabPanelIds(),this.setTabs())}getActiveIndex(){return this.activeid!==void 0?this.tabIds.indexOf(this.activeid)===-1?0:this.tabIds.indexOf(this.activeid):0}setTabs(){const e="gridColumn",t="gridRow",r=this.isHorizontal()?e:t;this.activeTabIndex=this.getActiveIndex(),this.tabs.forEach((i,s)=>{if(i.slot==="tab"){const n=this.activeTabIndex===s&&this.isFocusableElement(i),c=this.tabIds[s],h=this.tabpanelIds[s];i.setAttribute("id",c),i.setAttribute("aria-selected",n?"true":"false"),i.setAttribute("aria-controls",h),i.addEventListener("click",this.handleTabClick),i.addEventListener("keydown",this.handleTabKeyDown),i.setAttribute("tabindex",n?"0":"-1"),n&&(this.activetab=i,this.activeid=c)}i.style[e]="",i.style[t]="",i.style[r]=`${s+1}`,this.isHorizontal()?i.classList.remove("vertical"):i.classList.add("vertical")}),this.setTabPanels()}setTabPanels(){this.tabpanels.forEach((e,t)=>{const r=this.tabIds[t],i=this.tabpanelIds[t];e.setAttribute("id",i),e.setAttribute("aria-labelledby",r),this.activeTabIndex!==t?e.setAttribute("hidden",""):e.removeAttribute("hidden")})}getTabIds(){return this.tabs.map(e=>e.getAttribute("id")??`tab-${Ft()}`)}getTabPanelIds(){return this.tabpanels.map(e=>e.getAttribute("id")??`panel-${Ft()}`)}setComponent(){this.activeTabIndex!==this.prevActiveTabIndex&&(this.activeid=this.tabIds[this.activeTabIndex],this.focusTab(),this.change())}isHorizontal(){return this.orientation===Or.horizontal}adjust(e){const t=this.tabs.filter(n=>this.isFocusableElement(n)),r=t.indexOf(this.activetab),i=ni(0,t.length-1,r+e),s=this.tabs.indexOf(t[i]);s>-1&&this.moveToTabByIndex(this.tabs,s)}adjustForward(e){const t=this.tabs;let r=0;for(r=this.activetab?t.indexOf(this.activetab)+1:1,r===t.length&&(r=0);r<t.length&&t.length>1;)if(this.isFocusableElement(t[r])){this.moveToTabByIndex(t,r);break}else{if(this.activetab&&r===t.indexOf(this.activetab))break;r+1>=t.length?r=0:r+=1}}adjustBackward(e){const t=this.tabs;let r=0;for(r=this.activetab?t.indexOf(this.activetab)-1:0,r=r<0?t.length-1:r;r>=0&&t.length>1;)if(this.isFocusableElement(t[r])){this.moveToTabByIndex(t,r);break}else r-1<0?r=t.length-1:r-=1}moveToTabByIndex(e,t){const r=e[t];this.activetab=r,this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=t,r.focus(),this.setComponent()}focusTab(){this.tabs[this.activeTabIndex].focus()}connectedCallback(){super.connectedCallback(),this.tabIds=this.getTabIds(),this.tabpanelIds=this.getTabPanelIds(),this.activeTabIndex=this.getActiveIndex()}}Ar([a],Bo.prototype,"orientation",2),Ar([a],Bo.prototype,"activeid",2),Ar([g],Bo.prototype,"tabs",2),Ar([g],Bo.prototype,"tabpanels",2);var Hg=Object.defineProperty,Lg=Object.getOwnPropertyDescriptor,Ui=(o,e,t,r)=>{for(var i=r>1?void 0:r?Lg(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Hg(e,t,i),i};class Oo extends Bo{constructor(){super(...arguments),this.activeTabData={x:0,y:0,height:0,width:0},this.previousActiveTabData={x:0,y:0,height:0,width:0},this.activeTabOffset=0,this.activeTabScale=1,this.appearance=Mg.transparent}calculateAnimationProperties(e){this.activeTabOffset=this.getTabPosition(e),this.activeTabScale=this.getTabScale(e)}getTabPosition(e){return this.orientation===Or.horizontal?this.previousActiveTabData.x-(e.getBoundingClientRect().x-this.getBoundingClientRect().x):this.previousActiveTabData.y-(e.getBoundingClientRect().y-this.getBoundingClientRect().y)}getTabScale(e){return this.orientation===Or.horizontal?this.previousActiveTabData.width/e.getBoundingClientRect().width:this.previousActiveTabData.height/e.getBoundingClientRect().height}applyUpdatedCSSValues(e){this.calculateAnimationProperties(e),this.setTabScaleCSSVar(),this.setTabOffsetCSSVar()}animationLoop(e){e.setAttribute("data-animate","false"),this.applyUpdatedCSSValues(e),this.previousActiveTabData=this.activeTabData,this.applyUpdatedCSSValues(e),e.setAttribute("data-animate","true")}setTabData(){if(this.tabs&&this.tabs.length>0){const e=this.tabs,r=(this.activetab||e[0])?.getBoundingClientRect(),i=this.getBoundingClientRect();this.activeTabData={x:r.x-i.x,y:r.y-i.y,height:r.height,width:r.width},this.previousActiveTabData?.x!==this.activeTabData?.x&&this.previousActiveTabData?.y!==this.activeTabData?.y&&(this.previousActiveTabData=this.activeTabData)}}setTabOffsetCSSVar(){this.styles=u`
527
+ :host([aria-selected='true'])::after{background-color:Highlight}`)),Fg=Xi.compose({name:`${p.prefix}-tab`,template:Eg,styles:Ng});Fg.define(p.registry);const Mg={subtle:"subtle",transparent:"transparent"},Or=Se;var Dg=Object.defineProperty,Vg=Object.getOwnPropertyDescriptor,Ar=(o,e,t,r)=>{for(var i=r>1?void 0:r?Vg(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Dg(e,t,i),i};class Bo extends ${constructor(){super(...arguments),this.orientation=Or.horizontal,this.prevActiveTabIndex=0,this.activeTabIndex=0,this.change=()=>{this.$emit("change",this.activetab)},this.isDisabledElement=e=>e.getAttribute("aria-disabled")==="true",this.isHiddenElement=e=>e.hasAttribute("hidden"),this.isFocusableElement=e=>!this.isDisabledElement(e)&&!this.isHiddenElement(e),this.handleTabClick=e=>{const t=e.currentTarget;t.nodeType===1&&this.isFocusableElement(t)&&(this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=this.tabs.indexOf(t),this.setComponent())},this.handleTabKeyDown=e=>{if(this.isHorizontal())switch(e.key){case co:e.preventDefault(),this.adjustBackward(e);break;case ho:e.preventDefault(),this.adjustForward(e);break}else switch(e.key){case uo:e.preventDefault(),this.adjustBackward(e);break;case lo:e.preventDefault(),this.adjustForward(e);break}switch(e.key){case go:e.preventDefault(),this.adjust(-this.activeTabIndex);break;case po:e.preventDefault(),this.adjust(this.tabs.length-this.activeTabIndex-1);break}}}orientationChanged(){this.$fastController.isConnected&&this.setTabs()}activeidChanged(e,t){this.$fastController.isConnected&&this.tabs.length<=this.tabpanels.length&&(this.prevActiveTabIndex=this.tabs.findIndex(r=>r.id===e),this.setTabs())}tabsChanged(){this.$fastController.isConnected&&this.tabs.length<=this.tabpanels.length&&(this.tabIds=this.getTabIds(),this.tabpanelIds=this.getTabPanelIds(),this.setTabs())}tabpanelsChanged(){this.$fastController.isConnected&&this.tabpanels.length<=this.tabs.length&&(this.tabIds=this.getTabIds(),this.tabpanelIds=this.getTabPanelIds(),this.setTabs())}getActiveIndex(){return this.activeid!==void 0?this.tabIds.indexOf(this.activeid)===-1?0:this.tabIds.indexOf(this.activeid):0}setTabs(){const e="gridColumn",t="gridRow",r=this.isHorizontal()?e:t;this.activeTabIndex=this.getActiveIndex(),this.tabs.forEach((i,s)=>{if(i.slot==="tab"){const n=this.activeTabIndex===s&&this.isFocusableElement(i),c=this.tabIds[s],h=this.tabpanelIds[s];i.setAttribute("id",c),i.setAttribute("aria-selected",n?"true":"false"),i.setAttribute("aria-controls",h),i.addEventListener("click",this.handleTabClick),i.addEventListener("keydown",this.handleTabKeyDown),i.setAttribute("tabindex",n?"0":"-1"),n&&(this.activetab=i,this.activeid=c)}i.style[e]="",i.style[t]="",i.style[r]=`${s+1}`,this.isHorizontal()?i.classList.remove("vertical"):i.classList.add("vertical")}),this.setTabPanels()}setTabPanels(){this.tabpanels.forEach((e,t)=>{const r=this.tabIds[t],i=this.tabpanelIds[t];e.setAttribute("id",i),e.setAttribute("aria-labelledby",r),this.activeTabIndex!==t?e.setAttribute("hidden",""):e.removeAttribute("hidden")})}getTabIds(){return this.tabs.map(e=>e.getAttribute("id")??`tab-${Ft()}`)}getTabPanelIds(){return this.tabpanels.map(e=>e.getAttribute("id")??`panel-${Ft()}`)}setComponent(){this.activeTabIndex!==this.prevActiveTabIndex&&(this.activeid=this.tabIds[this.activeTabIndex],this.focusTab(),this.change())}isHorizontal(){return this.orientation===Or.horizontal}adjust(e){const t=this.tabs.filter(n=>this.isFocusableElement(n)),r=t.indexOf(this.activetab),i=ni(0,t.length-1,r+e),s=this.tabs.indexOf(t[i]);s>-1&&this.moveToTabByIndex(this.tabs,s)}adjustForward(e){const t=this.tabs;let r=0;for(r=this.activetab?t.indexOf(this.activetab)+1:1,r===t.length&&(r=0);r<t.length&&t.length>1;)if(this.isFocusableElement(t[r])){this.moveToTabByIndex(t,r);break}else{if(this.activetab&&r===t.indexOf(this.activetab))break;r+1>=t.length?r=0:r+=1}}adjustBackward(e){const t=this.tabs;let r=0;for(r=this.activetab?t.indexOf(this.activetab)-1:0,r=r<0?t.length-1:r;r>=0&&t.length>1;)if(this.isFocusableElement(t[r])){this.moveToTabByIndex(t,r);break}else r-1<0?r=t.length-1:r-=1}moveToTabByIndex(e,t){const r=e[t];this.activetab=r,this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=t,r.focus(),this.setComponent()}focusTab(){this.tabs[this.activeTabIndex].focus()}connectedCallback(){super.connectedCallback(),this.tabIds=this.getTabIds(),this.tabpanelIds=this.getTabPanelIds(),this.activeTabIndex=this.getActiveIndex()}}Ar([a],Bo.prototype,"orientation",2),Ar([a],Bo.prototype,"activeid",2),Ar([g],Bo.prototype,"tabs",2),Ar([g],Bo.prototype,"tabpanels",2);var Hg=Object.defineProperty,Lg=Object.getOwnPropertyDescriptor,Ui=(o,e,t,r)=>{for(var i=r>1?void 0:r?Lg(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Hg(e,t,i),i};class Oo extends Bo{constructor(){super(...arguments),this.activeTabData={x:0,y:0,height:0,width:0},this.previousActiveTabData={x:0,y:0,height:0,width:0},this.activeTabOffset=0,this.activeTabScale=1,this.appearance=Mg.transparent}calculateAnimationProperties(e){this.activeTabOffset=this.getTabPosition(e),this.activeTabScale=this.getTabScale(e)}getTabPosition(e){return this.orientation===Or.horizontal?this.previousActiveTabData.x-(e.getBoundingClientRect().x-this.getBoundingClientRect().x):this.previousActiveTabData.y-(e.getBoundingClientRect().y-this.getBoundingClientRect().y)}getTabScale(e){return this.orientation===Or.horizontal?this.previousActiveTabData.width/e.getBoundingClientRect().width:this.previousActiveTabData.height/e.getBoundingClientRect().height}applyUpdatedCSSValues(e){this.calculateAnimationProperties(e),this.setTabScaleCSSVar(),this.setTabOffsetCSSVar()}animationLoop(e){e.setAttribute("data-animate","false"),this.applyUpdatedCSSValues(e),this.previousActiveTabData=this.activeTabData,this.applyUpdatedCSSValues(e),e.setAttribute("data-animate","true")}getTabPositionData(e){const t=e.getBoundingClientRect(),r=this.getBoundingClientRect();return{x:t.x-r.x,y:t.y-r.y,height:t.height,width:t.width}}setTabData(){if(this.tabs&&this.tabs.length>0){const e=this.tabs,t=this.activetab||e[0];this.activeTabData=this.getTabPositionData(t),this.previousActiveTabData?.x!==this.activeTabData?.x&&this.previousActiveTabData?.y!==this.activeTabData?.y&&(this.previousActiveTabData=this.activeTabData)}}setTabOffsetCSSVar(){this.styles=u`
528
528
  :host{--tabIndicatorOffset:${this.activeTabOffset.toString()}px}`,this.$fastController.addStyles(this.styles)}setTabScaleCSSVar(){this.styles=u`
529
- :host{--tabIndicatorScale:${this.activeTabScale.toString()}}`,this.$fastController.addStyles(this.styles)}activeidChanged(e,t){super.activeidChanged(e,t),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}tabsChanged(){super.tabsChanged(),this.setTabData()}}Ui([a],Oo.prototype,"appearance",2),Ui([a({mode:"boolean"})],Oo.prototype,"disabled",2),Ui([a],Oo.prototype,"size",2),Ye(Oo,Ke);function jg(o={}){return b` ${He(o)}<div class="tablist" part="tablist" role="tablist"><slot name="tab" ${H("tabs")}></slot></div>${rt(o)}<div class="tabpanel" part="tabpanel"><slot name="tabpanel" ${H("tabpanels")}></slot></div>`}const Rg=jg({}),qg=u`
529
+ :host{--tabIndicatorScale:${this.activeTabScale.toString()}}`,this.$fastController.addStyles(this.styles)}activeidChanged(e,t){if(e&&this.tabs){const r=this.tabs.find(i=>i.id===e);r&&(this.previousActiveTabData=this.getTabPositionData(r))}super.activeidChanged(e,t),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}tabsChanged(){super.tabsChanged(),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}}Ui([a],Oo.prototype,"appearance",2),Ui([a({mode:"boolean"})],Oo.prototype,"disabled",2),Ui([a],Oo.prototype,"size",2),Ye(Oo,Ke);function jg(o={}){return b` ${He(o)}<div class="tablist" part="tablist" role="tablist"><slot name="tab" ${H("tabs")}></slot></div>${rt(o)}<div class="tabpanel" part="tabpanel"><slot name="tabpanel" ${H("tabpanels")}></slot></div>`}const Rg=jg({}),qg=u`
530
530
  ${k("grid")}
531
531
 
532
532
  :host{box-sizing:border-box;font-family:${v};font-size:${B};line-height:${O};color:${Ie};grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}:host([disabled]){cursor:not-allowed;color:${S}}:host([disabled]) ::slotted(fluent-tab){pointer-events:none;cursor:not-allowed;color:${S}}:host([disabled]) ::slotted(fluent-tab:after){background-color:${S}}:host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after{background-color:${S}}:host([disabled]) ::slotted(fluent-tab:hover):before{content:unset}:host ::slotted(fluent-tab){border-radius:${C}}:host ::slotted(fluent-tab[aria-selected='true'])::before{background-color:${S}}.tablist{display:grid;grid-template-rows:auto auto;grid-template-columns:auto;position:relative;width:max-content;align-self:end;box-sizing:border-box}::slotted([slot='start']),::slotted([slot='end']){display:flex;align-self:center}::slotted([slot='start']){margin-inline-end:11px}::slotted([slot='end']){margin-inline-start:11px}.tabpanel{grid-row:2;grid-column-start:1;grid-column-end:4;position:relative}:host([orientation='vertical']){grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr}:host([orientation='vertical']) .tablist{grid-row-start:2;grid-row-end:2;display:grid;grid-template-rows:auto;grid-template-columns:auto 1fr;position:relative;width:max-content;justify-self:end;align-self:flex-start;width:100%}:host([orientation='vertical']) .tabpanel{grid-column:2;grid-row-start:1;grid-row-end:4}:host([orientation='vertical']) ::slotted([slot='end']){grid-row:3}:host([appearance='subtle']) ::slotted(fluent-tab:hover){background-color:${vo};color:${di};fill:${ln}}:host([appearance='subtle']) ::slotted(fluent-tab:active){background-color:${mt};fill:${mt};color:${P}}:host([size='small']) ::slotted(fluent-tab){font-size:${B};line-height:${O};padding:${qe} ${ee}}:host([size='large']) ::slotted(fluent-tab){font-size:${ue};line-height:${me};padding:${ur} ${ne}}:host ::slotted(fluent-tab[data-animate='true'])::after{transition-property:transform;transition-duration:${qn};transition-timing-function:${Pi}}:host ::slotted(fluent-tab)::after{height:${se};margin-top:auto;transform-origin:left;transform:translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale))}:host([orientation='vertical']) ::slotted(fluent-tab)::after{width:${se};height:unset;margin-top:unset;transform-origin:top;transform:translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale))}:host ::slotted(fluent-tab)::before{height:${se};border-radius:${fe};content:'';inset:0;position:absolute;margin-top:auto}:host([orientation='vertical']) ::slotted(fluent-tab)::before{height:unset;width:${se};margin-inline-end:auto;transform-origin:top}:host ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:${se};margin-top:auto;transform-origin:left}:host([orientation='vertical']) ::slotted(fluent-tab[aria-selected='false']:hover)::after{height:unset;margin-inline-end:auto;transform-origin:top;width:${se}}:host([orientation='vertical']) ::slotted(fluent-tab){align-items:flex-start;grid-column:2;padding-top:${qe};padding-bottom:${qe}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab){padding-top:${Rt};padding-bottom:${Rt}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab){padding-top:${q};padding-bottom:${q}}:host([size='small']) ::slotted(fluent-tab)::after,:host([size='small']) ::slotted(fluent-tab)::before,:host([size='small']) ::slotted(fluent-tab:hover)::after{right:${ee};left:${ee}}:host ::slotted(fluent-tab)::after,:host ::slotted(fluent-tab)::before,:host ::slotted(fluent-tab:hover)::after{right:${ne};left:${ne}}:host([size='large']) ::slotted(fluent-tab)::after,:host([size='large']) ::slotted(fluent-tab)::before,:host([size='large']) ::slotted(fluent-tab:hover)::after{right:${ne};left:${ne}}:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${qe};bottom:${qe}}:host([orientation='vertical']) ::slotted(fluent-tab)::after,:host([orientation='vertical']) ::slotted(fluent-tab)::before,:host([orientation='vertical']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${q};bottom:${q}}:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,:host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after{right:0;left:0;top:${Gt};bottom:${Gt}}`,Gg=Oo.compose({name:`${p.prefix}-tabs`,template:Rg,styles:qg});Gg.define(p.registry);const Wg=o=>o.getAttribute("aria-disabled")==="true",Xg=o=>o.hasAttribute("hidden"),_r=o=>!Wg(o)&&!Xg(o),Ug={subtle:"subtle",transparent:"transparent"},oo=Se;var Kg=Object.defineProperty,Yg=Object.getOwnPropertyDescriptor,Er=(o,e,t,r)=>{for(var i=r>1?void 0:r?Yg(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Kg(e,t,i),i};class Ao extends ${constructor(){super(...arguments),this.elementInternals=this.attachInternals(),this.disabled=!1,this.orientation=oo.horizontal,this.prevActiveTabIndex=0,this.activeTabIndex=0,this.tabPanelMap=new WeakMap,this.change=()=>{this.$emit("change",this.activetab)},this.handleTabClick=e=>{const t=e.currentTarget;t.nodeType===Node.ELEMENT_NODE&&_r(t)&&(this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=this.tabs.indexOf(t),this.setComponent())},this.handleTabKeyDown=e=>{const t=ai(this);switch(e.key){case co:if(!this.isHorizontal())return;e.preventDefault(),this.adjust(t==="ltr"?-1:1);break;case ho:if(!this.isHorizontal())return;e.preventDefault(),this.adjust(t==="ltr"?1:-1);break;case uo:if(this.isHorizontal())return;e.preventDefault(),this.adjust(-1);break;case lo:if(this.isHorizontal())return;e.preventDefault(),this.adjust(1);break;case go:e.preventDefault(),this.adjust(-this.activeTabIndex);break;case po:e.preventDefault(),this.adjust(this.tabs.filter(r=>_r(r)).length-this.activeTabIndex-1);break}}}disabledChanged(e,t){y(this.elementInternals,"disabled",t)}orientationChanged(e,t){this.elementInternals.ariaOrientation=t??oo.horizontal,St(this.elementInternals,e,t,oo),this.$fastController.isConnected&&this.setTabs()}activeidChanged(e,t){if(this.$fastController.isConnected&&this.tabs.length>0){if(this.prevActiveTabIndex=this.tabs.findIndex(r=>r.id===e),this.setTabs(),e){const r=this.tabs[this.prevActiveTabIndex],i=this.tabPanelMap.get(r);i&&(i.hidden=!0)}if(t&&this.activetab){const r=this.tabPanelMap.get(this.activetab);r&&(r.hidden=!1)}e!==t&&this.change()}}tabsChanged(){if(this.$fastController.isConnected&&this.tabs.length>0){this.tabIds=this.getTabIds(),this.setTabs();for(const e of this.tabs){const t=e.getAttribute("aria-controls")??"",i=this.getRootNode().getElementById(t);t&&i&&(i.role??(i.role="tabpanel"),i.hidden=this.activeid!==e.id,this.tabPanelMap.set(e,i))}}}getActiveIndex(){return this.activeid!==void 0?this.tabIds.indexOf(this.activeid)===-1?0:this.tabIds.indexOf(this.activeid):0}setTabs(){this.activeTabIndex=this.getActiveIndex(),this.tabs.forEach((e,t)=>{if(e.slot==="tab"){const r=this.activeTabIndex===t&&_r(e),i=this.tabIds[t];e.setAttribute("id",i),e.setAttribute("aria-selected",r?"true":"false"),e.addEventListener("click",this.handleTabClick),e.addEventListener("keydown",this.handleTabKeyDown),e.setAttribute("tabindex",r&&!this.disabled?"0":"-1"),r&&(this.activetab=e,this.activeid=i)}})}getTabIds(){return this.tabs.map(e=>e.getAttribute("id")??`tab-${Ft()}`)}setComponent(){this.activeTabIndex!==this.prevActiveTabIndex&&(this.activeid=this.tabIds[this.activeTabIndex],this.focusTab())}isHorizontal(){return this.orientation===oo.horizontal}adjust(e){const t=this.tabs.filter(n=>_r(n)),r=t.indexOf(this.activetab),i=ml(0,t.length-1,r+e),s=this.tabs.indexOf(t[i]);s>-1&&this.activateTabByIndex(this.tabs,s)}activateTabByIndex(e,t){const r=e[t];this.activetab=r,this.prevActiveTabIndex=this.activeTabIndex,this.activeTabIndex=t,r.focus(),this.setComponent()}focusTab(){this.tabs[this.activeTabIndex].focus()}connectedCallback(){super.connectedCallback(),this.tabIds=this.getTabIds(),this.activeTabIndex=this.getActiveIndex()}}Er([a({mode:"boolean"})],Ao.prototype,"disabled",2),Er([a],Ao.prototype,"orientation",2),Er([a],Ao.prototype,"activeid",2),Er([g],Ao.prototype,"tabs",2);var Qg=Object.defineProperty,Zg=Object.getOwnPropertyDescriptor,xa=(o,e,t,r)=>{for(var i=r>1?void 0:r?Zg(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Qg(e,t,i),i};class Ki extends Ao{constructor(){super(...arguments),this.activeTabData={x:0,y:0,height:0,width:0},this.previousActiveTabData={x:0,y:0,height:0,width:0},this.activeTabOffset=0,this.activeTabScale=1,this.appearance=Ug.transparent}calculateAnimationProperties(e){this.activeTabOffset=this.getTabPosition(e),this.activeTabScale=this.getTabScale(e)}getTabPosition(e){return this.orientation===oo.horizontal?this.previousActiveTabData.x-(e.getBoundingClientRect().x-this.getBoundingClientRect().x):this.previousActiveTabData.y-(e.getBoundingClientRect().y-this.getBoundingClientRect().y)}getTabScale(e){return this.orientation===oo.horizontal?this.previousActiveTabData.width/e.getBoundingClientRect().width:this.previousActiveTabData.height/e.getBoundingClientRect().height}applyUpdatedCSSValues(e){this.calculateAnimationProperties(e),this.setAnimationVars()}animationLoop(e){e.setAttribute("data-animate","false"),this.applyUpdatedCSSValues(e),this.previousActiveTabData=this.activeTabData,this.applyUpdatedCSSValues(e),e.setAttribute("data-animate","true")}setTabData(){if(this.tabs&&this.tabs.length>0){const e=this.tabs,r=(this.activetab||e[0])?.getBoundingClientRect(),i=this.getBoundingClientRect();this.activeTabData={x:r.x-i.x,y:r.y-i.y,height:r.height,width:r.width},this.previousActiveTabData?.x!==this.activeTabData?.x&&this.previousActiveTabData?.y!==this.activeTabData?.y&&(this.previousActiveTabData=this.activeTabData)}}setAnimationVars(){this.style.setProperty("--tabIndicatorOffset",`${this.activeTabOffset}px`),this.style.setProperty("--tabIndicatorScale",`${this.activeTabScale}`)}activeidChanged(e,t){super.activeidChanged(e,t),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}tabsChanged(){super.tabsChanged(),this.setTabData(),this.activetab&&this.animationLoop(this.activetab)}}xa([a],Ki.prototype,"appearance",2),xa([a],Ki.prototype,"size",2);const Jg=b`<template role="tablist"><slot name="tab" ${H("tabs")}></slot></template>`,ef=u`
@@ -565,7 +565,7 @@ const p=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
565
565
  :host(:not(:popover-open)){display:none}:host{--position-area:block-start;--position-try-options:flip-block;--block-offset:${qt};--inline-offset:${pe};background:${I};border-radius:${C};border:1px solid ${J};box-sizing:border-box;color:${P};display:inline-flex;filter:drop-shadow(0 0 2px ${Zl}) drop-shadow(0 4px 8px ${Jl});font-family:${v};font-size:${F};inset:unset;line-height:${X};margin:unset;max-width:240px;overflow:visible;padding:4px ${ne} 6px;position:absolute;position-area:var(--position-area);position-try-options:var(--position-try-options);width:auto;z-index:1}@supports (inset-area:block-start){:host{inset-area:var(--position-area);position-try-fallbacks:var(--position-try-options)}}:host(:is([positioning^='above'],[positioning^='below'],:not([positioning]))){margin-block:var(--block-offset)}:host(:is([positioning^='before'],[positioning^='after'])){margin-inline:var(--inline-offset);--position-try-options:flip-inline}:host([positioning='above-start']){--position-area:${Te["above-start"]}}:host([positioning='above']){--position-area:${Te.above}}:host([positioning='above-end']){--position-area:${Te["above-end"]}}:host([positioning='below-start']){--position-area:${Te["below-start"]}}:host([positioning='below']){--position-area:${Te.below}}:host([positioning='below-end']){--position-area:${Te["below-end"]}}:host([positioning='before-top']){--position-area:${Te["before-top"]}}:host([positioning='before']){--position-area:${Te.before}}:host([positioning='before-bottom']){--position-area:${Te["before-bottom"]}}:host([positioning='after-top']){--position-area:${Te["after-top"]}}:host([positioning='after']){--position-area:${Te.after}}:host([positioning='after-bottom']){--position-area:${Te["after-bottom"]}}`,Nf=b`<template popover aria-hidden="true"><slot></slot></template>`,Ff=_o.compose({name:`${p.prefix}-tooltip`,template:Nf,styles:Ef});Ff.define(p.registry);const Ca={subtle:"subtle",subtleAlpha:"subtle-alpha",transparent:"transparent"},Sa={small:"small",medium:"medium"};function Ee(o,e="-tree-item"){return o?.nodeType!==Node.ELEMENT_NODE?!1:o.tagName.toLowerCase().endsWith(e)}var Mf=Object.defineProperty,Df=Object.getOwnPropertyDescriptor,Ia=(o,e,t,r)=>{for(var i=r>1?void 0:r?Df(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Mf(e,t,i),i};class Zi extends ${constructor(){super(),this.currentSelected=null,this.currentFocused=null,this.elementInternals=this.attachInternals(),this.childTreeItems=[],this.elementInternals.role="tree"}childTreeItemsChanged(){this.updateCurrentSelected()}updateCurrentSelected(){const e=this.querySelector("[selected]");this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem())}keydownHandler(e){if(e.defaultPrevented)return;const t=e.target;if(!Ee(t)||this.childTreeItems.length<1)return!0;const r=this.getVisibleNodes();switch(e.key){case go:{r.length&&r[0].focus();return}case po:{r.length&&r[r.length-1].focus();return}case co:{t?.childTreeItems?.length&&t.expanded?t.expanded=!1:Ee(t.parentElement)&&t.parentElement.focus();return}case ho:{t?.childTreeItems?.length&&(t.expanded?this.focusNextNode(1,t):t.expanded=!0);return}case lo:{this.focusNextNode(1,t);return}case uo:{this.focusNextNode(-1,t);return}case bo:{this.clickHandler(e);return}case Yo:{t.selected=!0;return}}return!0}focusHandler(e){if(!(this.childTreeItems.length<1)){if(e.target===this){this.currentFocused=this.getValidFocusableItem(),this.currentFocused?.focus();return}this.contains(e.target)&&(this.setAttribute("tabindex","-1"),this.currentFocused=e.target)}}blurHandler(e){e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute("tabindex","0")}clickHandler(e){if(e.defaultPrevented)return;if(!Ee(e.target))return!0;const t=e.target;t.toggleExpansion(),t.selected=!0}changeHandler(e){if(e.defaultPrevented)return;if(!Ee(e.target))return!0;const t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&Ee(this.currentSelected)&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null)}getValidFocusableItem(){const e=this.getVisibleNodes();let t=e.findIndex(r=>r.selected);return t===-1&&(t=e.findIndex(r=>Ee(r))),t!==-1?e[t]:null}getVisibleNodes(){return Array.from(this.querySelectorAll("*")).filter(e=>Ee(e)&&e.offsetParent!==null)}focusNextNode(e,t){const r=this.getVisibleNodes();if(!r.length)return;const i=r[r.indexOf(t)+e];si(i)&&i.focus()}}Ia([g],Zi.prototype,"currentSelected",2),Ia([g],Zi.prototype,"childTreeItems",2);var Vf=Object.defineProperty,Hf=Object.getOwnPropertyDescriptor,Pa=(o,e,t,r)=>{for(var i=r>1?void 0:r?Hf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Vf(e,t,i),i};class Ji extends Zi{constructor(){super(...arguments),this.size=Sa.small,this.appearance=Ca.subtle}sizeChanged(){this.updateSizeAndAppearance()}appearanceChanged(){this.updateSizeAndAppearance()}childTreeItemsChanged(){super.childTreeItemsChanged(),this.updateSizeAndAppearance()}updateSizeAndAppearance(){this.childTreeItems?.length&&this.childTreeItems.forEach(e=>{e.size=this.size,e.appearance=this.appearance})}}Pa([a],Ji.prototype,"size",2),Pa([a],Ji.prototype,"appearance",2);const Lf=u`
566
566
  ${k("block")}
567
567
  :host{outline:none}`,jf=b`<template tabindex="0" @click="${(o,e)=>o.clickHandler(e.event)}" @focusin="${(o,e)=>o.focusHandler(e.event)}" @focusout="${(o,e)=>o.blurHandler(e.event)}" @keydown="${(o,e)=>o.keydownHandler(e.event)}" @change="${(o,e)=>o.changeHandler(e.event)}" ${ri({property:"childTreeItems",filter:o=>Ee(o)})}><slot></slot></template>`,Rf=Ji.compose({name:`${p.prefix}-tree`,template:jf,styles:Lf});Rf.define(p.registry);var qf=Object.defineProperty,Gf=Object.getOwnPropertyDescriptor,Eo=(o,e,t,r)=>{for(var i=r>1?void 0:r?Gf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&qf(e,t,i),i};class ro extends ${constructor(){super(),this.elementInternals=this.attachInternals(),this.expanded=!1,this.selected=!1,this.empty=!1,this.childTreeItems=[],this.elementInternals.role="treeitem"}expandedChanged(e,t){y(this.elementInternals,"expanded",t),this.childTreeItems&&this.childTreeItems.length>0&&(this.elementInternals.ariaExpanded=t?"true":"false")}selectedChanged(e,t){this.$emit("change"),y(this.elementInternals,"selected",t),this.elementInternals.ariaSelected=t?"true":"false"}dataIndentChanged(e,t){this.styles!==void 0&&this.$fastController.removeStyles(this.styles),this.styles=u`
568
- :host{--indent:${t}}`,this.$fastController.addStyles(this.styles)}childTreeItemsChanged(){this.empty=this.childTreeItems?.length===0,this.updateChildTreeItems()}updateChildTreeItems(){this.childTreeItems?.length&&(this.expanded=Array.from(this.querySelectorAll("*")).some(e=>Ee(e)&&e.selected),this.childTreeItems.forEach(e=>{this.setIndent(e)}))}setIndent(e){const t=this.dataIndent??0;e.dataIndent=t+1}toggleExpansion(){this.childTreeItems?.length&&(this.expanded=!this.expanded)}get isNestedItem(){return Ee(this.parentElement)}}Eo([a({mode:"boolean"})],ro.prototype,"expanded",2),Eo([a({mode:"boolean"})],ro.prototype,"selected",2),Eo([a({mode:"boolean"})],ro.prototype,"empty",2),Eo([a({attribute:"data-indent"})],ro.prototype,"dataIndent",2),Eo([g],ro.prototype,"childTreeItems",2);var Wf=Object.defineProperty,Xf=Object.getOwnPropertyDescriptor,za=(o,e,t,r)=>{for(var i=r>1?void 0:r?Xf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Wf(e,t,i),i};class es extends ro{constructor(){super(...arguments),this.size=Sa.small,this.appearance=Ca.subtle}sizeChanged(){this.updateSizeAndAppearance()}appearanceChanged(){this.updateSizeAndAppearance()}childTreeItemsChanged(){super.childTreeItemsChanged(),this.updateSizeAndAppearance()}updateSizeAndAppearance(){this.childTreeItems?.length&&this.childTreeItems.forEach(e=>{e.size=this.size,e.appearance=this.appearance})}}za([a],es.prototype,"size",2),za([a],es.prototype,"appearance",2);const Uf=u`
568
+ :host{--indent:${t}}`,this.$fastController.addStyles(this.styles)}childTreeItemsChanged(){this.empty=this.childTreeItems?.length===0,this.updateChildTreeItems()}updateChildTreeItems(){this.childTreeItems?.length&&(this.expanded||(this.expanded=Array.from(this.querySelectorAll("[selected]")).some(e=>Ee(e))),this.childTreeItems.forEach(e=>{this.setIndent(e)}))}setIndent(e){const t=this.dataIndent??0;e.dataIndent=t+1}toggleExpansion(){this.childTreeItems?.length&&(this.expanded=!this.expanded)}get isNestedItem(){return Ee(this.parentElement)}}Eo([a({mode:"boolean"})],ro.prototype,"expanded",2),Eo([a({mode:"boolean"})],ro.prototype,"selected",2),Eo([a({mode:"boolean"})],ro.prototype,"empty",2),Eo([a({attribute:"data-indent"})],ro.prototype,"dataIndent",2),Eo([g],ro.prototype,"childTreeItems",2);var Wf=Object.defineProperty,Xf=Object.getOwnPropertyDescriptor,za=(o,e,t,r)=>{for(var i=r>1?void 0:r?Xf(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&Wf(e,t,i),i};class es extends ro{constructor(){super(...arguments),this.size=Sa.small,this.appearance=Ca.subtle}sizeChanged(){this.updateSizeAndAppearance()}appearanceChanged(){this.updateSizeAndAppearance()}childTreeItemsChanged(){super.childTreeItemsChanged(),this.updateSizeAndAppearance()}updateSizeAndAppearance(){this.childTreeItems?.length&&this.childTreeItems.forEach(e=>{e.size=this.size,e.appearance=this.appearance})}}za([a],es.prototype,"size",2),za([a],es.prototype,"appearance",2);const Uf=u`
569
569
  ${k("block")}
570
570
 
571
571
  :host{outline:none;font-size:${B};line-height:${O}}:host(:focus-visible) .positioning-region{box-shadow:${Ci} ${Ci} ${Ci} ${Rt}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fluentui/web-components",
3
3
  "description": "A library of Fluent Web Components",
4
- "version": "3.0.0-beta.92",
4
+ "version": "3.0.0-beta.93",
5
5
  "author": {
6
6
  "name": "Microsoft",
7
7
  "url": "https://discord.gg/FcSNfg4"