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

package/dist/collection/components/inputs/numeric-field/numeric-field.js

@@ -159,7 +159,7 @@ export class NumericField {
             'bx--text-input--error': isError,
             'text-field--disabled': this.disabled,
         };
-        return (h(Host, { key: 'e111a0da1bb0e54f834032d9e0ad1e791189b9b4', class: {
+        return (h(Host, { key: '8276d1270f4204e8c9b5b0d5a43474229d03b460', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -168,9 +168,9 @@ export class NumericField {
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'bcb6a988d57b50c03722c4063919743bae0d204c', class: "bx--form-item" }, h("unity-typography", { key: '26ef4764ad4e5b33c2bc868d89cde76d22f79bad', variant: "caption-text" }, h("label", { key: '0fbac7370479fd6c4fcbe713b797a584e12067e6', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue, name: this.name })) : (h("input", { id: this.id, name: this.name, type: "number", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readOnly: this.readonly, onFocus: this.onFocus, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, inputMode: this.inputMode, min: this.min, max: this.max, step: this.step,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '29c26efafa57603a7e51cb58afc305225aa79f0c', class: "bx--form-item" }, h("unity-typography", { key: 'bc792eef75aa91f1c11828e331eb95dd4109d991', variant: "caption-text" }, h("label", { key: 'a1d5b833838e9f0fad2d3a24f1e73e6f0729d040', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue, name: this.name })) : (h("input", { id: this.id, name: this.name, type: "number", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readOnly: this.readonly, onFocus: this.onFocus, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, inputMode: this.inputMode, min: this.min, max: this.max, step: this.step,
             //@ts-ignore
-            udprecordid: 'udpRecord-number-field-' + this.id })), isError && (h("div", { key: 'd60c94fe2d2026f4e4d3239684cf94b805e217f3', class: "error-message" }, h("unity-typography", { key: '24a1cb442cce2d964ba93ab77cffb4a2db814123', variant: "caption-text", color: "error" }, this.errorMessage))))));
+            udprecordid: 'udpRecord-number-field-' + this.id })), isError && (h("div", { key: '2ddafd6d1b027189f7f811225a6dfa5673e465ef', class: "error-message" }, h("unity-typography", { key: '791ad4fb7b984cbe858a2ff75c40d3ef39b5060f', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     static get is() { return "numeric-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/inputs/signature-input/signature-input.js

@@ -294,7 +294,7 @@ export class SignatureInput {
             'readonly': this.readonly,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: 'f7e2efb3c833954f7c5d4eb89523124004870af2', class: {
+        return (h(Host, { key: 'd2bccc6578bb06345e6fccf5e60d33ca25a7697e', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -302,7 +302,7 @@ export class SignatureInput {
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: '65fb1003cb711abce87ad6610ef8f760f316f97a', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '00f51ced39a56ef9ff26c01bdb17f99093b3651e', variant: "caption-text" }, h("label", { key: 'bc5868273a81faee0f762a24e8b6b9a0e0b082ba', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), h("div", { key: '4181296c918939de81945f22e4064f05f291d60a', class: containerClasses }, h("canvas", { key: '1e3ad85753f8731eef0628c777731a1984bbfe12', ref: el => (this.canvasEl = el), class: { 'signature-canvas': true, 'readonly': this.readonly || this.disabled }, id: this.id }), !this.readonly && !this.disabled && (h("button", { key: '0725984a0bb1813e03a178f54d6ba574f69d0079', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (h("div", { key: '95cd4970272b0c82c1c85ef1ceeca5900704f82f', class: "error-message" }, h("unity-typography", { key: 'e89ba3de7f359091d7097adcd167571dacc2eac1', variant: "caption-text", color: "error" }, this.internalError))))));
+            } }, h("div", { key: '5411ff627764ed4b02f8e246d2a3f1ed2154ed80', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '6d93b3ad53f412c9e6cbdcad813ba687a4f7c200', variant: "caption-text" }, h("label", { key: 'e8de0162d30aaa00b22667db64f322c7bf20ec6a', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), h("div", { key: '3ffc0a9d69df5fd5cdeb89c5c6bd404e6d1906ab', class: containerClasses }, h("canvas", { key: '59201cd6d3ad72040e54a05ef5b9e8c164f5d427', ref: el => (this.canvasEl = el), class: { 'signature-canvas': true, 'readonly': this.readonly || this.disabled }, id: this.id }), !this.readonly && !this.disabled && (h("button", { key: 'f13c4b9e45d54117410df18920cc9054b94bbba6', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (h("div", { key: '4b0bb3bc923901d2350f541b94bab2ae71ea6aec', class: "error-message" }, h("unity-typography", { key: 'd294d75b68cb77227ed22a26a759b8b867e5f928', variant: "caption-text", color: "error" }, this.internalError))))));
     }
     static get is() { return "signature-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/inputs/tally/tally.js

@@ -46,14 +46,14 @@ export class TallyDisplay {
         const isError = !!this.error;
         const answeredCount = this.yesCount + this.noCount + this.naCount;
         const unansweredCount = this.totalFields - answeredCount;
-        return (h(Host, { key: '786b5c03c99141a8748903f0774f11ace85f5919', class: {
+        return (h(Host, { key: '525face8f1e74cfd9eb06867f713cb51a9bec738', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: 'f4c78c29cf31735f51b240656b7d8cf7e57be3ee', class: "tally-container" }, this.label && (h("unity-typography", { key: '3190e645dcfc05cfff0383226789772c85cd49f8', variant: "caption-text" }, h("label", { key: '1849876e3f91ea58445466b39b93f39b628b2f1b', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: 'ea05a601e0a637382d28a7df1606881aceea477f', class: "tally-content", id: this.id }, h("div", { key: 'f0f50415cb8b6fc02e98ce69f8b90b4be6a982db', class: "tally-stats" }, h("div", { key: '17c79e127248f374525763f0ad8aef44efd583f5', class: "tally-item tally-yes" }, h("unity-typography", { key: 'c6fefef0c2d2ed5674b9a1b8a33a82fe63385a21', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: '4c3941792fb91bddc62784232657e5e8180dc16f', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: '22d6cf2a1994a54c996363e4789777cc24d659c5', class: "tally-item tally-no" }, h("unity-typography", { key: 'dc4015cfd53dfb122ccbad61fc34913ec62b2b76', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: '0695eca7a58b03b1c531ef61934f81ca01247e94', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '23faa1ff699cc8c667100e4a8f678efac50af145', class: "tally-item tally-na" }, h("unity-typography", { key: '228e3e62c36f159fe40157f950cb679c718d5c20', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: '1ca40cd0471647bdf97abeeccf471ef959aa3dea', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: '7e397057a121192dbb43bbb72eb7f905105f4e76', class: "tally-item tally-unanswered" }, h("unity-typography", { key: 'f3a6bdb016986659913d702b71b7058f84b67851', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: '5e7caa8d0d3e7befc000759ac9cd61caeab476a4', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: '689f65675f9078d2db8c3bc2d39cf376c9d5473b', class: "tally-summary" }, h("unity-typography", { key: '98d20bfacdcf884af50354365486d0dd154612bc', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: '0b64e68843056739c707f2fade834c0a316defd9', class: "error-message" }, h("unity-typography", { key: '3cad3e846ee55c6aea07c5ebf513c782c20807fb', variant: "caption-text", color: "error" }, this.error))))));
+            } }, h("div", { key: 'bb4bb72acb1f1922e9a3b4a08178d132c28fa6f6', class: "tally-container" }, this.label && (h("unity-typography", { key: '7be2fb2395c872a94e64cfe8e7eeeb0bc61e47c0', variant: "caption-text" }, h("label", { key: '3ddbaf02c2df4152d76e5c5c594f573fbac84c5f', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: '4bdcc43095d9e232f55e143b2ba39e793f835a86', class: "tally-content", id: this.id }, h("div", { key: '34f55525209b5af057eb416a83d8363332eb2f1e', class: "tally-stats" }, h("div", { key: 'e6af1e645206ddaf906c3f584a1c14fd0e277617', class: "tally-item tally-yes" }, h("unity-typography", { key: '9b0388792c594f6bc622cd9cf565eccb6a61681b', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: '73bcc34114de22156b8d9f0e3e4d95c2e3ed9646', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: 'a701c781916660e640d32707acd3fb22543f2fea', class: "tally-item tally-no" }, h("unity-typography", { key: '24f8db19e0233b92abcd7060e9cd9713fef32558', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: '6652950cdbde2e6cf93161d34c16d5ba84d92fd4', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '4e98bb1e25e796668f7228b3857c961ed61152c0', class: "tally-item tally-na" }, h("unity-typography", { key: '42faac58f4a10186d3f291039e83f440d558e15c', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: '2af06b524eceec6a3ae4ee83574b6e546937cc1f', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: '357b7a87f32b37e7480b219b05bd80b12d8f3aaf', class: "tally-item tally-unanswered" }, h("unity-typography", { key: '9fe811c0274ad67f1ba2f70a30f77c0c2664f064', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: '89d4905e8d375f10a605c25de930230798891356', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: '57bf6f2a2ee665e6fff88aab30c78cd6d1e7dcba', class: "tally-summary" }, h("unity-typography", { key: '0453a1fedda691eb7faf6d9a72261d9ffe1a9fab', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: '7c01434a5a51526b66c098fba799e755305cc569', class: "error-message" }, h("unity-typography", { key: '037400916c79ac2f03b9359f4b18559b54ea81fc', variant: "caption-text", color: "error" }, this.error))))));
     }
     static get is() { return "tally-display"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/inputs/text-area/text-area.js

@@ -240,7 +240,7 @@ export class TextArea {
     }
     render() {
         const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;
-        return (h(Host, { key: '284310282643812508b7f68e3d009df63990c076', class: {
+        return (h(Host, { key: '1dbebaaced45c6949e8f548de81be785156ff109', class: {
                 'udp-input': true,
                 'udp-input--error': !!errorMessage,
                 'udp-input--disabled': disabled,
@@ -249,11 +249,11 @@ export class TextArea {
                 'udp-input--required': required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: 'e89205d4d0d790a682fcc5884bdd0e92783806f9', class: "bx--form-item" }, h("unity-typography", { key: '72d5088b9a1e2cac7d99de68e82bf78ee50028a8', variant: "caption-text" }, h("label", { key: '683622ed8d05745aca452f27f01982edb73327db', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: '0327812cee81fec5515b16b6b0decf988f666561', ref: el => (this.textareaEl = el), id: id, class: {
+            } }, h("div", { key: 'd58eda1461575c8197d30ba01cf73a1789825d4c', class: "bx--form-item" }, h("unity-typography", { key: '6b999249e5061bb12a0c41ce5ca289ed62e60179', variant: "caption-text" }, h("label", { key: '85e3ea56951ea824d4049cfde2576d510ea8eecb', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: 'd2052dcae765db39662295fbf710e4e3e099f636', ref: el => (this.textareaEl = el), id: id, class: {
                 'bx--text-input': true,
                 'bx--text-input--error': !!errorMessage,
                 'text-area--disabled': disabled,
-            }, placeholder: placeholder, value: internalValue, required: required, disabled: disabled, readonly: readonly, maxLength: this.maxCharacter, rows: internalRows, onInput: this.onInput, onChange: this.onChange }, internalValue), errorMessage && (h("div", { key: '06036b834a00f6d2146c329d273a0fcb50894022', class: "error-message" }, h("unity-typography", { key: 'b42d6d7138a06f07af8d06ef75abd56aa4e98331', variant: "caption-text", color: "error" }, errorMessage))))));
+            }, placeholder: placeholder, value: internalValue, required: required, disabled: disabled, readonly: readonly, maxLength: this.maxCharacter, rows: internalRows, onInput: this.onInput, onChange: this.onChange }, internalValue), errorMessage && (h("div", { key: '4bf13bc42bacf006389c5c7b7f14778431fda466', class: "error-message" }, h("unity-typography", { key: 'dcfa32c33ef7452e5b3596276c080d509d7bfe68', variant: "caption-text", color: "error" }, errorMessage))))));
     }
     static get is() { return "text-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/inputs/text-field/text-field.js

@@ -195,7 +195,7 @@ export class TextField {
             'bx--text-input:user-invalid': isError,
             'text-field--disabled': this.disabled,
         };
-        return (h(Host, { key: '40b53f61f7ca060a9965523f8d6d57c8071901e5', class: {
+        return (h(Host, { key: '0e61648a88f05d9b76e62872299f16383dc17b1d', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -203,9 +203,9 @@ export class TextField {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'b5500e1963e74718c800d3c72162c4b42d535206', class: "bx--form-item" }, h("unity-typography", { key: 'd4a5957b13848ebe5e979f52e80b51c3dd1e2283', variant: "caption-text" }, h("label", { key: '2dfb94ff0bfce4aa9bbb4558673809371060a989', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue })) : (h("input", { id: this.id, type: "text", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxCharacter, inputMode: this.inputMode, onInput: this.onInput, onChange: this.onChange,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '8f092d4d310615a0be06e685249ddb2504d37350', class: "bx--form-item" }, h("unity-typography", { key: 'ddbe63461c2203e6aa76e0ed10b4eb46f821b37e', variant: "caption-text" }, h("label", { key: '0f4e4a09000f02befa7ae258230bd2c8bb017bfa', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue })) : (h("input", { id: this.id, type: "text", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxCharacter, inputMode: this.inputMode, onInput: this.onInput, onChange: this.onChange,
             //@ts-ignore
-            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (h("div", { key: '2b00003bec0479cdda47c324f1f1aed2c96fdc83', class: "error-message" }, h("unity-typography", { key: '4c7e5da72941816ffbdd199ce22aaecbae5d67c3', variant: "caption-text", color: "error" }, this.errorMessage))))));
+            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (h("div", { key: 'b98567069ca160eb16a178e2a06ff7220218d377', class: "error-message" }, h("unity-typography", { key: 'de7b6ee79c664786ebe7f0da985510b981abb0ef', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     static get is() { return "text-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/inputs/time-selector/udp-time-selector.js

@@ -255,7 +255,7 @@ export class UdpTimeSelector {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (h(Host, { key: '4f56110550cec958ad3269d09264af4ea86624f4', class: {
+        return (h(Host, { key: 'd902969d076b7ae7471f448fea7a13bb63eaca57', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -264,9 +264,9 @@ export class UdpTimeSelector {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'dcbb1681537a8c0221c156c30972a5efd66edfee', class: "bx--form-item" }, h("unity-typography", { key: 'f235c23a0df8cc2cdcf8a5e5372d674a22118565', variant: "caption-text" }, h("label", { key: '78580a704857a03ecef39dfe90622f87dafb09d1', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '76a215225a1d2612150de571b2fd8a87edc1d47a', type: "time", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min, max: this.max, onInput: this.handleTimeInput, onChange: this.handleTimeChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'd27b34454f163d8fe5f738d1496cc467cc055571', class: "bx--form-item" }, h("unity-typography", { key: '8108f0f19b8806298125624020faa34b548f1f4a', variant: "caption-text" }, h("label", { key: '3ad1034df6fc3849e007012c3abbfede6414769c', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'bb4555c790f0857cc6af7599ec6026e640aa0ed6', type: "time", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min, max: this.max, onInput: this.handleTimeInput, onChange: this.handleTimeChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), h("unity-typography", { key: '7b0fbc5f7aabd61e192004f1f8608d7409efb411', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), h("unity-typography", { key: '6266a9fa5c185c51cac5d3acdd1412ed1cfcff42', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     static get is() { return "udp-time-selector"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/inputs/toggle/stencil-toggle.js

@@ -158,16 +158,16 @@ export class StencilToggle {
         const buttonId = `${baseId}-button`;
         const labelId = `${baseId}-label`;
         const isError = !!this.errorMessage;
-        const labelElement = this.label && (h("label", { key: '30e3a22099123364cddfc05fbf50ced696dbe51b', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, h("unity-typography", { key: 'df3bcf509425e827865ab57bb24c2d3b27f00027', variant: "caption-text" }, this.label)));
-        const toggleElement = (h("div", { key: '275096148fe4f343dde3a23019ccbaedf1993def', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, h("button", { key: 'c6ad650a65fa70044d3198462af7b18b2a6664fe', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, h("span", { key: '650685e10897514efdb25527c356c838b4dae0d2', class: "toggle-knob" }))));
-        return (h(Host, { key: 'f097d18da8c7301e3902b53af97a7dbe5c3740cd', class: {
+        const labelElement = this.label && (h("label", { key: '02e8a2f438bcde8abda9ab9a2197fd24c12b1938', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, h("unity-typography", { key: 'bf7a09ffd0d50d19eedaa48dfe08e5a4889d06d8', variant: "caption-text" }, this.label)));
+        const toggleElement = (h("div", { key: '4b8a4bbf623c8dc20fcb0506135cfb5a0d47b6c8', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, h("button", { key: 'cd4b73375bd2c1633547949e7332cc71befec60b', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, h("span", { key: 'bf753b2dc021bc46c249628f1711643817cc9f6a', class: "toggle-knob" }))));
+        return (h(Host, { key: '1ef782b55c03ed48c4ea7c4df964bded0aa2ef85', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--checked': this.toggled,
                 [`udp-input--margin-${this.margin}`]: true,
                 [`udp-input--size-${this.size}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false' }, h("div", { key: '14edc1c2e9ea69742f9ba84ceee5d73f58cd4bf2', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && h("div", { key: '2cc48a745cb77b9a85493ff0692241635b312f87', class: "error-message" }, this.errorMessage))));
+            }, "aria-invalid": isError ? 'true' : 'false' }, h("div", { key: '09fea39022259fcb9362400e7acb94cd2eb83522', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && h("div", { key: '72e5c6b9e0f082a6b73c95653a3b3de04da716f7', class: "error-message" }, this.errorMessage))));
     }
     static get is() { return "stencil-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/inputs/udp-selector/udp-selector.js

@@ -357,7 +357,7 @@ export class UdpSelector {
             'focused': this.isOpen,
         };
         const hasSelection = this.multiSelect ? this.selectedOptions.length > 0 : !!this.selectedOption;
-        return (h(Host, { key: '1eac7856b172c9b25abaf8855e5cc8740517e55d', class: {
+        return (h(Host, { key: '061c9a3761823370b5a3c91e8fd6e63847794768', class: {
                 'udp-input': true,
                 'udp-selector': true,
                 'udp-input--error': isError,
@@ -367,9 +367,9 @@ export class UdpSelector {
                 'udp-input--large': this.large,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '28efff4a65f344dafb8f2139e7fe2f065f3e016a', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '97ac603bfd7541410e20cd92ca710f44f894c68f', variant: "caption-text" }, h("label", { key: '3514a3760a0986dace0baca293c7b80e4c3b7601', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), h("div", { key: '6fbca882446da9d8ccb2987b693e0daed42bd8de', class: "udp-selector__container" }, h("div", { key: '2215b94a1a14f86eafd28cf4be9416b934d14a78', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), tabindex: this.disabled || this.readonly ? '-1' : '0', role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen.toString(), id: 'udpRecord-udp-selector-' + this.id,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '44d577fcc9f217bc21a75e3941bd8173b74bc851', class: "bx--form-item" }, this.label && (h("unity-typography", { key: 'f850be572774ea991ed573a29fa19ad8a36d9132', variant: "caption-text" }, h("label", { key: '9812ff1ecbe6bbbd46c2180e04c63242fd7512f1', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), h("div", { key: 'fb12741fffdcf3c695a8512af53c01d9df3ccf5f', class: "udp-selector__container" }, h("div", { key: '83b6720b65d92ee3625c229843ed4d9e0b427941', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), tabindex: this.disabled || this.readonly ? '-1' : '0', role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen.toString(), id: 'udpRecord-udp-selector-' + this.id,
             // @ts-ignore
-            udprecordid: 'udpRecord-udp-selector-' + this.id }, h("div", { key: '6448b11e0f2665f9881cb6d9337829eef76f771b', class: {
+            udprecordid: 'udpRecord-udp-selector-' + this.id }, h("div", { key: 'b6d0b13c9257886266b324e066d83026b61a9dc7', class: {
                 'selected-option-label': true,
                 'placeholder': !hasSelection,
             } }, this.multiSelect
@@ -378,7 +378,7 @@ export class UdpSelector {
                 : 'Select option(s)'
             : this.selectedOption
                 ? this.selectedOption.label
-                : 'Select an option'), this.multiSelect && this.selectedOptions.length > 0 && h("span", { key: '76d80fd3477f38b573a244525c73f1d6c3ecf79a', class: "checkmark" }), h("div", { key: '5cb32afeacb64b6db60fce687c8bf7fdfdbb9d8f', class: "arrow" })), this.isOpen && (h("ul", { key: 'bce792f0008f1758a78ad2602a9fbd5f88d971b2', class: "options-list" }, this.options.map(option => (h("unity-typography", { variant: "button" }, h("li", { class: this.isOptionSelected(option) ? 'selected' : '', onClick: () => this.selectOption(option), onMouseDown: this.handleOptionMouseDown }, option.label, this.isOptionSelected(option) && h("span", { class: "checkmark" })))))))), this.errorMessage && (h("div", { key: '2663cbb5488cab8d20bf37e76163c52c3ca3105b', class: "error-message" }, h("unity-typography", { key: '31e839f1235e91c1db7168a010037040803b3901', variant: "caption-text", color: "error" }, this.errorMessage))))));
+                : 'Select an option'), this.multiSelect && this.selectedOptions.length > 0 && h("span", { key: '92e05198d2f911965eeca9b6d5ae90cdf53b10cf', class: "checkmark" }), h("div", { key: 'd573809f8b99ea9e3cd9bf8a7e72e168909a3f62', class: "arrow" })), this.isOpen && (h("ul", { key: 'd390d560b3ab1e617dbaecb9191ac8fc59fd4a2d', class: "options-list" }, this.options.map(option => (h("unity-typography", { variant: "button" }, h("li", { class: this.isOptionSelected(option) ? 'selected' : '', onClick: () => this.selectOption(option), onMouseDown: this.handleOptionMouseDown }, option.label, this.isOptionSelected(option) && h("span", { class: "checkmark" })))))))), this.errorMessage && (h("div", { key: 'af9e7002e4ac9eea11add7ca8cdf1b970b6c70dc', class: "error-message" }, h("unity-typography", { key: '998a8ed897a867167a2c063a259e30ff5f1c7896', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     /**
      * Checks if a given option is currently selected.

package/dist/collection/components/layout/udp-container/udp-container.js

@@ -15,12 +15,12 @@ export class UdpContainer {
         this.padding = true;
     }
     render() {
-        return (h("div", { key: '07682f1ad543c759d110e3684007c2d010f8226a', class: {
+        return (h("div", { key: '8d27d811c4aa8a2fa0671bf4730b2aae26cc4fb0', class: {
                 'udp-container': true,
                 'udp-container--fluid': this.fluid,
                 'udp-container--padded': this.padding,
                 [`udp-container--${this.maxWidth}`]: true,
-            } }, h("slot", { key: 'ed106a2654c8e5d8c885d99dcc04987a557a995f' })));
+            } }, h("slot", { key: 'faad8a6bcf220fcbf5958578fabfa2eaef7c7ab0' })));
     }
     static get is() { return "udp-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout/udp-container-query/udp-container-query.js

@@ -21,9 +21,9 @@ export class UdpContainerQuery {
         return styleRules;
     }
     render() {
-        return (h(Host, { key: 'c7ada38fd8aea9595f34efe1810d1b7d77fe90d2', class: {
+        return (h(Host, { key: '8488cdd4ea26bb03accf4d3ecd43c3acf062be44', class: {
                 [this.customClass]: !!this.customClass,
-            } }, h("style", { key: 'ff3ea9ab44f75ed1f2a7286b86c8659277d85689' }, this.getContainerQueryStyle()), h("slot", { key: '5a5e683855caa41142dbb9bd7214179b920db314' })));
+            } }, h("style", { key: '109b303072f6c3868fc35bc97389a42145b8e131' }, this.getContainerQueryStyle()), h("slot", { key: '387a64ae9d981524b44002b92745fb3bea99557c' })));
     }
     static get is() { return "udp-container-query"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout/udp-container-query-grid/udp-container-query-grid.js

@@ -37,7 +37,7 @@ export class UdpContainerQueryGrid {
                 gap: resolveGap(gapValue),
             }));
         });
-        return (h(Host, { key: '844c48c06b23ce7b87cb577974d1df9942d72493' }, h("udp-container-query", { key: 'c40e0b6254fdd158b93c5bfe72cde133270e6d9c', queries: queries }, h("div", { key: '0a8f0c8c5a8ac4a1d89aa36a19d20f2a5b8eb23b', class: "grid-container" }, h("slot", { key: '2fc3a276f0a5ae16ba3ab7263b14b5719195ba5e' })))));
+        return (h(Host, { key: '79d731f38375b0e382ac7634770b2ae1ab0d7078' }, h("udp-container-query", { key: 'a5066884b08ce9f8a0b62e49436d85d4fee27173', queries: queries }, h("div", { key: '2853db90992ab825ac7f605ca3180e4de4761dbf', class: "grid-container" }, h("slot", { key: '93c202ef4d3b8f5190d05de56d4e3233b5e0521f' })))));
     }
     static get is() { return "udp-container-query-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout/udp-container-query-grid-item/udp-container-query-grid-item.js

@@ -15,7 +15,7 @@ export class UdpContainerQueryGridItem {
             .join('\n');
     }
     render() {
-        return (h(Host, { key: '5cb4a4d1b0746ea467679ba496fadc4b11779754' }, h("style", { key: '871ec8c01b3a21f87a48ab15a2951635ef73b78a' }, this.getSpanStyles()), h("slot", { key: '7ff658d4da3204702e68c96f6112d8ff80f07c13' })));
+        return (h(Host, { key: '4e07bdb293b068bdb9d05dca6532343957ad437a' }, h("style", { key: '0a6e9517626e40c23b40edfd45d6f9f70ad96bd8' }, this.getSpanStyles()), h("slot", { key: '3143e751498cd1ce053a10ff2439fa2335637b90' })));
     }
     static get is() { return "udp-container-query-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout/udp-page/udp-page.js

@@ -16,7 +16,7 @@ export class UdpPage {
             padding: this.padding,
             margin: '0 auto', // Centers the content if max-width is set
         };
-        return (h("div", { key: 'a96f2d55462886cbe8b8bb4d78a74b6731591077', style: style }, h("slot", { key: '322f188f47b8e52ea3ebbb9e393a1e626bc67df4' }), " "));
+        return (h("div", { key: '42ef32c0e90566201dbca53bd2bef0a7a2039def', style: style }, h("slot", { key: 'b1108c9c61c9d67a5338ad38b6fb1a78b2d8fd49' }), " "));
     }
     static get is() { return "udp-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/layout/udp-sidebar-layout/udp-sidebar-layout.css

@@ -0,0 +1,139 @@
+:host {
+  display: block;
+}
+
+/* Fill mode: the layout occupies its container's full height and each column
+   scrolls independently inside it (no page-level sticky needed). */
+:host(.sbl-host--fill) {
+  height: 100%;
+  min-height: 0;
+}
+
+.sbl {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.sbl--fill {
+  height: 100%;
+  min-height: 0;
+}
+
+.sbl--fill .sbl__sidebar {
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--colorNeutralStroke2) transparent;
+}
+
+.sbl--fill .sbl__main {
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Sidebar on the right: reverse the row so DOM order stays sidebar-first. */
+.sbl--end {
+  flex-direction: row-reverse;
+}
+
+/* ===== Sidebar ===== */
+
+.sbl__sidebar {
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: var(--sbl-sidebar-width, 264px);
+  background-color: var(--colorNeutralBackground1);
+  border-right: 1px solid var(--colorNeutralStroke2);
+}
+
+.sbl--end .sbl__sidebar {
+  border-right: none;
+  border-left: 1px solid var(--colorNeutralStroke2);
+}
+
+/* Collapsed: shrink to a slim rail. */
+.sbl--collapsed .sbl__sidebar {
+  width: var(--sbl-rail-width, 44px);
+}
+
+/* Sticky mode — pin below a fixed page header (top + max-height come from
+   inline style) and scroll independently. */
+.sbl--sticky .sbl__sidebar {
+  position: sticky;
+  align-self: flex-start;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--colorNeutralStroke2) transparent;
+}
+
+.sbl--sticky .sbl__sidebar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.sbl--sticky .sbl__sidebar::-webkit-scrollbar-thumb {
+  background-color: var(--colorNeutralStroke2);
+  border-radius: 4px;
+}
+
+.sbl--sticky .sbl__sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ===== Sidebar header ===== */
+
+.sbl__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacingHorizontalS);
+  padding: var(--spacingVerticalS) var(--spacingHorizontalXS) var(--spacingVerticalS)
+    var(--spacingHorizontalM);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--colorNeutralBackground1);
+}
+
+.sbl__header-content {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacingHorizontalS);
+}
+
+.sbl__title {
+  color: var(--colorNeutralForeground1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sbl__body {
+  padding: var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalM);
+}
+
+/* ===== Collapsed rail ===== */
+
+.sbl__rail {
+  display: none;
+  justify-content: center;
+  padding: var(--spacingVerticalS) 0;
+  position: sticky;
+  top: 0;
+}
+
+.sbl--collapsed .sbl__panel {
+  display: none;
+}
+
+.sbl--collapsed .sbl__rail {
+  display: flex;
+}
+
+/* ===== Main content ===== */
+
+.sbl__main {
+  flex: 1 1 auto;
+  min-width: 0;
+}