@platformscode/core 0.0.34 → 0.0.37

package/dist/collection/components/dga-text-input/dga-prefix.js

@@ -1,4 +1,5 @@
 import { h, Fragment } from "@stencil/core";
+import { arrowDown01StrokeRoundedIcon, tick02SolidRoundedIcon } from "../../assets/icons/index";
 export class DgaPrefix {
     constructor() {
         this.variant = 'solid';
@@ -25,10 +26,10 @@ export class DgaPrefix {
         if (this.type === 'button') {
             return (h("button", { class: `input__prefix input__prefix--${this.variant}`, onMouseDown: () => (this.dpIsActive = true), onMouseUp: () => (this.dpIsActive = false), onMouseOut: () => (this.dpIsActive = false), onClick: () => this.handlePrefixClick(), ref: el => (this.prefixBtn = el) }, h("span", { class: "input__prefix-icon" }, h("dga-icon", Object.assign({}, this.icon))), h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), h("span", { class: "input__prefix-label" }, this.label)));
         }
-        return (h(Fragment, null, h("button", { class: `input__prefix input__prefix--${this.variant} input__dropdown-btn`, onMouseDown: () => (this.dpIsActive = true), onMouseUp: () => (this.dpIsActive = false), onMouseOut: () => (this.dpIsActive = false), onClick: () => this.handlePrefixClick(), ref: el => (this.prefixBtn = el) }, h("span", { class: "input__prefix-icon" }, this.icon), h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), h("span", { class: "input__prefix-label" }, this.label), h("span", { class: "input__prefix-chevron" }, h("dga-icon", { name: "arrow-down-01", variant: "stroke" }))), h("ul", { class: "input__dropdown-list" }, this.options &&
+        return (h(Fragment, null, h("button", { class: `input__prefix input__prefix--${this.variant} input__dropdown-btn`, onMouseDown: () => (this.dpIsActive = true), onMouseUp: () => (this.dpIsActive = false), onMouseOut: () => (this.dpIsActive = false), onClick: () => this.handlePrefixClick(), ref: el => (this.prefixBtn = el) }, h("span", { class: "input__prefix-icon" }, this.icon), h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), h("span", { class: "input__prefix-label" }, this.label), h("span", { class: "input__prefix-chevron" }, h("dga-icon", { icon: arrowDown01StrokeRoundedIcon }))), h("ul", { class: "input__dropdown-list" }, this.options &&
             this.options.map(option => {
                 var _a;
-                return (h("li", { key: option.value }, h("button", { class: `dropdown__option ${((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === option.value ? 'selected' : ''}`, onClick: () => this.handleOptionSelect(option) }, h("span", { class: "dropdown__option-label" }, option.label), h("span", { class: "dropdown__option-icon" }, h("dga-icon", { name: "tick-02", variant: "solid" })))));
+                return (h("li", { key: option.value }, h("button", { class: `dropdown__option ${((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === option.value ? 'selected' : ''}`, onClick: () => this.handleOptionSelect(option) }, h("span", { class: "dropdown__option-label" }, option.label), h("span", { class: "dropdown__option-icon" }, h("dga-icon", { icon: tick02SolidRoundedIcon })))));
             }))));
     }
     static get is() { return "dga-prefix"; }

package/dist/collection/components/dga-text-input/dga-suffix.js

@@ -1,3 +1,4 @@
+import { arrowDown01StrokeRoundedIcon, tick02SolidRoundedIcon } from "../../assets/icons/index";
 import { h, Fragment } from "@stencil/core";
 export class DgaSuffix {
     constructor() {
@@ -21,10 +22,10 @@ export class DgaSuffix {
         if (this.type === 'text') {
             return (h("div", { class: `input__suffix input__suffix--${this.variant}-text` }, h("span", { class: "input__suffix-label" }, this.label)));
         }
-        return (h(Fragment, null, h("button", { class: `input__suffix input__suffix--${this.variant} input__dropdown-btn`, onMouseDown: () => (this.dpIsActive = true), onMouseUp: () => (this.dpIsActive = false), onMouseOut: () => (this.dpIsActive = false), onClick: () => this.handleSuffixClick(), ref: el => (this.suffixBtn = el) }, h("span", { class: "input__suffix-icon" }, this.icon), h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), h("span", { class: "input__suffix-label" }, this.label), h("span", { class: "input__suffix-chevron" }, h("dga-icon", { name: "arrow-down-01", variant: "stroke" }))), h("ul", { class: "input__dropdown-list" }, this.options &&
+        return (h(Fragment, null, h("button", { class: `input__suffix input__suffix--${this.variant} input__dropdown-btn`, onMouseDown: () => (this.dpIsActive = true), onMouseUp: () => (this.dpIsActive = false), onMouseOut: () => (this.dpIsActive = false), onClick: () => this.handleSuffixClick(), ref: el => (this.suffixBtn = el) }, h("span", { class: "input__suffix-icon" }, this.icon), h("span", { class: "dropdown__label" }, this.selectedOption && Object.keys(this.selectedOption).length ? this.selectedOption.label : ' '), h("span", { class: "input__suffix-label" }, this.label), h("span", { class: "input__suffix-chevron" }, h("dga-icon", { icon: arrowDown01StrokeRoundedIcon }))), h("ul", { class: "input__dropdown-list" }, this.options &&
             this.options.map(option => {
                 var _a;
-                return (h("li", { key: option.value }, h("button", { class: `dropdown__option ${((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === option.value ? 'selected' : ''}`, onClick: () => this.handleOptionSelect(option) }, h("span", { class: "dropdown__option-label" }, option.label), h("span", { class: "dropdown__option-icon" }, h("dga-icon", { name: "tick-02", variant: "solid" })))));
+                return (h("li", { key: option.value }, h("button", { class: `dropdown__option ${((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === option.value ? 'selected' : ''}`, onClick: () => this.handleOptionSelect(option) }, h("span", { class: "dropdown__option-label" }, option.label), h("span", { class: "dropdown__option-icon" }, h("dga-icon", { icon: tick02SolidRoundedIcon })))));
             }))));
     }
     static get is() { return "dga-suffix"; }

package/dist/collection/components/dga-text-input/dga-text-input.js

@@ -1,10 +1,11 @@
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils";
 import { SxStyleManager } from "../../utils/sx-style-manager";
+import { alert02SolidRoundedIcon, alertCircleSolidRoundedIcon, checkmarkCircle02SolidRoundedIcon } from "../../assets/icons/index";
 const feedbackIconTypes = {
-    success: h("dga-icon", { name: "checkmark-circle-02", variant: "solid" }),
-    error: h("dga-icon", { name: "alert-circle", variant: "solid" }),
-    warning: h("dga-icon", { name: "alert-02", variant: "solid" }),
+    success: h("dga-icon", { icon: checkmarkCircle02SolidRoundedIcon }),
+    error: h("dga-icon", { icon: alertCircleSolidRoundedIcon }),
+    warning: h("dga-icon", { icon: alert02SolidRoundedIcon }),
 };
 export class DgaTextInput {
     constructor() {
@@ -63,12 +64,12 @@ export class DgaTextInput {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: 'd24e92989338412f31a8a0d12d9da9bc60e39edf', id: this.componentId, style: this.rootStyles }, h("div", { key: '709d2690923eba1c88b5cf0f4cb3e3ab85a130ec', class: { "dga-form-control": true, "dga-form-control--fullwidth": this.fullwidth } }, this.label && h("dga-label", { key: '1ef6eddb37525f0f3f402af41ea04bc20228290f', label: this.label, size: this.size, required: this.required, disabled: this.disabled }), h("div", { key: 'd4014f4e32b6697d3273f9e7230992ed97335bb6', class: `input input--${this.size} ${this.error ? 'input--error' : ''} ${this.variant !== 'default' ? `input--${this.variant}` : ''} ${this.isActive ? 'active' : ''} ${this.isFocused ? 'focus' : ''} ${this.disabled ? 'input--disabled' : ''} ${this.readonly ? 'readOnly' : ''}`, ref: el => (this.inputContainerRef = el) }, h("slot", { key: '048d308bc51a82298d7ec42c67ec8d2b610b9e4d', name: "prefix" }), this.icon && (h("span", { key: '08a9d36cbcb99bcaf022b54f165fcb9fa3a648ba', class: "input__icon" }, h("dga-icon", { key: '0f8a716a459c404d10cdb550af1ec08344529ef4', name: this.icon.name, variant: this.icon.variant, type: this.icon.type, size: 20 }))), h("input", { key: '5d33cd30842f32a01ba8913805339c4ecc077f7b',
+        return (h(Host, { key: '6a7418f442f89d250b71a49abb24329d63ab6634', id: this.componentId, style: this.rootStyles }, h("div", { key: '111513b59d70e0695cafdd3bad7b1a2cfdb4c471', class: { "dga-form-control": true, "dga-form-control--fullwidth": this.fullwidth } }, this.label && h("dga-label", { key: 'ecfdad326868959f54caa6ae050d893f88dd2891', label: this.label, size: this.size, required: this.required, disabled: this.disabled }), h("div", { key: 'fac3f3bc3c844263f1bc61a8c145a3527ec16bf7', class: `input input--${this.size} ${this.error ? 'input--error' : ''} ${this.variant !== 'default' ? `input--${this.variant}` : ''} ${this.isActive ? 'active' : ''} ${this.isFocused ? 'focus' : ''} ${this.disabled ? 'input--disabled' : ''} ${this.readonly ? 'readOnly' : ''}`, ref: el => (this.inputContainerRef = el) }, h("slot", { key: '7f984cb04e2f0595d9645e7ad75eec7ed7f35372', name: "prefix" }), this.icon && (h("span", { key: 'ff68fe935f634c0fbe46884e6da2d939547a48ac', class: "input__icon" }, h("dga-icon", { key: '0f73e6935cfcf8805153b4beca14be2dfb82daeb', name: this.icon.name, variant: this.icon.variant, type: this.icon.type, size: 20 }))), h("input", { key: '9fc19c8968a223fb7888e3ead0018901044a42c2',
             // id={id}
             ref: (el) => (this.textInputEl = el), value: this.value, name: this.name, type: this.type, onFocus: () => (this.isFocused = true), onBlur: e => {
                 this.isFocused = false;
                 this.onBlur(e);
-            }, class: "input__field", placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, onMouseDown: () => (this.isActive = true), onMouseUp: () => (this.isActive = false), onMouseOut: () => (this.isActive = false), onChange: this.onChange, onInput: this.onInput }), this.error ? (h("span", { class: `input__feedback-icon input__feedback-icon--error ${this.feedbackIconRing ? 'input__feedback-icon--ring' : ''}` })) : this.feedbackIcon ? (h("span", { class: `input__feedback-icon input__feedback-icon--${this.feedbackIconType} ${this.feedbackIconRing ? 'input__feedback-icon--ring' : ''}` }, feedbackIconTypes[this.feedbackIconType])) : null, h("slot", { key: 'cf2824d4a9f86bdabb437e7231a3f47398190f21', name: "suffix" }), " "), this.helperText && h("dga-helper-text", { key: 'fd7fc11006278b6093e73ed0ba6301c6dbebcc52', helperText: this.helperText, helperTextIcon: this.helperTextIcon, error: this.error }))));
+            }, class: "input__field", placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, onMouseDown: () => (this.isActive = true), onMouseUp: () => (this.isActive = false), onMouseOut: () => (this.isActive = false), onChange: this.onChange, onInput: this.onInput }), this.error ? (h("span", { class: `input__feedback-icon input__feedback-icon--error ${this.feedbackIconRing ? 'input__feedback-icon--ring' : ''}` })) : this.feedbackIcon ? (h("span", { class: `input__feedback-icon input__feedback-icon--${this.feedbackIconType} ${this.feedbackIconRing ? 'input__feedback-icon--ring' : ''}` }, feedbackIconTypes[this.feedbackIconType])) : null, h("slot", { key: 'ec58f555af3ba84febf9358b96331e072c6616fc', name: "suffix" }), " "), this.helperText && h("dga-helper-text", { key: '10c91a2f4376725600f7b3172be27f57bb455dfc', helperText: this.helperText, helperTextIcon: this.helperTextIcon, error: this.error }))));
     }
     static get is() { return "dga-text-input"; }
     static get properties() {

package/dist/collection/components/dga-textarea/dga-textarea.js

@@ -2,10 +2,11 @@ import { h } from "@stencil/core";
 import { guid } from "../../utils";
 import { SxStyleManager } from "../../utils/sx-style-manager";
 import { Host } from "@stencil/core";
+import { alertCircleSolidRoundedIcon, checkmarkCircle02SolidRoundedIcon, alert02SolidRoundedIcon } from "../../assets/icons/index";
 const feedbackIconTypes = {
-    success: h("dga-icon", { name: "checkmark-circle-02", variant: "solid" }),
-    error: h("dga-icon", { name: "alert-circle", variant: "solid" }),
-    warning: h("dga-icon", { name: "alert-02", variant: "solid" }),
+    success: h("dga-icon", { icon: checkmarkCircle02SolidRoundedIcon, variant: "solid" }),
+    error: h("dga-icon", { icon: alertCircleSolidRoundedIcon, variant: "solid" }),
+    warning: h("dga-icon", { icon: alert02SolidRoundedIcon, variant: "solid" }),
 };
 export class DgaTextarea {
     constructor() {
@@ -63,7 +64,7 @@ export class DgaTextarea {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: '62f44a7c4abbfc9c408b6fe97b81207dee7e6372', id: this.componentId, style: this.rootStyles }, h("div", { key: 'f30d1f9dcc95eec6f4fedd8cf8fe8d602b597918', class: { 'dga-form-control': true, 'dga-form-control--fullwidth': this.fullwidth } }, this.label && h("label", { key: '666e50bacdf78966ac7dabb6a76cc746e061340e', class: "dga-label" }, this.label), h("div", { key: '97095fbe54471c7a5216e3e642f312b70a31b975', class: `dga-textarea dga-textarea--lg ${this.error ? 'dga-textarea--error' : ''} ${this.variant !== 'default' ? `dga-textarea--${this.variant}` : ''} ${this.isActive ? 'active' : ''} ${this.isFocused ? 'focus' : ''} ${this.disabled ? 'disabled' : ''}`, ref: el => (this.inputContainerRef = el), "data-error": this.error }, h("textarea", { key: '21bee91fef847bb7eb03873cf75e93c5e7619dbf', ref: (el) => (this.textAreaEl = el), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), class: `dga-textarea__field ${this.resize ? 'dga-textarea__field--resize' : ''} ${!this.scrollbar ? 'dga-textarea__field--hidden-scrollbar' : ''}`, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows && this.rows, cols: this.cols && this.cols, onMouseDown: () => (this.isActive = true), onMouseUp: () => (this.isActive = false), onMouseOut: () => (this.isActive = false), onChange: this.onChange, onInput: this.onInput, name: this.name, value: this.value }), this.error ? (h("span", { class: `dga-textarea__feedback-icon dga-textarea__feedback-icon--error ${this.feedbackIconRing ? 'dga-textarea__feedback-icon--ring' : ''}` }, feedbackIconTypes['error'])) : this.feedbackIcon ? (h("span", { class: `dga-textarea__feedback-icon dga-textarea__feedback-icon--${this.feedbackIconType} ${this.feedbackIconRing ? 'dga-textarea__feedback-icon--ring' : ''}` }, feedbackIconTypes[this.feedbackIconType])) : null))));
+        return (h(Host, { key: '2e7f126c3588b93816ee936a23255e913442670d', id: this.componentId, style: this.rootStyles }, h("div", { key: 'bf8c6095df8c21aa0ccce8b273dc89e3fbd40204', class: { 'dga-form-control': true, 'dga-form-control--fullwidth': this.fullwidth } }, this.label && h("label", { key: 'e703df789e202bc7c3e7f0c1ee7df4eddc9a11f1', class: "dga-label" }, this.label), h("div", { key: '43040d3a63471c41e3d2f426dea82c9f09a50379', class: `dga-textarea dga-textarea--lg ${this.error ? 'dga-textarea--error' : ''} ${this.variant !== 'default' ? `dga-textarea--${this.variant}` : ''} ${this.isActive ? 'active' : ''} ${this.isFocused ? 'focus' : ''} ${this.disabled ? 'disabled' : ''}`, ref: el => (this.inputContainerRef = el), "data-error": this.error }, h("textarea", { key: 'a00b2bba5e66620ab112b7490880faf53e089051', ref: (el) => (this.textAreaEl = el), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), class: `dga-textarea__field ${this.resize ? 'dga-textarea__field--resize' : ''} ${!this.scrollbar ? 'dga-textarea__field--hidden-scrollbar' : ''}`, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows && this.rows, cols: this.cols && this.cols, onMouseDown: () => (this.isActive = true), onMouseUp: () => (this.isActive = false), onMouseOut: () => (this.isActive = false), onChange: this.onChange, onInput: this.onInput, name: this.name, value: this.value }), this.error ? (h("span", { class: `dga-textarea__feedback-icon dga-textarea__feedback-icon--error ${this.feedbackIconRing ? 'dga-textarea__feedback-icon--ring' : ''}` }, feedbackIconTypes['error'])) : this.feedbackIcon ? (h("span", { class: `dga-textarea__feedback-icon dga-textarea__feedback-icon--${this.feedbackIconType} ${this.feedbackIconRing ? 'dga-textarea__feedback-icon--ring' : ''}` }, feedbackIconTypes[this.feedbackIconType])) : null))));
     }
     static get is() { return "dga-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-tooltip/dga-tooltip.js

@@ -62,7 +62,7 @@ export class DgaTooltip {
         this.sxHandler.cleanup();
     }
     render() {
-        return (h(Host, { key: '3fe0221c7472bcb7b6bc0dae5d8eb06b93ff0bfc', id: this.sxHandler.getId(), style: this.sxHandler.getStyles() }, h("div", { key: 'e57845bdc7367bc2db82d3c2fc704572c3376b2a', class: "dga-tooltip", "data-theme": this.theme, "data-beak-direction": `${this.beakPlacement}-${this.beakAlignment}` }, this.isHovered && (h("div", { key: 'a7308206ccd9813b06537caf424a72162caf5e12', class: "dga-tooltip-main", "data-direction": this.direction }, h("div", { key: '4b8504882ffc81682436406ff4abb203bb6c6585', class: "dga-tooltip-main__wrapper" }, this.beakPlacement !== 'none' && h("span", { key: 'ade1a3a6c9fe38fc28c59d735e157dffd5621f60', class: "dga-tooltip-main__beak", "data-beak-direction": `${this.beakPlacement}-${this.beakAlignment}` }), this.icon && (h("span", { key: '4339a99e0e8007d8dd22f0e679999833c600f14e', class: "dga-tooltip-main__icon" }, h("dga-icon", { key: '41ead42fef18031b6b8a498246dd2a7a8030ea51', name: this.icons[this.feedbackIcon.type].icon, variant: this.feedbackIcon.style === 'icon-only' ? "stroke" : "solid", size: this.feedbackIcon.size, color: this.icons[this.feedbackIcon.type].color }))), h("div", { key: 'd018ecb249ba668b423d6a316000fcb8178da186', class: "dga-tooltip-main__content" }, this.tooltipTitle && h("span", { key: '4521057e775d29e35c75c2e1ae9026fb73c5b8ea', class: "dga-tooltip-main__content__title" }, this.tooltipTitle), this.helperText && h("span", { key: '817af2a070714e6e1819f00d12fe012be29fa130', class: "dga-tooltip-main__content__helper-text" }, this.helperText))))), h("div", { key: '9c6fc0d985b4a5f3630fa36ca874e2630b852d3c', class: "dga-tooltip-item", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: '28f49e94d3e7a3001480264a8764f5b81bf63e7d' })))));
+        return (h(Host, { key: '1858ee9d75b78577fb6ae6d120b3cc65d48e6b10', id: this.sxHandler.getId(), style: this.sxHandler.getStyles() }, h("div", { key: '3c0c82a00907f69d2ac192da1ee3932d9e9ef428', class: "dga-tooltip", "data-theme": this.theme, "data-beak-direction": `${this.beakPlacement}-${this.beakAlignment}` }, this.isHovered && (h("div", { key: '4d322c7b4e08d502aea393d89cefb0f9fb669289', class: "dga-tooltip-main", "data-direction": this.direction }, h("div", { key: 'c5d3ada693094576bfb75a9f728545ecc41e9620', class: "dga-tooltip-main__wrapper" }, this.beakPlacement !== 'none' && h("span", { key: '7b4e5932d5be559d8a853021d2bc65ea1a832a00', class: "dga-tooltip-main__beak", "data-beak-direction": `${this.beakPlacement}-${this.beakAlignment}` }), this.icon && (h("span", { key: 'b147f0d8fa3f4a6046706714957c820d6ebbf9fc', class: "dga-tooltip-main__icon" }, h("dga-icon", { key: '45fc30a387d168d8213c79424c2bde1583adfb50', name: this.icons[this.feedbackIcon.type].icon, variant: this.feedbackIcon.style === 'icon-only' ? "stroke" : "solid", size: this.feedbackIcon.size, color: this.icons[this.feedbackIcon.type].color }))), h("div", { key: 'f7897e8305d621ffba9efa9a204fb690083093dc', class: "dga-tooltip-main__content" }, this.tooltipTitle && h("span", { key: '0b112d0af36c1d6b7b6c54acc8c2b7834de84180', class: "dga-tooltip-main__content__title" }, this.tooltipTitle), this.helperText && h("span", { key: 'b001fdff5ddf38e1ea3630ca792ccc65cff3f119', class: "dga-tooltip-main__content__helper-text" }, this.helperText))))), h("div", { key: 'b87d8805ea36d31edaaf0ed409c36af12dd8e47a', class: "dga-tooltip-item", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: 'deb9ea734bf91eb5a5121ec4debec4f420a5ab79' })))));
     }
     static get is() { return "dga-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/nds-components/dga-header/dga-header-action.js

@@ -26,17 +26,17 @@ export class DgaHeaderAction {
         });
     }
     render() {
-        return (h(Host, { key: '57bff5431e6227675c1d842ffd5002f98f19eecb' }, h("li", { key: 'c0861112228f8a037873e9444944aa8961f67778', onMouseEnter: () => {
+        return (h(Host, { key: '571a0a3a153d70f6c4d5ce3da0742018a66ca60e' }, h("li", { key: 'f244ff01420a7de99d38170d594d30b6b4438f30', onMouseEnter: () => {
                 this.openSubMenu = true;
                 //   this.active = true;
             }, onMouseLeave: () => {
                 this.openSubMenu = false;
                 //   this.active = false;
-            } }, h("a", { key: 'b06090e9223fdb8776f86cbc5df97a91bf55d866', href: "#", class: `header-menu__item ${this.active ? 'header-menu__item--active' : ''} 
+            } }, h("a", { key: '83581052a1523838823c7b010c8768cdccabf365', href: "#", class: `header-menu__item ${this.active ? 'header-menu__item--active' : ''} 
             
             ${this.iconPosition === 'inline' ? 'header-menu__item--inline' : 'header-menu__item--top'}
             
-            ${this.extraClasses}`, onClick: this.handleClick.bind(this) }, h("span", { key: 'df7097eced5fc185a6a808e5751765442eec83ef', class: "header-menu__item-arrow" }, h("dga-icon-v2", Object.assign({ key: '48f50b351d5327b0015dfcdc0a96ac60827cdfd8', name: this.icon }, this.iconProps))), h("span", { key: '0be9362d4b4c81748832358a7449fac42c02bf3e', class: "header-menu__item-label" }, this.label)), this.openSubMenu && h("slot", { key: 'd9ece0ad68b84650fec3e18ad59b25126024f5d8', name: "dga-header-sub-menu" }))));
+            ${this.extraClasses}`, onClick: this.handleClick.bind(this) }, h("span", { key: '485f04d8bc1eae8d187369df7aa59b47950fc500', class: "header-menu__item-arrow" }, h("dga-icon-v2", Object.assign({ key: '0f7a1b077f05674ba2b1e5167a52cab21a41f33f', name: this.icon }, this.iconProps))), h("span", { key: 'ebd2aa5f1b1a212145d46a0c28bf54c3f1e9d209', class: "header-menu__item-label" }, this.label)), this.openSubMenu && h("slot", { key: '948b45b2648ac72781b5e53836ed8fb47d7e59a1', name: "dga-header-sub-menu" }))));
     }
     static get is() { return "dga-header-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header-menu-item-usage.js

@@ -282,30 +282,30 @@ export class DgaHeaderMenuItemUsage {
         this.anchorEl = null;
     }
     render() {
-        return (h(Fragment, { key: '308f232cecc244735289ffac9ba10bccbcb9bb2f' }, h("dga-header-vv2", { key: '058d5249e2b494984c04f6ca3457d54ab1947a30' }, h("dga-flex", { key: 'e9cbbb767a707050c88cffa66cd83152ed17133f', spacing: 16, direction: "row", align: "center", justify: "between" }, h("dga-button", { key: '73a62c365fd36caa9aad9ec5aef8d5dd335614fc', iconOnly: true, leadIcon: true, leadIconType: this.collapsed ? 'cancel01' : 'menu01', leadIconProps: {
+        return (h(Fragment, { key: 'bcf170764049ee8c4062b02950531a7e724906d7' }, h("dga-header-vv2", { key: '4fa6c185279ee23f2bbef96c8a6a90305f728f81' }, h("dga-flex", { key: 'e67dadcf6e3bf63a58b100aad5d865165c7413eb', spacing: 16, direction: "row", align: "center", justify: "between" }, h("dga-button", { key: 'd1d14b45e9c6f7f2f63c6157ce0559339e0ecc24', iconOnly: true, leadIcon: true, leadIconType: this.collapsed ? 'cancel01' : 'menu01', leadIconProps: {
                 name: this.collapsed ? 'menu01' : 'cancel01',
                 size: 24,
                 variant: 'stroke',
                 type: 'rounded',
             }, variant: "transparent", onClick: () => (this.collapsed = !this.collapsed), class: "header-menu__btn", sx: {
                 display: { xs: 'block', md: 'none' },
-            } }), h("dga-logo-placeholder", { key: '17a77031cc468b2defb65a3ad8489c8073b4edc9', size: "md" }), h("dga-flex", { key: '6940b65989ef66bcabd061d844e0b08238d296fe', direction: "row", align: "center", justify: "start", sx: {
+            } }), h("dga-logo-placeholder", { key: '80441e7163318ff76cab8c038ff3aea43d43ec59', size: "md" }), h("dga-flex", { key: '900a8a6e87b75aae795a2b8cb68ab68640e45729', direction: "row", align: "center", justify: "start", sx: {
                 display: { xs: 'none', md: 'block' },
-            } }, h("dga-header-menu-item", { key: '49a48155ee9d1d5f842e1327336f7bb192050df9', label: "Home" }), h("dga-header-menu-item", { key: '9aa4ab30ed1cf2687ff4754383dac1ef16d1f7ad', label: "About" }), h("dga-header-menu-item", { key: '08370a4001e2c7a3826fb00989c3dbbea9a1ec83', label: "Contact", active: true }, h("dga-header-sub-menu", { key: '8e01dbdc7a0e44150970fac2f07244269ab50b52', subMenuFullWidth: true }, h("dga-header-sub-menu-column", { key: 'b1da8aa142a4eb8be529da22a7993d42c92e342c', label: "Column Label" }, h("dga-header-sub-menu-item", { key: 'a8e0ef5e864ce722831cf14f03e3cf52100464e3', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '732bf5643f5cc2b0c611a0afba0f9442cc8d201b', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '58f28a0ff16ce738bdb95659a3cc9049e795af0c', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'ef244a4f8105bef2293d5568a1c063581729e254', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '0fb9fb4a527a036a724719d6b81128b47f9d3a93', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '805f56e1b157cc77728c30234f2eb8c93b0ab127', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '6a516dea323fbbdd35a5cb58b33ae5d0aae177a7', label: "Column Label" }, h("dga-header-sub-menu-item", { key: 'b7f458ef2becf12aeae850f59528822664fc86d0', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'bc443f1e13ab94a85863462d1f8395bdf3a3177d', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '640416ee022bc11b28fabb433ad1d59a45523f5d', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '140af9acdf17b62836ac66cb2f6ba166a7d616c7', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '1349f39059543cb8dda1932020359b81dd679809', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'a9a09b6d21b71431e3d85161afe2939c21e61aa9', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: 'b1a231a05e47cb78201829bffa44510809c41e13', label: "Column Label" }, h("dga-header-sub-menu-item", { key: '43b9165fb790cffe755683dc3d8837977c337683', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'a5e9f44c63168048e6d919ba153a98c8fce9c03e', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '4ba58a7d442729b336be799847b145262ecccd8d', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '9ac53543d0209f073e659636b7aaec7aab87f8e1', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '24f095998d40c571440d37ac0442d331e63870f8', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '74f8026ea35c81da6352bc7c1127b5830aecdded', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '6a83bca64aeed3c8b589ab50bd2d3a6db7815394', label: "Column Label" }, h("dga-header-sub-menu-item", { key: 'ab341c09f529101293a7ab0ae879069fe5a78bc3', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'f92dad32b0aef8e6e47aab89a81023a6f5d8ba65', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '6dba74bb53873fe5b17774fb39cb96e128a4b9a0', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'f239c802b09c05e2ab2b03e47a70d17ca651e59e', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: 'b0200501ff3deee9fb72ccc961c1d04db06a980c', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'a25294ca695b609c85c57ec92ecd8a7870c0945b', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '17a3386935802b7f903d38a9559692540d0eb405', label: "Column Label" }, h("dga-header-sub-menu-item", { key: '850488803a383fac010c68c20fa5d8206b00cdcb', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'ac3e090a1a58d394fc293e4d8696fb8bfbdc82ab', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: 'cf296a415ed5cf8532532a0b51e8e6673d57f09a', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '5bb61259ab205a8dc82ef5c383bd294d35609fae', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: 'bcd88329affdde5171b0833767255c7ca7cd70cf', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '6daf4788209498f456418e20b2abfc8b7aa0567c', label: "Tag", color: "blue", slot: "tag", rounded: true }))))))), h("dga-flex", { key: '299f1833e314b8c2938cab93e2fb8d7ffafe77f2', direction: "row", align: "center", justify: "end" }, h("dga-header-action", { key: 'bc2e05ca5b7c1da78517191d9d00e4ac212da2b3', label: "Action", icon: "login-square-01" }), h("dga-header-action", { key: 'a9dcb3fa463ca0ae4695f0a28700b01427775cd5', icon: "login-square-01", iconPosition: "top" }, h("dga-header-sub-menu", { key: '7a8c03ce86a691dac43116ee5df2fc6440a53a74', subMenuFullWidth: true }, h("dga-search-box", { key: 'aacbe12d1a1b2e3460367fa0f11e6f2b6ddcaad6' }))), h("dga-action-menu", { key: 'afd49fb19698c1c56537bc7c10e8c0c8e6828eda', open: this.isMenuOpen, onClose: () => (this.isMenuOpen = false), placement: 'bottom-end' }, h("dga-button-v2", { key: 'adbf612ed6d4b13029d5d976b3affee88a1c4c2c', slot: "trigger", iconOnly: true, leadIcon: true, leadIconProps: {
+            } }, h("dga-header-menu-item", { key: '84c692c76a183ce91e923b57c92067b2a314698d', label: "Home" }), h("dga-header-menu-item", { key: 'e942cf832bafcc28354a1bef32364fc1a586118a', label: "About" }), h("dga-header-menu-item", { key: '2e301e9fcd92db7ff1dad7b7e260d8d8e6c742f5', label: "Contact", active: true }, h("dga-header-sub-menu", { key: '2b1d6681c44f7a7ad275ae1de8ada45e4b3a3234', subMenuFullWidth: true }, h("dga-header-sub-menu-column", { key: 'b38de6c90010b1fbfbea7843b72e58b3c247b365', label: "Column Label" }, h("dga-header-sub-menu-item", { key: '524b767000e5a9916eb7787f6c427d7196b6a6dc', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '0066a09a8942b0624b3a6260a0934ce372e51473', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '11b6a4b5391815ee95faffba59d3cb1d7d3e143a', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '4bda1270fe7262fa670ac6a94a207a66ea79240c', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '69bbdd106c60e980f669e77ba397ce7496498450', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '215f7d26eb8ba506643f161fc8936b9d8d0285a2', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '5d5cbbe340c4674c8a4ec6a0e38c2b04e56258fe', label: "Column Label" }, h("dga-header-sub-menu-item", { key: '5efa6dfceadead0f9d9cf8dd565f38fef8986fdc', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '881641955a7faf1fedebc7e306cadfe4ae76b7bd', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '48984d601245a7f092723b639cecc43660852e80', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '3518afc69d27929d7a2916380089897ffc1c6805', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '568ae98489e14b43cff35119f5d8bf332280ce74', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '7cb1c58c57f725209d1e91dfbc64ee459554c864', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '155f71080ad23d3b40ad5e262ac668250dd7f4db', label: "Column Label" }, h("dga-header-sub-menu-item", { key: 'fdca8142e41ce0b57fb81792342f71cb0cf2cdb3', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '253cd2f6eddf0813972a343064691f1d53a438ef', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '5dffe1a4d7e40274b804c2d03844f22ed8032d01', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '852400136f746a264282066324dde66f7374327e', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '403a4b0ac5a267590a749c76146b7d6d392a8fdd', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '14c2817d87abab1a734e731e78a107de1bcce4e4', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '7fef1a3be3cadd3cb8d3d71473645745383240a2', label: "Column Label" }, h("dga-header-sub-menu-item", { key: 'e226fea97561fb90da31d1d98a963aa142969d5d', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '06f1e9fd81807ed53a11e7347d93759953b01dbe', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: 'da587e357ffcd1d210adf08e1907c6544dab6eac', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'cab88460ba8213327a071a3a27375f1ce1662a49', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '507d02f9fd7797eb666879fbee36e24c5a1d151d', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'b4367a8e2f12867b093505dc7bcbb9fadbfebd2a', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '2e00f73716599fbd2c486aaa7595930cc0853d47', label: "Column Label" }, h("dga-header-sub-menu-item", { key: '514facfa1c87e213cc8476704f71bcfb26dafbe3', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '06877e302fa1b593d2cff80a6cc7823cd570b91f', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '1c3ad153b4f5b396dc2c7de2e21f284b6cd9f8b2', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '0b1ddc38fad2998306a8891ae10876396c5f5eef', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '6843eaf4c120a56afdb28cdf709d6bcda1e172c4', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'd491438bd168907e8da9b32904d7ab80dd6b9adb', label: "Tag", color: "blue", slot: "tag", rounded: true }))))))), h("dga-flex", { key: 'ce256c8f988dbb9be9a7892db3c3edcd686a78d5', direction: "row", align: "center", justify: "end" }, h("dga-header-action", { key: '5ba5e15685cf4ee2edbf1267c0923feb41eb173a', label: "Action", icon: "login-square-01" }), h("dga-header-action", { key: 'e8d6d175e739ddc6ceb475674d76b506a1114663', icon: "login-square-01", iconPosition: "top" }, h("dga-header-sub-menu", { key: '1c201f98ed79afa68c9b21b5444df2347a328c06', subMenuFullWidth: true }, h("dga-search-box", { key: '5b66a6f3b20a2f7b5a7ac74377ee2d37080ebcdc' }))), h("dga-action-menu", { key: '5015c9f5c4d53d685607f0a85ad184d65e64c6e0', open: this.isMenuOpen, onClose: () => (this.isMenuOpen = false), placement: 'bottom-end' }, h("dga-button-v2", { key: '46f25d43a095199c7fc948088bba856c44907a90', slot: "trigger", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'more-horizontal-circle-01',
                 size: 24,
                 variant: 'solid',
                 type: 'rounded',
-            }, variant: "transparent", onClick: () => (this.isMenuOpen = true), class: "header-menu__btn" }), h("dga-menu-list", { key: '03595c6d10143bda3c31c287450c979eea29889c' }, h("dga-menu-item", { key: 'b1d9d2270629804db64e6c3af4e0e633950bfbf2', label: "Item Label" }), h("dga-menu-item", { key: '37702d1d3e519670b0da8ab2844ce0efbff023be', label: "Item Label" }), h("dga-menu-item", { key: '77fbcd87d0800443ea08bf2ad1e2f41fa30696c5', label: "Item Label" }))))), h("dga-drawer", { key: 'acb39211ff79be25b8f0d31309448056d64c6bd4', routes: SidePanelRoutes, open: this.collapsed, background: 'gray', headerLogo: "https://casamedia.com/wp-content/uploads/2023/04/adidas-1024x683.png", sx: {
+            }, variant: "transparent", onClick: () => (this.isMenuOpen = true), class: "header-menu__btn" }), h("dga-menu-list", { key: '72876c3c8714415a23218e68bb7141389868f311' }, h("dga-menu-item", { key: '916fc9be0b119288386b7021c0396f832f855a64', label: "Item Label" }), h("dga-menu-item", { key: '5dbe82ef0984a9eaac164689fb512c91895facc8', label: "Item Label" }), h("dga-menu-item", { key: '781f2e5c7f9f09648cf445f24a6cdc333fe62f0c', label: "Item Label" }))))), h("dga-drawer", { key: 'd8adde1e533a464a18148475a51c8581e6c556e0', routes: SidePanelRoutes, open: this.collapsed, background: 'gray', headerLogo: "https://casamedia.com/wp-content/uploads/2023/04/adidas-1024x683.png", sx: {
                 '& > .sidepanel': {
                     top: '72px',
                 },
-            }, overlay: true }, "efddsfdsfsdfdsfdsf dfdsfdsfdsfdsfdsfdf", h("a", { key: 'df9ff16d739fb7aa4305d2f1c7052290ab50e6f1' }, "fdgdfgfdg"), h("div", { key: 'd206df29d5789f535842f1eb090077ca1487d4d0' }, "gfdgfdgfd")), h("dga-logo-placeholder", { key: 'cb22a6b34efae9491fd30cb6b637db0aff7dcf6a', text: "Platform Logo", size: "md" }), h("dga-logo-placeholder", { key: '9bedd4ea3e6ace6eb9db40633ce1a218adec5ee7', text: "Platform Logo", size: "sm" }), h("dga-action-menu", { key: '15b30bac22b5a24da4025cab39af19cc687f6449', open: this.isMenuOpen, onClose: () => (this.isMenuOpen = false), placement: 'bottom-end' }, h("dga-button-v2", { key: '1b8c8e3fca691249a3e4b06a61dfde8d0c91e8ab', slot: "trigger", iconOnly: true, leadIcon: true, leadIconProps: {
+            }, overlay: true }, "efddsfdsfsdfdsfdsf dfdsfdsfdsfdsfdsfdf", h("a", { key: '2b6f1a59b047bb552c4e18fbc3267e297c682f46' }, "fdgdfgfdg"), h("div", { key: '33db7bda83a5c8bc0e3094067e44e0f431e455b8' }, "gfdgfdgfd")), h("dga-logo-placeholder", { key: 'e580d491cb66183c6f193479201e0a25c6e9c847', text: "Platform Logo", size: "md" }), h("dga-logo-placeholder", { key: '11247d359187396ff45548ceb9f1057147b3d4e1', text: "Platform Logo", size: "sm" }), h("dga-action-menu", { key: 'd216f3e6957f74143008ff8e4aa751d0c32f33f3', open: this.isMenuOpen, onClose: () => (this.isMenuOpen = false), placement: 'bottom-end' }, h("dga-button-v2", { key: '6576ffab2d6942add2e26fdb5b89c58714876fab', slot: "trigger", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'more-horizontal-circle-01',
                 size: 24,
                 variant: 'solid',
                 type: 'rounded',
-            }, variant: "transparent", onClick: () => (this.isMenuOpen = true), class: "header-menu__btn" }), h("dga-menu-list", { key: '2b6dc6f348cadca743f14568e4ab62ab9f5dc9be' }, h("dga-menu-item", { key: 'c367ddab2e27a7b51f5a912e73474661acf74a64', label: "Item Label" }), h("dga-menu-item", { key: 'c613e6406096d56d7494856f051c8918c1a2aef5', label: "Item Label" }), h("dga-menu-item", { key: '9ba407a2eaf11d0e7db6cfb1e42e69b1d125e340', label: "Item Label" })))));
+            }, variant: "transparent", onClick: () => (this.isMenuOpen = true), class: "header-menu__btn" }), h("dga-menu-list", { key: '02b514ed6b424e755a8e74cd63bc20d62ff3f612' }, h("dga-menu-item", { key: '076339e422afef951f54dc33fcdc2484c646b1be', label: "Item Label" }), h("dga-menu-item", { key: 'f61cecc39d8f2aff489484702a845fd8b4c4836d', label: "Item Label" }), h("dga-menu-item", { key: 'e3bd4881454b357266be92f09cf8956385d88d0c', label: "Item Label" })))));
     }
     static get is() { return "dga-header-menu-item-usage"; }
     static get states() {

package/dist/collection/nds-components/dga-header/dga-header-menu-item.js

@@ -24,13 +24,13 @@ export class DgaNavHeaderLink {
         });
     }
     render() {
-        return (h("li", { key: '23f1bdcb2997b40566e0c2d019cbb7dc743cb81d', onMouseEnter: () => {
+        return (h("li", { key: 'd1d8449d5f0b451a736b0cd0fa1dae447923f9a9', onMouseEnter: () => {
                 this.openSubMenu = true;
             }, onMouseLeave: () => {
                 this.openSubMenu = false;
             }, style: {
                 display: 'inline-block',
-            } }, h("a", { key: '0b2e5be3fdc82c8df0f16a3c48d8b90d89a4e471', href: "#", class: `dga-header-menu__item ${this.active ? 'dga-header-menu__item--active' : ''}`, onClick: this.handleClick }, h("span", { key: 'f3ba142dfb54969ee2234921fe1cdc8578c442fc', class: "dga-header-menu__item-label" }, this.label), h("span", { key: 'b78e6041525e5fd20eb1cf46deb8ceab25c21900', class: "dga-header-menu__item-arrow" }, h("dga-icon-v2", Object.assign({ key: '2e19d1cb59553e13a1540b2826658116e73f562b', name: this.icon }, this.iconProps)))), this.openSubMenu && h("slot", { key: 'dc2c97acb450bfa939c9e4d6ce49e31828eac7d1', name: "dga-header-sub-menu" })));
+            } }, h("a", { key: '48f884d1c6cdcb2a495249a5416bfc29f7d8a26d', href: "#", class: `dga-header-menu__item ${this.active ? 'dga-header-menu__item--active' : ''}`, onClick: this.handleClick }, h("span", { key: 'f8ec9fc39d9b601a5e7e9cec424d6132329ff6da', class: "dga-header-menu__item-label" }, this.label), h("span", { key: '78593d24d163a21a98259002400ac3b54e920cd9', class: "dga-header-menu__item-arrow" }, h("dga-icon-v2", Object.assign({ key: 'c978a09fa8df5f0300d9c18fe9f59abf6a017da6', name: this.icon }, this.iconProps)))), this.openSubMenu && h("slot", { key: 'e6ad5e12c6bb2efbf45f0432c1aa67c8e21f7c91', name: "dga-header-sub-menu" })));
     }
     static get is() { return "dga-header-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header-menu.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaHeaderMenu {
     render() {
-        return (h("ul", { key: '57e58ec19fa3e2deca7c3da249e68d2b3c5706a0', class: "header-nav__menu" }, h("slot", { key: '6216510ba3621bd1e45794f5f2dab4640a106876' })));
+        return (h("ul", { key: '29ab177857d9b1fb5ecde5923cd9d05aeb98ff02', class: "header-nav__menu" }, h("slot", { key: '30658668cffc5e0d6dee79d99f0f7cd29f9ac03a' })));
     }
     static get is() { return "dga-header-menu-vv2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header-sub-menu-column.js

@@ -4,7 +4,7 @@ export class DgaHeaderSubMenuColumn {
         this.label = '';
     }
     render() {
-        return (h("div", { key: '57991a38e8b6ae76e12c028b218680e06ade4346', class: "sub-menu__column" }, this.label && h("h2", { key: '8560a981d707c68c5c8c4ac3193d3369d9659075', class: "sub-menu__column__label" }, this.label), h("slot", { key: 'de3f1a1795d32b43b17fe1e878029cf128630d97' })));
+        return (h("div", { key: '4632ffac62e384b7851d4fd6d9f3c73993338988', class: "sub-menu__column" }, this.label && h("h2", { key: '8a4d246617c0a7da748b6d4d6971cccef5e2e4d8', class: "sub-menu__column__label" }, this.label), h("slot", { key: '876eb7fc4519d29e392c9b1b34ffb93ba4c15545' })));
     }
     static get is() { return "dga-header-sub-menu-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header-sub-menu-item.js

@@ -11,7 +11,7 @@ export class DgaHeaderSubMenuItem {
     render() {
         const backgroundClass = this.background === 'Brand' ? 'sub-menu__link--on-color' : '';
         const linkStyleClass = this.linkStyle && this.linkStyle > 0 ? (this.linkStyle === 2 ? 'sub-menu__link-icon--bg' : 'sub-menu__link-icon') : '';
-        return (h("a", { key: '6d2626dd5b68ec8ac7bc8e7e0ce02a185c384eb0', href: this.link, class: `sub-menu__link ${backgroundClass}` }, this.linkStyle && this.linkStyle > 0 ? h("div", { class: linkStyleClass }, this.icon && h("dga-icon-v2", Object.assign({ name: this.icon }, this.iconProps))) : null, h("dga-flex", { key: 'adc93c4f0f99a931f662a37a161fd136bb384e86', direction: 'column', spacing: 4 }, h("dga-flex", { key: '5dfedbff7985daf907a1251698d9ef71b028fc06', direction: 'row', align: 'center', spacing: 8 }, h("span", { key: 'ebec4e18c2d0edc2d815a97bc127cfdf5989c3cc', class: "sub-menu__link-label" }, this.label), h("slot", { key: 'ec5876029fd6996e1009266c091defbb908227c8', name: "tag" })), this.helperText && h("span", { key: '969851c2478facd974c7153398b18503674606a1', class: "sub-menu__link-helper" }, this.helperText))));
+        return (h("a", { key: '1a0f4096a3c293309f46c5cceb5ae75910cfbf70', href: this.link, class: `sub-menu__link ${backgroundClass}` }, this.linkStyle && this.linkStyle > 0 ? h("div", { class: linkStyleClass }, this.icon && h("dga-icon-v2", Object.assign({ name: this.icon }, this.iconProps))) : null, h("dga-flex", { key: '2f29c50c537df8be70a327b5d3c33e4a72a33087', direction: 'column', spacing: 4 }, h("dga-flex", { key: 'c9ebad7beb3543bf6764c0d34483cd321025a70e', direction: 'row', align: 'center', spacing: 8 }, h("span", { key: 'e95730327156f7b8edd03fd8f58d1d3dfad88e4d', class: "sub-menu__link-label" }, this.label), h("slot", { key: 'a9fa479dde28ca909fb69d4a2a9076fcbb3707f0', name: "tag" })), this.helperText && h("span", { key: '49560e47ae2f90a8b58e8a3af62d858ff7081583', class: "sub-menu__link-helper" }, this.helperText))));
     }
     static get is() { return "dga-header-sub-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header-sub-menu.js

@@ -20,7 +20,7 @@ export class DgaHeaderSubMenu {
     }
     render() {
         const fullWidthClass = this.subMenuFullWidth ? 'header__sub-menu--full' : '';
-        return (h("div", { key: 'efa6e38610fa4c38ad60690882d1551af863d894', class: `header__sub-menu header__sub-menu--bg-${this.background} ${fullWidthClass}`, ref: el => (this.submenu = el) }, h("div", { key: '96fe8616dbdb9210e8e00fa20d113200ea2d3071', class: "sub-menu__container" }, h("slot", { key: '25b56b4591ffec6282dc001fcad83dee3784451d' }))));
+        return (h("div", { key: 'dace5ecdd9f6da96479b197e3a36f0c7e064c5e0', class: `header__sub-menu header__sub-menu--bg-${this.background} ${fullWidthClass}`, ref: el => (this.submenu = el) }, h("div", { key: '692ecf99d0da5bfd38cd60000d1e0c676ff75e02', class: "sub-menu__container" }, h("slot", { key: '043b2ec1ca0a144190fa4c209ff1862780c7b318' }))));
     }
     static get is() { return "dga-header-sub-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-header.js

@@ -6,7 +6,7 @@ export class DgaHeader {
         this.sticky = false;
     }
     render() {
-        return (h("header", { key: '2407a901b6f68e72d08da35f5b6cd270032b8b1d', class: `header ${this.divider ? 'header--divider' : ''} ${this.sticky ? 'header--sticky' : ''}` }, h("nav", { key: '3e2b9b026e2be130a7dca9287d928b582e74ea7f', class: `header-nav--${this.fullWidth ? 'full' : 'fixed'}` }, h("slot", { key: 'c44a5a87c255f864ef729461990c4b73e36e9095' }))));
+        return (h("header", { key: '554e1a20dbd330c5914b3d7381c44d74ce139ea9', class: `header ${this.divider ? 'header--divider' : ''} ${this.sticky ? 'header--sticky' : ''}` }, h("nav", { key: 'cda0dd23dca30527102be361ad118809fe9f1e07', class: `header-nav--${this.fullWidth ? 'full' : 'fixed'}` }, h("slot", { key: '223a851aafff9c98078c411063500d1700a0a569' }))));
     }
     static get is() { return "dga-header-vv2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/dga-header/dga-logo-placeholder.js

@@ -17,9 +17,9 @@ export class DgaLogoPlaceholder {
     // }
     render() {
         // const logoSize = this.getSize();
-        return (h(Host, { key: '2e19bfa2b3b8a1917f3eaa29e5dc96e7df54885c' }, h("div", { key: '12150c9c1abc4575df59689f035077a78180e331', class: `logo-wrapper logo-placeholder--${this.size} logo-placeholder--${this.layout}` }, h("img", { key: '25cd5955ce654b447be0937f46d034b1e17d83da', src: this.src, alt: "Platform Logo",
+        return (h(Host, { key: '63da81bf8e02be4b899bd7dc397a59d3857a0c3e' }, h("div", { key: '937957ea57365f942280f413285c5aac1cc6744e', class: `logo-wrapper logo-placeholder--${this.size} logo-placeholder--${this.layout}` }, h("img", { key: '0323929bf04cd0a5d7c93bfcafab1df4f0aefb35', src: this.src, alt: "Platform Logo",
             // style={{ width: logoSize, height: logoSize }}
-            class: "logo-image" }), h("span", { key: 'cbd1653a2f8c880c8ba6de7c7abc7bef9a22be27', class: "logo-text" }, this.text))));
+            class: "logo-image" }), h("span", { key: '7bdf63189d2a0752a5cf93f17a9663aa4b118cc0', class: "logo-text" }, this.text))));
     }
     static get is() { return "dga-logo-placeholder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/nds-accordion/nds-accordion-usage.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class NdsAccordionUsage {
     render() {
-        return (h("div", { key: '0024922b86f484360b098d0a72bfd32be07fb2f5' }, h("h1", { key: '5d564432511f1fa72ba78c25372bc9f58bbf58af' }, "Accordion Example"), h("div", { key: 'f0b0707ba4804354ee89cafebd276ab3c241fcff', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'ffcdb4e67dee90d515ad4f98e0ed7f27e879f4ff', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-accordion", { key: '050a9de8e001a540eb520723a2bd1e7d73fdc8cc', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }), h("nds-accordion", { key: '1d2f35c84b4bf206ad76577cb343c368bdfc6681', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }, h("div", { key: 'c32462925947c53d7cdcda6b5a051636b091012b' }, h("p", { key: '8af43311647f68f3dc13191da8882023d9a978e2' }, "This is a ", h("span", { key: 'a1c9b985a22dfe4e104dde97a3e07d1d4b8d848f', style: { color: "red" } }, "custom"), " content inside the accordion."), h("p", { key: '34d7443d029fb8e0337762388072aadac4452ba1' }, "You can put any React nodes here.")))))));
+        return (h("div", { key: '9123890eda0c2fc65da22ce4b5f127d0dc4a121c' }, h("h1", { key: '8895f7600d63dcad69de62f266223218e4ff7524' }, "Accordion Example"), h("div", { key: '7c0735f21b91f2dae999defec1eed1286674f4e2', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'c12c81a421330ebb1742196374dc69ae69159e43', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-accordion", { key: '7cbb4adc70d15301b4f1918bde2aadaf04769236', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }), h("nds-accordion", { key: '42c0003deaba848fd3a5c1d3d78b76f605d6845c', title: "Accordion Title", size: "lg", content: "The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion." }, h("div", { key: '68663eec1c2fb257a57f2801beac7fb35c2a6b0c' }, h("p", { key: 'dd631be5a344ba7e9b508b13c23a6f844850e3e9' }, "This is a ", h("span", { key: '57ac48e29944525e5e1bc12ed3cd7d169ae47214', style: { color: "red" } }, "custom"), " content inside the accordion."), h("p", { key: '0172a5f691529db9ab417917c3d4ece70bfc1937' }, "You can put any React nodes here.")))))));
     }
     static get is() { return "nds-accordion-usage"; }
 }

package/dist/collection/nds-components/nds-accordion/nds-accordion.js

@@ -73,10 +73,10 @@ export class NdsAccordion {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: '9e962a059b7ef2f46a4ea482ae7d57e6d3314fb4', id: this.componentId, style: this.rootStyles }, h("div", { key: 'a7b523fc7b109fc5fbdbaa2605836c9955677998', class: `dga-accordion-item dga-accordion-item--${this.size} 
+        return (h(Host, { key: 'c306a87788d068563ddef40ff8e535b364ec4240', id: this.componentId, style: this.rootStyles }, h("div", { key: '3a60a41cd8239ac0b2d0c2c5eed77f943c444476', class: `dga-accordion-item dga-accordion-item--${this.size} 
           ${this.iconAlignment === 'leading' ? 'dga-accordion-item--icon-leading' : ''}
           ${this.flush ? 'dga-accordion-item--flush' : ''} 
-          ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'active' : ''}` }, h("a", { key: 'ea95fd379b3959c6a73ab01d47f8b1c79294f7ce', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'leading' && (h("div", { key: '284ea3753d2e662c56a7b6cca790d2619543b330', class: "dga-accordion-item__arrow" }, h("dga-icon-v2", { key: '48f1656d14434503b65c3b8801c087759d4c4263', name: "arrow-down-01", variant: "stroke", size: 16 }))), h("div", { key: 'aaa758ef75c158c2b57242cb12b411f94e758cf9', class: "dga-accordion-item__title" }, h("slot", { key: '9c21fa267539ef7be7843c1ccad3b74c34dd4d6d', name: 'title' }, this.title)), this.iconAlignment === 'trailing' && (h("div", { key: '12ec757ec9baace08683e487316b223723d92332', class: "dga-accordion-item__arrow" }, h("dga-icon-v2", { key: '0f5ea59db4e30ffbbd3d9fde536b7f27584ddce4', name: "arrow-down-01", variant: "stroke", size: 16 })))), h("div", { key: '80deb304d202312259506cad19f34d1829186b4f', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, h("slot", { key: 'a77f08fa9cb08624849be0beec439281677bf501', name: 'content' }, this.content)))));
+          ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'active' : ''}` }, h("a", { key: '95863549e6eb11b6672ee808ae6134f602745d5a', href: "#", onClick: e => this.handleAccordionClick(e), onKeyDown: e => (e.code === 'Space' ? this.handleAccordionClick(e) : null), class: "dga-accordion-item__header" }, this.iconAlignment === 'leading' && (h("div", { key: 'fe3dd2ff3b2b56f100eac5e95537830e49f3ce05', class: "dga-accordion-item__arrow" }, h("dga-icon-v2", { key: '729d25df129367ebea242f63f6dfce699e9b544b', name: "arrow-down-01", variant: "stroke", size: 16 }))), h("div", { key: 'c2a5da1d2b70bb78e082fc6e7e4e9a718d3db7a9', class: "dga-accordion-item__title" }, h("slot", { key: '8ddd02d000d41e70e00167653a4dc350ee6d936a', name: 'title' }, this.title)), this.iconAlignment === 'trailing' && (h("div", { key: 'e3d428da9a1f7f9ee4232b2f56134f93788c0a84', class: "dga-accordion-item__arrow" }, h("dga-icon-v2", { key: '636bc322771116e28cbe1a62bbbe48f267536df0', name: "arrow-down-01", variant: "stroke", size: 16 })))), h("div", { key: 'f269860f5a6dc09fd18f07fb624525f08209eea4', ref: el => (this.bodyElement = el), class: "dga-accordion-item__body" }, h("slot", { key: '3c8a128b32150a860f5b8c8013509901cc26fc50', name: 'content' }, this.content)))));
     }
     static get is() { return "nds-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/nds-avatar/nds-avatar-usage.js

@@ -4,39 +4,39 @@ export class NdsAvatarUsage {
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: 'd2c349746c6342a69230e4a75f26f9923105e711' }, h("h1", { key: '61793ffb5c7f58aadb849b75bd0e0652010531db' }, "Avatar Example"), h("div", { key: 'f25c3d23f67d5f96b09842feb553d7a7769f5e97', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '74ac2de50cbd155a63cd0dc8a1b225f918115189', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'd792800f75396ddf0fca25a074bb015eb2ba0100', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: 'f553a15084b03182d27f11acbee879114b27d574', size: 120, border: false, square: true, sx: {
+        return (h("div", { key: 'ac1faae2ebc4f5db7efdd3efd4ce0767ba484ed0' }, h("h1", { key: '5281f0d6bee4b3a45bed162ddfb7ed43a9ae671c' }, "Avatar Example"), h("div", { key: '3213d15f5cf8a91302c7597f12bcd65bcc84b90f', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '6144049768a8069d2586333bfcaa981d04a06f7c', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("div", { key: 'a9c215a9ab2fb87404aab12618dcf49e5b7b6a30', style: { padding: "10px", display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: "black" } }, h("dga-avatar", { key: 'b398ba7d9823078d6a33f9d755ab8d11de513faf', size: 120, border: false, square: true, sx: {
                 "& .dga-avatar": {
                     borderRadius: "100px"
                 }
-            } }), h("dga-avatar", { key: 'f5ada8a0e2509085428667bf159f67e9999a7a72', size: 120, border: true, square: true })), h("dga-avatar", { key: 'ef1505273b112f75b53a4ff85fab39b55d2a26f4', type: "icon", size: 120, icon: {
+            } }), h("dga-avatar", { key: '91eba111611c3ac0dd76c0f420e7821c3180a264', size: 120, border: true, square: true })), h("dga-avatar", { key: '5eb17d4e64ecdf0b81f86768abb40d04bd67fdcd', type: "icon", size: 120, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '05fef150d74e31fe32610107277d8c8295dfcad6', type: "icon", size: 80, icon: {
+            } }), h("dga-avatar", { key: '7b9ae727d4a932adbd319ef0ba51ae7ad528a638', type: "icon", size: 80, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: 'f48a82f28a07136a6b0b1e08d2452572a0df156e', type: "icon", size: 68, icon: {
+            } }), h("dga-avatar", { key: 'f420f355134964b5ebac614789a5d19640438376', type: "icon", size: 68, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '78563f1ca2881a3bdf37c18062988cd7a5c90e66', type: "icon", size: 48, icon: {
+            } }), h("dga-avatar", { key: 'c3e5a0eeec72896e7e0796d1513a2c5d053b135c', type: "icon", size: 48, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '666be7d56d1a69b8883ff58634d71444ecd6d4e5', type: "icon", size: 40, icon: {
+            } }), h("dga-avatar", { key: '80d61a6a76c28095babf6cf7b630180fac4ebb1d', type: "icon", size: 40, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '0e365daf2a2f0f12c793279d34fbba6eecab5701', type: "icon", size: 32, icon: {
+            } }), h("dga-avatar", { key: '49d108be6ed605a3b7d2898035b516a4bcdf9625', type: "icon", size: 32, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } }), h("dga-avatar", { key: '9e0b0338c5a7f23a79a9ced530586342e61d8753', type: "icon", size: 24, icon: {
+            } }), h("dga-avatar", { key: '6838e74f63965415c9526e714f311344a9c3762a', type: "icon", size: 24, icon: {
                 name: 'user',
                 variant: "stroke",
                 type: "rounded"
-            } })), h("dga-avatar-group", { key: 'a64a3a546ce4405a2bdbef048c75b53cb544f1d5', stacked: true }, h("dga-avatar", { key: '74b6ab499ff10436c1c5988dfb96fb4801677e43', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: '76ae0ff03369d246822995be5b2c161d4dbd3e4c', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: '50e4243ce28f1fcf324d9c87c09efa5485c7d618', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: '1133e721da79887e9d0c7a739fd9dd14e39277d6', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: '2e7307273dea4c7380c6f9db255f2653732b7bd2', type: 'initials', text: `+4`, size: 40 })), h("div", { key: 'd6c6efd8b0f412c627f195b7091a9e3dac1bf64f', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("dga-avatar-group", { key: '83ecfecd332cda7b6a16c823b80278e297b5c792', stacked: true }, h("dga-avatar", { key: 'ad9787c09b03f609096dad63dd6151cbf4a6e774', type: "initials", text: 'AB', size: 40 }), h("dga-avatar", { key: 'a4856d76605d8a792da49dbf19585fd1982b34f5', type: "initials", text: 'CD', size: 40 }), h("dga-avatar", { key: '2343308777e5930258990edc341b85462879e896', type: "initials", text: 'SB', size: 40 }), h("dga-avatar", { key: 'cdc4c2dbe5647315fa123d1b715f2f690481a76d', type: "initials", text: 'WK', size: 40 }), h("dga-avatar", { key: '8c6a8e7ddd217221b90ee4460bd012a0e83a8f06', type: 'initials', text: `+4`, size: 40 })), h("div", { key: '1e337bdfe940ce7ef1cd42525637bb17fcdca3d4', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "nds-avatar-usage"; }
     static get states() {

package/dist/collection/nds-components/nds-avatar/nds-avatar.js

@@ -51,7 +51,7 @@ export class NdsAvatar {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: '507970a5dd503477fa4019f98409b547d80cc137', id: this.componentId, style: this.rootStyles }, h("div", { key: '37681c5efbfe8aa5b1eac24ccb5a365c132e55c4', class: {
+        return (h(Host, { key: '69eb1bb16f7e10ad7e0857a7abcddf58967292e2', id: this.componentId, style: this.rootStyles }, h("div", { key: '86bfc8ce3b9781dd687a26a1f17cf16399d453b4', class: {
                 'dga-avatar': true,
                 [`dga-avatar--${this.type}`]: true,
                 [`dga-avatar--${this.size}`]: true,

package/dist/collection/nds-components/nds-button/nds-button-usage.js

@@ -4,13 +4,13 @@ export class NdsButtonUsage {
         this.variant = 'neutral';
     }
     render() {
-        return (h("div", { key: '5fd627572902e4825020c917bd5dd19542cb91d6' }, h("h1", { key: 'c7b09ee9c48e510d38b21c9233c0ecc7fa91673d' }, "Button Example"), h("div", { key: '2fee00ba0d75e6d04191e23f0167812761c56975', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '6ac01e8bc98ead8a4e5a13e63caaa8fe4f2b9704', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: 'e73a46700e09a9954b00ed213e07dcc92971d606', direction: "column", spacing: 16 }, h("dga-button-v2", { key: '74c6cb303326ea3514127250093127e81f7d6952', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: 'b00d4bc4705e8a6c54a3f3eeebe50a4124315ad6', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '5921c274597b8901ae8ccfec0d79aba69a8f8271', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: 'b6992262d5f89e1ee1fac8aa7ac8d4db2d7c63e6', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: 'd5f5738ea58a0627c4aae1fde03d36fd93edd4b0', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: '241cde01f9b20ab01d932b7c7a640257960a6a51', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: '7f6fb4e6872ea4aa28ed75919636cc3f1ab2e46a', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: '7a2286cd98fa27f1fe18b697c119f0aa9f20ff4b', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: 'ebd85c7f7a20fc380ae3f7592e4a27744b9a2c32', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: '5bfe184959d1bbdbf4e4a76ea54b6ee74d207741', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: 'd3003aeaaa3ac7ed1effe24a44120a2685d47909', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: '647da700b39563a9737b5f4654225d9ddfaf3598', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: 'd644c1358bca20ea58afef1d2aec3ed78aeabc9f', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: 'e8bfd09a43a332fb6c1e4110946c6d37f4942697', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: '318109f567104cee29f18834308d3bfcd56eb2d8', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: '824b39cd90612b4a428d4ad3ba9ad2544b7852eb',
+        return (h("div", { key: '93e8a534cdf0510938fddc6c71b50f9f187e6152' }, h("h1", { key: 'f685f95bf42630668e6bb87a4028fc33454a5b06' }, "Button Example"), h("div", { key: '11541348742b59c5a9f8a5a5bed82ed2ad061396', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '3fc6da5081ee18fdde08258dc9f45bc71c28fbf9', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '89dd10ed91dcf4fd1ede6f24a04aa509056f104c', direction: "column", spacing: 16 }, h("dga-button-v2", { key: '2d47c266e8ad231d663d87e4227683708954e559', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: 'f3baec3e2915dbf0def6d0077875efd3c1d3b2f3', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '6048983c1b1957a2fd7a0547cbb78a4440780442', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: '4706e798f37607b7415d3fe060a4de13a1c29780', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: 'd509b14e82495c156118cae3e94192ece9cba6ba', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: '97f3e4a7d2b68040ba71631bde80ce24030ced5d', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: '90cc0c839970d1eb57aa7ab03b8ef549ae8c87d9', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: 'f6dac77cea26b99aa9c3e529580f2b84e4ea3339', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: '9dd7afd56cb8bf3dcbd1eb410930453616d5e17a', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: '1ad41574bbb4620a5e89d42ea910a5e76023039e', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: 'e84b533c0c642c43e5a96c4375d815c5c0c579f8', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: '897cf9772232073d72f3bf968a75ba25655050a0', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: 'bfe0dc83e184ee3a96094ae9df700233945a467f', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: '50081c16bbe5f639683fa5e61bf30d7565834bda', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: '4d80da0b9f949940798328a80173b16027712dd8', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: '7dbeee7bc5832202920fd13f68fb9abb215961e7',
             // className="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100"
             label: "See live preview", size: "lg", variant: "secondary-outline", trailIcon: true, trailIconProps: {
                 name: 'link-square-01',
                 variant: 'stroke',
                 type: 'standard',
-            } })), h("div", { key: '5f4c74b631b89a4d28ec0b5c127d21858accb3ba', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '9b3e4d65467cbc4af47ea26e26cf86c807a300b8', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: 'ad9180df6a1a5dd868aecb66df61bd7d56e1f63a', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: '92eb0330444e5c0d15854f5845b5a1960167858a', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: 'f71769e770a77522fd677ba9b04322054536844f', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: 'e1d1937efb0fb5cc9d10f324ddf36d00d4b84c6e', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '8f6b8ddc35393d828b41bdfcf76f7d909747ac5b', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
+            } })), h("div", { key: 'dce63e3e728fe8c771efe21b7b2266e2179b34c0', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '75b7a2ffbaaa620cef29fd4a715d2bfce1a2a62d', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: '6a365df713c9306e537e905b2ac571d8c5066764', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: '8936024c769ef277d82d6f1ec7d79cd086b42dc2', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: '177803e3a86a468faa282a8593bbe289f5b2ea1e', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '038d94fd691a71142218f1d3708621a29fe40c15', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '0e36f957af0065debbdcd737c56c77393b42f57b', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
     }
     static get is() { return "nds-button-usage"; }
     static get states() {

package/dist/collection/nds-components/nds-button/nds-button.js

@@ -34,7 +34,7 @@ export class NdsButton {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: 'bf012acb6c6fd700122192bce453169abd2d6ee5' }, h("button", { key: 'aa5ce4bc67800db0e7fa7bea02daf671e2b9b4a6', type: this.type, class: classList, disabled: this.disabled, "aria-label": this.iconOnly && !this.label ? 'Button with icon' : this.label, role: "button", onClick: (event) => this.handleClick(event) }, h("slot", { key: 'cbf4ab0efd45ad1c053861471306fea84b6519d0', name: "leading-icon" }, this.leadingIcon && (h("span", { key: 'cc2631c8d741a97e3123d6db0fefd61cb46610d1', class: "dga-btn-icon", "aria-hidden": "true" }, h("dga-icon-v2", Object.assign({ key: 'f8c574b15428984c15996a2b75808caf13f7f525', name: this.leadingIcon }, this.leadingIconProps))))), !this.iconOnly && this.label && h(Fragment, { key: '2b44335b825bb0540a6ff14f287564d645ff9037' }, this.label), !this.iconOnly && (h("slot", { key: 'a4da46b6c6e7c2bfade5d603c9e67297ecbf4513', name: 'trailing-icon' }, this.trailingIcon && (h("span", { key: '875c8ea1022e83437ef2d1bb36a1e7104bbc951a', class: "dga-btn-icon", "aria-hidden": "true" }, h("dga-icon-v2", Object.assign({ key: '29ecb4ac491cce77c3d365f66ab6b2e47dd96a5e', name: this.trailingIcon }, this.trailingIconProps)))))))));
+        return (h(Host, { key: '683fca5c4a38ba5ebb214c7fc440316f9c923bf9' }, h("button", { key: 'c3c25059ee646e4539dd0826d3b19b0d8478ca43', type: this.type, class: classList, disabled: this.disabled, "aria-label": this.iconOnly && !this.label ? 'Button with icon' : this.label, role: "button", onClick: (event) => this.handleClick(event) }, h("slot", { key: '86ff75e0d32c7d40667977318e40f476b2630395', name: "leading-icon" }, this.leadingIcon && (h("span", { key: 'f021504d1ff96c212d9878b12580c2c263dfcd74', class: "dga-btn-icon", "aria-hidden": "true" }, h("dga-icon-v2", Object.assign({ key: 'fa76ea1c0cc09dc131ff2132826c9d45869b9373', name: this.leadingIcon }, this.leadingIconProps))))), !this.iconOnly && this.label && h(Fragment, { key: '5578fe0bd5ecb7f8f44ab988c52b4f994d8dc305' }, this.label), !this.iconOnly && (h("slot", { key: '206251d3e6b3279f968ec89cb934f108fd4f2d65', name: 'trailing-icon' }, this.trailingIcon && (h("span", { key: 'a81eaad87a45d233adf109a9df4ea2058bddb4a7', class: "dga-btn-icon", "aria-hidden": "true" }, h("dga-icon-v2", Object.assign({ key: '116f8e048355dfc6937698adac52ae6415c72d72', name: this.trailingIcon }, this.trailingIconProps)))))))));
     }
     static get is() { return "nds-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/nds-chip/nds-chip-usage.js

@@ -4,14 +4,14 @@ export class NdsChipUsage {
         this.isSelected = false;
     }
     render() {
-        return (h("div", { key: '4ff2449aef651374926ff76dc00e8420f58a370a' }, h("h1", { key: '7456e80d56e2d9bb9686501f8cda7d711c0f1f3b' }, "Chip Example"), h("div", { key: 'c7ae60dc35ef43dec5b9bb7b334c94348b10e889', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '5ad0f66f2408db3cc74bd73f6562f6495168824d', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-chip", { key: '37e141f2c9ef08ed98bb70b857eec89af0414f32', label: "Label", variant: "neutral",
+        return (h("div", { key: '860e518b969456a06f966cdc761e6bf2d5964994' }, h("h1", { key: '3bbc6620975ef82775b294ab0762860538160ac3' }, "Chip Example"), h("div", { key: '9c243a58a360b5c79a175bc9ef0e770a520f900e', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '4e6f4aa140cf41554ebf3db18d7886dd9eab161f', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("nds-chip", { key: '2be97d733b5e63de2853901dce34cc86d1993624', label: "Label", variant: "neutral",
             //   outlined={false}
-            rounded: false, size: "lg" }), h("nds-chip", { key: 'faa1e6052d4e2204b7887fca1de1c4b0252fe158', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
+            rounded: false, size: "lg" }), h("nds-chip", { key: '4c4b89ef047ef7931b03889a5485ba86596cfc44', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
                 console.log(isSelected, 'hi');
                 this.isSelected = isSelected;
-            }, selected: this.isSelected }), h("nds-chip", { key: '15956189d2f4fa52fd221d71b0fe13e957fdc002', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
+            }, selected: this.isSelected }), h("nds-chip", { key: '87d39a4044d00baf1d899057aa926692c5f52c0f', label: "Label", variant: "success", rounded: false, size: "lg", onChange: isSelected => {
                 console.log(isSelected, 'hi');
-            }, selected: false }), h("nds-chip", { key: '9fbf80e60663eb36fe67a284aba037e9b4a1d06f', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: 'fa6f6fa0ee358e95e280dbdddfc7e84541a1c2a4', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("nds-chip", { key: '0aca37c6f2e38b218b467d39f85f8942c560ead1', label: "Label", variant: "on-color", rounded: true, size: "lg", disabled: true }))))));
+            }, selected: false }), h("nds-chip", { key: '85ab156161f0c208bea3a2a02e20713f6a516341', label: "Label", variant: "success", rounded: false, size: "lg", disabled: true }), h("div", { key: 'ecdee48745e665a86c60c00a38b4bd6c425be3e3', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31' } }, h("nds-chip", { key: 'e7827fb541f18725b15daae7ece8da332190f533', label: "Label", variant: "on-color", rounded: true, size: "lg", disabled: true }))))));
     }
     static get is() { return "nds-chip-usage"; }
     static get states() {

package/dist/collection/nds-components/nds-chip/nds-chip.js

@@ -43,7 +43,7 @@ export class NdsChip {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: 'da28b114a50dcb07faa8ee20c74c0833f7b43efe', id: this.componentId, style: this.rootStyles }, h("span", { key: 'b0fbbffdb141ef86c2ed4026e8f0fd46baf66c77', tabindex: "0", class: `chip chip--${this.variant} chip--${this.size} ${this.rounded ? 'chip--rounded' : ''} ${this.disabled ? 'disabled' : ''} ${this.pressed ? 'pressed' : ''} ${this.selected ? 'selected' : ''}`, onMouseDown: () => (this.pressed = true), onMouseUp: () => (this.pressed = false), "aria-disabled": this.disabled, onClick: () => {
+        return (h(Host, { key: '41cb83b12e53b13b9effe2f8609134cf019f0811', id: this.componentId, style: this.rootStyles }, h("span", { key: '0a313e962878a8350292a8461cd2fa38671dff70', tabindex: "0", class: `chip chip--${this.variant} chip--${this.size} ${this.rounded ? 'chip--rounded' : ''} ${this.disabled ? 'disabled' : ''} ${this.pressed ? 'pressed' : ''} ${this.selected ? 'selected' : ''}`, onMouseDown: () => (this.pressed = true), onMouseUp: () => (this.pressed = false), "aria-disabled": this.disabled, onClick: () => {
                 if (this.selected) {
                     this.isSelectedState = false;
                 }
@@ -51,7 +51,7 @@ export class NdsChip {
                     this.isSelectedState = true;
                 }
                 this.onChange(this.isSelectedState);
-            } }, h("slot", { key: '92d26949d3a012ea8ce13983eb41e3f82f726174', name: "trailing-icon" }, this.leadingIcon && (h("span", { key: '9c6ef71afa87b5acbf7f864b0df8ce4e6fbebb1d', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: '7d46da1020d1ddea566ffa2d071e4c428bfd042d', name: this.leadingIcon }, this.leadingIconProps))))), this.label, h("slot", { key: '792c42a72f78558228e4620dc489a6759811d287', name: "trailing-icon" }, this.trailingIcon && (h("span", { key: '9341c988ccbfe4d2a70c9240038c86670fbc1cdb', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: '0f319da1c87146fba75ff56b69c82db04c1825a0', name: this.trailingIcon }, this.trailingIconProps))))))));
+            } }, h("slot", { key: '7c7975ffd21cfefdb4a6d647ed7cf3c39ceb3e8e', name: "trailing-icon" }, this.leadingIcon && (h("span", { key: '975ffb1841600f309f7e34fe12d4e8688ada70f4', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: '00ba2d466ed9c9c338cbef68c26ed8cf23a3cef0', name: this.leadingIcon }, this.leadingIconProps))))), this.label, h("slot", { key: '56b1141e0abda87b51735a86750fde2bd6029587', name: "trailing-icon" }, this.trailingIcon && (h("span", { key: 'b081d7bfadfe8fda9c50fde82e26adb2e917693d', class: "chip-icon" }, h("dga-icon-v2", Object.assign({ key: 'fefcf7dcc6190cc859a700d69fec9ff0d00f0bf1', name: this.trailingIcon }, this.trailingIconProps))))))));
     }
     static get is() { return "nds-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/nds-components/nds-floating-button/nds-floating-button-usage.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class NdsFloatingButtonUsage {
     render() {
-        return (h("div", { key: '1fd7884f13477d04c9323e3b0ba08aea8a1aada7' }, h("dga-flex", { key: 'ca7abec422246533e3843cde1aeeff0f28ae5a4c', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '9d81d4849f82128d04d36f81380b1c762bf6f66c', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'b8361b00e6813972e7d94f926664f8221ca78bf5', variant: "primary-neutral", label: 'Button' }), h("nds-floating-button", { key: '1bc46a6152631a08eca4ea61b2c60396dff919b7', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '24772e548523e59be9165f99d0f75df29b0d3604', variant: "primary-brand", label: 'Button' }), h("nds-floating-button", { key: '4b06280c20fa6f75eca59a1fd7739937a0094ddd', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '635ea4177a4a4371b3e0fad43a42fc8979f7da6a', variant: "secondary-solid", label: 'Button' })), h("div", { key: '74dc870e42226424801c3cf712c80606a3199a43', style: { backgroundColor: '#074D31', padding: '20px', marginTop: '20px' } }, h("dga-flex", { key: '6b269bf6df1f42937394e5e0cf75ab167d2e6f5e', direction: "column", spacing: 16 }, h("nds-floating-button", { key: 'd06e505b6d22705e8b97159a5c3d72709127c7e1', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'af98f5da78866cbb6481bc6f4be59815f4f8e738', variant: "primary-neutral", label: 'Button', inverted: true }), h("nds-floating-button", { key: '51bdd4bf057322175ceaea05c390a041459396aa', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '48200c38bb4dd9b4f6f251cda7aadc70db902e9a', variant: "primary-brand", label: 'Button', inverted: true }), h("nds-floating-button", { key: 'e5045b34000c6b3c8b7eab335673d1da0f84a049', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'e63b3e44d5ba56540fe89027a7add6ac5c72526c', variant: "secondary-solid", label: 'Button', inverted: true })))));
+        return (h("div", { key: 'd002311bd3f0672a11bac825a1a48ee214fef6cc' }, h("dga-flex", { key: '0fce5e4226e94fc6d1d73b93d1a28fd0e11a62e4', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '45437ce9669d7bb74ee1891939cd55c02d5c3fb9', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'eb2013374e655b23ec38ed4359abfd4614a19349', variant: "primary-neutral", label: 'Button' }), h("nds-floating-button", { key: '486084586d888fa856df49a942de2398698d438f', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: 'e36136669b6ca2c93ba2d965c0e61e4deee767f8', variant: "primary-brand", label: 'Button' }), h("nds-floating-button", { key: '833afde4ca5a87c02d6aa9764ee6135183d5a550', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign' }), h("nds-floating-button", { key: '4be07504aa8028d348025f4a16c7546dea389e33', variant: "secondary-solid", label: 'Button' })), h("div", { key: '572bcfb06fa19010f5bc2c9c21fb8b5418ce65e5', style: { backgroundColor: '#074D31', padding: '20px', marginTop: '20px' } }, h("dga-flex", { key: '9d13e5ff9a4e5ccc36873a3cf237ddba3b76fe5d', direction: "column", spacing: 16 }, h("nds-floating-button", { key: '6334d6d6034eba00a1abf2405edd537d656257e7', variant: "primary-neutral", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '66f2e0c5d27ace954c3c251999997cb4bfd00f26', variant: "primary-neutral", label: 'Button', inverted: true }), h("nds-floating-button", { key: '71928722f46bf2bd686ec4a194eff07a0d9f3b3d', variant: "primary-brand", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: 'e3102c4eab3df9f2c8548c547c35755ad133d633', variant: "primary-brand", label: 'Button', inverted: true }), h("nds-floating-button", { key: '71e88477580c3856303c3ba1d754d492d92852e7', variant: "secondary-solid", label: 'Button', iconOnly: true, icon: 'plus-sign', inverted: true }), h("nds-floating-button", { key: '1f5c8a74be13754c2fff87641b2120a0dc49feee', variant: "secondary-solid", label: 'Button', inverted: true })))));
     }
     static get is() { return "nds-floating-button-usage"; }
 }