npm - udp-stencil-component-library - Versions diffs - 25.18.1-beta.5 → 25.18.1-beta.7 - Mend

udp-stencil-component-library 25.18.1-beta.5 → 25.18.1-beta.7

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 (302) hide show

package/dist/collection/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.js ADDED Viewed

@@ -0,0 +1,65 @@
+import { h } from "@stencil/core";
+export class UdpTabPanel {
+    render() {
+        const isActive = this.value === this.index;
+        return (h("div", { key: '735bca81299145233b3e2e017eef05a840b0fb69', class: {
+                'tab-panel': true,
+                'active': isActive,
+            }, role: "tabpanel", "aria-hidden": !isActive ? 'true' : 'false' }, h("slot", { key: '68ad651e93008ca12c4d976ca71747a4f4cf4b39' })));
+    }
+    static get is() { return "udp-tab-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-tab-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-tab-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The active tab index, provided by the parent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The index this panel corresponds to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
+            }
+        };
+    }
+}
+//# sourceMappingURL=udp-tab-panel.js.map

package/dist/collection/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"udp-tab-panel.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;IAWtB,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAE3C,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,QAAQ,EAAE,QAAQ;aACnB,EACD,IAAI,EAAC,UAAU,iBAEF,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAEzC,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'udp-tab-panel',\n styleUrl: 'udp-tab-panel.css',\n shadow: true,\n})\nexport class UdpTabPanel {\n /**\n * The active tab index, provided by the parent.\n */\n @Prop() value: number;\n\n /**\n * The index this panel corresponds to.\n */\n @Prop() index: number;\n\n render() {\n const isActive = this.value === this.index;\n\n return (\n <div\n class={{\n 'tab-panel': true,\n 'active': isActive,\n }}\n role=\"tabpanel\"\n // Use aria-hidden for accessibility and :host styling\n aria-hidden={!isActive ? 'true' : 'false'}\n >\n <slot></slot>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/my-component/UI/toolbars/app-bar/app-bar.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import Menu24 from "@carbon/icons/es/menu/24";
 export class AppBar {
     render() {
-        return (h("div", { key: 'a96a536ce64d82b2a05a305539b0d40cb9372e14', class: "header" }, h("stencil-icon-button", { key: '391ce32825452e7da4bba0423b7f373b8bd9c4a4', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'bb88b074aa8ec47ef03aeb64a0b6b23794f0296f', variant: 'data-display-one' }, " ", h("slot", { key: '6b7dc252193ce4b63d1a42634c81ef5a704f7581' }), "   "), h("a", { key: 'd5bc1a1c3a12ea3d6d93b82859c81f0ea1d1845e', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: 'bc6e26c729d46424d07935029f6d9a84cb658548', class: "header__logo" }), h("div", { key: '3827e3e7fe86a3c6a7f15d654b70655b8b77a748', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: 'b81cb8f52041214a74bd02d89f17bbdd2128463a', class: "header__global" }, h("udp-avatar", { key: '8c9ab84ee004cc0eb1405e7f491f4cafc4863a58', username: this.username }))));
+        return (h("div", { key: '569816f25d9bdf9286623b9e2b7e86ecb3ddb785', class: "header" }, h("stencil-icon-button", { key: '2980f6a34b1321c23b709ccdc63a49b35262a41f', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: '916bf7f902e71fb62694a84ddabe0ffa9638424d', variant: 'data-display-one' }, " ", h("slot", { key: '5e792e8680f9e11ae8de27d9ccee20c004fe9cf4' }), "   "), h("a", { key: '6eb956082f541a38807e29dc8c18c0e5ce0e7a99', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: 'ab60340a8b921edf0dc303de7558ab5b2dd473ce', class: "header__logo" }), h("div", { key: '64082fa1132e127acdb00f9e6876e39d53ed03ce', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '133b4ec8621d4a2d9fd0bb7b0c9f870741bba504', class: "header__global" }, h("udp-avatar", { key: 'a8a35852fee5cd30832266fa88cde579c5b9d2ad', username: this.username }))));
     }
     static get is() { return "app-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/util/ghost-render/ghost-render.js CHANGED Viewed

@@ -70,7 +70,7 @@ export class GhostRender {
         // The <slot /> is necessary to prevent the Stencil compiler from
         // overly optimizing this component's output and aliasing the
         // defineCustomElement export, which breaks downstream wrappers.
-        return (h(Host, { key: '02fc2687cd43c93172cc0e626810724b3933fc25' }, h("slot", { key: 'c240aa0ccde1c38e5d80a0cd89f5608b8c608636' })));
+        return (h(Host, { key: '1e77fbfc7ab0bc5ca00ee2351f547ef3d752f7c9' }, h("slot", { key: '092e556509b9c77f9c54da22fd41ed35c2ce65b2' })));
     }
     static get is() { return "ghost-render"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/demo/ambient-demo-container.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class AmbientDemoContainer {
     render() {
-        return (h("div", { key: 'a5c238df1343ab96d334fb0b013c393835b1c11e', class: "container" }, h("div", { key: '8c43e8fbc425796685da07ceb134adf8e2bc0a65', class: "title-container" }, " ", h("unity-typography", { key: '9ea72535c3f58822abfde8260e17a1dfc97227ae', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: '52edab7acd8f01735b9a7341b9fca3a0ae7a9508' })));
+        return (h("div", { key: 'aabd2db2a35785c49e8bce7f39ec3321814514b5', class: "container" }, h("div", { key: '104242d374cbb562dae2934c379384adcf689cc2', class: "title-container" }, " ", h("unity-typography", { key: 'ee84ba9c0176de8e4ed3a2f5521fcecf7602ebea', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: 'f55df725728ccad67e8f191a09eff301fb26d394' })));
     }
     static get is() { return "ambient-demo-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/test-component/inputs-example/inputs-example.js CHANGED Viewed

@@ -91,7 +91,7 @@ export class InputsExample {
         };
     }
     render() {
-        return (h("div", { key: '0efd3f4460ea20ff10f2aaf00ca70770237da618', class: "inputs-example" }, h("h1", { key: '006277abe860f17193251d59d60008947ca2bf77' }, "Input Components Examples"), h("section", { key: '252130c2af84ca1c16251db183209c1651d3ca71', class: "example-section" }, h("h2", { key: '589f7b01a7de725ace061f317bb054c99f278c18' }, "Controlled Components"), h("p", { key: '5275e91ce1928c7db447882ecc648069870b93e4' }, "Parent component manages state and passes values to child components."), h("div", { key: '551f424a12c6dc3bcc141ea0cc6c7a0b3be0c96d', class: "input-grid" }, h("div", { key: '55de1d2ad83636052b2a5f49544f3c416eb969b6', class: "input-example" }, h("h3", { key: '5d8184f1650a3f13cba35ba894a3fb68ed5f943b' }, "Text Field"), h("text-field", { key: '8bd05080a978920bde77bccffc53368e26369d22', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '9f931a1a2e6a94f879d440902fc1ce304337b3a1', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '3a71f26e7ef8b27ef987fab993f9f68d8a74dd25', class: "input-example" }, h("h3", { key: '3c4869186abcf344b1f098092ec75c7084fa28e0' }, "Numeric Field"), h("numeric-field", { key: '4a94e0557e2524b918b9b9c712758b8b2705078d', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '26344fd447d79233dd3d176fad21b4d736325475', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: '2c35fe41a275c18c18e4340e00589d95c9240af0', class: "input-example" }, h("h3", { key: '8a7ac8119188ba1d0681196d7207147eb76501d2' }, "Text Area"), h("text-area", { key: 'fb554b6b21bb51901013981d3b2bd9360839dce9', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: '5622e978387b0a8c31b24173f4839b2d9b9a088b', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'd957c4002d97bd3cee3fca6e734260098504ecb0', class: "input-example" }, h("h3", { key: 'a51d7312e52943c3b21e2d99881b73e7858ef36e' }, "Checkbox"), h("check-box", { key: 'a76b891c6ec232a20f3ba7053db0cf02e48831c9', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: '54866fd5d3b00875f5b763a80cc78556b2d719fd', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: '4d4ce6273c9f75b95a27fd60c10c8c1bfbc6dde5', class: "input-example" }, h("h3", { key: 'cdce4e97bb3577a77509fa9c7ef28c65a1056992' }, "Toggle"), h("stencil-toggle", { key: 'bb9c014216ec1d4573f03fed25cc82344baac92e', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: '1019191b0934529d856bf4f4114c5733fd01424b', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '95ed43eede6b66422a906c4a5c055c956bf537f1', class: "input-example" }, h("h3", { key: '6b0c3368be18c6c328572b027ccfc08006c3e4ef' }, "Date Selector"), h("udp-date-selector", { key: '45a9903e034e034add2500f4374cebb9b098cffc', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '25b075ba6a748e19cf060258947d1b69b0865e9a', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '041b10ba312b9c0b595201687e034e169e8c502b', class: "input-example" }, h("h3", { key: '8df015893dc9d297c8fdd1acb2673c3541637c94' }, "DateTime Selector"), h("udp-datetime-selector", { key: '562e3908a61c3739732b51bf9711426b89bcaef0', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: 'e46ad5ca14b6038d5f2470fba4f5ccf6bac23a5c', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '7d1a01e4d73932cfc26c9782bd19388e4650971e', class: "input-example" }, h("h3", { key: '76e4b9a5dde26015293c54f06ea84cae0408c630' }, "Time Selector"), h("udp-time-selector", { key: 'f5ceb2da3facc5f268da85891e1f3b0bd5e8b061', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '8e061f37c0a0ecd7eba9496a9a441cc2d0397e18', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: 'eb8d7f5e9d6e11eda3fa33f4c35671c8146816ed', class: "input-example" }, h("h3", { key: 'bc4f419f561d4ea816331ce4e922fc7e7ce25b18' }, "UDP Selector"), h("udp-selector", { key: 'c6a2153a88b7470d799bf9ef1df6c858f19dc78d', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '7a653cec33c7202ea2468eaad37da12746f11d82', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: '9a4836a07e6f0f9c69d9e76515003ea993411ec4', class: "input-example" }, h("h3", { key: 'fc06320104a8d51ca49638933371a77083ac20bf' }, "File Upload"), h("file-upload", { key: '2821b6f36940ddc513dd89e233f4afb6a98b07d2', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '823341c790042bf0a2df0fde691eb715478f86d9', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '400893e3266665c8a63a286ddaad6bb64ad9efd6', class: "example-section" }, h("h2", { key: 'a11bc8c2ea72e3394a32ef537f064d1d027b7567' }, "Uncontrolled Components"), h("p", { key: '6faec1e2ceb7d17c4f7e21226dc0ffdeed3ae039' }, "Components manage their own state with initial values."), h("div", { key: '72b6fc67bfcae5d60b41d87a8dbcafb9fd4bc982', class: "input-grid" }, h("div", { key: '0e5d40d18c610b8dcdc8c90944892d8179b726e3', class: "input-example" }, h("h3", { key: '3f01b543c41d0dc276caaeb67be4e66a39dded4e' }, "Text Field"), h("text-field", { key: 'f9c7ca2d4b98af3fb67f3ae74d7e936d87ef9c3c', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '55db82562b3c1e5371784f4aa052741e5edf9607', class: "input-example" }, h("h3", { key: 'bd8b8ab64beb7523966d21e0cacd5afa60f3105a' }, "Numeric Field"), h("numeric-field", { key: '116da3d99fe20151b37e77068dce0f2cb9ae0917', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: 'fdddde6cdf4ff4285fa067720be6925cdc1e3830', class: "input-example" }, h("h3", { key: '40acfb74b91565f64072dbe13975d96c945b5a8e' }, "Text Area"), h("text-area", { key: '7d0da30788f2b76c50767296a4de85691c83c170', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '3f843afb917770a01e6291f50f20fac007821e0a', class: "input-example" }, h("h3", { key: '6ad479fa8bd9cee5dc5f67aecfd6018a27953877' }, "Checkbox"), h("check-box", { key: '0ad746a68cbdae97e953073bea1dfc4574b1da43', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: '5c2d036874db447f8cf058a5a511e0272bedc1a7', class: "input-example" }, h("h3", { key: 'dac3a19d667510cd27cc55ff5e466a1f4469e007' }, "Toggle"), h("stencil-toggle", { key: '90603832ed57ea3fa5b0a7115868343003d1d084', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: '49af9584417e30c4c82821eb5d0261a45577c83e', class: "input-example" }, h("h3", { key: 'ed380270ff7aa432c482c5d3f9239982c1222776' }, "Date Selector"), h("udp-date-selector", { key: '5ff1824a24a6c89939218c2283ca80f399b90198', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: 'bd352b08b5a9249939748f6a93aa4ead16d8db6a', class: "input-example" }, h("h3", { key: '0962ed467ab9357aa073d222f33d5eeb11c892d5' }, "Time Selector"), h("udp-time-selector", { key: '4a7bfb3d1f6c6a118034c0bddff26978f5836c1d', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: '748568382a7d6144b2e0d878b06d46eaa82977ac', class: "input-example" }, h("h3", { key: '0750049de540a9a0d659af161e1b14d3f294eb40' }, "DateTime Selector"), h("udp-datetime-selector", { key: '778a0408dd43ea048171596a4eb0de6353a470ff', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '593afaf38ef12585cf35998f6684590e683872f5', class: "input-example" }, h("h3", { key: '1cfe0ba353fee26bfd2216b1da8a297aebfb83fb' }, "UDP Selector"), h("udp-selector", { key: '5b0a4ed94f3998482572fd9351544e03f3ddd964', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: '8cdecea2dff7eeacae58ef8a00f28fe1ae0be3ca', class: "example-section" }, h("h2", { key: '85929c1cc99ba5379c49ba6479df2e3f17d4c7dc' }, "Form-wrapped Components"), h("p", { key: '0596694a262ab286ac612339279df96b391e4104' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '0cad6aef3d8738a1bf4b2d944152e591fa185b08', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
+        return (h("div", { key: '2c9774c01a36f857e6433aba926627a1257791c7', class: "inputs-example" }, h("h1", { key: '5c19b71a3f023b51f0c34ed8e7c5f37434ad091b' }, "Input Components Examples"), h("section", { key: 'f2447d8dfe430b466c61a2574ca753b9d5319ee9', class: "example-section" }, h("h2", { key: '818dcaa4f4c7dc505cdcccc3ffc484f70a3fb071' }, "Controlled Components"), h("p", { key: 'ea4ef0d9251996f67b861638238de0ad0a940e81' }, "Parent component manages state and passes values to child components."), h("div", { key: 'ee6a1e5c706fdb5f944e83624337a01331cc8d95', class: "input-grid" }, h("div", { key: '3ea82c30422559f59d4a0e10dddd02d918077eca', class: "input-example" }, h("h3", { key: '6c5ae1f68f5fa8e43a2b93176e610d88936982dd' }, "Text Field"), h("text-field", { key: '72ee35e0669b46c6c1707c079e87205c99155b00', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '6c7607e7b5cd9e0d942d2a890e90a1c43d8b1089', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '4d1b4ee2ccdd1f1da7568de5c33c6180dbac9a73', class: "input-example" }, h("h3", { key: '378a2d4ae669e03703cc9296529812ca7f0e7afc' }, "Numeric Field"), h("numeric-field", { key: '8827d06eeb38b3658909dbbe20cbed16aef1ded7', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '11797ec1b07020faee2cf620597c29b7ec3c91e3', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: 'c49569a4b48b03d0ba2846acd84a20ee0474f9e5', class: "input-example" }, h("h3", { key: '655878f8956003849b894125c2fb876c4e787acb' }, "Text Area"), h("text-area", { key: '3e3045fed0d2e5230a84658a7d7acb2d3a6bc3c8', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: 'b6a093c2a16379f854f8ec1890aca57d6b841685', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'f00587ad5255ac95ca7ef73ad525c9f2b7ad2e32', class: "input-example" }, h("h3", { key: '9e0ff081e371c2877d432d2e5c99e9b3447e1d73' }, "Checkbox"), h("check-box", { key: '1b3039be849d1fc56ee1b3cb35fde57d90dbe9b2', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: 'a5a2487cb7a5ece6ef34cafd22886aa3bb180682', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: '5297030b195b03b2a0406ee4578f458e787abf6a', class: "input-example" }, h("h3", { key: '58004f9d68fa3c844424b4f7365a0cca9479f968' }, "Toggle"), h("stencil-toggle", { key: '8b8f04ab81e681ab9520f89fa82e32a3d4250409', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: 'd2492200be23d7444fe71267e11c549f16d8bc9a', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '698863a621af9c58672847f4505aaa5e2482bd05', class: "input-example" }, h("h3", { key: '39e0bcc2b2f04b9730352bd305823d6b5a9f8e6a' }, "Date Selector"), h("udp-date-selector", { key: 'b3338f8cf609764338d6be2a7b87dbf1d2b70f7f', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '09904cafd32d18a5cd7f576e576c6269f47dab94', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '13ec4f54ac0fbbaa74c67b56a5cadd6a9fc45252', class: "input-example" }, h("h3", { key: '5b899dea25c2f3cad64165988817c9d78afd6049' }, "DateTime Selector"), h("udp-datetime-selector", { key: '531b20feccea342c3308a373bb920f4060179f0f', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: '60d6d1e1e93897d5ff04fa269b8d79105e95e2fa', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '29fefc86c4645769ce32ef9312518dd681eeeaf6', class: "input-example" }, h("h3", { key: '3cc3d33c55281e80a2a447bf68412aec3f0ba527' }, "Time Selector"), h("udp-time-selector", { key: 'b7bf0408622231fc893f7f5c5a8746e95775c8a7', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '34234c591167b563554a6671ee294a1a3b426510', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: '6632d633fcdaf187024a726b95a4b67decb44126', class: "input-example" }, h("h3", { key: '6c35d09bda887f3128fe648392faffd00f8e2514' }, "UDP Selector"), h("udp-selector", { key: '03b8b44a84c3db73b74b0738e602d09e91f5f228', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '73d475e90a204b46a15383d0e6b74269f29e59e4', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: 'd470e5bd6e16be2a67bdba2fca5fe0f494dabc12', class: "input-example" }, h("h3", { key: '703cadb6d041bc560fd72c60bfd562d409c4b653' }, "File Upload"), h("file-upload", { key: '94b4d3a82bc92353d5ebb8f3c7bc8b321902eb59', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '1b9eaac708bbd6ea3a13b1f405e70c717de4361c', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '0a017099bef0d138db8311c2607aa96e829f2db9', class: "example-section" }, h("h2", { key: '3a299379ae5f9d8b66b723aaa151514c9664e147' }, "Uncontrolled Components"), h("p", { key: '62b6c718844eb84971a5e8533fe51ae4ce9185d7' }, "Components manage their own state with initial values."), h("div", { key: 'b0270fdf7b8d96560fc49c7830e6192d9b34c583', class: "input-grid" }, h("div", { key: '52af146f389abe67d9c6edf239b80dbb553f4b48', class: "input-example" }, h("h3", { key: '5f5e36b240ad4f7f5e952d91c7ab08d907180738' }, "Text Field"), h("text-field", { key: '779daef1e8f1f0184b7ed60e3432c4bbb6d78aa5', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '925845b446b549ae12d3f67f40153ff88c1237ec', class: "input-example" }, h("h3", { key: '7b6eb7dfac92fcef0972f61bed2cc14c65c35a1f' }, "Numeric Field"), h("numeric-field", { key: 'f9e990f8a8b24fff7eda8513c0f33bb62c7a2522', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: 'dc700898e6043c871e81ba4215775e0b8ad86e64', class: "input-example" }, h("h3", { key: '89025e16958ad38e0de9a4fd2784617a434bb7b4' }, "Text Area"), h("text-area", { key: 'f89870ede0138fbd4c451de97b442a5eb440674d', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '840cdd4c554cb6f30a9660136586744e4df8391b', class: "input-example" }, h("h3", { key: '4af04e761094cf33faeda3366718ed912caa7d74' }, "Checkbox"), h("check-box", { key: '9263a3e6db5684bf304111ff8e7b7b12a6ed247b', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: 'e2ee60bd202d614335a35ad0344c2117061f40ca', class: "input-example" }, h("h3", { key: 'e8af0e815f5a89de6ec1596c6f0b457c0a413bd7' }, "Toggle"), h("stencil-toggle", { key: 'f6231a4394eb6d0f6b35c48b8850b98139df413e', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: 'bc457a401665ddcd8761555d1e664448ae240029', class: "input-example" }, h("h3", { key: '27c031274e7b4eefb1f629c9499d1f9d028714f6' }, "Date Selector"), h("udp-date-selector", { key: '0d001fa6aea835854f59a5adce3f86e91ecedad9', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: '2adb1279494c4bef294fc4cdfab08a1e9d5dd51f', class: "input-example" }, h("h3", { key: 'b345f7f9dd7613ae3c90af685c6d7363b1fa5694' }, "Time Selector"), h("udp-time-selector", { key: '0b81754404c91875178909823c51a77821ba713c', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: 'e612112a0cfbad0378ce23559301468bbab528dd', class: "input-example" }, h("h3", { key: '58e3be8c3091b4375728653aa1025dd0800dea3a' }, "DateTime Selector"), h("udp-datetime-selector", { key: 'a66319f6db6bc35756b3cf0ed3f224024eecf0c4', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '1b71ad2e2c0b7e8087202fa03abdd0ec68a3f397', class: "input-example" }, h("h3", { key: '1b4818d107d60a9fca534ccba3c858860078b371' }, "UDP Selector"), h("udp-selector", { key: 'b53bdbabed328bc79fb7ea4597ffe36a26474d93', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: 'beaa194b45bd4fac58599a4a5e0d373c8101a743', class: "example-section" }, h("h2", { key: '05164bd4b352c81513d5c4c41fdd8998e5426534' }, "Form-wrapped Components"), h("p", { key: '0c4485a9dacf1f32b9c80f17d2521bf50fab2029' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '05de0c6af9963c337286a07a7058dc19174dd69a', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
                 formTextField: 'Initial form text',
                 formNumericField: '25',
                 formTextArea: 'Initial form description',
@@ -100,7 +100,7 @@ export class InputsExample {
                 formDate: '2024-02-01',
                 formTime: '09:00',
                 formSelector: 'option1'
-            } }, h("div", { key: 'efcf2196b2603a552bfedd3591b3ca6b1b5a71f1', class: "form-grid" }, h("stencil-field", { key: '5231c6f402747272e1e89b26d110ff86f0aa7a3b', name: "formTextField" }, h("text-field", { key: 'c8e245f52997e27f27f93454ab24cbff224cc583', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: 'ca91becfc791148116d60d0e905b1a3daa5b9db3', name: "formNumericField" }, h("numeric-field", { key: '44347c0895f0f8b501a421cf761cadacd0932c6f', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: 'c7b4b216d3106c9af75392e54725e8a21f8ca3b3', name: "formTextArea" }, h("text-area", { key: '9de49a3341b5987f0bde64ce14c3ebc7e88cc74a', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: '56d39f44ea989beed99ad8d7c5bdd645e5c817aa', name: "formCheckbox" }, h("check-box", { key: 'ef7c6aafba7e06b2774088c4f5ac98edbf367a7c', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '54e05f275558330b2c37afa140a8f6926e726180', name: "formToggle" }, h("stencil-toggle", { key: '8c8b1925bd17463429b5badcac307857bc84cec2', label: "Enable Notifications" })), h("stencil-field", { key: '1415837b1d0fa0e092fc40b40929b87cddf47410', name: "formDate" }, h("udp-date-selector", { key: '9ebbe59d298c8648c10b9e7f6ed39de46715b6b2', label: "Form Date", required: true })), h("stencil-field", { key: 'f48570db700715597bf2e45fd9c2892d023e6897', name: "formTime" }, h("udp-time-selector", { key: 'edbdbff32cc3c225ed56c3b94c613005dfdcde39', label: "Form Time" })), h("stencil-field", { key: '8437d71e061aa088e4cba83225a521c44a4ca3d2', name: "formSelector" }, h("udp-selector", { key: '6d1983d097f69466060cd3278d6ec58e220e8d77', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: '41ab83071b303dfd1c8763a46895c792344a0f1e', name: "formFiles" }, h("file-upload", { key: '7d9a05439319655c232bd27ab6961c1f6db8d883', label: "Form File Upload", allowMultiple: true }))), h("div", { key: 'ca241b12f04441dbf884d57d13e84f0dbccb7f65', class: "form-actions" }, h("button", { key: '9ab10fa33f12f8c376e95c97732b40717dd2b0b5', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: '0c80c817538bd6bd0f00c6197cb3c2793daaf910', class: "form-values" }, h("h3", { key: 'dfd5d67e510aa606c99450d4f4f08342a0661319' }, "Current Form Values:"), h("pre", { key: 'a10e287b7066a43cc69130830ded4da6aa0c1556' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: 'd099ca8f995aa1f7262af5338873bf94754811f3', class: "example-section" }, h("h2", { key: '7cb065039260f3e516133e32d6253240aece1a35' }, "Additional Examples"), h("p", { key: '62617e685432dde1d659eca861b554f064ec24fa' }, "More complex configurations and specialized use cases."), h("div", { key: 'c533b992028051734003b0be0bd5d0985806358a', class: "input-grid" }, h("div", { key: 'fce996f18ec7e4bc7f159047c97fd1066f45a8a9', class: "input-example" }, h("h3", { key: 'c94a1ba5d9cd5156cfd7ef1f4015a057d710e0a5' }, "Multi-Select UDP Selector"), h("udp-selector", { key: '53b28993b382889d27919e3a7d9405a5fd32aaf8', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: 'ce2255624cb7db841d30dda4cca5af6f1024cd7d', class: "input-example" }, h("h3", { key: '69d19bcd69cf2bebff41c872eb582a32a594900a' }, "Large UDP Selector"), h("udp-selector", { key: '559044cb64b37d8e08effe91bb1950990085e82b', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: '0947306acbc6628996b3ad444fe0b2849590bb3b', class: "input-example" }, h("h3", { key: 'da9050afe5f7be2d078fcf3d5f7e0987cc26cda5' }, "File Upload with Type Restrictions"), h("file-upload", { key: '3f57ad462161a807e56cba39d3b68f8cb287e851', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), h("div", { key: '16217dff92f04c11145583b6c3879828bb63de18', class: "input-example" }, h("h3", { key: 'ad5625e7ffb1ef843f8831be4e4a5b65be32ba76' }, "Disabled Components"), h("div", { key: '22f9b761b49d601000d39a64ea698115ded20a17', class: "disabled-examples" }, h("text-field", { key: '35b8b2c6e57f555633c523a09db515666af3178f', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: '73df91016a0cecb031e4d6b4c82b7b8bbd320589', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: '42cd089facfb8bd98e2ec5419ff5d32d18055bb7', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
+            } }, h("div", { key: 'd35fe74a1e26cf0b8f398e9c894c8f1a5da45a48', class: "form-grid" }, h("stencil-field", { key: 'd77c0d4cc9d9cffb255eff419a5b0af8b561947e', name: "formTextField" }, h("text-field", { key: '0410f7248f9b229be53fcd674caeda0c65b05fe2', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: '48fba9a081504e2a0bea41f27ce0325dc914991d', name: "formNumericField" }, h("numeric-field", { key: '7f9ec15a7f6f0dbe373edff972efb2c81e2b558d', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: '2825b9b6932a7d66869f9ec08c60dc86a7d913da', name: "formTextArea" }, h("text-area", { key: '34b58939f90b746909880b22902bd7329d236cf4', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: '8ee8d90cf1c56d1a8f5f6d0dfd87fb8369a474e3', name: "formCheckbox" }, h("check-box", { key: 'f63e26765d059b3d950b06e00cb1e3f398247e9e', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '9c3412c4e9b54d1ef35b53af12246e81af00ff1b', name: "formToggle" }, h("stencil-toggle", { key: '700b07f98704353b99c936b26eb0b4142ff6a62a', label: "Enable Notifications" })), h("stencil-field", { key: '1698b7eee1656bf216498f09f7817307b74666b8', name: "formDate" }, h("udp-date-selector", { key: '8e8fc86fa7d371fabc6bf9eb72fbdd6e5e798102', label: "Form Date", required: true })), h("stencil-field", { key: 'b38b2317b83b226d34c0dc9491b8357ea8db261c', name: "formTime" }, h("udp-time-selector", { key: '570831455cbdc786acb1c06cff4c0089364999a9', label: "Form Time" })), h("stencil-field", { key: '71fc5f623dc700cfe77456d012dfa6e53a9d169e', name: "formSelector" }, h("udp-selector", { key: '22573dcbcb86203b9fe3ba0e79679225ad93eed8', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: '3455ddb62d6e341a58c78dd2a9820d2eb326399c', name: "formFiles" }, h("file-upload", { key: '2ca7724c7443075b94da339efdf7b23e404a72d8', label: "Form File Upload", allowMultiple: true }))), h("div", { key: '6d070a36e05b2bdf3928fce96d51a8e7bc42e9e0', class: "form-actions" }, h("button", { key: '7233a784011bd65fd5fe25105a4afa36cfad9bbd', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: 'b9b2382fa2f27d159a7e586479e2325b385b3163', class: "form-values" }, h("h3", { key: 'fc96b6c576f8198514a7c7aee5ae953eb8a752cd' }, "Current Form Values:"), h("pre", { key: '8fdc93279968950235a62a5b4022b0f578bbe993' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '2731e1a0beedccacb1bbb34efb3608855769bbcb', class: "example-section" }, h("h2", { key: 'bb06ef8c5593615f101046e448291d512d6b4375' }, "Additional Examples"), h("p", { key: 'ab93ddb0de3d6606cc6285a0ec2e397f453846b5' }, "More complex configurations and specialized use cases."), h("div", { key: 'b1d7de6e2daa82f758e147e93831f4c3a327756e', class: "input-grid" }, h("div", { key: 'a65e4e5ff0a7950743529e441eeb6c0c67d16774', class: "input-example" }, h("h3", { key: '787e43f64af484ea59ad6a860be0aae3ea8ec95d' }, "Multi-Select UDP Selector"), h("udp-selector", { key: '0b79b2f43a252f631176f73403aac729f69c5af6', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: '270209ebf674a2c4ce1b8211e11254f92c581735', class: "input-example" }, h("h3", { key: '967bc8d45e1c62d6a019f179a957f8e496160ba3' }, "Large UDP Selector"), h("udp-selector", { key: 'dbcd9fb9acf787233a62c4ff3bba8fbdbc982a71', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: 'bc60bade3cb2b8b71f3cd7c55ce41faac4ad1d5f', class: "input-example" }, h("h3", { key: 'a9e11f6c997cd208d46f13e9aa7a74343d0c6e58' }, "File Upload with Type Restrictions"), h("file-upload", { key: '7dff9c55cf4741c542c4aae3dc60e36e4a9caa3e', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), h("div", { key: 'cc464aa2b13e6a7852c735279094097675f68a71', class: "input-example" }, h("h3", { key: 'd06ed109dc3967f56f369a2806514d4c3987c2ca' }, "Disabled Components"), h("div", { key: 'f7295d2fdd1a89191aba44a0948e74228a8f056b', class: "disabled-examples" }, h("text-field", { key: '9cafed2788920b6f772abb0cda0006f94c7f7076', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: 'f7189fc4fd08c68970c5d97a1cc6516eb927e75c', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: 'b34905240d9b8f957a32791f3cba99cdf1128eb9', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
     }
     static get is() { return "inputs-example"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/page-renderer/page-renderer.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class PageRenderer {
         return (h("div", { style: { border: '1px solid #ff6a00', padding: '10px', margin: '10px 0', borderRadius: '5px', color: '#ff6a00', backgroundColor: '#fff3e0' } }, h("unity-typography", null, "Content currently unavailable ( ", h("span", { style: { fontWeight: '700' } }, componentName), " ). We're working to make this available to you soon!")));
     }
     render() {
-        return (h("div", { key: '1c24e76c6dc3ff76df88d2203d6b5bf762d6b20f' }, this.pageData.map((data) => {
+        return (h("div", { key: '4456997c11d8225a351000d17f3bab7270312a06' }, this.pageData.map((data) => {
             // Prepare properties from metaData, ensuring any existing keys that
             // match your direct props are overridden.
             const gridProps = Object.assign(Object.assign({}, data.properties), {

package/dist/collection/theme/color-preview/color-preview.js CHANGED Viewed

@@ -10,7 +10,7 @@ export class ColorPreview {
         return (h("div", { class: "color-section" }, h("unity-typography", { variant: "h4" }, title), h("div", { class: "color-grid" }, this.renderColorBox(`--${prefix}-color-main`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-dark`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-light`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-hint`, `--${prefix}-contrast-text`))));
     }
     render() {
-        return (h("div", { key: 'b9d28659e92e4fd4211283ad8d9d4cc4b89227a1', class: "container" }, h("unity-typography", { key: '6ae71d5e546969c04e3b517879dc8798de6758e5', variant: "h2" }, "Unity Theme"), h("div", { key: 'bbf373dff37916ac06bd3c525e2e6894a6d1f959', class: "theme-section" }, h("div", { key: '53a93b2d6d105871218fbcf099af2db67da759c2', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '7f11dcbeeddd63cf3f2fb8967c1c998b56cca28f', variant: "h2" }, "SAP Theme"), h("div", { key: '8211f3c961758b530fc65181376a79f8a01db13a', class: "theme-section" }, h("div", { key: '8fd5fe3896c6b36660348745da33208fd313b99c', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: 'b0e1469eba809cad5ce5960fb7e57cc8997fa12f', variant: "h2" }, "Status Colors"), h("div", { key: '44cddcae4395207ab6c027c7b97a5dc507fd501c', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
+        return (h("div", { key: '98a80f4e8502dd50d6f8f76a74196d1306456ddb', class: "container" }, h("unity-typography", { key: '70dfefd7b9032e0bea9ac6bd1c38e737ece1e034', variant: "h2" }, "Unity Theme"), h("div", { key: 'cdd7efeb53f12d6363e1ff391708eaeeb2cd89ab', class: "theme-section" }, h("div", { key: 'c698420ae9fb2fa3ca1067aa12f388ddccf5a566', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: 'c2cadbc40e7a4d1af6395ee98c2021af275e5187', variant: "h2" }, "SAP Theme"), h("div", { key: 'ce4312afaedc584183c85e356dad6c050bd13164', class: "theme-section" }, h("div", { key: '7460ef49884a7dd3a7c4e5e4c46dbd65d367b44a', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '110cdc21e09f0089365989ba4f7af4a38225f7cb', variant: "h2" }, "Status Colors"), h("div", { key: '15b1b26a27b44cef9da3de647dfed23c5744300f', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
     }
     static get is() { return "color-preview"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/udp-utilities/layout/udp-dynamic-container-with-menu/chip-section/chip-section.js CHANGED Viewed

@@ -94,13 +94,13 @@ export class ChipSection {
     }
     render() {
         console.log("Rendering ChipSection", this.visibleFilterChips);
-        return (h("div", { key: '97503932df8fda4b368905a88e8aa1e3ef601443', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '57814e45ad3c18bc0e63000c117843b2b05d61ef', class: "chipHolder" }, h("div", { key: 'ec26227bf3af968aca95ebdcd8ac8f9128f8bb62', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: '592e4853cd0a478e8779e591392e99928cd2f243', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '90b22a6f40be859668bdb1b878b446029929d0d3', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
+        return (h("div", { key: '567b5925fcedb62ecf4f0435b7a564da46e21465', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '41c9dfc9f98d2d2d42261d1a28a6755faea2def9', class: "chipHolder" }, h("div", { key: 'aef7cada00ecb04c01a80967a07871ced2f8fe29', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: 'c82f515501ffdc2e33e4b147f370c3e88302afbb', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '760c303eb392690316ea61e466ea70f2e3c32c6c', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
             if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {
                 console.log('returning null...');
                 return null;
             }
             return (h("stencil-chip", { text: `${chip.label} ${chip.value}`, class: "filterChip", onClick: () => this.handleFilterChipToggle(chip) }));
-        })), h("div", { key: '3fcf40061e51d798ebad3024ec893cbcd1fcff2c', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: 'b038933ee9d50d99c13c7dae2dababd5c4ede139', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
+        })), h("div", { key: '3651cb76022e5b363edd49428df66638114b52dc', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: '931110b82bf127b6a571a8b312e4d21a691423ef', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
     }
     static get is() { return "chip-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/udp-utilities/layout/udp-dynamic-container-with-menu/udp-dynamic-container-with-menu.js CHANGED Viewed

@@ -114,7 +114,7 @@ export class DynamicContainerWithMenu {
         this.udpChipClicked.emit(chipText);
     }
     render() {
-        return (h("div", { key: '71f418211a987ee241e9037c29c4bd3204cb1836', class: "container" }, h("div", { key: '5da39f24ea892e4176fbedd85b3a3a6f1ee17aa4', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: 'af27dfc93010680c2617a7da6fb6cf6c51bb8727', class: "overflow" }, h("udp-pop-over", { key: '4c2a5beda6b819e7e452aecf384a82719c4a1eb7', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: 'd4cf442f4ee12e97517e69b883fd6c52d11c4837', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
+        return (h("div", { key: '99a3ae39a56314eacb1cad4a8088f98acc52ef9d', class: "container" }, h("div", { key: 'cf6c29cc6fc435cadcc12f22b61246d03a3fa85b', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: '6f06947570a2f227909060d9cbb0c282ed219eda', class: "overflow" }, h("udp-pop-over", { key: '11cf2f25c44d69075d24f622c03bdd7418f037af', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: 'c69c2e7eadedaaa70e63da5b7e636050660dd889', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
     }
     static get is() { return "udp-dynamic-container-with-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ambient-demo-container2.js CHANGED Viewed

@@ -12,7 +12,7 @@ const AmbientDemoContainer = /*@__PURE__*/ proxyCustomElement(class AmbientDemoC
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'a5c238df1343ab96d334fb0b013c393835b1c11e', class: "container" }, h("div", { key: '8c43e8fbc425796685da07ceb134adf8e2bc0a65', class: "title-container" }, " ", h("unity-typography", { key: '9ea72535c3f58822abfde8260e17a1dfc97227ae', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: '52edab7acd8f01735b9a7341b9fca3a0ae7a9508' })));
+        return (h("div", { key: 'aabd2db2a35785c49e8bce7f39ec3321814514b5', class: "container" }, h("div", { key: '104242d374cbb562dae2934c379384adcf689cc2', class: "title-container" }, " ", h("unity-typography", { key: 'ee84ba9c0176de8e4ed3a2f5521fcecf7602ebea', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: 'f55df725728ccad67e8f191a09eff301fb26d394' })));
     }
     static get style() { return ambientDemoContainerCss; }
 }, [257, "ambient-demo-container", {

package/dist/components/app-bar2.js CHANGED Viewed

@@ -18,7 +18,7 @@ const AppBar = /*@__PURE__*/ proxyCustomElement(class AppBar extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'a96a536ce64d82b2a05a305539b0d40cb9372e14', class: "header" }, h("stencil-icon-button", { key: '391ce32825452e7da4bba0423b7f373b8bd9c4a4', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'bb88b074aa8ec47ef03aeb64a0b6b23794f0296f', variant: 'data-display-one' }, " ", h("slot", { key: '6b7dc252193ce4b63d1a42634c81ef5a704f7581' }), "   "), h("a", { key: 'd5bc1a1c3a12ea3d6d93b82859c81f0ea1d1845e', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: 'bc6e26c729d46424d07935029f6d9a84cb658548', class: "header__logo" }), h("div", { key: '3827e3e7fe86a3c6a7f15d654b70655b8b77a748', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: 'b81cb8f52041214a74bd02d89f17bbdd2128463a', class: "header__global" }, h("udp-avatar", { key: '8c9ab84ee004cc0eb1405e7f491f4cafc4863a58', username: this.username }))));
+        return (h("div", { key: '569816f25d9bdf9286623b9e2b7e86ecb3ddb785', class: "header" }, h("stencil-icon-button", { key: '2980f6a34b1321c23b709ccdc63a49b35262a41f', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: '916bf7f902e71fb62694a84ddabe0ffa9638424d', variant: 'data-display-one' }, " ", h("slot", { key: '5e792e8680f9e11ae8de27d9ccee20c004fe9cf4' }), "   "), h("a", { key: '6eb956082f541a38807e29dc8c18c0e5ce0e7a99', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: 'ab60340a8b921edf0dc303de7558ab5b2dd473ce', class: "header__logo" }), h("div", { key: '64082fa1132e127acdb00f9e6876e39d53ed03ce', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '133b4ec8621d4a2d9fd0bb7b0c9f870741bba504', class: "header__global" }, h("udp-avatar", { key: 'a8a35852fee5cd30832266fa88cde579c5b9d2ad', username: this.username }))));
     }
     static get style() { return appBarCss; }
 }, [257, "app-bar", {

package/dist/components/chip-section.js CHANGED Viewed

@@ -106,13 +106,13 @@ const ChipSection$1 = /*@__PURE__*/ proxyCustomElement(class ChipSection extends
     }
     render() {
         console.log("Rendering ChipSection", this.visibleFilterChips);
-        return (h("div", { key: '97503932df8fda4b368905a88e8aa1e3ef601443', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '57814e45ad3c18bc0e63000c117843b2b05d61ef', class: "chipHolder" }, h("div", { key: 'ec26227bf3af968aca95ebdcd8ac8f9128f8bb62', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: '592e4853cd0a478e8779e591392e99928cd2f243', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '90b22a6f40be859668bdb1b878b446029929d0d3', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
+        return (h("div", { key: '567b5925fcedb62ecf4f0435b7a564da46e21465', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '41c9dfc9f98d2d2d42261d1a28a6755faea2def9', class: "chipHolder" }, h("div", { key: 'aef7cada00ecb04c01a80967a07871ced2f8fe29', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: 'c82f515501ffdc2e33e4b147f370c3e88302afbb', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '760c303eb392690316ea61e466ea70f2e3c32c6c', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
             if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {
                 console.log('returning null...');
                 return null;
             }
             return (h("stencil-chip", { text: `${chip.label} ${chip.value}`, class: "filterChip", onClick: () => this.handleFilterChipToggle(chip) }));
-        })), h("div", { key: '3fcf40061e51d798ebad3024ec893cbcd1fcff2c', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: 'b038933ee9d50d99c13c7dae2dababd5c4ede139', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
+        })), h("div", { key: '3651cb76022e5b363edd49428df66638114b52dc', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: '931110b82bf127b6a571a8b312e4d21a691423ef', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/color-preview.js CHANGED Viewed

@@ -20,7 +20,7 @@ const ColorPreview$1 = /*@__PURE__*/ proxyCustomElement(class ColorPreview exten
         return (h("div", { class: "color-section" }, h("unity-typography", { variant: "h4" }, title), h("div", { class: "color-grid" }, this.renderColorBox(`--${prefix}-color-main`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-dark`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-light`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-hint`, `--${prefix}-contrast-text`))));
     }
     render() {
-        return (h("div", { key: 'b9d28659e92e4fd4211283ad8d9d4cc4b89227a1', class: "container" }, h("unity-typography", { key: '6ae71d5e546969c04e3b517879dc8798de6758e5', variant: "h2" }, "Unity Theme"), h("div", { key: 'bbf373dff37916ac06bd3c525e2e6894a6d1f959', class: "theme-section" }, h("div", { key: '53a93b2d6d105871218fbcf099af2db67da759c2', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '7f11dcbeeddd63cf3f2fb8967c1c998b56cca28f', variant: "h2" }, "SAP Theme"), h("div", { key: '8211f3c961758b530fc65181376a79f8a01db13a', class: "theme-section" }, h("div", { key: '8fd5fe3896c6b36660348745da33208fd313b99c', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: 'b0e1469eba809cad5ce5960fb7e57cc8997fa12f', variant: "h2" }, "Status Colors"), h("div", { key: '44cddcae4395207ab6c027c7b97a5dc507fd501c', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
+        return (h("div", { key: '98a80f4e8502dd50d6f8f76a74196d1306456ddb', class: "container" }, h("unity-typography", { key: '70dfefd7b9032e0bea9ac6bd1c38e737ece1e034', variant: "h2" }, "Unity Theme"), h("div", { key: 'cdd7efeb53f12d6363e1ff391708eaeeb2cd89ab', class: "theme-section" }, h("div", { key: 'c698420ae9fb2fa3ca1067aa12f388ddccf5a566', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: 'c2cadbc40e7a4d1af6395ee98c2021af275e5187', variant: "h2" }, "SAP Theme"), h("div", { key: 'ce4312afaedc584183c85e356dad6c050bd13164', class: "theme-section" }, h("div", { key: '7460ef49884a7dd3a7c4e5e4c46dbd65d367b44a', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '110cdc21e09f0089365989ba4f7af4a38225f7cb', variant: "h2" }, "Status Colors"), h("div", { key: '15b1b26a27b44cef9da3de647dfed23c5744300f', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
     }
     static get style() { return colorPreviewCss; }
 }, [258, "color-preview"]);

package/dist/components/ghost-render2.js CHANGED Viewed

@@ -78,7 +78,7 @@ const GhostRender = /*@__PURE__*/ proxyCustomElement(class GhostRender extends H
         // The <slot /> is necessary to prevent the Stencil compiler from
         // overly optimizing this component's output and aliasing the
         // defineCustomElement export, which breaks downstream wrappers.
-        return (h(Host, { key: '02fc2687cd43c93172cc0e626810724b3933fc25' }, h("slot", { key: 'c240aa0ccde1c38e5d80a0cd89f5608b8c608636' })));
+        return (h(Host, { key: '1e77fbfc7ab0bc5ca00ee2351f547ef3d752f7c9' }, h("slot", { key: '092e556509b9c77f9c54da22fd41ed35c2ce65b2' })));
     }
     static get style() { return ":host {\n      display: none;\n    }"; }
 }, [257, "ghost-render"]);

package/dist/components/index2.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const globalStyles = "@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap'); *,*::before,*::after{box-sizing:border-box}body[data-theme=\"unity\"],.unity-theme{--primary-color:#0c2f50;--primary-color-light:#1a4d7a;--primary-color-dark:#072238;--primary-color-hint:#c2e0fa;--primary-contrast-text:#ffffff;--secondary-color:#03bbc3;--secondary-color-light:#04e8f2;--secondary-color-dark:#028e94;--secondary-color-hint:#cffcfe;--secondary-contrast-text:#000000}body[data-theme=\"sap\"],.sap-theme{--primary-color:#344861;--primary-color-light:#4a6587;--primary-color-dark:#263447;--primary-color-hint:#c6ddf9;--primary-contrast-text:#ffffff;--secondary-color:#4383c3;--secondary-color-light:#5494d1;--secondary-color-dark:#336799;--secondary-color-hint:#c2dff9;--secondary-contrast-text:#ffffff}.spacing-13{margin:var(--component-spacing)}:root{--font-family:'IBM Plex Sans', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;--font-override-arial:'Arial', var(--font-family);--primary-color:#344861;--primary-color-light:#4a6587;--primary-color-dark:#263447;--primary-color-hint:#c6ddf9;--primary-contrast-text:#ffffff;--secondary-color:#4383c3;--secondary-color-light:#5494d1;--secondary-color-dark:#336799;--secondary-color-hint:#c2dff9;--secondary-contrast-text:#ffffff;--env-ribbon-development:#4caf50;--env-ribbon-staging:#fdd835;--env-ribbon-production:#f44336;--env-ribbon-build:#9c27b0;--success-color-main:#2e7d32;--success-color-dark:#1b5e20;--success-color-light:#4caf50;--success-color-hint:#d0ffd4;--success-contrast-text:#ffffff;--warning-color-main:#ed6c02;--warning-color-dark:#e65100;--warning-color-light:#ff9800;--warning-color-hint:#ffe8c4;--warning-contrast-text:#ffffff;--warning-color-main:#ed6c02;--warning-color-dark:#e65100;--warning-color-light:#ff9800;--warning-color-hint:#ffe8c4;--warning-contrast-text:#ffffff;--error-color-main:#d32f2f;--error-color-dark:#c62828;--error-color-light:#ef5350;--error-color-hint:#f9d1cc;--error-contrast-text:#ffffff;--info-color-main:#0288d1;--info-color-dark:#01579b;--info-color-light:#03a9f4;--info-color-hint:#d0e3ff;--info-contrast-text:#ffffff;--note-color-main:#6554C0;--note-color-dark:#463a86;--note-color-light:#8376cc;--note-color-hint:#e0daff;--note-contrast-text:#ffffff;--error-color-main:#d32f2f;--error-color-dark:#c62828;--error-color-light:#ef5350;--error-color-hint:#f9d1cc;--error-contrast-text:#ffffff;--info-color-main:#0288d1;--info-color-dark:#01579b;--info-color-light:#03a9f4;--info-color-hint:#d0e3ff;--info-contrast-text:#ffffff;--note-color-main:#6554C0;--note-color-dark:#463a86;--note-color-light:#8376cc;--note-color-hint:#e0daff;--note-contrast-text:#ffffff;--disabled-color-main:rgb(210, 210, 210);--disabled-color-main:rgb(210, 210, 210);--info-color-main:rgb(52, 120, 176);--info-color-main:rgb(52, 120, 176);--gray-01:rgb(244, 244, 244);--gray-02:rgb(230, 230, 230);--gray-03:rgb(198, 198, 198);--gray-04:rgb(168, 168, 168);--gray-05:rgb(141, 141, 141);--gray-06:rgb(111, 111, 111);--gray-07:rgb(82, 82, 82);--gray-08:rgb(57, 57, 57);--gray-09:rgb(38, 38, 38);--gray-10:rgb(22, 22, 22);--gray-01:rgb(244, 244, 244);--gray-02:rgb(230, 230, 230);--gray-03:rgb(198, 198, 198);--gray-04:rgb(168, 168, 168);--gray-05:rgb(141, 141, 141);--gray-06:rgb(111, 111, 111);--gray-07:rgb(82, 82, 82);--gray-08:rgb(57, 57, 57);--gray-09:rgb(38, 38, 38);--gray-10:rgb(22, 22, 22);--text-main:var(--gray-10);--text-secondary:var(--gray-07);--text-disabled:var(--gray-04);--text-hint:var(--gray-05);--icon-main:var(--gray-10);--icon-grey:var(--gray-07);--input-background:var(--gray-01);--input-hover:var(--gray-02);--divider-color:rgba(var(--gray-10-r), var(--gray-10-g), var(--gray-10-b), 0.5);--elevation-01:0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--elevation-02:0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 2px 2px 0px rgba(0, 0, 0, 0.12);--elevation-03:0px 3px 4px -2px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--elevation-04:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--elevation-05:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);--elevation-06:0px 4px 6px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--elevation-07:0px 5px 7px -2px rgba(0, 0, 0, 0.2), 0px 7px 12px 0px rgba(0, 0, 0, 0.14), 0px 2px 16px 0px rgba(0, 0, 0, 0.12);--elevation-08:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);--border-radius:4px;--text-main:var(--gray-10);--text-secondary:var(--gray-07);--text-disabled:var(--gray-04);--text-hint:var(--gray-05);--icon-main:var(--gray-10);--icon-grey:var(--gray-07);--input-background:var(--gray-01);--input-hover:var(--gray-02);--divider-color:rgba(var(--gray-10-r), var(--gray-10-g), var(--gray-10-b), 0.5);--elevation-01:0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--elevation-02:0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 2px 2px 0px rgba(0, 0, 0, 0.12);--elevation-03:0px 3px 4px -2px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--elevation-04:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--elevation-05:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);--elevation-06:0px 4px 6px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--elevation-07:0px 5px 7px -2px rgba(0, 0, 0, 0.2), 0px 7px 12px 0px rgba(0, 0, 0, 0.14), 0px 2px 16px 0px rgba(0, 0, 0, 0.12);--elevation-08:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);--border-radius:4px;--accent-color:#d6dedf;--accent-color-two:#6c7b8c;--accent-color-three:#ecf2fc;--accent-color-four:#3d7dfb;--accent-color-five:#C7E4FC;--accent-color-six:#FCD0CC;--h1-font-size:2rem;--h1-font-weight:600;--h1-line-height:1.25;--h2-font-size:1.75rem;--h2-font-weight:600;--h2-line-height:1.25;--h3-font-size:1.25rem;--h3-font-weight:600;--h3-line-height:1.25;--h4-font-size:1rem;--h4-font-weight:600;--h4-line-height:1.25;--h5-font-size:0.875rem;--h5-font-weight:600;--h5-line-height:1.25;--h6-font-size:1.1rem;--h6-font-weight:600;--h6-line-height:1.25;--body-font-size:0.9rem;--body-font-weight:400;--body-line-height:1.5;--body1-font-size:1rem;--body1-font-weight:400;--body1-line-height:1.5;--body2-font-size:0.9rem;--body2-font-weight:400;--body2-line-height:1.5;--caption-text-font-size:0.75rem;--caption-text-font-weight:400;--caption-text-line-height:1.25;--data-display-one-font-size:0.875rem;--data-display-one-font-weight:600;--data-display-one-line-height:1.25;--data-display-two-font-size:1.1rem;--data-display-two-font-weight:500;--data-display-two-line-height:1.25;--data-display-three-font-size:0.875rem;--data-display-three-font-weight:300;--data-display-three-line-height:1.25;--data-display-four-font-size:1.1rem;--data-display-four-font-weight:600;--data-display-four-line-height:1.25;--button-font-size:0.875rem;--button-font-weight:500;--button-line-height:1.25;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.5rem;--spacing-07:2rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.5rem;--spacing-07:2rem;--spacing-08:2.5rem;--spacing-09:3rem;--spacing-10:4rem;--spacing-11:5rem;--spacing-12:6rem;--spacing-13:8rem;--focus-outline:2px solid var(--primary-color);--animation-duration:0.3s;--animation-easing:ease-out;--shadow-card:0px 2px 4px rgba(0, 0, 0, 0.05);--shadow-modal:0px 8px 16px rgba(0, 0, 0, 0.1);--z-index-dropdown:1000;--z-index-sticky:1020;--z-index-fixed:1030;--z-index-modal:1050;--z-index-popover:1060;--z-index-tooltip:1070;--breakpoint-xs-max:599px;--breakpoint-sm-min:600px;--breakpoint-sm-max:959px;--breakpoint-md-min:960px;--breakpoint-md-max:1279px;--breakpoint-lg-min:1280px;--breakpoint-lg-max:1919px;--breakpoint-xl-min:1920px;--underline-standard:2px;--input-underline-color:var(--gray-08);--input-underline-color-focus:var(--primary-color);--input-underline-color-error:var(--error-color-main);--input-underline-color-disabled:var(--gray-04);--input-background:var(--gray-01);--input-padding:var(--spacing-03);--input-label-spacing:var(--spacing-03);--input-transition:all 0.2s ease-in-out;--placeholder-color:#999}:root[data-theme='unity']{--primary-color:#0C2F50;--secondary-color:#03BBC3;}.spacing-01{margin:var(--spacing-01)}.spacing-02{margin:var(--spacing-02)}.padding-01{padding:var(--spacing-01)}.padding-02{padding:var(--spacing-02)}.padding-13{padding:var(--spacing-13)}.mt-01{margin-top:var(--spacing-01)}.mt-02{margin-top:var(--spacing-02)}.mt-13{margin-top:var(--spacing-13)}.mb-01{margin-bottom:var(--spacing-01)}.mb-02{margin-bottom:var(--spacing-02)}.mb-13{margin-bottom:var(--spacing-13)}.pt-01{padding-top:var(--spacing-01)}.pt-02{padding-top:var(--spacing-02)}.pt-13{padding-top:var(--spacing-13)}.pb-01{padding-bottom:var(--spacing-01)}.pb-02{padding-bottom:var(--spacing-02)}.pb-13{padding-bottom:var(--spacing-13)}";
+const globalStyles = "@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap'); *,*::before,*::after{box-sizing:border-box}body[data-theme=\"unity\"],.unity-theme{--primary-color:#0c2f50;--primary-color-light:#1a4d7a;--primary-color-dark:#072238;--primary-color-hint:#c2e0fa;--primary-contrast-text:#ffffff;--secondary-color:#03bbc3;--secondary-color-light:#04e8f2;--secondary-color-dark:#028e94;--secondary-color-hint:#cffcfe;--secondary-contrast-text:#000000}body[data-theme=\"sap\"],.sap-theme{--primary-color:#344861;--primary-color-light:#4a6587;--primary-color-dark:#263447;--primary-color-hint:#c6ddf9;--primary-contrast-text:#ffffff;--secondary-color:#4383c3;--secondary-color-light:#5494d1;--secondary-color-dark:#336799;--secondary-color-hint:#c2dff9;--secondary-contrast-text:#ffffff}.spacing-13{margin:var(--component-spacing)}:root{--font-family:'IBM Plex Sans', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;--font-override-arial:'Arial', var(--font-family);--primary-color:#344861;--primary-color-light:#4a6587;--primary-color-dark:#263447;--primary-color-hint:#c6ddf9;--primary-contrast-text:#ffffff;--secondary-color:#4383c3;--secondary-color-light:#5494d1;--secondary-color-dark:#336799;--secondary-color-hint:#c2dff9;--secondary-contrast-text:#ffffff;--env-ribbon-development:#4caf50;--env-ribbon-staging:#fdd835;--env-ribbon-production:#f44336;--env-ribbon-build:#9c27b0;--success-color-main:#2e7d32;--success-color-dark:#1b5e20;--success-color-light:#4caf50;--success-color-hint:#d0ffd4;--success-contrast-text:#ffffff;--warning-color-main:#ed6c02;--warning-color-dark:#e65100;--warning-color-light:#ff9800;--warning-color-hint:#ffe8c4;--warning-contrast-text:#ffffff;--error-color-main:#d32f2f;--error-color-dark:#c62828;--error-color-light:#ef5350;--error-color-hint:#f9d1cc;--error-contrast-text:#ffffff;--info-color-main:#0288d1;--info-color-dark:#01579b;--info-color-light:#03a9f4;--info-color-hint:#d0e3ff;--info-contrast-text:#ffffff;--note-color-main:#6554C0;--note-color-dark:#463a86;--note-color-light:#8376cc;--note-color-hint:#e0daff;--note-contrast-text:#ffffff;--disabled-color-main:rgb(210, 210, 210);--gray-01:rgb(244, 244, 244);--gray-02:rgb(230, 230, 230);--gray-03:rgb(198, 198, 198);--gray-04:rgb(168, 168, 168);--gray-05:rgb(141, 141, 141);--gray-06:rgb(111, 111, 111);--gray-07:rgb(82, 82, 82);--gray-08:rgb(57, 57, 57);--gray-09:rgb(38, 38, 38);--gray-10:rgb(22, 22, 22);--text-main:var(--gray-10);--text-secondary:var(--gray-07);--text-disabled:var(--gray-04);--text-hint:var(--gray-05);--icon-main:var(--gray-10);--icon-grey:var(--gray-07);--input-background:var(--gray-01);--input-hover:var(--gray-02);--divider-color:var(--gray-01);--elevation-01:0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--elevation-02:0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 2px 2px 0px rgba(0, 0, 0, 0.12);--elevation-03:0px 3px 4px -2px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);--elevation-04:0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--elevation-05:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);--elevation-06:0px 4px 6px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--elevation-07:0px 5px 7px -2px rgba(0, 0, 0, 0.2), 0px 7px 12px 0px rgba(0, 0, 0, 0.14), 0px 2px 16px 0px rgba(0, 0, 0, 0.12);--elevation-08:0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);--border-radius:4px;--accent-color:#d6dedf;--accent-color-two:#6c7b8c;--accent-color-three:#ecf2fc;--accent-color-four:#3d7dfb;--accent-color-five:#C7E4FC;--accent-color-six:#FCD0CC;--h1-font-size:2rem;--h1-font-weight:600;--h1-line-height:1.25;--h2-font-size:1.75rem;--h2-font-weight:600;--h2-line-height:1.25;--h3-font-size:1.25rem;--h3-font-weight:600;--h3-line-height:1.25;--h4-font-size:1rem;--h4-font-weight:600;--h4-line-height:1.25;--h5-font-size:0.875rem;--h5-font-weight:600;--h5-line-height:1.25;--h6-font-size:1.1rem;--h6-font-weight:600;--h6-line-height:1.25;--body-font-size:0.9rem;--body-font-weight:400;--body-line-height:1.5;--body1-font-size:1rem;--body1-font-weight:400;--body1-line-height:1.5;--body2-font-size:0.9rem;--body2-font-weight:400;--body2-line-height:1.5;--caption-text-font-size:0.75rem;--caption-text-font-weight:400;--caption-text-line-height:1.25;--data-display-one-font-size:0.875rem;--data-display-one-font-weight:600;--data-display-one-line-height:1.25;--data-display-two-font-size:1.1rem;--data-display-two-font-weight:500;--data-display-two-line-height:1.25;--data-display-three-font-size:0.875rem;--data-display-three-font-weight:300;--data-display-three-line-height:1.25;--data-display-four-font-size:1.1rem;--data-display-four-font-weight:600;--data-display-four-line-height:1.25;--button-font-size:0.875rem;--button-font-weight:500;--button-line-height:1.25;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.5rem;--spacing-07:2rem;--spacing-08:2.5rem;--spacing-09:3rem;--spacing-10:4rem;--spacing-11:5rem;--spacing-12:6rem;--spacing-13:8rem;--focus-outline:2px solid var(--primary-color);--animation-duration:0.3s;--animation-easing:ease-out;--shadow-card:0px 2px 4px rgba(0, 0, 0, 0.05);--shadow-modal:0px 8px 16px rgba(0, 0, 0, 0.1);--z-index-dropdown:1000;--z-index-sticky:1020;--z-index-fixed:1030;--z-index-modal:1050;--z-index-popover:1060;--z-index-tooltip:1070;--breakpoint-xs-max:599px;--breakpoint-sm-min:600px;--breakpoint-sm-max:959px;--breakpoint-md-min:960px;--breakpoint-md-max:1279px;--breakpoint-lg-min:1280px;--breakpoint-lg-max:1919px;--breakpoint-xl-min:1920px;--underline-standard:2px;--input-underline-color:var(--gray-08);--input-underline-color-focus:var(--primary-color);--input-underline-color-error:var(--error-color-main);--input-underline-color-disabled:var(--gray-04);--input-background:var(--gray-01);--input-padding:var(--spacing-03);--input-label-spacing:var(--spacing-03);--input-transition:all 0.2s ease-in-out;--placeholder-color:#999}:root[data-theme='unity']{--primary-color:#0C2F50;--secondary-color:#03BBC3;}.spacing-01{margin:var(--spacing-01)}.spacing-02{margin:var(--spacing-02)}.padding-01{padding:var(--spacing-01)}.padding-02{padding:var(--spacing-02)}.padding-13{padding:var(--spacing-13)}.mt-01{margin-top:var(--spacing-01)}.mt-02{margin-top:var(--spacing-02)}.mt-13{margin-top:var(--spacing-13)}.mb-01{margin-bottom:var(--spacing-01)}.mb-02{margin-bottom:var(--spacing-02)}.mb-13{margin-bottom:var(--spacing-13)}.pt-01{padding-top:var(--spacing-01)}.pt-02{padding-top:var(--spacing-02)}.pt-13{padding-top:var(--spacing-13)}.pb-01{padding-bottom:var(--spacing-01)}.pb-02{padding-bottom:var(--spacing-02)}.pb-13{padding-bottom:var(--spacing-13)}";
 const NAMESPACE = 'stencil-library';
 const BUILD = /* stencil-library */ { hydratedSelectorName: "hydrated", lazyLoad: false, slotRelocation: true, updatable: true};