@govtechsg/sgds-web-component 3.2.0 → 3.3.0

package/components/ComboBox/index.umd.js

@@ -4287,6 +4287,56 @@
       });
   }
 
+  /**
+   * @license
+   * Copyright 2021 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  /**
+   * A property decorator that converts a class property into a getter that
+   * returns the `assignedElements` of the given `slot`. Provides a declarative
+   * way to use
+   * [`HTMLSlotElement.assignedElements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements).
+   *
+   * Can be passed an optional {@linkcode QueryAssignedElementsOptions} object.
+   *
+   * Example usage:
+   * ```ts
+   * class MyElement {
+   *   @queryAssignedElements({ slot: 'list' })
+   *   listItems!: Array<HTMLElement>;
+   *   @queryAssignedElements()
+   *   unnamedSlotEls!: Array<HTMLElement>;
+   *
+   *   render() {
+   *     return html`
+   *       <slot name="list"></slot>
+   *       <slot></slot>
+   *     `;
+   *   }
+   * }
+   * ```
+   *
+   * Note, the type of this property should be annotated as `Array<HTMLElement>`.
+   *
+   * @category Decorator
+   */
+  function queryAssignedElements(options) {
+      return ((obj, name) => {
+          const { slot, selector } = options ?? {};
+          const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
+          return desc(obj, name, {
+              get() {
+                  const slotEl = this.renderRoot?.querySelector(slotSelector);
+                  const elements = slotEl?.assignedElements(options) ?? [];
+                  return (selector === undefined
+                      ? elements
+                      : elements.filter((node) => node.matches(selector)));
+              },
+          });
+      });
+  }
+
   /**
    * @license
    * Copyright 2017 Google LLC
@@ -4901,11 +4951,11 @@
    */
   const ref = directive(RefDirective);
 
-  var css_248z$b = css`.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1000}.dropdown-menu.show{display:block}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
+  var css_248z$c = css`.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;max-height:var(--sgds-dimension-480);min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1000}.dropdown-menu.show{display:block}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
 
-  var css_248z$a = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-min)}.invalid-feedback{font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`;
+  var css_248z$b = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-min)}.invalid-feedback{font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`;
 
-  var css_248z$9 = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-min)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
+  var css_248z$a = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-min)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
 
   // @defaultValue decorator
   const defaultValue = (propertyName = "value") => (proto, key) => {
@@ -7064,6 +7114,8 @@
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * --------------------------------------------------------------------------
    */
+
+  const MAX_UID = 1_000_000;
   const MILLISECONDS_MULTIPLIER = 1000;
   const TRANSITION_END = 'transitionend';
 
@@ -7090,6 +7142,18 @@
     return Object.prototype.toString.call(object).match(/\s([a-z]+)/i)[1].toLowerCase()
   };
 
+  /**
+   * Public Util API
+   */
+
+  const getUID = prefix => {
+    do {
+      prefix += Math.floor(Math.random() * MAX_UID);
+    } while (document.getElementById(prefix))
+
+    return prefix
+  };
+
   const getTransitionDurationFromElement = element => {
     if (!element) {
       return 0
@@ -7185,6 +7249,29 @@
     return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false'
   };
 
+  const findShadowRoot = element => {
+    if (!document.documentElement.attachShadow) {
+      return null
+    }
+
+    // Can find the shadow root otherwise it'll return the document
+    if (typeof element.getRootNode === 'function') {
+      const root = element.getRootNode();
+      return root instanceof ShadowRoot ? root : null
+    }
+
+    if (element instanceof ShadowRoot) {
+      return element
+    }
+
+    // when we don't find a shadow root
+    if (!element.parentNode) {
+      return null
+    }
+
+    return findShadowRoot(element.parentNode)
+  };
+
   const noop = () => {};
 
   const getjQuery = () => {
@@ -7952,7 +8039,7 @@
    * Constants
    */
 
-  const NAME = 'dropdown';
+  const NAME$2 = 'dropdown';
   const DATA_KEY = 'bs.dropdown';
   const EVENT_KEY = `.${DATA_KEY}`;
   const DATA_API_KEY = '.data-api';
@@ -7963,15 +8050,15 @@
   const ARROW_DOWN_KEY = 'ArrowDown';
   const RIGHT_MOUSE_BUTTON = 2; // MouseEvent.button value for the secondary button, usually the right button
 
-  const EVENT_HIDE = `hide${EVENT_KEY}`;
-  const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
-  const EVENT_SHOW = `show${EVENT_KEY}`;
-  const EVENT_SHOWN = `shown${EVENT_KEY}`;
+  const EVENT_HIDE$1 = `hide${EVENT_KEY}`;
+  const EVENT_HIDDEN$1 = `hidden${EVENT_KEY}`;
+  const EVENT_SHOW$1 = `show${EVENT_KEY}`;
+  const EVENT_SHOWN$1 = `shown${EVENT_KEY}`;
   const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
   const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`;
   const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`;
 
-  const CLASS_NAME_SHOW = 'show';
+  const CLASS_NAME_SHOW$1 = 'show';
   const CLASS_NAME_DROPUP = 'dropup';
   const CLASS_NAME_DROPEND = 'dropend';
   const CLASS_NAME_DROPSTART = 'dropstart';
@@ -7979,7 +8066,7 @@
   const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center';
 
   const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)';
-  const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`;
+  const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW$1}`;
   const SELECTOR_MENU = '.dropdown-menu';
   const SELECTOR_NAVBAR = '.navbar';
   const SELECTOR_NAVBAR_NAV = '.navbar-nav';
@@ -7994,7 +8081,7 @@
   const PLACEMENT_TOPCENTER = 'top';
   const PLACEMENT_BOTTOMCENTER = 'bottom';
 
-  const Default = {
+  const Default$2 = {
     autoClose: true,
     boundary: 'clippingParents',
     display: 'dynamic',
@@ -8003,7 +8090,7 @@
     reference: 'toggle'
   };
 
-  const DefaultType = {
+  const DefaultType$2 = {
     autoClose: '(boolean|string)',
     boundary: '(string|element)',
     display: 'string',
@@ -8031,15 +8118,15 @@
 
     // Getters
     static get Default() {
-      return Default
+      return Default$2
     }
 
     static get DefaultType() {
-      return DefaultType
+      return DefaultType$2
     }
 
     static get NAME() {
-      return NAME
+      return NAME$2
     }
 
     // Public
@@ -8056,7 +8143,7 @@
         relatedTarget: this._element
       };
 
-      const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, relatedTarget);
+      const showEvent = EventHandler.trigger(this._element, EVENT_SHOW$1, relatedTarget);
 
       if (showEvent.defaultPrevented) {
         return
@@ -8077,9 +8164,9 @@
       this._element.focus();
       this._element.setAttribute('aria-expanded', true);
 
-      this._menu.classList.add(CLASS_NAME_SHOW);
-      this._element.classList.add(CLASS_NAME_SHOW);
-      EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget);
+      this._menu.classList.add(CLASS_NAME_SHOW$1);
+      this._element.classList.add(CLASS_NAME_SHOW$1);
+      EventHandler.trigger(this._element, EVENT_SHOWN$1, relatedTarget);
     }
 
     hide() {
@@ -8111,7 +8198,7 @@
 
     // Private
     _completeHide(relatedTarget) {
-      const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget);
+      const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE$1, relatedTarget);
       if (hideEvent.defaultPrevented) {
         return
       }
@@ -8128,11 +8215,11 @@
         this._popper.destroy();
       }
 
-      this._menu.classList.remove(CLASS_NAME_SHOW);
-      this._element.classList.remove(CLASS_NAME_SHOW);
+      this._menu.classList.remove(CLASS_NAME_SHOW$1);
+      this._element.classList.remove(CLASS_NAME_SHOW$1);
       this._element.setAttribute('aria-expanded', 'false');
       Manipulator.removeDataAttribute(this._menu, 'popper');
-      EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget);
+      EventHandler.trigger(this._element, EVENT_HIDDEN$1, relatedTarget);
     }
 
     _getConfig(config) {
@@ -8142,7 +8229,7 @@
         typeof config.reference.getBoundingClientRect !== 'function'
       ) {
         // Popper virtual elements require a getBoundingClientRect method
-        throw new TypeError(`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
+        throw new TypeError(`${NAME$2.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
       }
 
       return config
@@ -8168,7 +8255,7 @@
     }
 
     _isShown() {
-      return this._menu.classList.contains(CLASS_NAME_SHOW)
+      return this._menu.classList.contains(CLASS_NAME_SHOW$1)
     }
 
     _getPlacement() {
@@ -8403,7 +8490,7 @@
       return target;
   };
 
-  var css_248z$8 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$9 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -8460,7 +8547,7 @@
           });
       }
   }
-  SgdsElement.styles = [css_248z$8];
+  SgdsElement.styles = [css_248z$9];
   /** @internal */
   SgdsElement.dependencies = {};
 
@@ -8900,7 +8987,7 @@
           }
       }
   }
-  SelectElement.styles = [...DropdownListElement.styles, css_248z$b, css_248z$9, css_248z$a];
+  SelectElement.styles = [...DropdownListElement.styles, css_248z$c, css_248z$a, css_248z$b];
   __decorate([
       property({ reflect: true })
   ], SelectElement.prototype, "label", void 0);
@@ -8993,170 +9080,1218 @@
       };
   }
 
-  var css_248z$7 = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+  var css_248z$8 = css`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24,24px);justify-content:center;max-width:192px;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge.full-width{max-width:100%}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}.badge.truncated .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}slot::slotted(*){font-size:14px;font-weight:400}`;
+
+  /**
+   * --------------------------------------------------------------------------
+   * Bootstrap util/sanitizer.js
+   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+   * --------------------------------------------------------------------------
+   */
+
+  // js-docs-start allow-list
+  const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i;
+
+  const DefaultAllowlist = {
+    // Global attributes allowed on any supplied element below.
+    '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
+    a: ['target', 'href', 'title', 'rel'],
+    area: [],
+    b: [],
+    br: [],
+    col: [],
+    code: [],
+    dd: [],
+    div: [],
+    dl: [],
+    dt: [],
+    em: [],
+    hr: [],
+    h1: [],
+    h2: [],
+    h3: [],
+    h4: [],
+    h5: [],
+    h6: [],
+    i: [],
+    img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
+    li: [],
+    ol: [],
+    p: [],
+    pre: [],
+    s: [],
+    small: [],
+    span: [],
+    sub: [],
+    sup: [],
+    strong: [],
+    u: [],
+    ul: []
+  };
+  // js-docs-end allow-list
+
+  const uriAttributes = new Set([
+    'background',
+    'cite',
+    'href',
+    'itemtype',
+    'longdesc',
+    'poster',
+    'src',
+    'xlink:href'
+  ]);
 
   /**
+   * A pattern that recognizes URLs that are safe wrt. XSS in URL navigation
+   * contexts.
    *
-   * @param name tagname of custom element
-   * @returns boolean
+   * Shout-out to Angular https://github.com/angular/angular/blob/15.2.8/packages/core/src/sanitization/url_sanitizer.ts#L38
    */
