@govtechsg/sgds-web-component 3.3.3-rc.0 → 3.3.3-rc.2

package/components/Card/sgds-card.d.ts

@@ -4,6 +4,7 @@ import { CardImageAdjustment, CardImagePosition } from "./types";
  * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
  * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
  * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
+ * @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.
  * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
  * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
  * @slot subtitle - The subtitle of the card
@@ -14,16 +15,11 @@ import { CardImageAdjustment, CardImagePosition } from "./types";
  */
 export declare class SgdsCard extends CardElement {
     static styles: import("lit").CSSResult[];
-    /** @internal */
-    _imageNode: Array<Node>;
-    /** @internal */
-    _iconNode: Array<Node>;
     /** Sets the image position of the card. Available options: `before`, `after` */
     imagePosition: CardImagePosition;
     /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
     imageAdjustment: CardImageAdjustment;
     private readonly hasSlotController;
-    protected firstUpdated(): void;
     handleImgSlotChange(e: Event): void;
     render(): import("lit-html").TemplateResult;
 }

package/components/Card/sgds-card.js

@@ -1,16 +1,17 @@
 import { __decorate } from 'tslib';
-import { nothing } from 'lit';
 import { literal, html } from 'lit/static-html.js';
-import { queryAssignedNodes, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CardElement } from '../../base/card-element.js';
 import { HasSlotController } from '../../utils/slot.js';
 import css_248z from './card.js';
