@govtechsg/sgds-web-component 3.28.1-rc.0 → 3.29.0

package/components/Alert/sgds-alert.js

@@ -69,7 +69,7 @@ var SgdsAlert = class extends SgdsElement {
             ${this.dismissible ? html$1`<sgds-close-button
                   aria-label="close the alert"
                   @click=${this.close}
-                  tone=${this.outlined || this.variant === "warning" ? "fixed-dark" : "fixed-light"}
+                  tone="default"
                 ></sgds-close-button>` : nothing}
           </div>
         ` : nothing;

package/components/Alert/sgds-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-alert.js","names":["alertStyle"],"sources":["../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in sgds-icon size=\"md\" elements.\n * @slot action - An action button or link to show in the alert.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\" class=${classMap({ \"alert-icon__outlined\": this.outlined })}></slot>\n            <div class=\"alert-content\">\n              <div class=\"alert-content__upper\">\n                ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n                <slot class=\"alert-content__description\"></slot>\n              </div>\n              <slot class=\"alert-content__action\" name=\"action\"></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=${this.outlined || this.variant === \"warning\" ? \"fixed-dark\" : \"fixed-light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,YAAb,cAA+B,YAAY;;;EAQU,KAAA,OAAA;EAGO,KAAA,cAAA;EAGS,KAAA,UAAA;EAGZ,KAAA,WAAA;EAGJ,KAAA,QAAA;;;EAnBnC,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAU;;;EAE5B,KAAA,eAAA;GACpB,qBAAqB;GACrB,aAAa;EACf;;;CAiBA,QAAe;EACb,KAAK,OAAO;CACd;;CAEA,oBACoB;EAClB,KAAK,OAAO,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,WAAW;CAC5D;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,MAAI;;qBAES,SAAS;GAChB,OAAO;GACP,MAAM,KAAK;IACV,sBAAsB,KAAK;GAC5B,UAAU,KAAK;EACjB,CAAC,EAAE;;0BAEW,KAAK,OAAO,UAAU,OAAO;;sCAEjB,SAAS,EAAE,wBAAwB,KAAK,SAAS,CAAC,EAAE;;;kBAGxE,KAAK,QAAQ,MAAI,4BAA4B,KAAK,MAAM,UAAU,QAAQ;;;;;cAK9E,KAAK,cACH,MAAI;;2BAEO,KAAK,MAAM;yBACb,KAAK,YAAY,KAAK,YAAY,YAAY,eAAe,cAAc;yCAEpF,QAAQ;;YAGhB;CACN;AACF;AAxDG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGxC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAOxC,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}
+{"version":3,"file":"sgds-alert.js","names":["alertStyle"],"sources":["../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in sgds-icon size=\"md\" elements.\n * @slot action - An action button or link to show in the alert.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\" class=${classMap({ \"alert-icon__outlined\": this.outlined })}></slot>\n            <div class=\"alert-content\">\n              <div class=\"alert-content__upper\">\n                ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n                <slot class=\"alert-content__description\"></slot>\n              </div>\n              <slot class=\"alert-content__action\" name=\"action\"></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=\"default\"\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,YAAb,cAA+B,YAAY;;;EAQU,KAAA,OAAA;EAGO,KAAA,cAAA;EAGS,KAAA,UAAA;EAGZ,KAAA,WAAA;EAGJ,KAAA,QAAA;;;EAnBnC,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAU;;;EAE5B,KAAA,eAAA;GACpB,qBAAqB;GACrB,aAAa;EACf;;;CAiBA,QAAe;EACb,KAAK,OAAO;CACd;;CAEA,oBACoB;EAClB,KAAK,OAAO,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,WAAW;CAC5D;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,MAAI;;qBAES,SAAS;GAChB,OAAO;GACP,MAAM,KAAK;IACV,sBAAsB,KAAK;GAC5B,UAAU,KAAK;EACjB,CAAC,EAAE;;0BAEW,KAAK,OAAO,UAAU,OAAO;;sCAEjB,SAAS,EAAE,wBAAwB,KAAK,SAAS,CAAC,EAAE;;;kBAGxE,KAAK,QAAQ,MAAI,4BAA4B,KAAK,MAAM,UAAU,QAAQ;;;;;cAK9E,KAAK,cACH,MAAI;;2BAEO,KAAK,MAAM;;yCAGtB,QAAQ;;YAGhB;CACN;AACF;AAxDG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGxC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAOxC,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}

package/components/Appnav/index.umd.min.js

@@ -116,7 +116,7 @@ let it={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},at
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-let St=Symbol.for(``),Ct=e=>{if(e?.r===St)return e?._$litStatic$},wt=(e,...t)=>({_$litStatic$:t.reduce((t,n,r)=>t+(e=>{if(e._$litStatic$!==void 0)return e._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(n)+e[r+1],e[0]),r:St}),Tt=/* @__PURE__ */ new Map,Et=(e=>(t,...n)=>{let r=n.length,i,a,o=[],s=[],c,l=0,u=!1;for(;l<r;){for(c=t[l];l<r&&(a=n[l],(i=Ct(a))!==void 0);)c+=i+t[++l],u=!0;l!==r&&s.push(a),o.push(c),l++}if(l===r&&o.push(t[r]),u){let e=o.join(`$$lit$$`);(t=Tt.get(e))===void 0&&(o.raw=o,Tt.set(e,t=o)),n=s}return e(t,...n)})(E);j();var Dt=v`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-xs);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`,R=class extends L{constructor(...e){super(...e),this.variant=`primary`,this.tone=`brand`,this.size=`md`,this.active=!1,this.disabled=!1,this.target=`_self`}static{this.styles=[...L.styles,Dt]}focus(e){this.button.focus(e)}click(){this.button.click()}blur(){this.button.blur()}_handleBlur(){this.emit(`sgds-blur`)}_handleFocus(){this.emit(`sgds-focus`)}_handleClick(e){if(this.disabled||this.loading){e.preventDefault(),e.stopPropagation();return}}_handleKeydown(e){if(e.key===`Enter`&&this.loading){e.preventDefault(),e.stopPropagation();return}}_assignSpinnerSize(e){if(e===`xs`||e===`sm`)return`xs`;if(e===`md`||e===`lg`)return`sm`}_assignSpinnerTone(e,t){return e===`fixed-light`&&t===`primary`?`fixed-dark`:e===`neutral`&&t===`primary`?`inverse`:e===`fixed-light`||t===`primary`?`fixed-light`:e===`neutral`&&(t===`outline`||t===`ghost`)?`neutral`:`brand`}};I([P(`.btn`)],R.prototype,`button`,void 0),I([M({reflect:!0})],R.prototype,`variant`,void 0),I([M({reflect:!0})],R.prototype,`tone`,void 0),I([M({reflect:!0})],R.prototype,`size`,void 0),I([M({type:Boolean,reflect:!0})],R.prototype,`active`,void 0),I([M({type:Boolean,reflect:!0})],R.prototype,`disabled`,void 0),I([M({type:String,reflect:!0})],R.prototype,`href`,void 0),I([M({type:String,reflect:!0})],R.prototype,`target`,void 0),I([M({type:String,reflect:!0})],R.prototype,`download`,void 0),I([M({type:String})],R.prototype,`ariaLabel`,void 0),I([M({type:Boolean})],R.prototype,`loading`,void 0);function Ot(e){if(!e)return e;let t=e.trim().toLowerCase();if(!(t.startsWith(`javascript:`)||t.startsWith(`data:`)||t.startsWith(`vbscript:`)))return e}var kt=/* @__PURE__ */ r({default:()=>At}),At,jt=n((()=>{j(),At=E`
+let St=Symbol.for(``),Ct=e=>{if(e?.r===St)return e?._$litStatic$},wt=(e,...t)=>({_$litStatic$:t.reduce((t,n,r)=>t+(e=>{if(e._$litStatic$!==void 0)return e._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(n)+e[r+1],e[0]),r:St}),Tt=/* @__PURE__ */ new Map,Et=(e=>(t,...n)=>{let r=n.length,i,a,o=[],s=[],c,l=0,u=!1;for(;l<r;){for(c=t[l];l<r&&(a=n[l],(i=Ct(a))!==void 0);)c+=i+t[++l],u=!0;l!==r&&s.push(a),o.push(c),l++}if(l===r&&o.push(t[r]),u){let e=o.join(`$$lit$$`);(t=Tt.get(e))===void 0&&(o.raw=o,Tt.set(e,t=o)),n=s}return e(t,...n)})(E);j();var Dt=v`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-xs);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);position:relative;text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host(:not([disabled])) .btn:active:after{background-color:var(--sgds-bg-translucent);border-radius:inherit;content:"";inset:0;position:absolute}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`,R=class extends L{constructor(...e){super(...e),this.variant=`primary`,this.tone=`brand`,this.size=`md`,this.active=!1,this.disabled=!1,this.target=`_self`}static{this.styles=[...L.styles,Dt]}focus(e){this.button.focus(e)}click(){this.button.click()}blur(){this.button.blur()}_handleBlur(){this.emit(`sgds-blur`)}_handleFocus(){this.emit(`sgds-focus`)}_handleClick(e){if(this.disabled||this.loading){e.preventDefault(),e.stopPropagation();return}}_handleKeydown(e){if(e.key===`Enter`&&this.loading){e.preventDefault(),e.stopPropagation();return}}_assignSpinnerSize(e){if(e===`xs`||e===`sm`)return`xs`;if(e===`md`||e===`lg`)return`sm`}_assignSpinnerTone(e,t){return e===`fixed-light`&&t===`primary`?`fixed-dark`:e===`neutral`&&t===`primary`?`inverse`:e===`fixed-light`||t===`primary`?`fixed-light`:e===`neutral`&&(t===`outline`||t===`ghost`)?`neutral`:`brand`}};I([P(`.btn`)],R.prototype,`button`,void 0),I([M({reflect:!0})],R.prototype,`variant`,void 0),I([M({reflect:!0})],R.prototype,`tone`,void 0),I([M({reflect:!0})],R.prototype,`size`,void 0),I([M({type:Boolean,reflect:!0})],R.prototype,`active`,void 0),I([M({type:Boolean,reflect:!0})],R.prototype,`disabled`,void 0),I([M({type:String,reflect:!0})],R.prototype,`href`,void 0),I([M({type:String,reflect:!0})],R.prototype,`target`,void 0),I([M({type:String,reflect:!0})],R.prototype,`download`,void 0),I([M({type:String})],R.prototype,`ariaLabel`,void 0),I([M({type:Boolean})],R.prototype,`loading`,void 0);function Ot(e){if(!e)return e;let t=e.trim().toLowerCase();if(!(t.startsWith(`javascript:`)||t.startsWith(`data:`)||t.startsWith(`vbscript:`)))return e}var kt=/* @__PURE__ */ r({default:()=>At}),At,jt=n((()=>{j(),At=E`
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
     <path
       fill="currentColor"
@@ -2449,7 +2449,7 @@ let St=Symbol.for(``),Ct=e=>{if(e?.r===St)return e?._$litStatic$},wt=(e,...t)=>(
       aria-expanded="${this.expanded}"
       .ariaLabel=${`Toggle navigation`}
     ></sgds-icon-button>`}_handleProfileSlotChange(e){let t=e.target.assignedElements({flatten:!0});this._hasProfileSlotItems=t.length>0,t.forEach(e=>{e.setAttribute(`expand`,this.expand),e.setAttribute(`tone`,this.tone)})}render(){return this.breakpointReached=window.innerWidth<(this.expand===`always`?-1:this.expand===`never`?1/0:{sm:512,md:768,lg:1024,xl:1280,xxl:1440}[this.expand]),E`
-      <nav>
+      <nav aria-label="App navigation">
         <div class="navbar ${this._expandClass()}">
           <slot name="start" class=${st({"slot-empty":!this.hasStartSlot})}></slot>
           <a class="navbar-brand" href=${Ot(this.brandHref)??``} aria-label="brand-link">
@@ -2495,7 +2495,7 @@ let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),Wh(e,t);return
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/let Zh=()=>new Qh;var Qh=class{};let $h=/* @__PURE__ */ new WeakMap,eg=at(class extends Xh{render(e){return O}update(e,[t]){let n=t!==this.G;return n&&this.G!==void 0&&this.rt(void 0),(n||this.lt!==this.ct)&&(this.G=t,this.ht=e.options?.host,this.rt(this.ct=e.element)),O}rt(e){if(this.isConnected||(e=void 0),typeof this.G==`function`){let t=this.ht??globalThis,n=$h.get(t);n===void 0&&(n=/* @__PURE__ */ new WeakMap,$h.set(t,n)),n.get(this.G)!==void 0&&this.G.call(this.ht,void 0),n.set(this.G,e),e!==void 0&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return typeof this.G==`function`?$h.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}});var Z=class extends L{constructor(...e){super(...e),this.myDropdown=Zh(),this.dropdownMenuId=bt(`dropdown-menu`,`div`),this.noFlip=!1,this.menuAlignRight=!1,this.drop=`down`,this.floatingOpts={},this.menuIsOpen=!1,this.close=`default`,this.disabled=!1,this.readonly=!1,this.menuRef=Zh(),this._handleClickOutOfElement=e=>{this.menuIsOpen&&(e.composedPath().includes(this)||this.hideMenu(!0))}}connectedCallback(){super.connectedCallback(),this.close!==`inside`&&document.addEventListener(`click`,this._handleClickOutOfElement),this.addEventListener(`keydown`,this._handleKeyboardMenuEvent)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this._handleClickOutOfElement),this.removeEventListener(`keydown`,this._handleKeyboardMenuEvent),this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0)}firstUpdated(e){super.firstUpdated(e),this.menuIsOpen&&requestAnimationFrame(async()=>{await this.updateFloatingPosition(),this._startAutoUpdate()})}async showMenu(){if(!(this.disabled||this.menuIsOpen)){if(this.menuIsOpen=!0,this.emit(`sgds-show`),await this.updateFloatingPosition(),this._startAutoUpdate(),this.menuRef.value){let e=(this.menuRef.value.getAttribute(`data-placement`)||``).startsWith(`top`)?`4px`:`-4px`,{options:t}=_t(this,`dropdown.show`);await lt(this.menuRef.value,[{opacity:0,transform:`translateY(${e})`},{opacity:1,transform:`translateY(0)`}],t)}this.emit(`sgds-after-show`)}}_startAutoUpdate(){this.myDropdown.value&&this.menuRef.value&&(this._cleanupAutoUpdate=Lh(this.myDropdown.value,this.menuRef.value,()=>this.updateFloatingPosition()))}async hideMenu(e){if(this.menuIsOpen){if(this.emit(`sgds-hide`,{detail:{isOutside:e}}),this.menuRef.value){let e=(this.menuRef.value.getAttribute(`data-placement`)||``).startsWith(`top`)?`4px`:`-4px`,{options:t}=_t(this,`dropdown.hide`);await lt(this.menuRef.value,[{opacity:1,transform:`translateY(0)`},{opacity:0,transform:`translateY(${e})`}],t)}this.menuIsOpen=!1,this.emit(`sgds-after-hide`),this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0)}}toggleMenu(){this.menuIsOpen?this.hideMenu():this.showMenu()}_handleKeyboardMenuEvent(e){if(!this.readonly)switch(e.key){case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this.menuIsOpen||this.showMenu();break;case`Escape`:this.hideMenu()}}mergeMiddleware(e,t){let n=e=>e?.name||e?.constructor?.name,r=t.map(n);return e.map(e=>{let i=n(e),a=r.indexOf(i);return a===-1?e:t[a]}).concat(t.filter(t=>!e.some(e=>n(e)===n(t))))}async updateFloatingPosition(){if(!this.myDropdown.value||!this.menuRef.value)return;let e=`bottom-start`;switch(this.drop){case`up`:e=this.menuAlignRight?`top-end`:`top-start`;break;case`right`:e=`right-start`;break;case`left`:e=`left-start`;break;case`down`:e=this.menuAlignRight?`bottom-end`:`bottom-start`;break;default:e=`bottom-start`}let t=[Rh(8),this.noFlip?void 0:Bh(),zh()].filter(Boolean),n=t;Array.isArray(this.floatingOpts.middleware)&&this.floatingOpts.middleware.length>0&&(n=this.mergeMiddleware(t,this.floatingOpts.middleware.filter(Boolean)));let r={strategy:`fixed`,placement:e,...this.floatingOpts,middleware:n},{x:i,y:a,strategy:o,placement:s}=await Vh(this.myDropdown.value,this.menuRef.value,r);this.menuRef.value.setAttribute(`data-placement`,s),Object.assign(this.menuRef.value.style,{position:o,left:`${i}px`,top:`${a}px`})}};I([M({type:Boolean,state:!0})],Z.prototype,`noFlip`,void 0),I([M({type:Boolean,reflect:!0,state:!0})],Z.prototype,`menuAlignRight`,void 0),I([M({type:String,reflect:!0,state:!0})],Z.prototype,`drop`,void 0),I([M({type:Object})],Z.prototype,`floatingOpts`,void 0),I([M({type:Boolean,reflect:!0})],Z.prototype,`menuIsOpen`,void 0),I([M({type:Boolean,reflect:!0})],Z.prototype,`disabled`,void 0),I([M({type:Boolean,reflect:!0})],Z.prototype,`readonly`,void 0),vt(`dropdown.show`,{keyframes:[],options:{duration:200,easing:`cubic-bezier(0.1, 0, 0.5, 0)`}}),vt(`dropdown.hide`,{keyframes:[],options:{duration:200,easing:`cubic-bezier(0.15, 0.6, 0.6, 1)`}});var tg=class extends Z{constructor(...e){super(...e),this.nextDropdownItemNo=0,this.prevDropdownItemNo=-1,this.hidden=!1}static{this.styles=Z.styles}connectedCallback(){super.connectedCallback(),this.addEventListener(`sgds-hide`,this._resetMenu)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`sgds-hide`,this._resetMenu)}firstUpdated(e){super.firstUpdated(e),this.addEventListener(`keydown`,this._handleKeyboardMenuItemsEvent)}handleSelectSlot(e){let t=this._getActiveMenuItems(),n=t.find(t=>e.composedPath().includes(t));if(!n)return;let r=t.indexOf(n);this.nextDropdownItemNo=r+1,this.prevDropdownItemNo=r<=0?t.length-1:r-1,n.disabled||(this.emit(`sgds-select`,{detail:{item:n}}),this.close!==`outside`&&this.hideMenu())}_resetMenu(){this.nextDropdownItemNo=0,this.prevDropdownItemNo=-1,this._getMenuItems().forEach(e=>{let t=e?.shadowRoot?.querySelector(`.dropdown-item`);t&&t.removeAttribute(`tabindex`)})}_handleKeyboardMenuItemsEvent(e){if(this.readonly)return;let t=this._getActiveMenuItems();if(t.length!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),this._setMenuItem(this.nextDropdownItemNo);break;case`ArrowUp`:e.preventDefault(),this._setMenuItem(this.prevDropdownItemNo);break;case`Tab`:if(!this.menuIsOpen)return;e.preventDefault(),e.shiftKey?this._setMenuItem(this.prevDropdownItemNo):this._setMenuItem(this.nextDropdownItemNo);break;case`Escape`:this.menuIsOpen&&(e.preventDefault(),this.hideMenu());break;case`Enter`:t.find(t=>e.composedPath().includes(t))&&this.handleSelectSlot(e)}}_getMenuItems(){return this.shadowRoot.querySelector(`slot#default`)?this.shadowRoot.querySelector(`slot#default`)?.assignedElements({flatten:!0}).filter(e=>e.getAttribute(`role`)===`menuitem`&&!e.classList.contains(`empty-menu`)&&!e.hasAttribute(`hidden`)):this.menu?.hasChildNodes()?[...Array.from(this.menu.children)]:[]}_getActiveMenuItems(){return this._getMenuItems().filter(e=>!e.disabled&&!e.hidden&&!e.readonly)}_setMenuItem(e){let t=this._getActiveMenuItems();if(t.length===0)return;let n=(e%t.length+t.length)%t.length,r=t[n];this.emit(`i-sgds-option-focus`,{detail:{option:r}}),this.nextDropdownItemNo=(n+1)%t.length,this.prevDropdownItemNo=(n-1+t.length)%t.length,t.forEach(e=>{let t=e.shadowRoot.querySelector(`.dropdown-item`);t.setAttribute(`tabindex`,e===r?`0`:`-1`),e===r&&t.focus()})}};I([P(`ul.dropdown-menu`)],tg.prototype,`menu`,void 0),I([N()],tg.prototype,`nextDropdownItemNo`,void 0),I([N()],tg.prototype,`prevDropdownItemNo`,void 0),I([M({type:Boolean,reflect:!0})],tg.prototype,`hidden`,void 0),j();var ng=v`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.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-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:var(--sgds-z-index-floating)}.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:512px){.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:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.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%}`;j();var rg=v`.dropdown{display:flex;height:inherit;position:relative}.dropdown-menu{max-width:var(--sgds-dimension-320)}.toggler-container{flex:1;pointer-events:none}.toggler-container ::slotted(*){pointer-events:auto}`;j();var Q=class extends tg{static{this.styles=[...tg.styles,rg,ng]}constructor(){super(),this.noFlip=!1,this.menuAlignRight=!1,this.drop=`down`,this.close=`default`,this.menuRef=eg()}async _handleClick(e){if(this.disabled)return;let t=this._toggler[0];if(!t){this.toggleMenu();return}if(e.composedPath().includes(t)){this.toggleMenu();return}if(!this.menuIsOpen)return;let n=this.menuRef.value;n&&e.composedPath().includes(n)||this.hideMenu()}_handleCloseMenu(){this._toggler[0]?.focus()}async connectedCallback(){super.connectedCallback(),this.addEventListener(`sgds-hide`,this._handleCloseMenu)}async disconnectedCallback(){this.removeEventListener(`sgds-hide`,this._handleCloseMenu)}async firstUpdated(e){super.firstUpdated(e),this.menuIsOpen&&await this.updateFloatingPosition(),this._handleDisabled()}_handleTogglerSlotChange(e){let t=e.target.assignedElements({flatten:!0})[0];t&&(t.setAttribute(`aria-haspopup`,`menu`),t.setAttribute(`aria-expanded`,String(this.menuIsOpen)))}_handleMenuIsOpenChange(){let e=this._toggler[0];e&&e.setAttribute(`aria-expanded`,String(this.menuIsOpen))}_handleDisabled(){let e=this._toggler[0];e&&(this.disabled?e.setAttribute(`disabled`,`true`):e.hasAttribute(`disabled`)&&e.removeAttribute(`disabled`))}render(){return E`
+*/let Zh=()=>new Qh;var Qh=class{};let $h=/* @__PURE__ */ new WeakMap,eg=at(class extends Xh{render(e){return O}update(e,[t]){let n=t!==this.G;return n&&this.G!==void 0&&this.rt(void 0),(n||this.lt!==this.ct)&&(this.G=t,this.ht=e.options?.host,this.rt(this.ct=e.element)),O}rt(e){if(this.isConnected||(e=void 0),typeof this.G==`function`){let t=this.ht??globalThis,n=$h.get(t);n===void 0&&(n=/* @__PURE__ */ new WeakMap,$h.set(t,n)),n.get(this.G)!==void 0&&this.G.call(this.ht,void 0),n.set(this.G,e),e!==void 0&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return typeof this.G==`function`?$h.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}});var Z=class extends L{constructor(...e){super(...e),this.myDropdown=Zh(),this.dropdownMenuId=bt(`dropdown-menu`,`div`),this.noFlip=!1,this.menuAlignRight=!1,this.drop=`down`,this.floatingOpts={},this.menuIsOpen=!1,this.close=`default`,this.disabled=!1,this.readonly=!1,this.menuRef=Zh(),this._handleClickOutOfElement=e=>{this.menuIsOpen&&(e.composedPath().includes(this)||this.hideMenu(!0))}}connectedCallback(){super.connectedCallback(),this.close!==`inside`&&document.addEventListener(`click`,this._handleClickOutOfElement),this.addEventListener(`keydown`,this._handleKeyboardMenuEvent)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this._handleClickOutOfElement),this.removeEventListener(`keydown`,this._handleKeyboardMenuEvent),this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0)}firstUpdated(e){super.firstUpdated(e),this.menuIsOpen&&requestAnimationFrame(async()=>{await this.updateFloatingPosition(),this._startAutoUpdate()})}async showMenu(){if(!(this.disabled||this.menuIsOpen)){if(this.menuIsOpen=!0,this.emit(`sgds-show`),await this.updateFloatingPosition(),this._startAutoUpdate(),this.menuRef.value){let e=(this.menuRef.value.getAttribute(`data-placement`)||``).startsWith(`top`)?`4px`:`-4px`,{options:t}=_t(this,`dropdown.show`);await lt(this.menuRef.value,[{opacity:0,transform:`translateY(${e})`},{opacity:1,transform:`translateY(0)`}],t)}this.emit(`sgds-after-show`)}}_startAutoUpdate(){this.myDropdown.value&&this.menuRef.value&&(this._cleanupAutoUpdate=Lh(this.myDropdown.value,this.menuRef.value,()=>this.updateFloatingPosition()))}async hideMenu(e){if(this.menuIsOpen){if(this.emit(`sgds-hide`,{detail:{isOutside:e}}),this.menuRef.value){let e=(this.menuRef.value.getAttribute(`data-placement`)||``).startsWith(`top`)?`4px`:`-4px`,{options:t}=_t(this,`dropdown.hide`);await lt(this.menuRef.value,[{opacity:1,transform:`translateY(0)`},{opacity:0,transform:`translateY(${e})`}],t)}this.menuIsOpen=!1,this.emit(`sgds-after-hide`),this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0)}}toggleMenu(){this.menuIsOpen?this.hideMenu():this.showMenu()}_handleKeyboardMenuEvent(e){if(!this.readonly)switch(e.key){case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this.menuIsOpen||this.showMenu();break;case`Escape`:this.hideMenu()}}mergeMiddleware(e,t){let n=e=>e?.name||e?.constructor?.name,r=t.map(n);return e.map(e=>{let i=n(e),a=r.indexOf(i);return a===-1?e:t[a]}).concat(t.filter(t=>!e.some(e=>n(e)===n(t))))}async updateFloatingPosition(){if(!this.myDropdown.value||!this.menuRef.value)return;let e=`bottom-start`;switch(this.drop){case`up`:e=this.menuAlignRight?`top-end`:`top-start`;break;case`right`:e=`right-start`;break;case`left`:e=`left-start`;break;case`down`:e=this.menuAlignRight?`bottom-end`:`bottom-start`;break;default:e=`bottom-start`}let t=[Rh(8),this.noFlip?void 0:Bh(),zh()].filter(Boolean),n=t;Array.isArray(this.floatingOpts.middleware)&&this.floatingOpts.middleware.length>0&&(n=this.mergeMiddleware(t,this.floatingOpts.middleware.filter(Boolean)));let r={strategy:`fixed`,placement:e,...this.floatingOpts,middleware:n},{x:i,y:a,strategy:o,placement:s}=await Vh(this.myDropdown.value,this.menuRef.value,r);this.menuRef.value.setAttribute(`data-placement`,s),Object.assign(this.menuRef.value.style,{position:o,left:`${i}px`,top:`${a}px`})}};I([M({type:Boolean,state:!0})],Z.prototype,`noFlip`,void 0),I([M({type:Boolean,reflect:!0,state:!0})],Z.prototype,`menuAlignRight`,void 0),I([M({type:String,reflect:!0,state:!0})],Z.prototype,`drop`,void 0),I([M({type:Object})],Z.prototype,`floatingOpts`,void 0),I([M({type:Boolean,reflect:!0})],Z.prototype,`menuIsOpen`,void 0),I([M({type:Boolean,reflect:!0})],Z.prototype,`disabled`,void 0),I([M({type:Boolean,reflect:!0})],Z.prototype,`readonly`,void 0),vt(`dropdown.show`,{keyframes:[],options:{duration:200,easing:`cubic-bezier(0.1, 0, 0.5, 0)`}}),vt(`dropdown.hide`,{keyframes:[],options:{duration:200,easing:`cubic-bezier(0.15, 0.6, 0.6, 1)`}});var tg=class extends Z{constructor(...e){super(...e),this.nextDropdownItemNo=0,this.prevDropdownItemNo=-1,this.hidden=!1}static{this.styles=Z.styles}connectedCallback(){super.connectedCallback(),this.addEventListener(`sgds-hide`,this._resetMenu)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`sgds-hide`,this._resetMenu)}firstUpdated(e){super.firstUpdated(e),this.addEventListener(`keydown`,this._handleKeyboardMenuItemsEvent)}handleSelectSlot(e){let t=this._getActiveMenuItems(),n=t.find(t=>e.composedPath().includes(t));if(!n)return;let r=t.indexOf(n);this.nextDropdownItemNo=r+1,this.prevDropdownItemNo=r<=0?t.length-1:r-1,n.disabled||(this.emit(`sgds-select`,{detail:{item:n}}),this.close!==`outside`&&this.hideMenu())}_resetMenu(){this.nextDropdownItemNo=0,this.prevDropdownItemNo=-1,this._getMenuItems().forEach(e=>{let t=e?.shadowRoot?.querySelector(`.dropdown-item`);t&&t.removeAttribute(`tabindex`)})}_handleKeyboardMenuItemsEvent(e){if(this.readonly)return;let t=this._getActiveMenuItems();if(t.length!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),this._setMenuItem(this.nextDropdownItemNo);break;case`ArrowUp`:e.preventDefault(),this._setMenuItem(this.prevDropdownItemNo);break;case`Tab`:if(!this.menuIsOpen)return;e.preventDefault(),e.shiftKey?this._setMenuItem(this.prevDropdownItemNo):this._setMenuItem(this.nextDropdownItemNo);break;case`Escape`:this.menuIsOpen&&(e.preventDefault(),this.hideMenu());break;case`Enter`:t.find(t=>e.composedPath().includes(t))&&this.handleSelectSlot(e)}}_getMenuItems(){return this.shadowRoot.querySelector(`slot#default`)?this.shadowRoot.querySelector(`slot#default`)?.assignedElements({flatten:!0}).filter(e=>e.getAttribute(`role`)===`menuitem`&&!e.classList.contains(`empty-menu`)&&!e.hasAttribute(`hidden`)):this.menu?.hasChildNodes()?[...Array.from(this.menu.children)]:[]}_getActiveMenuItems(){return this._getMenuItems().filter(e=>!e.disabled&&!e.hidden&&!e.readonly)}_setMenuItem(e){let t=this._getActiveMenuItems();if(t.length===0)return;let n=(e%t.length+t.length)%t.length,r=t[n];this.emit(`i-sgds-option-focus`,{detail:{option:r}}),this.nextDropdownItemNo=(n+1)%t.length,this.prevDropdownItemNo=(n-1+t.length)%t.length,t.forEach(e=>{let t=e.shadowRoot.querySelector(`.dropdown-item`);t.setAttribute(`tabindex`,e===r?`0`:`-1`),e===r&&t.focus()})}};I([P(`ul.dropdown-menu`)],tg.prototype,`menu`,void 0),I([N()],tg.prototype,`nextDropdownItemNo`,void 0),I([N()],tg.prototype,`prevDropdownItemNo`,void 0),I([M({type:Boolean,reflect:!0})],tg.prototype,`hidden`,void 0),j();var ng=v`:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{display:block}.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-192);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:var(--sgds-z-index-floating)}.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:512px){.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:1024px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1280px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1440px){.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%}`;j();var rg=v`.dropdown{display:flex;height:inherit;position:relative}.dropdown-menu{max-width:var(--sgds-dimension-320)}.toggler-container{flex:1;pointer-events:none}.toggler-container ::slotted(*){pointer-events:auto}`;j();var Q=class extends tg{static{this.styles=[...tg.styles,rg,ng]}constructor(){super(),this.noFlip=!1,this.menuAlignRight=!1,this.drop=`down`,this.close=`default`,this.menuRef=eg()}async _handleClick(e){if(this.disabled)return;let t=this._toggler[0];if(!t){this.toggleMenu();return}if(e.composedPath().includes(t)){this.toggleMenu();return}if(!this.menuIsOpen)return;let n=this.menuRef.value;n&&e.composedPath().includes(n)||this.hideMenu()}_handleCloseMenu(){this._toggler[0]?.focus({preventScroll:!0})}async connectedCallback(){super.connectedCallback(),this.addEventListener(`sgds-hide`,this._handleCloseMenu)}async disconnectedCallback(){this.removeEventListener(`sgds-hide`,this._handleCloseMenu)}async firstUpdated(e){super.firstUpdated(e),this.menuIsOpen&&await this.updateFloatingPosition(),this._handleDisabled()}_handleTogglerSlotChange(e){let t=e.target.assignedElements({flatten:!0})[0];t&&(t.setAttribute(`aria-haspopup`,`menu`),t.setAttribute(`aria-expanded`,String(this.menuIsOpen)))}_handleMenuIsOpenChange(){let e=this._toggler[0];e&&e.setAttribute(`aria-expanded`,String(this.menuIsOpen))}_handleDisabled(){let e=this._toggler[0];e&&(this.disabled?e.setAttribute(`disabled`,`true`):e.hasAttribute(`disabled`)&&e.removeAttribute(`disabled`))}render(){return E`
       <div class="dropdown" @click=${this._handleClick}>
         <div class="toggler-container" ${eg(this.myDropdown)}>
           <slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot>