udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/collection/components/fluent-ui/switch/udp-fluent-switch.js

@@ -43,7 +43,7 @@ export class UdpFluentSwitch {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'd23d1970c531de2cd9af431b36688bf472e7c4d7' }, h("fluent-field", { key: '103772e929b2ac39f0b1d97cec84865dfc26d194', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: '35465dd8e502e91e96e6a928bba716ff2d5f7785', slot: "label", onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '9719fef772ce35acfb7f23578d822a52e7df88e3', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '70280f2cffb0fbf2d25455b8857b45a6936705b5', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-switch", { key: '5708b772cdb2b82c943bcacfce8aef3faa2b4cfa', slot: "input", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, ref: (el) => (this.internalSwitch = el) }), h("udp-text", { key: 'd2482d8bfec01d5d27b8a9ad384a16aa1d85bab1', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '91c654669e6e08d366b438d82ce2f56e7c56fdce' }, h("fluent-field", { key: '65cbfc5e391cc5c7fbce3eabd4e3ec2d5fe89f18', "label-position": this.labelPosition, class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-label", { key: 'e6668f04f88cbcb7c5bb4b7073b00adfb0acc74e', slot: "label", onClick: this.handleLabelClick }, this.label, this.popupHint && (h("udp-tooltip", { key: '1978ceaaab8a8306f8a81a01d55445dd6f8c8652', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'd3e7c25477403f90921af5f0e0e4ee48f093af01', name: "info", size: "xs", class: "popup-hint-icon" })))), h("fluent-switch", { key: '9b006bf50ce4589b4a7bc3703d347cb000a8ce34', slot: "input", name: this.name, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, ref: (el) => (this.internalSwitch = el) }), h("udp-text", { key: '2968daf18e49a4c1fb62beee787371afd05440cd', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,

package/dist/collection/components/fluent-ui/tablist/udp-fluent-tablist.css

@@ -82,15 +82,22 @@
   opacity: 1;
 }
 
-/* Scroll button container */
+/* Scroll button container.
+   Stays inert (like its tabindex=-1 button) while the scroll affordance is
+   hidden, so the invisible 48px overlay never steals clicks from the tabs
+   beneath it. Only the visible button re-enables pointer events. */
 .scroll-button-container {
-  pointer-events: auto;
-  /* Re-enable clicks for the button */
+  pointer-events: none;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.scroll-shadow-start.is-visible .scroll-button-container,
+.scroll-shadow-end.is-visible .scroll-button-container {
+  pointer-events: auto;
+}
+
 /* for overflow tabs */
 .is-overflow {
   display: none !important;
@@ -136,25 +143,51 @@ fluent-tab[aria-selected="true"] {
 
 /* ============================================
    Contained Variant Styles
+   Styled to mirror an outline button (transparent fill,
+   thin neutral stroke, medium radius) so the tablist sits
+   perfectly flush beside one at the same 32px height.
    ============================================ */
 
-/* Apply background to the inner tablist which already has fit-content sizing */
+/* Outline-button look on the inner tablist (already fit-content sized).
+   Drop the inner padding so each tab fills the full control height — keeps the
+   click target as large as possible (only the 1px border is non-interactive). */
 .contained-variant .tablist-inner {
-  background-color: var(--colorNeutralBackground3);
+  background-color: transparent;
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+  border-radius: var(--borderRadiusMedium);
+  padding: 0;
+}
+
+/* Size tabs so the bordered container matches the outline button of the same
+   size while the tab itself stays the full-height click target. Heights:
+   medium 32px = 2px border + 5px*2 padding + 20px line-height. */
+.contained-variant fluent-tab {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+/* small button = 24px = 2px border + 1px*2 + 20px line-height */
+.contained-variant .tablist-inner[size='small'] fluent-tab {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+/* large button = 40px = 2px border + 8px*2 + 22px line-height */
+.contained-variant .tablist-inner[size='large'] fluent-tab {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
-/* Selected tab - raised appearance with lighter background */
+/* Selected tab - keep standard foreground; fluent draws the active indicator */
 .contained-variant fluent-tab[aria-selected="true"] {
-  /* background-color: var(--colorNeutralBackground1);
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); */
   color: var(--colorNeutralForeground1);
 }
 
 /* Hover state for unselected tabs */
 .contained-variant fluent-tab:hover {
-  background-color: var(--colorNeutralBackground2);
+  background-color: var(--colorSubtleBackgroundHover);
 }
 
 .contained-variant .overflow-menu-container {
-  background-color: var(--colorNeutralBackground3);
+  background-color: transparent;
 }

package/dist/collection/components/fluent-ui/text-input/udp-fluent-text-input.js

@@ -58,11 +58,11 @@ export class UdpFluentTextInput {
         const hasError = !!this.error;
         const message = this.error || this.hint;
         const noMessage = !message && !this.includeErrorPadding;
-        return (h(Host, { key: '1fd3fdd78008ce6181db58ac3ff661c564d93603', class: { 'has-error': hasError } }, h("fluent-field", { key: 'b294c1e2a1c660a266eee2ba21f330f6e036e887', class: { 'no-message': noMessage } }, h("fluent-text-input", { key: '33fedbd5df4933d04aa47ca27b3a7a1a39314f9d', ref: el => (this.internalInput = el), slot: "input", class: { 'no-label': !this.label }, name: this.name, value: this.value, type: this.type, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, controlSize: this.controlSize, maxlength: this.maxLength,
+        return (h(Host, { key: '83e92ed8f16c3051a0ca726e81ff4a51550984ad', class: { 'has-error': hasError } }, h("fluent-field", { key: '9fbcdf450ab82e2850f31e1f4660b56f9d7fce5a', class: { 'no-message': noMessage } }, h("fluent-text-input", { key: '22017a3dc277acd03dbc7b021381ea3a7b0afdf1', ref: el => (this.internalInput = el), slot: "input", class: { 'no-label': !this.label }, name: this.name, value: this.value, type: this.type, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, autocomplete: this.autocomplete, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, controlSize: this.controlSize, maxlength: this.maxLength,
             // Events
             onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit(),
             // Suppress native invalid popup
-            onInvalid: (e) => e.preventDefault() }, h("slot", { key: '1d8a799cc01ecda7695b4d56d647602542c627fa', slot: "start", name: "start" }), h("slot", { key: 'd2855135bd92677434b370ac58081cd238c23235', slot: "end", name: "end" }), this.label && (h("fluent-label", { key: '108ecfa2d4e21dfb8706990b27117021ba501f14', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'a54f646b778ef44266879f420c0454a5cb80d90c', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '2e621dee84a11efca26bb2f14997cebead8f77ed', name: "info", size: "xs", class: "popup-hint-icon" })))))), h("udp-text", { key: '00bb84dc0c030c5d3f1cb53c3f89c8af763fddc0', slot: "message", variant: "caption1", class: {
+            onInvalid: (e) => e.preventDefault() }, h("slot", { key: '06db34c98acda08ce3bbc6069d9b00c345c665fb', slot: "start", name: "start" }), h("slot", { key: '3ca5e0ed49dc7f92bc0a1b22795982f6d3d2059c', slot: "end", name: "end" }), this.label && (h("fluent-label", { key: 'ce228830fc9a6bb7e2143c585e98a829dbc6fc9e', required: this.required, disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'e806bdc4d058a67039c649e5a65b47c41f46e23e', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: 'bee18eb447ee5a2c9348e26df0f8885114d0f300', name: "info", size: "xs", class: "popup-hint-icon" })))))), h("udp-text", { key: '695e97d2aa86e70d8b188a26285bff1deb69d2fc', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,

package/dist/collection/components/fluent-ui/textarea/udp-textarea.js

@@ -60,11 +60,11 @@ export class UdpTextarea {
     render() {
         const hasError = !!this.error;
         const message = this.error || this.hint;
-        return (h(Host, { key: 'ce219e684e74eeedae71b6bd74bb5d018c4b4a4a', class: { 'has-error': hasError } }, h("fluent-field", { key: 'fd19793a3d39147a4078a6b03a15f4701acd40d9', class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-textarea", { key: '01e4224cbb7df7a29a2846ffc4d49b87e973906c', ref: el => (this.internalInput = el), slot: "input", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, resize: this.resize, maxlength: this.maxLength, autoResize: this.autoResize, size: this.controlSize, displayShadow: true,
+        return (h(Host, { key: '77859e24a772df8c9be07c9b06b0cdd2515e0f7b', class: { 'has-error': hasError } }, h("fluent-field", { key: 'fa47373ad6ab9e226b98f2ff4353ef5dbf2e0b53', class: { 'no-label': !this.label, 'no-message': !message && !this.includeErrorPadding } }, h("fluent-textarea", { key: '749fec0b2025ce254760de7ae4db8b7254d0e5de', ref: el => (this.internalInput = el), slot: "input", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, autofocus: this.autofocus, spellcheck: this.spellcheck ? 'true' : 'false', appearance: this.appearance, resize: this.resize, maxlength: this.maxLength, autoResize: this.autoResize, size: this.controlSize, displayShadow: true,
             // Events
             onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit(),
             // Suppress native invalid popup
-            onInvalid: (e) => e.preventDefault() }), h("fluent-label", { key: 'f946f0a4015f1a6b2b026441baa98321b914d802', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'f029ccf9f63b92fbb4657bd3cf02ca36057c93c5', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '24d4806271f964b9e07ed7c3347f8d240a7e2a17', name: "info", size: "xs", class: "popup-hint-icon" })))), h("udp-text", { key: 'f66ba1b67c27434789d7c19d23b6b27ba286528e', slot: "message", variant: "caption1", class: {
+            onInvalid: (e) => e.preventDefault() }), h("fluent-label", { key: '60dd872557b36cee9345bb9a5d7b823f613a156c', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (h("udp-tooltip", { key: 'a6e9e0a150bf5c329338ac3036b654e43ec15960', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '6c415371038d73c8c8f77db341b5b65484c69acf', name: "info", size: "xs", class: "popup-hint-icon" })))), h("udp-text", { key: 'e7da461e4f27239319db9f2d62b2b4d00de9eb46', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,

package/dist/collection/components/fluent-ui/time-input/udp-time-input.js

@@ -473,7 +473,7 @@ export class UdpTimeInput {
         const effectiveError = this.internalError || this.error;
         const hasError = !!effectiveError;
         const message = effectiveError || this.hint;
-        return (h(Host, { key: '1e3c67f0494eebeef619470431dd61f20c812dc2', class: { 'has-error': hasError } }, h("fluent-field", { key: 'bd0eeb86777cafe6967f0209743ebce6da298ced', class: { 'no-message': !message && !this.includeErrorPadding } }, h("udp-popover", { key: '1f8c29d8e15bc689707f34197cfa02ed82d17716', slot: "input", open: this.isOpen, position: "bottom-start", toggleOnTriggerClick: false, matchTriggerWidth: true, onPopoverClose: this.handlePopoverClose }, h("fluent-text-input", { key: '3bf52c9a96705e52c2d5916c3c0d23faa7526fbd', slot: "trigger", ref: el => (this.internalInput = el), class: { 'no-label': !this.label }, value: this.inputValue, name: this.name, autocomplete: "off", placeholder: this.placeholder, disabled: this.disabled, appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onClick: this.handleInputClick }, h("fluent-label", { key: 'e11cff02441ac6cdd06b043867ce4e78bf77a61b', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (h("udp-tooltip", { key: 'e7b9c453fcdc80e8d015977098385ff14daa7fa7', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '5029d6d74fba64cd9ba5f17118b1997efd6763a1', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: '160e9198fabd32b8c0f5d69ebb4aaa14f16ff4ac', slot: "end" }, h("udp-fluent-icon-button", { key: '5fd57970ef38f441e68bfdc2b8175d69325da974', appearance: "transparent", iconName: "clock", disabled: this.disabled, tabindex: -1, onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick }))), h("div", { key: '2cbd269385c66ad1771479ea9df1e50fd10a178e', slot: "content", class: "listbox-container" }, h("fluent-listbox", { key: 'b433d9275f9403ad30f731806d31beacf6dc9aeb' }, this.timeOptions.map((option, index) => (h("fluent-option", { key: option.value, value: option.value, class: { active: index === this.activeIndex }, onClick: () => this.handleOptionClick(option) }, h("span", { slot: "checked-indicator" }), option.label)))))), h("udp-text", { key: '36a23e55d3dc1c126c58e82d4571148e7b2384c8', slot: "message", variant: "caption1", class: {
+        return (h(Host, { key: '44d0689e7988d9a72fc1a9e322d348bcdac7bbed', class: { 'has-error': hasError } }, h("fluent-field", { key: 'deb61a054545c8fefe432414c3ee53979704cf35', class: { 'no-message': !message && !this.includeErrorPadding } }, h("udp-popover", { key: 'b83cfbd2db1c0454c6fa066f7f75e95143271a5c', slot: "input", open: this.isOpen, position: "bottom-start", toggleOnTriggerClick: false, matchTriggerWidth: true, onPopoverClose: this.handlePopoverClose }, h("fluent-text-input", { key: 'b7aa35470775979cfdbb7eb3a3f51735637b1682', slot: "trigger", ref: el => (this.internalInput = el), class: { 'no-label': !this.label }, value: this.inputValue, name: this.name, autocomplete: "off", placeholder: this.placeholder, disabled: this.disabled, appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onClick: this.handleInputClick }, h("fluent-label", { key: 'f3dc0195ce785fc62bb35723c619a8996803e7cb', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (h("udp-tooltip", { key: '03b5638ac5a585f976e94e36b6b59f42c16812b2', content: this.popupHint, positioning: "above" }, h("udp-fluent-icon", { key: '4e7f21d6b631214930e9aba8fb0ec46eb117d050', name: "info", size: "xs", class: "popup-hint-icon" })))), h("div", { key: 'bbe3485bf19a013b1ac9ae93a9528da270a4b5e2', slot: "end" }, h("udp-fluent-icon-button", { key: '46663269176388b61a586aa68bf237d3d74ac1d5', appearance: "transparent", iconName: "clock", disabled: this.disabled, tabindex: -1, onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick }))), h("div", { key: '55509c3c56fff966a1fc709e82f7788fd88659ea', slot: "content", class: "listbox-container" }, h("fluent-listbox", { key: '9afbeb89265f4a34fed387aaaa9a0b071341e3fc' }, this.timeOptions.map((option, index) => (h("fluent-option", { key: option.value, value: option.value, class: { active: index === this.activeIndex }, onClick: () => this.handleOptionClick(option) }, h("span", { slot: "checked-indicator" }), option.label)))))), h("udp-text", { key: '7aa55e4723dffd30df6b256e00496a1936fd6ce6', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 includeErrorPadding: this.includeErrorPadding,

package/dist/collection/components/fluent-ui/toggle-button/udp-fluent-toggle-button.js

@@ -38,7 +38,7 @@ export class UdpFluentToggleButton {
     }
     render() {
         const iconSize = getIconSize(this.size);
-        return (h(Host, { key: '80044ea150644619562d7197c7fe62a111e14581' }, h("fluent-toggle-button", { key: 'bd3b9ecf9bcd984812bd9b4b25d247b357a55046', pressed: this.pressed, mixed: this.mixed, disabled: this.disabled, size: this.size, appearance: this.appearance, shape: this.shape }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: '41ffe50c8efe4722c745cc636d145166d0e62ba3', class: "slot-wrapper", slot: "start" }, h("slot", { key: 'b37adc51343974319744be0bce3f5acb9f3d021c', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '6657439c96f0b8c514e36d8760c83804a1538eca', name: this.startIconName, size: iconSize }))))), h("slot", { key: '2cb8775acde3ce78b4879aa823221d5bb8dabe0e' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: 'b6e4638009b32809204198758d6ec6fc944c1afb', class: "slot-wrapper", slot: "end" }, h("slot", { key: '4f4477d732753cd754671fdacefdbe76dfaf6507', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: 'bbf369485c835bcc168af01321a002be22a32ad6', name: this.endIconName, size: iconSize })))))));
+        return (h(Host, { key: '7063ff374b0be78469d61a5cd0702a763b2226a9' }, h("fluent-toggle-button", { key: 'f29f372892205ae54829b2ab8791652360769c56', pressed: this.pressed, mixed: this.mixed, disabled: this.disabled, size: this.size, appearance: this.appearance, shape: this.shape }, (this.startIconName || hasSlotContent(this.el, 'start')) && (h("span", { key: '4977733f57427a16f67a6930cd60ed6da765e84e', class: "slot-wrapper", slot: "start" }, h("slot", { key: 'adda33214afc7987dd9a26b521a23945a52b71fb', name: "start" }, this.startIconName && (h("udp-fluent-icon", { key: '3a1458c1e97f523f915d0dbb382468d0450809fd', name: this.startIconName, size: iconSize }))))), h("slot", { key: 'bf0d94afe5284b9604fcdb6b76ded71cf54566e0' }), (this.endIconName || hasSlotContent(this.el, 'end')) && (h("span", { key: '2b1de85e37bb2afca1e11d55e3142d75052c5eef', class: "slot-wrapper", slot: "end" }, h("slot", { key: 'd0e28a78465274173dfbbc48626236008e612d32', name: "end" }, this.endIconName && h("udp-fluent-icon", { key: '311410f9cef7ccffb1af50bfe994e87297e2c25d', name: this.endIconName, size: iconSize })))))));
     }
     static get is() { return "udp-fluent-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/tooltip/udp-tooltip.js

@@ -19,13 +19,13 @@ export class UdpTooltip {
     render() {
         // A stable, internal ID is safe because it is scoped to this Shadow Root
         const anchorId = 'internal-anchor';
-        return (h(Host, { key: 'b8678d9abbe1c393f7905b1e8f90e3443a4b8427' }, h("div", { key: '6c47dbca33e00d5657b8c3d8a8625eff7efe6c4b', id: anchorId, onFocusin: (e) => {
+        return (h(Host, { key: '0067d7a56b24d183eb0b91f931f2d19d01f2e5d6' }, h("div", { key: '60e0ce5333db01759dfc0fd7b56ce7b5dd4d9a29', id: anchorId, onFocusin: (e) => {
                 var _a, _b;
                 // Only show on keyboard-driven focus, not pointer clicks or programmatic focus restoration
                 if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.matches(':focus-visible')) {
                     (_b = this.tooltipRef) === null || _b === void 0 ? void 0 : _b.showTooltip(0);
                 }
-            }, onFocusout: () => { var _a; return (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.hideTooltip(0); } }, h("slot", { key: '9a0c1631d607bed4983e9fb4e5b545cd52e94109' })), h("fluent-tooltip", { key: 'c4ee67560abc78f347dc7e5da364aad4bda2d565', ref: el => (this.tooltipRef = el), anchor: anchorId, delay: this.delay, positioning: this.positioning }, this.content)));
+            }, onFocusout: () => { var _a; return (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.hideTooltip(0); } }, h("slot", { key: 'b6be513e4eb69604e26ddec26fdf4329164d21d8' })), h("fluent-tooltip", { key: '52c743de0edb443bea54e174cd76858777a9adce', ref: el => (this.tooltipRef = el), anchor: anchorId, delay: this.delay, positioning: this.positioning }, this.content)));
     }
     static get is() { return "udp-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fluent-ui/tree/udp-tree.css

@@ -1,3 +1,56 @@
 :host {
   display: block;
 }
+
+/* In `interaction="button"` mode rows act as buttons and don't expand on click,
+   so the disclosure chevron would be misleading — hide it. Nesting indentation
+   is preserved. */
+.interaction-button fluent-tree-item::part(chevron) {
+  display: none;
+}
+
+/* `collapsible` brings the chevron back as the *only* expand/collapse affordance:
+   clicking it toggles the group, clicking the rest of the row still opens details.
+   Higher specificity than the hide rule above so it wins in button mode. The
+   pointer cursor signals it's the live target. */
+.interaction-button.collapsible fluent-tree-item::part(chevron) {
+  display: inline-flex;
+  cursor: pointer;
+  border-radius: var(--borderRadiusSmall);
+}
+
+.interaction-button.collapsible fluent-tree-item::part(chevron):hover {
+  background-color: var(--colorSubtleBackgroundHover);
+}
+
+/* Button-mode row chrome — Fluent only exposes 5 parts on the tree item
+   (positioning-region, content, chevron, items, aside); positioning-region is
+   the row box, so all of the row's shape/spacing/state lives here. We give it a
+   comfortable height, an inset rounded "pill", a subtle hover, and a brand-tinted
+   selected state. Per-row text/icon colour is owned by the slotted content (the
+   consumer), since parts can't target one row. */
+.interaction-button fluent-tree-item::part(positioning-region) {
+  height: auto;
+  min-height: 32px;
+  margin: 1px var(--spacingHorizontalS);
+  padding-block: var(--spacingVerticalXXS);
+  border-radius: var(--borderRadiusMedium);
+  transition: background-color var(--durationFaster, 0.1s) ease;
+}
+
+.interaction-button fluent-tree-item::part(positioning-region):hover {
+  background-color: var(--colorSubtleBackgroundHover);
+}
+
+.interaction-button fluent-tree-item[selected]::part(positioning-region) {
+  background-color: var(--colorBrandBackground2);
+}
+
+.interaction-button fluent-tree-item[selected]::part(positioning-region):hover {
+  background-color: var(--colorBrandBackground2Hover, var(--colorBrandBackground2));
+}
+
+/* A touch more space between the type icon / number and the label. */
+.interaction-button fluent-tree-item::part(content) {
+  gap: var(--spacingHorizontalXS);
+}

package/dist/collection/components/fluent-ui/tree/udp-tree.js

@@ -32,6 +32,49 @@ export class UdpTree {
          * Path to the content property, or a function to generate the content (default slot).
          */
         this.itemContent = 'label';
+        /**
+         * How a row click behaves:
+         *  - `'tree'` (default): native Fluent tree behavior — clicking a row toggles
+         *    its expansion and selects it; `itemClick` fires for the directly-clicked
+         *    row. Selection is managed internally by Fluent.
+         *  - `'button'`: rows act as buttons. A click anywhere on the row (icon, text,
+         *    aside) emits `itemClick` exactly once and stops there — no built-in
+         *    expand toggle and no internal selection. Pair with `selectedId` (for the
+         *    highlight) and `itemExpanded` (to control which parents are open).
+         */
+        this.interaction = 'tree';
+        /**
+         * When `true`, parent rows get a disclosure chevron that toggles their
+         * expansion, while the rest of the row keeps its normal click behavior.
+         * Designed to pair with `interaction="button"`: clicking a row body still
+         * emits `itemClick` (open details), but clicking the chevron only
+         * expands/collapses that group — it neither selects the row nor emits
+         * `itemClick`. Initial open/closed state is seeded from `itemExpanded`
+         * (so a tree can render fully expanded on load); the user's subsequent
+         * collapse/expand choices are owned internally and persist by id across
+         * re-renders. No effect in `interaction="tree"` mode, where Fluent's native
+         * row-click already toggles expansion.
+         */
+        this.collapsible = false;
+        /**
+         * Per-id expansion overrides applied on top of the `itemExpanded` seed.
+         * Empty until the user clicks a chevron; an entry means "the user set this
+         * row's expansion explicitly." Keyed by resolved item id so the choice
+         * survives `treeItems` edits (e.g. the builder re-flattening the form).
+         */
+        this.expandedOverrides = {};
+    }
+    /** True when the click landed on a row's disclosure chevron `::part`. */
+    isChevronClick(e) {
+        return e.composedPath().some(el => el instanceof Element &&
+            (el.getAttribute('part') === 'chevron' ||
+                el.classList.contains('chevron') ||
+                el.getAttribute('slot') === 'chevron'));
+    }
+    /** Flip the stored expansion for one row, seeding from its initial state. */
+    toggleExpanded(id, initialExpanded) {
+        const current = id in this.expandedOverrides ? this.expandedOverrides[id] : initialExpanded;
+        this.expandedOverrides = Object.assign(Object.assign({}, this.expandedOverrides), { [id]: !current });
     }
     /**
      * Flexible resolver to get data from the item
@@ -54,6 +97,38 @@ export class UdpTree {
         }
         return undefined;
     }
+    /** Icon size that pairs with the tree's row size. */
+    iconSizeForTree() {
+        return this.size === 'small' ? 'sm' : 'md';
+    }
+    /** Start-slot icon from `itemIcon` (string name or `{ name, color?, size? }`). */
+    renderItemIcon(item) {
+        var _a;
+        const resolved = this.resolveProp(item, this.itemIcon);
+        if (!resolved)
+            return null;
+        const d = typeof resolved === 'string' ? { name: resolved } : resolved;
+        if (!d || !d.name)
+            return null;
+        return h("udp-fluent-icon", { name: d.name, size: (_a = d.size) !== null && _a !== void 0 ? _a : this.iconSizeForTree(), color: d.color });
+    }
+    /** Start-slot avatar from `itemAvatar`. Wins over `itemIcon` when both resolve. */
+    renderItemAvatar(item) {
+        var _a, _b;
+        const d = this.resolveProp(item, this.itemAvatar);
+        if (!d || typeof d !== 'object')
+            return null;
+        return (h("udp-fluent-avatar", { name: d.name, initials: d.initials, src: d.src, color: d.color, shape: (_a = d.shape) !== null && _a !== void 0 ? _a : 'circular', size: (_b = d.size) !== null && _b !== void 0 ? _b : (this.size === 'small' ? 24 : 28), iconName: d.iconName }));
+    }
+    /** End-slot badge from `itemBadge` (scalar content, or a descriptor object). */
+    renderItemBadge(item) {
+        var _a, _b, _c;
+        const resolved = this.resolveProp(item, this.itemBadge);
+        if (resolved === null || resolved === undefined || resolved === '')
+            return null;
+        const d = typeof resolved === 'object' ? resolved : { content: resolved };
+        return (h("udp-fluent-badge", { color: d.color, appearance: (_a = d.appearance) !== null && _a !== void 0 ? _a : 'tint', shape: (_b = d.shape) !== null && _b !== void 0 ? _b : 'rounded', size: (_c = d.size) !== null && _c !== void 0 ? _c : 'small', startIconName: d.startIconName, endIconName: d.endIconName }, d.content));
+    }
     /**
      * Recursively renders tree items and their children
      */
@@ -66,20 +141,57 @@ export class UdpTree {
         return itemsAtLevel.map(item => {
             const id = this.resolveProp(item, this.itemId);
             const content = this.resolveProp(item, this.itemContent);
-            const start = this.resolveProp(item, this.itemStart);
-            const end = this.resolveProp(item, this.itemEnd);
             const aside = this.resolveProp(item, this.itemAside);
+            const selected = this.selectedId !== undefined && id === this.selectedId;
+            // Start slot: avatar wins over icon, which wins over plain itemStart text.
+            const avatar = this.renderItemAvatar(item);
+            const icon = avatar ? null : this.renderItemIcon(item);
+            const startText = this.resolveProp(item, this.itemStart);
+            const start = avatar || icon || (startText != null ? startText : null);
+            // End slot: plain itemEnd content plus an optional declarative badge.
+            const endContent = this.resolveProp(item, this.itemEnd);
+            const badge = this.renderItemBadge(item);
+            const end = endContent != null || badge ? [endContent, badge] : null;
             // Find children of this item
             const children = items.filter(child => this.resolveProp(child, this.itemParentId) === id);
             const hasChildren = children.length > 0;
-            return (h("fluent-tree-item", { key: id, size: this.size, appearance: this.appearance, onClick: (e) => {
+            // Seed expansion from `itemExpanded`; once the user toggles a chevron in
+            // `collapsible` mode, the stored override wins so the choice sticks.
+            const seedExpanded = this.itemExpanded !== undefined
+                ? !!this.resolveProp(item, this.itemExpanded)
+                : undefined;
+            const expanded = this.collapsible && id in this.expandedOverrides
+                ? this.expandedOverrides[id]
+                : seedExpanded;
+            return (h("fluent-tree-item", { key: id, size: this.size, appearance: this.appearance, expanded: expanded, selected: selected, onClick: (e) => {
+                    // Chevron in collapsible mode: toggle this group's expansion only —
+                    // no selection, no `itemClick`. Stop here so the click never reaches
+                    // Fluent's tree handler (which would also select the row).
+                    if (this.collapsible && hasChildren && this.isChevronClick(e)) {
+                        e.stopPropagation();
+                        this.toggleExpanded(id, !!seedExpanded);
+                        return;
+                    }
+                    if (this.interaction === 'button') {
+                        // Whole row is a button: emit once for this row and stop, so the
+                        // click never bubbles to ancestor items or to Fluent's tree
+                        // click handler (which would toggle expansion / auto-select).
+                        e.stopPropagation();
+                        this.itemClick.emit(item);
+                        return;
+                    }
+                    // 'tree' mode — preserve native behavior: only the directly-clicked
+                    // row emits; Fluent's tree handler manages toggle + selection.
                     if (e.target === e.currentTarget)
                         this.itemClick.emit(item);
                 } }, start && h("div", { slot: "start" }, start), content, end && h("div", { slot: "end" }, end), aside && h("div", { slot: "aside" }, aside), hasChildren && this.renderTreeItems(items, id)));
         });
     }
     render() {
-        return (h(Host, { key: '065fa53d724ab1be457dfe424e68e20fe34bb7d7' }, h("fluent-tree", { key: '0f8c933e33ad80253e01c87e175bda96d99cc991', size: this.size, appearance: this.appearance }, this.treeItems.length > 0 ? this.renderTreeItems(this.treeItems) : h("slot", null))));
+        return (h(Host, { key: '60890c72952a6f5cff22c20e40afc2fece25a464' }, h("fluent-tree", { key: 'b22362f90a108f7342c7b9f56a3d5cdaa8129fbc', class: {
+                'interaction-button': this.interaction === 'button',
+                collapsible: this.collapsible,
+            }, size: this.size, appearance: this.appearance }, this.treeItems.length > 0 ? this.renderTreeItems(this.treeItems) : h("slot", null))));
     }
     static get is() { return "udp-tree"; }
     static get encapsulation() { return "shadow"; }
@@ -269,9 +381,149 @@ export class UdpTree {
                 "setter": false,
                 "reflect": false,
                 "attribute": "item-aside"
+            },
+            "itemIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ((item: any) => any)",
+                    "resolved": "((item: any) => any) | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Path to an icon name (or a function returning one) rendered in the row's\nstart slot as a `<udp-fluent-icon>`. Use for type/category icons. A function\nmay also return `{ name, color?, size? }` for per-row control. Mutually\nexclusive with `itemAvatar` (avatar wins when both resolve). Rendered inside\nthis component's shadow, so the row chrome in udp-tree.css styles it \u2014 unlike\na consumer-slotted icon, which a shadow stylesheet can't reach via `::part`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-icon"
+            },
+            "itemAvatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ((item: any) => any)",
+                    "resolved": "((item: any) => any) | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Path to an avatar descriptor (or a function returning one) rendered in the\nrow's start slot as a `<udp-fluent-avatar>`:\n`{ name?, initials?, src?, color?, shape?, size?, iconName? }`. Takes\nprecedence over `itemIcon` when both resolve."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-avatar"
+            },
+            "itemBadge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ((item: any) => any)",
+                    "resolved": "((item: any) => any) | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Path to a badge value (or a function returning one) rendered in the row's\nend slot as a `<udp-fluent-badge>`. A scalar becomes the badge content; an\nobject `{ content?, color?, appearance?, shape?, size?, startIconName?,\nendIconName? }` controls its appearance."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-badge"
+            },
+            "itemExpanded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ((item: any) => boolean)",
+                    "resolved": "((item: any) => boolean) | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Path to a boolean \"expanded\" property, or a function returning whether the\nitem should render expanded. Only meaningful for items that have children.\nUseful for trees that should render fully (or partly) expanded on load."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-expanded"
+            },
+            "selectedId": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of the item that should render as selected. Compared against each item's\nresolved id (`itemId`). Drives the selected appearance from the outside so\nthe consumer owns \"which row is active\" as a single source of truth."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-id"
+            },
+            "interaction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'tree' | 'button'",
+                    "resolved": "\"button\" | \"tree\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How a row click behaves:\n - `'tree'` (default): native Fluent tree behavior \u2014 clicking a row toggles\n   its expansion and selects it; `itemClick` fires for the directly-clicked\n   row. Selection is managed internally by Fluent.\n - `'button'`: rows act as buttons. A click anywhere on the row (icon, text,\n   aside) emits `itemClick` exactly once and stops there \u2014 no built-in\n   expand toggle and no internal selection. Pair with `selectedId` (for the\n   highlight) and `itemExpanded` (to control which parents are open)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interaction",
+                "defaultValue": "'tree'"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, parent rows get a disclosure chevron that toggles their\nexpansion, while the rest of the row keeps its normal click behavior.\nDesigned to pair with `interaction=\"button\"`: clicking a row body still\nemits `itemClick` (open details), but clicking the chevron only\nexpands/collapses that group \u2014 it neither selects the row nor emits\n`itemClick`. Initial open/closed state is seeded from `itemExpanded`\n(so a tree can render fully expanded on load); the user's subsequent\ncollapse/expand choices are owned internally and persist by id across\nre-renders. No effect in `interaction=\"tree\"` mode, where Fluent's native\nrow-click already toggles expansion."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "expandedOverrides": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "itemClick",

package/dist/collection/components/forms/dynamic-form/udp-dynamic-form.js

@@ -250,7 +250,7 @@ export class UdpDynamicForm {
         });
     }
     render() {
-        return h("div", { key: '602a7d2fa0dca2057b50db6adbff69846e381fe8', class: "form-root" }, this.renderFormFields());
+        return h("div", { key: '9b655a0b31d3bdee12da0bce92549a43c849ec64', class: "form-root" }, this.renderFormFields());
     }
     static get is() { return "udp-dynamic-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/edit-view-form/edit-view-form.js

@@ -45,8 +45,8 @@ export class EditViewFormDialog {
         this.fetchedCurrentView = false;
     }
     render() {
-        return (h("fluent-dialog", { key: 'abaa16812518817c6d10317692fafd20ba9d5bbb', open: this.open, actionOne: () => { this.handleSubmit(); this.closeDialog(); this.resetFetchedCurrentView(); }, actionTwo: () => { this.closeDialog(); this.resetFetchedCurrentView(); }, handleClose: this.handleClose, labelOne: "Save Update", labelTwo: "Cancel", title: this.title, disableOne: !this.name }, h("form", { key: '6310648623469abcbc10c50ccb315d9c75af6fc9', class: "edit-form" }, h("text-field", { key: '172d88e862c69db5dc38fa1b881cc942341a9cf4', label: "View Name", value: this.name, onInput: (event) => this.handleNameChange(event) }), this.fetchedCurrentView &&
-            h("div", { key: 'ddef7cab46f3ed1f6c8f1df286c0ce9e13d0aa68', class: "toggle-options" }, h("div", { key: 'c28ab97a64172b6a8b0b76adf67a750871031e57' }, h("stencil-toggle", { key: 'bd188395e8a85148d904e548ad9085e88f66f05e', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), " "), h("div", { key: 'b4a9920cdac11b34cf4a17ff20d9787e57e070ff' }, h("stencil-toggle", { key: 'a22473a10be77d0ae078e08280e34b07bbf9d6f4', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
+        return (h("fluent-dialog", { key: '2fcb4aa52095f093f4078106474919a6c22ee798', open: this.open, actionOne: () => { this.handleSubmit(); this.closeDialog(); this.resetFetchedCurrentView(); }, actionTwo: () => { this.closeDialog(); this.resetFetchedCurrentView(); }, handleClose: this.handleClose, labelOne: "Save Update", labelTwo: "Cancel", title: this.title, disableOne: !this.name }, h("form", { key: '876ca0dc0ea667cf9c9b66cea0870d3f7021d149', class: "edit-form" }, h("text-field", { key: '53da2849244c65c58f8bf27999c0f2fd71169d35', label: "View Name", value: this.name, onInput: (event) => this.handleNameChange(event) }), this.fetchedCurrentView &&
+            h("div", { key: 'd3c6cedc613ea76941b49bacec3e49bcd3fb20e6', class: "toggle-options" }, h("div", { key: '00d0fc001770983188d8e26265482fe46ed677b1' }, h("stencil-toggle", { key: 'd7121ebc66be6b78b4738d90cef8654fe63e6b15', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), " "), h("div", { key: '79d0795eb5059c2c79401a40b5ec190631643190' }, h("stencil-toggle", { key: '86e1dd8285b5dad8fd1c896a3d763aa760c583cb', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
     }
     static get is() { return "edit-view-form-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/form/stencil-form.js

@@ -239,7 +239,7 @@ export class StencilForm {
         debounce(submitFunction, 1000, { leading: true, trailing: false })();
     }
     render() {
-        return (h("form", { key: '3a80fa9c957b76b9d6b172a2c1ae66880bb46134' }, h("slot", { key: 'c592488ed1102df7b5e88866dd3553644682472f' })));
+        return (h("form", { key: '7776648f88cbea0b0db6d3fd82b845f74e15b1c1' }, h("slot", { key: 'b3099b3bb707bb15dca8995b8db2a573036a884e' })));
     }
     static get is() { return "stencil-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/save-view-form/save-view-form.js

@@ -42,11 +42,11 @@ export class SaveViewFormDialog {
         }
     }
     render() {
-        return (h("fluent-dialog", { key: 'dee072d383c9470d3a4481ccc2939d227365c9dc', open: this.open, actionOne: () => {
+        return (h("fluent-dialog", { key: 'd2ccd84d3fd567afd9a7741c34723172a938b511', open: this.open, actionOne: () => {
                 this.handleSubmit();
             }, actionTwo: this.closeDialog, actionThree: () => {
                 this.handleViewUpdate();
-            }, handleClose: this.handleClose, labelOne: "Save as Copy", labelTwo: "Cancel", labelThree: "Save View", title: this.title, disableOne: !this.name, buttonThreeHidden: !this.gridViewId }, h("form", { key: '6c194929ee58aeeadd0cc525e44e1ec180527320', class: "save-form" }, h("text-field", { key: 'eae3a020fc8df4be9098a5ad9120399168ae5ed0', label: "View Name", placeholder: "Create a name for your view", value: this.name, onInput: (event) => this.handleNameChange(event) }), h("div", { key: 'e7c345719c291029428c73290e13b4c85e15696e', class: "toggle-options" }, h("div", { key: '1797c39230ff667f26acf5e24c8d808a38114945' }, h("stencil-toggle", { key: '108a9ede29aa823033352831eb38b0170d6ef4e1', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), ' '), h("div", { key: 'f56e36069caef71d779cb1536a3c9e3992cd7f67' }, h("stencil-toggle", { key: '8a23fe5b895b0ca0f3632e2b52a3e7bf519a060b', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
+            }, handleClose: this.handleClose, labelOne: "Save as Copy", labelTwo: "Cancel", labelThree: "Save View", title: this.title, disableOne: !this.name, buttonThreeHidden: !this.gridViewId }, h("form", { key: 'fd9b558e261d6f98657a981ec91cf290f4b272bc', class: "save-form" }, h("text-field", { key: '144de082027313030b008e3c052235c83632aeb5', label: "View Name", placeholder: "Create a name for your view", value: this.name, onInput: (event) => this.handleNameChange(event) }), h("div", { key: '01e902f90a3cdfaa01d93fc69aac3c5cbcc08c7b', class: "toggle-options" }, h("div", { key: 'f598f9c5f0ebcb01c7df8c9eaac51cf64e208fc8' }, h("stencil-toggle", { key: '64aad69579ec47be014914973e24d17f60343289', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), ' '), h("div", { key: '67942f2aad4b198239e4aa1d8c4aac39f7b8070b' }, h("stencil-toggle", { key: '1baea48db836a6967af4559fd3bc2c2897b5e731', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
     }
     static get is() { return "save-view-form-dialog"; }
     static get encapsulation() { return "shadow"; }