+import { nothing } from 'lit';
 
 /**
  * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
  * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.
  * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.
+ * @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.
  * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.
  * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.
  * @slot subtitle - The subtitle of the card
@@ -26,43 +27,42 @@ class SgdsCard extends CardElement {
         this.imagePosition = "before";
         /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
         this.imageAdjustment = "default";
-        this.hasSlotController = new HasSlotController(this, "description");
-    }
-    firstUpdated() {
-        if (this._imageNode.length === 0) {
-            const icon = this.shadowRoot.querySelector(".card-image");
-            icon.style.display = "none";
-        }
-        if (this._iconNode.length === 0) {
-            const media = this.shadowRoot.querySelector(".card-media");
-            media.style.display = "none";
-        }
+        this.hasSlotController = new HasSlotController(this, "image", "icon", "menu", "description");
     }
     handleImgSlotChange(e) {
         const childNodes = e.target.assignedNodes({ flatten: true });
         if (childNodes.length > 1) {
-            return console.error("Multiple elements passed into SgdsCard's image slot");
+            console.error("Multiple elements passed into SgdsCard's image slot");
+        }
+        if (this.hasSlotController.test("icon") && this.hasSlotController.test("icon")) {
+            console.error("Both image and icon slots cannot be used together in SgdsCard");
         }
     }
     render() {
         const tag = this.stretchedLink ? literal `a` : literal `div`;
         const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
         const hasDescriptionSlot = this.hasSlotController.test("description");
+        const hasImageSlot = this.hasSlotController.test("image");
+        const hasIconSlot = this.hasSlotController.test("icon");
+        const hasMenuSlot = this.hasSlotController.test("menu");
+        const hasUpperSlot = this.hasSlotController.test("upper");
         return html `
-      <${tag} 
+      <${tag}
         class="card ${classMap({
             disabled: this.disabled
         })}"
         tabindex=${cardTabIndex}
       >
         <div class="card-tinted-bg"></div>
-        <slot name="menu"></slot>
-        <div class="card-image">
-          <slot name="image" @slotchange=${this.handleImgSlotChange}></slot>
-        </div>
-        <div class="card-media">
-          <slot name="icon"></slot>
+        
+        ${hasMenuSlot ? html ` <slot name="menu"></slot> ` : nothing}
+        <div class=${classMap({ "card-image": hasImageSlot, "card-media": hasIconSlot || hasUpperSlot })}>
+          <slot name="upper">
+          ${hasImageSlot ? html ` <slot name="image" @slotchange=${this.handleImgSlotChange}></slot> ` : nothing}
+          ${hasIconSlot ? html ` <slot name="icon"></slot> ` : nothing}
+          </slot>
         </div>
+
         <div class="card-body">
           <div class="card-header-container">
             <div class="card-header">
@@ -84,12 +84,6 @@ class SgdsCard extends CardElement {
     }
 }
 SgdsCard.styles = [...CardElement.styles, css_248z];
-__decorate([
-    queryAssignedNodes({ slot: "image", flatten: true })
-], SgdsCard.prototype, "_imageNode", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "icon", flatten: true })
-], SgdsCard.prototype, "_iconNode", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsCard.prototype, "imagePosition", void 0);

package/components/Card/sgds-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport cardStyle from \"./card.css\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"description\");\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      icon.style.display = \"none\";\n    }\n    if (this._iconNode.length === 0) {\n      const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n      media.style.display = \"none\";\n    }\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-tinted-bg\"></div>\n        <slot name=\"menu\"></slot>\n        <div class=\"card-image\">\n          <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n        </div>\n        <div class=\"card-media\">\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport cardStyle from \"./card.css\";\nimport { nothing } from \"lit\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.\n * @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"menu\", \"description\");\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"icon\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n\n    const hasImageSlot = this.hasSlotController.test(\"image\");\n    const hasIconSlot = this.hasSlotController.test(\"icon\");\n    const hasMenuSlot = this.hasSlotController.test(\"menu\");\n    const hasUpperSlot = this.hasSlotController.test(\"upper\");\n    return html`\n      <${tag}\n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-tinted-bg\"></div>\n        \n        ${hasMenuSlot ? html` <slot name=\"menu\"></slot> ` : nothing}\n        <div class=${classMap({ \"card-image\": hasImageSlot, \"card-media\": hasIconSlot || hasUpperSlot })}>\n          <slot name=\"upper\">\n          ${hasImageSlot ? html` <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot> ` : nothing}\n          ${hasIconSlot ? html` <slot name=\"icon\"></slot> ` : nothing}\n          </slot>\n        </div>\n\n        <div class=\"card-body\">\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":";;;;;;;;;AASA;;;;;;;;;;;;AAYG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAI6C,IAAa,CAAA,aAAA,GAAsB,QAAQ,CAAC;;QAG5C,IAAe,CAAA,eAAA,GAAwB,SAAS,CAAC;AAE3E,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC;KA6D1G;AA3DC,IAAA,mBAAmB,CAAC,CAAQ,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAiC,CAAC;AAElH,QAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,YAAA,OAAO,CAAC,KAAK,CAAC,qDAAqD,CAAC,CAAC;SACtE;AAED,QAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;AAC9E,YAAA,OAAO,CAAC,KAAK,CAAC,+DAA+D,CAAC,CAAC;SAChF;KACF;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,CAAA,GAAG,GAAG,OAAO,CAAA,KAAK,CAAC;AAC3D,QAAA,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QACnE,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAEtE,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACxD,MAAM,WAAW,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACxD,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC1D,QAAA,OAAO,IAAI,CAAA,CAAA;SACN,GAAG,CAAA;AACU,oBAAA,EAAA,QAAQ,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;mBACS,YAAY,CAAA;;;;UAIrB,WAAW,GAAG,IAAI,CAAA,CAA6B,2BAAA,CAAA,GAAG,OAAO,CAAA;AAC9C,mBAAA,EAAA,QAAQ,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,IAAI,YAAY,EAAE,CAAC,CAAA;;AAE5F,UAAA,EAAA,YAAY,GAAG,IAAI,CAAA,CAAA,gCAAA,EAAmC,IAAI,CAAC,mBAAmB,CAAA,SAAA,CAAW,GAAG,OAAO,CAAA;YACnG,WAAW,GAAG,IAAI,CAAA,CAA6B,2BAAA,CAAA,GAAG,OAAO,CAAA;;;;;;;;AAQC,oEAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;;;;YAKpF,kBAAkB;cACd,IAAI,CAAA,CAAA;;AAEC,oBAAA,CAAA;AACP,cAAE,OACN,CAAA;;AAEgC,wCAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;UAEzD,GAAG,CAAA;KACR,CAAC;KACH;;AApEM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,CAApC,CAAsC;AAGR,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA6C,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG5C,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkD,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Dropdown/dropdown-item.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
+var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=dropdown-item.js.map

package/components/Dropdown/index.umd.js

@@ -11025,7 +11025,7 @@
       property({ type: String, reflect: true })
   ], SgdsIcon.prototype, "size", void 0);
 
-  var css_248z = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
+  var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
 
   /**
    * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`

package/components/Mainnav/index.umd.js

@@ -7907,10 +7907,20 @@
       connectedCallback() {
           super.connectedCallback();
           this.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
+          this.addEventListener("sgds-mainnav-close", () => {
+              if (this.breakpointReached) {
+                  this.hide();
+              }
+          });
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           this.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
+          this.removeEventListener("sgds-mainnav-close", () => {
+              if (this.breakpointReached) {
+                  this.hide();
+              }
+          });
       }
       firstUpdated() {
           if (this.breakpointReached && this.body) {
@@ -8005,7 +8015,9 @@
           }
           this.expanded = false;
           document.querySelector("body").style.removeProperty("overflow");
-          this.emit("close-dropdown-menu");
+          setTimeout(() => {
+              this.emit("close-dropdown-menu");
+          }, 200);
           return waitForEvent(this, "sgds-after-hide");
       }
       // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
@@ -12149,7 +12161,7 @@
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsDropdown.prototype, "_handleDisabled", null);
 
-  var css_248z$1 = css`.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
+  var css_248z$1 = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:not(.nav-link):hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:not(.nav-link):focus,.dropdown-item:not(.nav-link):focus-visible{background-color:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}.dropdown-item:not(.nav-link).active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}.nav-link{gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}.nav-link:hover{color:var(--sgds-primary-color-default)}.nav-link:focus,.nav-link:focus-visible{outline:0}.nav-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus) inset;color:var(--sgds-primary-color-default)}.nav-link.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default)}`;
 
   /**
    * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
@@ -12259,15 +12271,21 @@
       _handleSlotChange(e) {
           const items = e.target.assignedElements({ flatten: true });
           items.forEach(item => {
+              var _a;
               item.addEventListener("keydown", this._handleKeyboardMenuItemsEvent.bind(this));
               const dropdownItem = item.shadowRoot.querySelector(".dropdown-item");
               dropdownItem.classList.add("nav-link");
-              const slottedItem = item.shadowRoot.querySelector(".dropdown-item slot").assignedElements({
-                  flatten: true
-              });
-              slottedItem.forEach(item => {
-                  item.tabIndex = -1;
-              });
+              const link = ((_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("a")) || item.querySelector("a");
+              link.tabIndex = -1;
+              if (dropdownItem.classList.contains("disabled")) {
+                  link.setAttribute("href", "javascript:void(0)");
+                  link.setAttribute("tabindex", "-1");
+              }
+              else {
+                  link.addEventListener("click", () => {
+                      this.emit("sgds-mainnav-close");
+                  });
+              }
           });
       }
       _handleDesktopSlotChange(e) {
@@ -12275,6 +12293,15 @@
           items.forEach(item => {
               const dropdownItem = item.shadowRoot.querySelector(".dropdown-item");
               dropdownItem.classList.remove("nav-link");
+              const slottedItem = item.shadowRoot.querySelector(".dropdown-item slot").assignedElements({
+                  flatten: true
+              });
+              slottedItem.forEach(item => {
+                  if (dropdownItem.classList.contains("disabled")) {
+                      item.setAttribute("href", "javascript:void(0)");
+                      item.setAttribute("tabindex", "-1");
+                  }
+              });
           });
       }
       _handleKeyboardMenuItemsEvent(e) {
@@ -12325,7 +12352,9 @@
       }
       _resetDropdownMenu() {
           const navbarBody = this._getNavbarBody();
-          navbarBody.style.removeProperty("transform");
+          if (navbarBody) {
+              navbarBody.style.removeProperty("transform");
+          }
       }
       _handleKeyboardOpen(event) {
           if (this.disabled) {
@@ -12515,7 +12544,11 @@
               if (this.disabled) {
                   anchor.setAttribute("href", "javascript:void(0)");
                   anchor.setAttribute("tabindex", "-1");
+                  return;
               }
+              anchor.addEventListener("click", () => {
+                  this.emit("sgds-mainnav-close");
+              });
           }
       }
       render() {