-  function isRegistered(name) {
-      return !!customElements.get(name);
-  }
-  function register(name, constructor) {
-      if (!customElements.get(name)) {
-          customElements.define(name, constructor);
+  // eslint-disable-next-line unicorn/better-regex
+  const SAFE_URL_PATTERN = /^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:/?#]*(?:[/?#]|$))/i;
+
+  const allowedAttribute = (attribute, allowedAttributeList) => {
+    const attributeName = attribute.nodeName.toLowerCase();
+
+    if (allowedAttributeList.includes(attributeName)) {
+      if (uriAttributes.has(attributeName)) {
+        return Boolean(SAFE_URL_PATTERN.test(attribute.nodeValue))
       }
-  }
-  function warnUnregisteredElements(name) {
-      if (isRegistered(name)) {
-          return true;
+
+      return true
+    }
+
+    // Check if a regular expression validates the attribute.
+    return allowedAttributeList.filter(attributeRegex => attributeRegex instanceof RegExp)
+      .some(regex => regex.test(attributeName))
+  };
+
+  function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
+    if (!unsafeHtml.length) {
+      return unsafeHtml
+    }
+
+    if (sanitizeFunction && typeof sanitizeFunction === 'function') {
+      return sanitizeFunction(unsafeHtml)
+    }
+
+    const domParser = new window.DOMParser();
+    const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html');
+    const elements = [].concat(...createdDocument.body.querySelectorAll('*'));
+
+    for (const element of elements) {
+      const elementName = element.nodeName.toLowerCase();
+
+      if (!Object.keys(allowList).includes(elementName)) {
+        element.remove();
+        continue
       }
-      else {
-          console.error(`Custom element of name : ${name} is not registered. Remember to import the component file for custom element registration`);
-          return false;
+
+      const attributeList = [].concat(...element.attributes);
+      const allowedAttributes = [].concat(allowList['*'] || [], allowList[elementName] || []);
+
+      for (const attribute of attributeList) {
+        if (!allowedAttribute(attribute, allowedAttributes)) {
+          element.removeAttribute(attribute.nodeName);
+        }
       }
+    }
+
+    return createdDocument.body.innerHTML
   }
 
   /**
-   * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
-   *
-   * @cssprop --sgds-close-btn-border-radius - The border radius of close button border
-   *
+   * --------------------------------------------------------------------------
+   * Bootstrap util/template-factory.js
+   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+   * --------------------------------------------------------------------------
    */
-  class SgdsCloseButton extends SgdsElement {
-      constructor() {
-          super(...arguments);
-          this.ariaLabel = "Close button";
-          /** Specifies a large or small button */
-          this.size = "md";
-          this.variant = "default";
-          this._clickHandler = () => {
-              return;
-          };
-      }
-      _handleClick() {
-          this.removeEventListener("click", this._clickHandler);
-          this.addEventListener("click", this._clickHandler);
+
+  /**
+   * Constants
+   */
+
+  const NAME$1 = 'TemplateFactory';
+
+  const Default$1 = {
+    allowList: DefaultAllowlist,
+    content: {}, // { selector : text ,  selector2 : text2 , }
+    extraClass: '',
+    html: false,
+    sanitize: true,
+    sanitizeFn: null,
+    template: '<div></div>'
+  };
+
+  const DefaultType$1 = {
+    allowList: 'object',
+    content: 'object',
+    extraClass: '(string|function)',
+    html: 'boolean',
+    sanitize: 'boolean',
+    sanitizeFn: '(null|function)',
+    template: 'string'
+  };
+
+  const DefaultContentType = {
+    entry: '(string|element|function|null)',
+    selector: '(string|element)'
+  };
+
+  /**
+   * Class definition
+   */
+
+  class TemplateFactory extends Config {
+    constructor(config) {
+      super();
+      this._config = this._getConfig(config);
+    }
+
+    // Getters
+    static get Default() {
+      return Default$1
+    }
+
+    static get DefaultType() {
+      return DefaultType$1
+    }
+
+    static get NAME() {
+      return NAME$1
+    }
+
+    // Public
+    getContent() {
+      return Object.values(this._config.content)
+        .map(config => this._resolvePossibleFunction(config))
+        .filter(Boolean)
+    }
+
+    hasContent() {
+      return this.getContent().length > 0
+    }
+
+    changeContent(content) {
+      this._checkContent(content);
+      this._config.content = { ...this._config.content, ...content };
+      return this
+    }
+
+    toHtml() {
+      const templateWrapper = document.createElement('div');
+      templateWrapper.innerHTML = this._maybeSanitize(this._config.template);
+
+      for (const [selector, text] of Object.entries(this._config.content)) {
+        this._setContent(templateWrapper, text, selector);
       }
-      firstUpdated() {
-          /** Cannot register sgds-icon as dependency due to some circular dependencies, so we check and warn instead */
-          warnUnregisteredElements("sgds-icon");
+
+      const template = templateWrapper.children[0];
+      const extraClass = this._resolvePossibleFunction(this._config.extraClass);
+
+      if (extraClass) {
+        template.classList.add(...extraClass.split(' '));
       }
-      render() {
-          return html `
-      <button
-        class=${classMap({
-            "btn-close": true,
-            [`btn-close-${this.size}`]: this.size,
-            "btn-close-light": this.variant === "light",
-            "btn-close-dark": this.variant === "dark"
-        })}
-        aria-label=${ifDefined(this.ariaLabel)}
-        @click=${this._handleClick}
-      >
-        <sgds-icon name="cross" size=${this.size}></sgds-icon>
-      </button>
-    `;
+
+      return template
+    }
+
+    // Private
+    _typeCheckConfig(config) {
+      super._typeCheckConfig(config);
+      this._checkContent(config.content);
+    }
+
+    _checkContent(arg) {
+      for (const [selector, content] of Object.entries(arg)) {
+        super._typeCheckConfig({ selector, entry: content }, DefaultContentType);
       }
-  }
-  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$7];
-  __decorate([
-      property({ type: String })
-  ], SgdsCloseButton.prototype, "ariaLabel", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsCloseButton.prototype, "size", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsCloseButton.prototype, "variant", void 0);
+    }
 
-  var css_248z$6 = css`:host{display:inline-flex}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
+    _setContent(template, content, selector) {
+      const templateElement = SelectorEngine.findOne(selector, template);
 
-  /**
-   * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
-   *
-   * @slot default - slot for badge
-   * @slot icon - The slot for icon to the left of the badge text
-   *
-   * @event sgds-show - Emitted when the badge appears.
-   * @event sgds-hide - Emitted when the badge is starting to close but has not closed.
-   * @event sgds-after-show - Emitted after the badge has appeared
-   * @event sgds-after-hide - Emitted after the badge has closed
-   */
-  class SgdsBadge extends SgdsElement {
-      constructor() {
-          super(...arguments);
-          /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */
-          this.show = false;
-          /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */
-          this.variant = "info";
-          /** Manually set the outlined state to false */
-          this.outlined = false;
-          /** Manually set the dismissible state of the button to `false` */
-          this.dismissible = false;
+      if (!templateElement) {
+        return
       }
-      /** Closes the badge  */
-      close() {
-          this.show = false;
+
+      content = this._resolvePossibleFunction(content);
+
+      if (!content) {
+        templateElement.remove();
+        return
       }
-      /**@internal */
-      _handleShowChange() {
-          if (this.show) {
-              const sgdsShow = this.emit("sgds-show", { cancelable: true });
-              if (sgdsShow.defaultPrevented) {
-                  this.show = false;
-                  return;
-              }
-              // animations if any go here
-              this.emit("sgds-after-show");
-          }
-          else {
-              const sgdsHide = this.emit("sgds-hide", { cancelable: true });
-              if (sgdsHide.defaultPrevented) {
-                  this.show = true;
-                  return;
-              }
-              // animations if any go here
-              this.emit("sgds-after-hide");
-          }
+
+      if (isElement(content)) {
+        this._putElementInTemplate(getElement(content), templateElement);
+        return
       }
-      render() {
-          return (this.dismissible && this.show) || !this.dismissible
-              ? html `
-          <div
-            class="  
-          ${classMap({
-                [`badge-dismissible`]: this.dismissible,
-                badge: true,
-                outlined: this.outlined
-            })}
-            "
-            aria-hidden=${this.show ? "false" : "true"}
-          >
-            ${!this.dismissible ? html `<slot name="icon"></slot>` : nothing}
-            <span class="badge-label">
-              <slot></slot>
-            </span>
-
-            ${this.dismissible
-                ? html `<sgds-close-button
-                  size="sm"
-                  aria-label="close the badge"
-                  @click=${this.close}
-                  variant=${this.outlined ? "dark" : "light"}
-                ></sgds-close-button>`
-                : nothing}
-          </div>
-        `
-              : nothing;
+
+      if (this._config.html) {
+        templateElement.innerHTML = this._maybeSanitize(content);
+        return
       }
-  }
-  SgdsBadge.styles = [...SgdsElement.styles, css_248z$6];
-  /**@internal */
-  SgdsBadge.dependencies = {
-      "sgds-close-button": SgdsCloseButton
-  };
+
+      templateElement.textContent = content;
+    }
+
+    _maybeSanitize(arg) {
+      return this._config.sanitize ? sanitizeHtml(arg, this._config.allowList, this._config.sanitizeFn) : arg
+    }
+
+    _resolvePossibleFunction(arg) {
+      return execute(arg, [this])
+    }
+
+    _putElementInTemplate(element, templateElement) {
+      if (this._config.html) {
+        templateElement.innerHTML = '';
+        templateElement.append(element);
+        return
+      }
+
+      templateElement.textContent = element.textContent;
+    }
+  }
+
+  /**
+   * --------------------------------------------------------------------------
+   * Bootstrap tooltip.js
+   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+   * --------------------------------------------------------------------------
+   */
+
+  /**
+   * Constants
+   */
+
+  const NAME = 'tooltip';
+  const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn']);
+
+  const CLASS_NAME_FADE = 'fade';
+  const CLASS_NAME_MODAL = 'modal';
+  const CLASS_NAME_SHOW = 'show';
+
+  const SELECTOR_TOOLTIP_INNER = '.tooltip-inner';
+  const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`;
+
+  const EVENT_MODAL_HIDE = 'hide.bs.modal';
+
+  const TRIGGER_HOVER = 'hover';
+  const TRIGGER_FOCUS = 'focus';
+  const TRIGGER_CLICK = 'click';
+  const TRIGGER_MANUAL = 'manual';
+
+  const EVENT_HIDE = 'hide';
+  const EVENT_HIDDEN = 'hidden';
+  const EVENT_SHOW = 'show';
+  const EVENT_SHOWN = 'shown';
+  const EVENT_INSERTED = 'inserted';
+  const EVENT_CLICK = 'click';
+  const EVENT_FOCUSIN = 'focusin';
+  const EVENT_FOCUSOUT = 'focusout';
+  const EVENT_MOUSEENTER = 'mouseenter';
+  const EVENT_MOUSELEAVE = 'mouseleave';
+
+  const AttachmentMap = {
+    AUTO: 'auto',
+    TOP: 'top',
+    RIGHT: isRTL() ? 'left' : 'right',
+    BOTTOM: 'bottom',
+    LEFT: isRTL() ? 'right' : 'left'
+  };
+
+  const Default = {
+    allowList: DefaultAllowlist,
+    animation: true,
+    boundary: 'clippingParents',
+    container: false,
+    customClass: '',
+    delay: 0,
+    fallbackPlacements: ['top', 'right', 'bottom', 'left'],
+    html: false,
+    offset: [0, 6],
+    placement: 'top',
+    popperConfig: null,
+    sanitize: true,
+    sanitizeFn: null,
+    selector: false,
+    template: '<div class="tooltip" role="tooltip">' +
+              '<div class="tooltip-arrow"></div>' +
+              '<div class="tooltip-inner"></div>' +
+              '</div>',
+    title: '',
+    trigger: 'hover focus'
+  };
+
+  const DefaultType = {
+    allowList: 'object',
+    animation: 'boolean',
+    boundary: '(string|element)',
+    container: '(string|element|boolean)',
+    customClass: '(string|function)',
+    delay: '(number|object)',
+    fallbackPlacements: 'array',
+    html: 'boolean',
+    offset: '(array|string|function)',
+    placement: '(string|function)',
+    popperConfig: '(null|object|function)',
+    sanitize: 'boolean',
+    sanitizeFn: '(null|function)',
+    selector: '(string|boolean)',
+    template: 'string',
+    title: '(string|element|function)',
+    trigger: 'string'
+  };
+
+  /**
+   * Class definition
+   */
+
+  class Tooltip extends BaseComponent {
+    constructor(element, config) {
+      if (typeof Popper === 'undefined') {
+        throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
+      }
+
+      super(element, config);
+
+      // Private
+      this._isEnabled = true;
+      this._timeout = 0;
+      this._isHovered = null;
+      this._activeTrigger = {};
+      this._popper = null;
+      this._templateFactory = null;
+      this._newContent = null;
+
+      // Protected
+      this.tip = null;
+
+      this._setListeners();
+
+      if (!this._config.selector) {
+        this._fixTitle();
+      }
+    }
+
+    // Getters
+    static get Default() {
+      return Default
+    }
+
+    static get DefaultType() {
+      return DefaultType
+    }
+
+    static get NAME() {
+      return NAME
+    }
+
+    // Public
+    enable() {
+      this._isEnabled = true;
+    }
+
+    disable() {
+      this._isEnabled = false;
+    }
+
+    toggleEnabled() {
+      this._isEnabled = !this._isEnabled;
+    }
+
+    toggle() {
+      if (!this._isEnabled) {
+        return
+      }
+
+      this._activeTrigger.click = !this._activeTrigger.click;
+      if (this._isShown()) {
+        this._leave();
+        return
+      }
+
+      this._enter();
+    }
+
+    dispose() {
+      clearTimeout(this._timeout);
+
+      EventHandler.off(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler);
+
+      if (this._element.getAttribute('data-bs-original-title')) {
+        this._element.setAttribute('title', this._element.getAttribute('data-bs-original-title'));
+      }
+
+      this._disposePopper();
+      super.dispose();
+    }
+
+    show() {
+      if (this._element.style.display === 'none') {
+        throw new Error('Please use show on visible elements')
+      }
+
+      if (!(this._isWithContent() && this._isEnabled)) {
+        return
+      }
+
+      const showEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOW));
+      const shadowRoot = findShadowRoot(this._element);
+      const isInTheDom = (shadowRoot || this._element.ownerDocument.documentElement).contains(this._element);
+
+      if (showEvent.defaultPrevented || !isInTheDom) {
+        return
+      }
+
+      // TODO: v6 remove this or make it optional
+      this._disposePopper();
+
+      const tip = this._getTipElement();
+
+      this._element.setAttribute('aria-describedby', tip.getAttribute('id'));
+
+      const { container } = this._config;
+
+      if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
+        container.append(tip);
+        EventHandler.trigger(this._element, this.constructor.eventName(EVENT_INSERTED));
+      }
+
+      this._popper = this._createPopper(tip);
+
+      tip.classList.add(CLASS_NAME_SHOW);
+
+      // If this is a touch-enabled device we add extra
+      // empty mouseover listeners to the body's immediate children;
+      // only needed because of broken event delegation on iOS
+      // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
+      if ('ontouchstart' in document.documentElement) {
+        for (const element of [].concat(...document.body.children)) {
+          EventHandler.on(element, 'mouseover', noop);
+        }
+      }
+
+      const complete = () => {
+        EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOWN));
+
+        if (this._isHovered === false) {
+          this._leave();
+        }
+
+        this._isHovered = false;
+      };
+
+      this._queueCallback(complete, this.tip, this._isAnimated());
+    }
+
+    hide() {
+      if (!this._isShown()) {
+        return
+      }
+
+      const hideEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDE));
+      if (hideEvent.defaultPrevented) {
+        return
+      }
+
+      const tip = this._getTipElement();
+      tip.classList.remove(CLASS_NAME_SHOW);
+
+      // If this is a touch-enabled device we remove the extra
+      // empty mouseover listeners we added for iOS support
+      if ('ontouchstart' in document.documentElement) {
+        for (const element of [].concat(...document.body.children)) {
+          EventHandler.off(element, 'mouseover', noop);
+        }
+      }
+
+      this._activeTrigger[TRIGGER_CLICK] = false;
+      this._activeTrigger[TRIGGER_FOCUS] = false;
+      this._activeTrigger[TRIGGER_HOVER] = false;
+      this._isHovered = null; // it is a trick to support manual triggering
+
+      const complete = () => {
+        if (this._isWithActiveTrigger()) {
+          return
+        }
+
+        if (!this._isHovered) {
+          this._disposePopper();
+        }
+
+        this._element.removeAttribute('aria-describedby');
+        EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDDEN));
+      };
+
+      this._queueCallback(complete, this.tip, this._isAnimated());
+    }
+
+    update() {
+      if (this._popper) {
+        this._popper.update();
+      }
+    }
+
+    // Protected
+    _isWithContent() {
+      return Boolean(this._getTitle())
+    }
+
+    _getTipElement() {
+      if (!this.tip) {
+        this.tip = this._createTipElement(this._newContent || this._getContentForTemplate());
+      }
+
+      return this.tip
+    }
+
+    _createTipElement(content) {
+      const tip = this._getTemplateFactory(content).toHtml();
+
+      // TODO: remove this check in v6
+      if (!tip) {
+        return null
+      }
+
+      tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW);
+      // TODO: v6 the following can be achieved with CSS only
+      tip.classList.add(`bs-${this.constructor.NAME}-auto`);
+
+      const tipId = getUID(this.constructor.NAME).toString();
+
+      tip.setAttribute('id', tipId);
+
+      if (this._isAnimated()) {
+        tip.classList.add(CLASS_NAME_FADE);
+      }
+
+      return tip
+    }
+
+    setContent(content) {
+      this._newContent = content;
+      if (this._isShown()) {
+        this._disposePopper();
+        this.show();
+      }
+    }
+
+    _getTemplateFactory(content) {
+      if (this._templateFactory) {
+        this._templateFactory.changeContent(content);
+      } else {
+        this._templateFactory = new TemplateFactory({
+          ...this._config,
+          // the `content` var has to be after `this._config`
+          // to override config.content in case of popover
+          content,
+          extraClass: this._resolvePossibleFunction(this._config.customClass)
+        });
+      }
+
+      return this._templateFactory
+    }
+
+    _getContentForTemplate() {
+      return {
+        [SELECTOR_TOOLTIP_INNER]: this._getTitle()
+      }
+    }
+
+    _getTitle() {
+      return this._resolvePossibleFunction(this._config.title) || this._element.getAttribute('data-bs-original-title')
+    }
+
+    // Private
+    _initializeOnDelegatedTarget(event) {
+      return this.constructor.getOrCreateInstance(event.delegateTarget, this._getDelegateConfig())
+    }
+
+    _isAnimated() {
+      return this._config.animation || (this.tip && this.tip.classList.contains(CLASS_NAME_FADE))
+    }
+
+    _isShown() {
+      return this.tip && this.tip.classList.contains(CLASS_NAME_SHOW)
+    }
+
+    _createPopper(tip) {
+      const placement = execute(this._config.placement, [this, tip, this._element]);
+      const attachment = AttachmentMap[placement.toUpperCase()];
+      return createPopper(this._element, tip, this._getPopperConfig(attachment))
+    }
+
+    _getOffset() {
+      const { offset } = this._config;
+
+      if (typeof offset === 'string') {
+        return offset.split(',').map(value => Number.parseInt(value, 10))
+      }
+
+      if (typeof offset === 'function') {
+        return popperData => offset(popperData, this._element)
+      }
+
+      return offset
+    }
+
+    _resolvePossibleFunction(arg) {
+      return execute(arg, [this._element])
+    }
+
+    _getPopperConfig(attachment) {
+      const defaultBsPopperConfig = {
+        placement: attachment,
+        modifiers: [
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: this._config.fallbackPlacements
+            }
+          },
+          {
+            name: 'offset',
+            options: {
+              offset: this._getOffset()
+            }
+          },
+          {
+            name: 'preventOverflow',
+            options: {
+              boundary: this._config.boundary
+            }
+          },
+          {
+            name: 'arrow',
+            options: {
+              element: `.${this.constructor.NAME}-arrow`
+            }
+          },
+          {
+            name: 'preSetPlacement',
+            enabled: true,
+            phase: 'beforeMain',
+            fn: data => {
+              // Pre-set Popper's placement attribute in order to read the arrow sizes properly.
+              // Otherwise, Popper mixes up the width and height dimensions since the initial arrow style is for top placement
+              this._getTipElement().setAttribute('data-popper-placement', data.state.placement);
+            }
+          }
+        ]
+      };
+
+      return {
+        ...defaultBsPopperConfig,
+        ...execute(this._config.popperConfig, [defaultBsPopperConfig])
+      }
+    }
+
+    _setListeners() {
+      const triggers = this._config.trigger.split(' ');
+
+      for (const trigger of triggers) {
+        if (trigger === 'click') {
+          EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => {
+            const context = this._initializeOnDelegatedTarget(event);
+            context.toggle();
+          });
+        } else if (trigger !== TRIGGER_MANUAL) {
+          const eventIn = trigger === TRIGGER_HOVER ?
+            this.constructor.eventName(EVENT_MOUSEENTER) :
+            this.constructor.eventName(EVENT_FOCUSIN);
+          const eventOut = trigger === TRIGGER_HOVER ?
+            this.constructor.eventName(EVENT_MOUSELEAVE) :
+            this.constructor.eventName(EVENT_FOCUSOUT);
+
+          EventHandler.on(this._element, eventIn, this._config.selector, event => {
+            const context = this._initializeOnDelegatedTarget(event);
+            context._activeTrigger[event.type === 'focusin' ? TRIGGER_FOCUS : TRIGGER_HOVER] = true;
+            context._enter();
+          });
+          EventHandler.on(this._element, eventOut, this._config.selector, event => {
+            const context = this._initializeOnDelegatedTarget(event);
+            context._activeTrigger[event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER] =
+              context._element.contains(event.relatedTarget);
+
+            context._leave();
+          });
+        }
+      }
+
+      this._hideModalHandler = () => {
+        if (this._element) {
+          this.hide();
+        }
+      };
+
+      EventHandler.on(this._element.closest(SELECTOR_MODAL), EVENT_MODAL_HIDE, this._hideModalHandler);
+    }
+
+    _fixTitle() {
+      const title = this._element.getAttribute('title');
+
+      if (!title) {
+        return
+      }
+
+      if (!this._element.getAttribute('aria-label') && !this._element.textContent.trim()) {
+        this._element.setAttribute('aria-label', title);
+      }
+
+      this._element.setAttribute('data-bs-original-title', title); // DO NOT USE IT. Is only for backwards compatibility
+      this._element.removeAttribute('title');
+    }
+
+    _enter() {
+      if (this._isShown() || this._isHovered) {
+        this._isHovered = true;
+        return
+      }
+
+      this._isHovered = true;
+
+      this._setTimeout(() => {
+        if (this._isHovered) {
+          this.show();
+        }
+      }, this._config.delay.show);
+    }
+
+    _leave() {
+      if (this._isWithActiveTrigger()) {
+        return
+      }
+
+      this._isHovered = false;
+
+      this._setTimeout(() => {
+        if (!this._isHovered) {
+          this.hide();
+        }
+      }, this._config.delay.hide);
+    }
+
+    _setTimeout(handler, timeout) {
+      clearTimeout(this._timeout);
+      this._timeout = setTimeout(handler, timeout);
+    }
+
+    _isWithActiveTrigger() {
+      return Object.values(this._activeTrigger).includes(true)
+    }
+
+    _getConfig(config) {
+      const dataAttributes = Manipulator.getDataAttributes(this._element);
+
+      for (const dataAttribute of Object.keys(dataAttributes)) {
+        if (DISALLOWED_ATTRIBUTES.has(dataAttribute)) {
+          delete dataAttributes[dataAttribute];
+        }
+      }
+
+      config = {
+        ...dataAttributes,
+        ...(typeof config === 'object' && config ? config : {})
+      };
+      config = this._mergeConfigObj(config);
+      config = this._configAfterMerge(config);
+      this._typeCheckConfig(config);
+      return config
+    }
+
+    _configAfterMerge(config) {
+      config.container = config.container === false ? document.body : getElement(config.container);
+
+      if (typeof config.delay === 'number') {
+        config.delay = {
+          show: config.delay,
+          hide: config.delay
+        };
+      }
+
+      if (typeof config.title === 'number') {
+        config.title = config.title.toString();
+      }
+
+      if (typeof config.content === 'number') {
+        config.content = config.content.toString();
+      }
+
+      return config
+    }
+
+    _getDelegateConfig() {
+      const config = {};
+
+      for (const [key, value] of Object.entries(this._config)) {
+        if (this.constructor.Default[key] !== value) {
+          config[key] = value;
+        }
+      }
+
+      config.selector = false;
+      config.trigger = 'manual';
+
+      // In the future can be replaced with:
+      // const keysWithDifferentValues = Object.entries(this._config).filter(entry => this.constructor.Default[entry[0]] !== this._config[entry[0]])
+      // `Object.fromEntries(keysWithDifferentValues)`
+      return config
+    }
+
+    _disposePopper() {
+      if (this._popper) {
+        this._popper.destroy();
+        this._popper = null;
+      }
+
+      if (this.tip) {
+        this.tip.remove();
+        this.tip = null;
+      }
+    }
+
+    // Static
+    static jQueryInterface(config) {
+      return this.each(function () {
+        const data = Tooltip.getOrCreateInstance(this, config);
+
+        if (typeof config !== 'string') {
+          return
+        }
+
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
+
+        data[config]();
+      })
+    }
+  }
+
+  /**
+   * jQuery
+   */
+
+  defineJQueryPlugin(Tooltip);
+
+  var css_248z$7 = css`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;display:block;line-break:auto;opacity:0;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:1}.tooltip-inner{background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-1);max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}div{max-width:fit-content}`;
+
+  /**
+   * @summary Tooltips display more information when users hover over, focus on, or interact with an element.
+   * @slot default - The element to target the tooltip to.
+   *
+   */
+  class SgdsTooltip extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          this._myTooltip = createRef();
+          this._bsTooltip = null;
+          /** The tooltip's content. Content has to be textual */
+          this.content = "";
+          /** The placement of tooltip relative to its target */
+          this.placement = "top";
+          /** The method to invoke the tooltip. `hover focus` is the default value which allows tooltip to be triggered via mouse hover and keyboard focus. Add `tabindex=0 `for HTMLelements that are not tabbable. */
+          this.trigger = "hover focus";
+      }
+      _handleSlotChange() {
+          // For a11y purpose
+          this._tooltipTargetElements.forEach(el => el.setAttribute("data-sgds-tooltip", this.content));
+      }
+      _handleClickOutOfElement(e, self) {
+          if (!e.composedPath().includes(self)) {
+              this.hide();
+          }
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          if (this.trigger === "click") {
+              document.addEventListener("click", (event) => this._handleClickOutOfElement(event, this));
+              document.addEventListener("touchstart", (event) => this._handleClickOutOfElement(event, this));
+          }
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          document.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this));
+          document.removeEventListener("touchstart", (event) => this._handleClickOutOfElement(event, this));
+      }
+      _initializeTooltip() {
+          this.tooltipConfig = {
+              popperConfig: (defaultConfig) => {
+                  this.popperConfig = defaultConfig;
+                  const defaultModifiers = defaultConfig.modifiers;
+                  const newModifiers = defaultModifiers.map(mod => {
+                      if (mod.name === "flip") {
+                          mod.options.fallbackPlacements = [];
+                      }
+                      return mod;
+                  });
+                  this.popperConfig.modifiers = newModifiers;
+                  return this.popperConfig;
+              },
+              placement: this.placement,
+              trigger: this.trigger,
+              title: this.content,
+              html: true,
+              container: this.shadowRoot.querySelector("div") // tooltip to appear inside the shadow root of sgds-tooltip instead of anywhere in the DOM, so that scoped styles can apply
+          };
+          this._bsTooltip = new Tooltip(this._myTooltip.value, this.tooltipConfig);
+      }
+      firstUpdated() {
+          this._initializeTooltip();
+          this._myTooltip.value.addEventListener("show.bs.tooltip", () => {
+              this.emit("sgds-show");
+          });
+          this._myTooltip.value.addEventListener("shown.bs.tooltip", () => {
+              this.emit("sgds-after-show");
+          });
+          this._myTooltip.value.addEventListener("hide.bs.tooltip", () => {
+              this.emit("sgds-hide");
+          });
+          this._myTooltip.value.addEventListener("hidden.bs.tooltip", () => {
+              this.emit("sgds-after-hide");
+          });
+      }
+      /** Hides the Tooltip */
+      hide() {
+          this._bsTooltip.hide();
+      }
+      /** Shows the Tooltip */
+      show() {
+          this._bsTooltip.show();
+      }
+      render() {
+          return html `
+      <div ${ref(this._myTooltip)} class="tooltip-placeholder">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+      }
+  }
+  SgdsTooltip.styles = [...SgdsElement.styles, css_248z$7];
+  __decorate([
+      property({ type: String })
+  ], SgdsTooltip.prototype, "content", void 0);
+  __decorate([
+      property({ type: String })
+  ], SgdsTooltip.prototype, "placement", void 0);
+  __decorate([
+      property({ type: String })
+  ], SgdsTooltip.prototype, "trigger", void 0);
+  __decorate([
+      state()
+  ], SgdsTooltip.prototype, "popperConfig", void 0);
+  __decorate([
+      queryAssignedElements()
+  ], SgdsTooltip.prototype, "_tooltipTargetElements", void 0);
+
+  var css_248z$6 = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+
+  /**
+   *
+   * @param name tagname of custom element
+   * @returns boolean
+   */
+  function isRegistered(name) {
+      return !!customElements.get(name);
+  }
+  function register(name, constructor) {
+      if (!customElements.get(name)) {
+          customElements.define(name, constructor);
+      }
+  }
+  function warnUnregisteredElements(name) {
+      if (isRegistered(name)) {
+          return true;
+      }
+      else {
+          console.error(`Custom element of name : ${name} is not registered. Remember to import the component file for custom element registration`);
+          return false;
+      }
+  }
+
+  /**
+   * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
+   *
+   * @cssprop --sgds-close-btn-border-radius - The border radius of close button border
+   *
+   */
+  class SgdsCloseButton extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          this.ariaLabel = "Close button";
+          /** Specifies a large or small button */
+          this.size = "md";
+          this.variant = "default";
+          this._clickHandler = () => {
+              return;
+          };
+      }
+      _handleClick() {
+          this.removeEventListener("click", this._clickHandler);
+          this.addEventListener("click", this._clickHandler);
+      }
+      firstUpdated() {
+          /** Cannot register sgds-icon as dependency due to some circular dependencies, so we check and warn instead */
+          warnUnregisteredElements("sgds-icon");
+      }
+      render() {
+          return html `
+      <button
+        class=${classMap({
+            "btn-close": true,
+            [`btn-close-${this.size}`]: this.size,
+            "btn-close-light": this.variant === "light",
+            "btn-close-dark": this.variant === "dark"
+        })}
+        aria-label=${ifDefined(this.ariaLabel)}
+        @click=${this._handleClick}
+      >
+        <sgds-icon name="cross" size=${this.size}></sgds-icon>
+      </button>
+    `;
+      }
+  }
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$6];
+  __decorate([
+      property({ type: String })
+  ], SgdsCloseButton.prototype, "ariaLabel", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsCloseButton.prototype, "size", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsCloseButton.prototype, "variant", void 0);
+
+  /**
+   * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
+   * string. This is useful because we can't use slot.textContent as an alternative.
+   */
+  function getTextContent(slot) {
+      if (!slot) {
+          return "";
+      }
+      const nodes = slot.assignedNodes({ flatten: true });
+      let text = "";
+      [...nodes].forEach(node => {
+          if (node.nodeType === Node.TEXT_NODE) {
+              text += node.textContent.trim();
+          }
+      });
+      return text;
+  }
+
+  /**
+   * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
+   * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.
+   *
+   * @slot default - slot for badge
+   * @slot icon - The slot for icon to the left of the badge text
+   *
+   * @event sgds-show - Emitted when the badge appears.
+   * @event sgds-hide - Emitted when the badge is starting to close but has not closed.
+   * @event sgds-after-show - Emitted after the badge has appeared
+   * @event sgds-after-hide - Emitted after the badge has closed
+   */
+  class SgdsBadge extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */
+          this.show = false;
+          /** One or more button variant combinations buttons may be one of a variety of visual variants such as: `info`, `success`, `danger`, `warning`, 'neutral' */
+          this.variant = "info";
+          /** Manually set the outlined state to false */
+          this.outlined = false;
+          /** Manually set the dismissible state of the button to `false` */
+          this.dismissible = false;
+          /** Manually enable full width */
+          this.fullWidth = false;
+          this.truncated = false;
+          this.text = "";
+      }
+      /** Closes the badge  */
+      close() {
+          this.show = false;
+      }
+      /**@internal */
+      _handleShowChange() {
+          if (this.show) {
+              const sgdsShow = this.emit("sgds-show", { cancelable: true });
+              if (sgdsShow.defaultPrevented) {
+                  this.show = false;
+                  return;
+              }
+              // animations if any go here
+              this.emit("sgds-after-show");
+          }
+          else {
+              const sgdsHide = this.emit("sgds-hide", { cancelable: true });
+              if (sgdsHide.defaultPrevented) {
+                  this.show = true;
+                  return;
+              }
+              // animations if any go here
+              this.emit("sgds-after-hide");
+          }
+      }
+      /**@internal */
+      _handleTruncation() {
+          // checking of text height if its exceeding parent, it needs to be truncated
+          const badge = this.shadowRoot.querySelector(".badge");
+          const badgeLabel = this.shadowRoot.querySelector(".badge-label");
+          if (badge && badgeLabel) {
+              const labelHeight = badgeLabel.getBoundingClientRect().height;
+              const badgeHeight = badge.getBoundingClientRect().height;
+              this.truncated = labelHeight > badgeHeight;
+          }
+      }
+      _handleLabelSlotChange(e) {
+          this.text = getTextContent(e.target);
+          return;
+      }
+      _renderBadge() {
+          return html `<div
+      class="  
+          ${classMap({
+            [`badge-dismissible`]: this.dismissible,
+            badge: true,
+            outlined: this.outlined,
+            truncated: this.truncated,
+            "full-width": this.fullWidth
+        })}"
+      aria-hidden=${this.show ? "false" : "true"}
+    >
+      ${!this.dismissible ? html `<slot name="icon"></slot>` : nothing}
+
+      <span class="badge-label">
+        <slot @slotchange=${this._handleLabelSlotChange}></slot>
+      </span>
+
+      ${this.dismissible
+            ? html `<sgds-close-button
+            size="sm"
+            aria-label="close the badge"
+            @click=${this.close}
+            variant=${this.outlined ? "dark" : "light"}
+          ></sgds-close-button>`
+            : nothing}
+    </div>`;
+      }
+      render() {
+          return (this.dismissible && this.show) || !this.dismissible
+              ? this.truncated
+                  ? html `<sgds-tooltip content=${this.text}>${this._renderBadge()}</sgds-tooltip>`
+                  : this._renderBadge()
+              : nothing;
+      }
+  }
+  SgdsBadge.styles = [...SgdsElement.styles, css_248z$8];
+  /**@internal */
+  SgdsBadge.dependencies = {
+      "sgds-close-button": SgdsCloseButton,
+      "sgds-tooltip": SgdsTooltip
+  };
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsBadge.prototype, "show", void 0);
@@ -9169,9 +10304,21 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsBadge.prototype, "dismissible", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], SgdsBadge.prototype, "fullWidth", void 0);
+  __decorate([
+      state()
+  ], SgdsBadge.prototype, "truncated", void 0);
+  __decorate([
+      state()
+  ], SgdsBadge.prototype, "text", void 0);
   __decorate([
       watch("show")
   ], SgdsBadge.prototype, "_handleShowChange", null);
+  __decorate([
+      watch("text")
+  ], SgdsBadge.prototype, "_handleTruncation", null);
 
   var Archive = html `
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -11684,7 +12831,7 @@
           }
       }
   }
-  FormControlElement.styles = [...SgdsElement.styles, css_248z$a, css_248z$9, css_248z$4, css_248z$3];
+  FormControlElement.styles = [...SgdsElement.styles, css_248z$b, css_248z$a, css_248z$4, css_248z$3];
   __decorate([
       property({ reflect: true })
   ], FormControlElement.prototype, "label", void 0);
@@ -11897,7 +13044,7 @@
       watch("_isTouched", { waitUntilFirstUpdate: true })
   ], SgdsCheckbox.prototype, "_handleIsTouched", null);
 
-  var css_248z$1 = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
+  var css_248z$1 = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
 
   class ComboBoxItem extends SgdsElement {
       constructor() {