@govtechsg/sgds-web-component 3.6.0-rc.2 → 3.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport cardStyle from \"./card.css\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.\n * @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerHref = this.footerSlotItems?.href;\n      const linkHref = this.linkSlotItems?.href;\n\n      if (footerHref) {\n        this.card.setAttribute(\"href\", footerHref);\n      } else if (linkHref) {\n        this.card.setAttribute(\"href\", linkHref);\n      }\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag}\n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-tinted-bg\"></div>\n        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\n        <div class=\"card-body\">\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"./types\";\nimport type SgdsLink from \"../Link/sgds-link\";\nimport cardStyle from \"./card.css\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot menu - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the card. Typically used for action menus or dropdowns.\n * @slot upper - Accepts an element to be displayed above the card content. When used, it overrides image and icon slot content.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot icon - Accepts an icon element to visually represent the card. Only a single element is allowed to be passed in.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  /** Used only for SSR to indicate the presence of the `image` slot. */\n  @property({ type: Boolean }) hasImageSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `icon` slot. */\n  @property({ type: Boolean }) hasIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `upper` slot. */\n  @property({ type: Boolean }) hasUpperSlot = false;\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"image\", \"icon\", \"upper\");\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.stretchedLink) {\n      const footerHref = this.footerSlotItems?.href;\n      const linkHref = this.linkSlotItems?.href;\n\n      if (footerHref) {\n        this.card.setAttribute(\"href\", footerHref);\n      } else if (linkHref) {\n        this.card.setAttribute(\"href\", linkHref);\n      }\n    }\n  }\n\n  updated() {\n    if (!this.hasImageSlot) this.hasImageSlot = this.hasSlotController.test(\"image\");\n    if (!this.hasIconSlot) this.hasIconSlot = this.hasSlotController.test(\"icon\");\n    if (!this.hasUpperSlot) this.hasUpperSlot = this.hasSlotController.test(\"upper\");\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n\n    if (this.hasSlotController.test(\"image\") && this.hasSlotController.test(\"icon\")) {\n      console.error(\"Both image and icon slots cannot be used together in SgdsCard\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag}\n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-tinted-bg\"></div>\n        \n        <slot name=\"menu\"></slot>\n        <div class=${classMap({\n          \"card-image\": this.hasImageSlot,\n          \"card-media\": this.hasIconSlot || this.hasUpperSlot\n        })}>\n          <slot name=\"upper\">\n            <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n            <slot name=\"icon\"></slot>\n          </slot>\n        </div>\n\n        <div class=\"card-body\">\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.warnLinkSlotMisused}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}

package/components/CloseButton/close-button.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.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:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.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)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=close-button.js.map

package/components/CloseButton/index.js

@@ -0,0 +1,5 @@
+import { SgdsCloseButton } from './sgds-close-button.js';
+import { register } from '../../utils/ce-registry.js';
+
+register("sgds-close-button", SgdsCloseButton);
+//# sourceMappingURL=index.js.map

package/components/CloseButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/CloseButton/index.ts"],"sourcesContent":["import { SgdsCloseButton } from \"./sgds-close-button\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-close-button\", SgdsCloseButton);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"sgds-close-button\": SgdsCloseButton;\n  }\n}\n"],"names":[],"mappings":";;;AAGA,QAAQ,CAAC,mBAAmB,EAAE,eAAe,CAAC"}

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

@@ -0,0 +1,50 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e,t,i,s){var r,n=arguments.length,o=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(o=(n<3?r(o):n>3?r(t,i,o):r(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o}"function"==typeof SuppressedError&&SuppressedError;
+/**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+const t=globalThis,i=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),r=new WeakMap;class n{constructor(e,t,i){if(this._$cssResult$=!0,i!==s)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this._strings=t}get styleSheet(){let e=this._styleSheet;const t=this._strings;if(i&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=r.get(t)),void 0===e&&((this._styleSheet=e=new CSSStyleSheet).replaceSync(this.cssText),i&&r.set(t,e))}return e}toString(){return this.cssText}}const o=e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return new n("string"==typeof(i=t)?i:String(i),void 0,s);var i},a=i?e=>e:e=>e instanceof CSSStyleSheet?o(e):e
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */,{is:l,defineProperty:d,getOwnPropertyDescriptor:c,getOwnPropertyNames:h,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,m=globalThis;let g;const f=m.trustedTypes,_=f?f.emptyScript:"",y=m.reactiveElementPolyfillSupportDevMode;{const e=m.litIssuedWarnings??=new Set;g=(t,i)=>{i+=` See https://lit.dev/msg/${t} for more information.`,e.has(i)||(console.warn(i),e.add(i))},g("dev-mode","Lit is in dev mode. Not recommended for production!"),m.ShadyDOM?.inUse&&void 0===y&&g("polyfill-support-missing","Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded.")}const v=(e,t)=>e,b={toAttribute(e,t){switch(t){case Boolean:e=e?_:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},w=(e,t)=>!l(e,t),$={attribute:!0,type:String,converter:b,reflect:!1,hasChanged:w};Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;class P extends HTMLElement{static addInitializer(e){this.__prepare(),(this._initializers??=[]).push(e)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap&&[...this.__attributeToPropertyMap.keys()]}static createProperty(e,t=$){if(t.state&&(t.attribute=!1),this.__prepare(),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol.for(`${String(e)} (@property() cache)`),s=this.getPropertyDescriptor(e,i,t);void 0!==s&&d(this.prototype,e,s)}}static getPropertyDescriptor(e,t,i){const{get:s,set:r}=c(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};if(null==s){if("value"in(c(this.prototype,e)??{}))throw new Error(`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it's actually declared as a value on the prototype. Usually this is due to using @property or @state on a method.`);g("reactive-property-without-getter",`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it does not have a getter. This will be an error in a future version of Lit.`)}return{get(){return s?.call(this)},set(t){const n=s?.call(this);r.call(this,t),this.requestUpdate(e,n,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??$}static __prepare(){if(this.hasOwnProperty(v("elementProperties")))return;const e=u(this);e.finalize(),void 0!==e._initializers&&(this._initializers=[...e._initializers]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(v("finalized")))return;if(this.finalized=!0,this.__prepare(),this.hasOwnProperty(v("properties"))){const e=this.properties,t=[...h(e),...p(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this.__attributeToPropertyMap=new Map;for(const[e,t]of this.elementProperties){const i=this.__attributeNameForProperty(e,t);void 0!==i&&this.__attributeToPropertyMap.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles),this.hasOwnProperty("createProperty")&&g("no-override-create-property","Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators"),this.hasOwnProperty("getPropertyDescriptor")&&g("no-override-get-property-descriptor","Overriding ReactiveElement.getPropertyDescriptor() is deprecated. The override will not be called with standard decorators")}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(a(e))}else void 0!==e&&t.push(a(e));return t}static __attributeNameForProperty(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this.__instanceProperties=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.__reflectingProperty=null,this.__initialize()}__initialize(){this.__updatePromise=new Promise((e=>this.enableUpdating=e)),this._$changedProperties=new Map,this.__saveInstanceProperties(),this.requestUpdate(),this.constructor._initializers?.forEach((e=>e(this)))}addController(e){(this.__controllers??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this.__controllers?.delete(e)}__saveInstanceProperties(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this.__instanceProperties=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,s)=>{if(i)e.adoptedStyleSheets=s.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const i of s){const s=document.createElement("style"),r=t.litNonce;void 0!==r&&s.setAttribute("nonce",r),s.textContent=i.cssText,e.appendChild(s)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.__controllers?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this.__controllers?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$attributeToProperty(e,i)}__propertyToAttribute(e,t){const i=this.constructor.elementProperties.get(e),s=this.constructor.__attributeNameForProperty(e,i);if(void 0!==s&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:b).toAttribute(t,i.type);this.constructor.enabledWarnings.includes("migration")&&void 0===r&&g("undefined-attribute-value",`The attribute value for the ${e} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`),this.__reflectingProperty=e,null==r?this.removeAttribute(s):this.setAttribute(s,r),this.__reflectingProperty=null}}_$attributeToProperty(e,t){const i=this.constructor,s=i.__attributeToPropertyMap.get(e);if(void 0!==s&&this.__reflectingProperty!==s){const e=i.getPropertyOptions(s),r="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:b;this.__reflectingProperty=s,this[s]=r.fromAttribute(t,e.type),this.__reflectingProperty=null}}requestUpdate(e,t,i){if(void 0!==e){e instanceof Event&&g("","The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()"),i??=this.constructor.getPropertyOptions(e);if(!(i.hasChanged??w)(this[e],t))return;this._$changeProperty(e,t,i)}!1===this.isUpdatePending&&(this.__updatePromise=this.__enqueueUpdate())}_$changeProperty(e,t,i){this._$changedProperties.has(e)||this._$changedProperties.set(e,t),!0===i.reflect&&this.__reflectingProperty!==e&&(this.__reflectingProperties??=new Set).add(e)}async __enqueueUpdate(){this.isUpdatePending=!0;try{await this.__updatePromise}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){const e=this.performUpdate();return this.constructor.enabledWarnings.includes("async-perform-update")&&"function"==typeof e?.then&&g("async-perform-update",`Element ${this.localName} returned a Promise from performUpdate(). This behavior is deprecated and will be removed in a future version of ReactiveElement.`),e}performUpdate(){if(!this.isUpdatePending)return;var e;if(e={kind:"update"},m.emitLitDebugLogEvents&&m.dispatchEvent(new CustomEvent("lit-debug",{detail:e})),!this.hasUpdated){this.renderRoot??=this.createRenderRoot();{const e=[...this.constructor.elementProperties.keys()].filter((e=>this.hasOwnProperty(e)&&e in u(this)));if(e.length)throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${e.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`)}if(this.__instanceProperties){for(const[e,t]of this.__instanceProperties)this[e]=t;this.__instanceProperties=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e)!0!==i.wrapped||this._$changedProperties.has(t)||void 0===this[t]||this._$changeProperty(t,this[t],i)}let t=!1;const i=this._$changedProperties;try{t=this.shouldUpdate(i),t?(this.willUpdate(i),this.__controllers?.forEach((e=>e.hostUpdate?.())),this.update(i)):this.__markUpdated()}catch(e){throw t=!1,this.__markUpdated(),e}t&&this._$didUpdate(i)}willUpdate(e){}_$didUpdate(e){this.__controllers?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e),this.isUpdatePending&&this.constructor.enabledWarnings.includes("change-in-update")&&g("change-in-update",`Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`)}__markUpdated(){this._$changedProperties=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.__updatePromise}shouldUpdate(e){return!0}update(e){this.__reflectingProperties&&=this.__reflectingProperties.forEach((e=>this.__propertyToAttribute(e,this[e]))),this.__markUpdated()}updated(e){}firstUpdated(e){}}P.elementStyles=[],P.shadowRootOptions={mode:"open"},P[v("elementProperties")]=new Map,P[v("finalized")]=new Map,y?.({ReactiveElement:P});{P.enabledWarnings=["change-in-update","async-perform-update"];const e=function(e){e.hasOwnProperty(v("enabledWarnings"))||(e.enabledWarnings=e.enabledWarnings.slice())};P.enableWarning=function(t){e(this),this.enabledWarnings.includes(t)||this.enabledWarnings.push(t)},P.disableWarning=function(t){e(this);const i=this.enabledWarnings.indexOf(t);i>=0&&this.enabledWarnings.splice(i,1)}}(m.reactiveElementVersions??=[]).push("2.0.4"),m.reactiveElementVersions.length>1&&g("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.");
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+const S=globalThis,E=e=>{S.emitLitDebugLogEvents&&S.dispatchEvent(new CustomEvent("lit-debug",{detail:e}))};let x,C=0;S.litIssuedWarnings??=new Set,x=(e,t)=>{t+=e?` See https://lit.dev/msg/${e} for more information.`:"",S.litIssuedWarnings.has(t)||(console.warn(t),S.litIssuedWarnings.add(t))},x("dev-mode","Lit is in dev mode. Not recommended for production!");const T=S.ShadyDOM?.inUse&&!0===S.ShadyDOM?.noPatch?S.ShadyDOM.wrap:e=>e,U=S.trustedTypes,k=U?U.createPolicy("lit-html",{createHTML:e=>e}):void 0,N=e=>e,O=(e,t,i)=>N,z=e=>{if(re!==O)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");re=e},M=()=>{re=O},R=(e,t,i)=>re(e,t,i),V="$lit$",A=`lit$${Math.random().toFixed(9).slice(2)}$`,L="?"+A,W=`<${L}>`,D=document,I=()=>D.createComment(""),j=e=>null===e||"object"!=typeof e&&"function"!=typeof e,H=Array.isArray,q="[ \t\n\f\r]",F=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,B=/-->/g,J=/>/g,Z=new RegExp(`>|${q}(?:([^\\s"'>=/]+)(${q}*=${q}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),Y=/'/g,X=/"/g,G=/^(?:script|style|textarea|title)$/i,K=(Q=1,(e,...t)=>(e.some((e=>void 0===e))&&console.warn("Some template strings are undefined.\nThis is probably caused by illegal octal escape sequences."),t.some((e=>e?._$litStatic$))&&x("","Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\nPlease use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions"),{_$litType$:Q,strings:e,values:t}));var Q;const ee=Symbol.for("lit-noChange"),te=Symbol.for("lit-nothing"),ie=new WeakMap,se=D.createTreeWalker(D,129);let re=O;function ne(e,t){if(!H(e)||!e.hasOwnProperty("raw")){let e="invalid template strings array";throw e="\n          Internal Error: expected template strings to be an array\n          with a 'raw' field. Faking a template strings array by\n          calling html or svg like an ordinary function is effectively\n          the same as calling unsafeHtml and can lead to major security\n          issues, e.g. opening your code up to XSS attacks.\n          If you're using the html or svg tagged template functions normally\n          and still seeing this error, please file a bug at\n          https://github.com/lit/lit/issues/new?template=bug_report.md\n          and include information about your build tooling, if any.\n        ".trim().replace(/\n */g,"\n"),new Error(e)}return void 0!==k?k.createHTML(t):t}class oe{constructor({strings:e,_$litType$:t},i){let s;this.parts=[];let r=0,n=0;const o=e.length-1,a=this.parts,[l,d]=((e,t)=>{const i=e.length-1,s=[];let r,n=2===t?"<svg>":3===t?"<math>":"",o=F;for(let t=0;t<i;t++){const i=e[t];let a,l,d=-1,c=0;for(;c<i.length&&(o.lastIndex=c,l=o.exec(i),null!==l);)if(c=o.lastIndex,o===F){if("!--"===l[1])o=B;else if(void 0!==l[1])o=J;else if(void 0!==l[2])G.test(l[2])&&(r=new RegExp(`</${l[2]}`,"g")),o=Z;else if(void 0!==l[3])throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else o===Z?">"===l[0]?(o=r??F,d=-1):void 0===l[1]?d=-2:(d=o.lastIndex-l[2].length,a=l[1],o=void 0===l[3]?Z:'"'===l[3]?X:Y):o===X||o===Y?o=Z:o===B||o===J?o=F:(o=Z,r=void 0);console.assert(-1===d||o===Z||o===Y||o===X,"unexpected parse state B");const h=o===Z&&e[t+1].startsWith("/>")?" ":"";n+=o===F?i+W:d>=0?(s.push(a),i.slice(0,d)+V+i.slice(d)+A+h):i+A+(-2===d?t:h)}return[ne(e,n+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),s]})(e,t);if(this.el=oe.createElement(l,i),se.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(s=se.nextNode())&&a.length<o;){if(1===s.nodeType){{const e=s.localName;if(/^(?:textarea|template)$/i.test(e)&&s.innerHTML.includes(A)){const t=`Expressions are not supported inside \`${e}\` elements. See https://lit.dev/msg/expression-in-${e} for more information.`;if("template"===e)throw new Error(t);x("",t)}}if(s.hasAttributes())for(const e of s.getAttributeNames())if(e.endsWith(V)){const t=d[n++],i=s.getAttribute(e).split(A),o=/([.?@])?(.*)/.exec(t);a.push({type:1,index:r,name:o[2],strings:i,ctor:"."===o[1]?he:"?"===o[1]?pe:"@"===o[1]?ue:ce}),s.removeAttribute(e)}else e.startsWith(A)&&(a.push({type:6,index:r}),s.removeAttribute(e));if(G.test(s.tagName)){const e=s.textContent.split(A),t=e.length-1;if(t>0){s.textContent=U?U.emptyScript:"";for(let i=0;i<t;i++)s.append(e[i],I()),se.nextNode(),a.push({type:2,index:++r});s.append(e[t],I())}}}else if(8===s.nodeType){if(s.data===L)a.push({type:2,index:r});else{let e=-1;for(;-1!==(e=s.data.indexOf(A,e+1));)a.push({type:7,index:r}),e+=A.length-1}}r++}if(d.length!==n)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+e.join("${...}")+"`");E&&E({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:e})}static createElement(e,t){const i=D.createElement("template");return i.innerHTML=e,i}}function ae(e,t,i=e,s){if(t===ee)return t;let r=void 0!==s?i.__directives?.[s]:i.__directive;const n=j(t)?void 0:t._$litDirective$;return r?.constructor!==n&&(r?._$notifyDirectiveConnectionChanged?.(!1),void 0===n?r=void 0:(r=new n(e),r._$initialize(e,i,s)),void 0!==s?(i.__directives??=[])[s]=r:i.__directive=r),void 0!==r&&(t=ae(e,r._$resolve(e,t.values),r,s)),t}class le{constructor(e,t){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=e,this._$parent=t}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(e){const{el:{content:t},parts:i}=this._$template,s=(e?.creationScope??D).importNode(t,!0);se.currentNode=s;let r=se.nextNode(),n=0,o=0,a=i[0];for(;void 0!==a;){if(n===a.index){let t;2===a.type?t=new de(r,r.nextSibling,this,e):1===a.type?t=new a.ctor(r,a.name,a.strings,this,e):6===a.type&&(t=new me(r,this,e)),this._$parts.push(t),a=i[++o]}n!==a?.index&&(r=se.nextNode(),n++)}return se.currentNode=D,s}_update(e){let t=0;for(const i of this._$parts)void 0!==i&&(E&&E({kind:"set part",part:i,value:e[t],valueIndex:t,values:e,templateInstance:this}),void 0!==i.strings?(i._$setValue(e,i,t),t+=i.strings.length-2):i._$setValue(e[t])),t++}}class de{get _$isConnected(){return this._$parent?._$isConnected??this.__isConnected}constructor(e,t,i,s){this.type=2,this._$committedValue=te,this._$disconnectableChildren=void 0,this._$startNode=e,this._$endNode=t,this._$parent=i,this.options=s,this.__isConnected=s?.isConnected??!0,this._textSanitizer=void 0}get parentNode(){let e=T(this._$startNode).parentNode;const t=this._$parent;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(e,t=this){if(null===this.parentNode)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(e=ae(this,e,t),j(e))e===te||null==e||""===e?(this._$committedValue!==te&&(E&&E({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=te):e!==this._$committedValue&&e!==ee&&this._commitText(e);else if(void 0!==e._$litType$)this._commitTemplateResult(e);else if(void 0!==e.nodeType){if(this.options?.host===e)return this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),void console.warn("Attempted to render the template host",e,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");this._commitNode(e)}else(e=>H(e)||"function"==typeof e?.[Symbol.iterator])(e)?this._commitIterable(e):this._commitText(e)}_insert(e){return T(T(this._$startNode).parentNode).insertBefore(e,this._$endNode)}_commitNode(e){if(this._$committedValue!==e){if(this._$clear(),re!==O){const e=this._$startNode.parentNode?.nodeName;if("STYLE"===e||"SCRIPT"===e){let t="Forbidden";throw t="STYLE"===e?"Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":"Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(t)}}E&&E({kind:"commit node",start:this._$startNode,parent:this._$parent,value:e,options:this.options}),this._$committedValue=this._insert(e)}}_commitText(e){if(this._$committedValue!==te&&j(this._$committedValue)){const t=T(this._$startNode).nextSibling;void 0===this._textSanitizer&&(this._textSanitizer=R(t,"data","property")),e=this._textSanitizer(e),E&&E({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}else{const t=D.createTextNode("");this._commitNode(t),void 0===this._textSanitizer&&(this._textSanitizer=R(t,"data","property")),e=this._textSanitizer(e),E&&E({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}this._$committedValue=e}_commitTemplateResult(e){const{values:t,_$litType$:i}=e,s="number"==typeof i?this._$getTemplate(e):(void 0===i.el&&(i.el=oe.createElement(ne(i.h,i.h[0]),this.options)),i);if(this._$committedValue?._$template===s)E&&E({kind:"template updating",template:s,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:t}),this._$committedValue._update(t);else{const e=new le(s,this),i=e._clone(this.options);E&&E({kind:"template instantiated",template:s,instance:e,parts:e._$parts,options:this.options,fragment:i,values:t}),e._update(t),E&&E({kind:"template instantiated and updated",template:s,instance:e,parts:e._$parts,options:this.options,fragment:i,values:t}),this._commitNode(i),this._$committedValue=e}}_$getTemplate(e){let t=ie.get(e.strings);return void 0===t&&ie.set(e.strings,t=new oe(e)),t}_commitIterable(e){H(this._$committedValue)||(this._$committedValue=[],this._$clear());const t=this._$committedValue;let i,s=0;for(const r of e)s===t.length?t.push(i=new de(this._insert(I()),this._insert(I()),this,this.options)):i=t[s],i._$setValue(r),s++;s<t.length&&(this._$clear(i&&T(i._$endNode).nextSibling,s),t.length=s)}_$clear(e=T(this._$startNode).nextSibling,t){for(this._$notifyConnectionChanged?.(!1,!0,t);e&&e!==this._$endNode;){const t=T(e).nextSibling;T(e).remove(),e=t}}setConnected(e){if(void 0!==this._$parent)throw new Error("part.setConnected() may only be called on a RootPart returned from render().");this.__isConnected=e,this._$notifyConnectionChanged?.(e)}}class ce{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(e,t,i,s,r){this.type=1,this._$committedValue=te,this._$disconnectableChildren=void 0,this.element=e,this.name=t,this._$parent=s,this.options=r,i.length>2||""!==i[0]||""!==i[1]?(this._$committedValue=new Array(i.length-1).fill(new String),this.strings=i):this._$committedValue=te,this._sanitizer=void 0}_$setValue(e,t=this,i,s){const r=this.strings;let n=!1;if(void 0===r)e=ae(this,e,t,0),n=!j(e)||e!==this._$committedValue&&e!==ee,n&&(this._$committedValue=e);else{const s=e;let o,a;for(e=r[0],o=0;o<r.length-1;o++)a=ae(this,s[i+o],t,o),a===ee&&(a=this._$committedValue[o]),n||=!j(a)||a!==this._$committedValue[o],a===te?e=te:e!==te&&(e+=(a??"")+r[o+1]),this._$committedValue[o]=a}n&&!s&&this._commitValue(e)}_commitValue(e){e===te?T(this.element).removeAttribute(this.name):(void 0===this._sanitizer&&(this._sanitizer=re(this.element,this.name,"attribute")),e=this._sanitizer(e??""),E&&E({kind:"commit attribute",element:this.element,name:this.name,value:e,options:this.options}),T(this.element).setAttribute(this.name,e??""))}}class he extends ce{constructor(){super(...arguments),this.type=3}_commitValue(e){void 0===this._sanitizer&&(this._sanitizer=re(this.element,this.name,"property")),e=this._sanitizer(e),E&&E({kind:"commit property",element:this.element,name:this.name,value:e,options:this.options}),this.element[this.name]=e===te?void 0:e}}class pe extends ce{constructor(){super(...arguments),this.type=4}_commitValue(e){E&&E({kind:"commit boolean attribute",element:this.element,name:this.name,value:!(!e||e===te),options:this.options}),T(this.element).toggleAttribute(this.name,!!e&&e!==te)}}class ue extends ce{constructor(e,t,i,s,r){if(super(e,t,i,s,r),this.type=5,void 0!==this.strings)throw new Error(`A \`<${e.localName}>\` has a \`@${t}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(e,t=this){if((e=ae(this,e,t,0)??te)===ee)return;const i=this._$committedValue,s=e===te&&i!==te||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,r=e!==te&&(i===te||s);E&&E({kind:"commit event listener",element:this.element,name:this.name,value:e,options:this.options,removeListener:s,addListener:r,oldListener:i}),s&&this.element.removeEventListener(this.name,this,i),r&&this.element.addEventListener(this.name,this,e),this._$committedValue=e}handleEvent(e){"function"==typeof this._$committedValue?this._$committedValue.call(this.options?.host??this.element,e):this._$committedValue.handleEvent(e)}}class me{constructor(e,t,i){this.element=e,this.type=6,this._$disconnectableChildren=void 0,this._$parent=t,this.options=i}get _$isConnected(){return this._$parent._$isConnected}_$setValue(e){E&&E({kind:"commit to element binding",element:this.element,value:e,options:this.options}),ae(this,e)}}const ge=S.litHtmlPolyfillSupportDevMode;ge?.(oe,de),(S.litHtmlVersions??=[]).push("3.2.0"),S.litHtmlVersions.length>1&&x("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.");const fe=(e,t,i)=>{if(null==t)throw new TypeError(`The container to render into may not be ${t}`);const s=C++,r=i?.renderBefore??t;let n=r._$litPart$;if(E&&E({kind:"begin render",id:s,value:e,container:t,options:i,part:n}),void 0===n){const e=i?.renderBefore??null;r._$litPart$=n=new de(t.insertBefore(I(),e),e,void 0,i??{})}return n._$setValue(e),E&&E({kind:"end render",id:s,value:e,container:t,options:i,part:n}),n};fe.setSanitizer=z,fe.createSanitizer=R,fe._testOnlyClearSanitizerFactoryDoNotCallOrElse=M;
+/**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+const _e=globalThis,ye=_e.ShadowRoot&&(void 0===_e.ShadyCSS||_e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,ve=Symbol(),be=new WeakMap;class we{constructor(e,t,i){if(this._$cssResult$=!0,i!==ve)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this._strings=t}get styleSheet(){let e=this._styleSheet;const t=this._strings;if(ye&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=be.get(t)),void 0===e&&((this._styleSheet=e=new CSSStyleSheet).replaceSync(this.cssText),i&&be.set(t,e))}return e}toString(){return this.cssText}}const $e=(e,...t)=>{const i=1===e.length?e[0]:t.reduce(((t,i,s)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${e}. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(i)+e[s+1]),e[0]);return new we(i,e,ve)},Pe=e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return new we("string"==typeof(i=t)?i:String(i),void 0,ve);var i},Se=ye?e=>e:e=>e instanceof CSSStyleSheet?Pe(e):e
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */,{is:Ee,defineProperty:xe,getOwnPropertyDescriptor:Ce,getOwnPropertyNames:Te,getOwnPropertySymbols:Ue,getPrototypeOf:ke}=Object,Ne=globalThis;let Oe;const ze=Ne.trustedTypes,Me=ze?ze.emptyScript:"",Re=Ne.reactiveElementPolyfillSupportDevMode;{const e=Ne.litIssuedWarnings??=new Set;Oe=(t,i)=>{i+=` See https://lit.dev/msg/${t} for more information.`,e.has(i)||(console.warn(i),e.add(i))},Oe("dev-mode","Lit is in dev mode. Not recommended for production!"),Ne.ShadyDOM?.inUse&&void 0===Re&&Oe("polyfill-support-missing","Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded.")}const Ve=(e,t)=>e,Ae={toAttribute(e,t){switch(t){case Boolean:e=e?Me:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},Le=(e,t)=>!Ee(e,t),We={attribute:!0,type:String,converter:Ae,reflect:!1,hasChanged:Le};Symbol.metadata??=Symbol("metadata"),Ne.litPropertyMetadata??=new WeakMap;class De extends HTMLElement{static addInitializer(e){this.__prepare(),(this._initializers??=[]).push(e)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap&&[...this.__attributeToPropertyMap.keys()]}static createProperty(e,t=We){if(t.state&&(t.attribute=!1),this.__prepare(),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol.for(`${String(e)} (@property() cache)`),s=this.getPropertyDescriptor(e,i,t);void 0!==s&&xe(this.prototype,e,s)}}static getPropertyDescriptor(e,t,i){const{get:s,set:r}=Ce(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};if(null==s){if("value"in(Ce(this.prototype,e)??{}))throw new Error(`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it's actually declared as a value on the prototype. Usually this is due to using @property or @state on a method.`);Oe("reactive-property-without-getter",`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it does not have a getter. This will be an error in a future version of Lit.`)}return{get(){return s?.call(this)},set(t){const n=s?.call(this);r.call(this,t),this.requestUpdate(e,n,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??We}static __prepare(){if(this.hasOwnProperty(Ve("elementProperties")))return;const e=ke(this);e.finalize(),void 0!==e._initializers&&(this._initializers=[...e._initializers]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(Ve("finalized")))return;if(this.finalized=!0,this.__prepare(),this.hasOwnProperty(Ve("properties"))){const e=this.properties,t=[...Te(e),...Ue(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this.__attributeToPropertyMap=new Map;for(const[e,t]of this.elementProperties){const i=this.__attributeNameForProperty(e,t);void 0!==i&&this.__attributeToPropertyMap.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles),this.hasOwnProperty("createProperty")&&Oe("no-override-create-property","Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators"),this.hasOwnProperty("getPropertyDescriptor")&&Oe("no-override-get-property-descriptor","Overriding ReactiveElement.getPropertyDescriptor() is deprecated. The override will not be called with standard decorators")}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(Se(e))}else void 0!==e&&t.push(Se(e));return t}static __attributeNameForProperty(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this.__instanceProperties=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.__reflectingProperty=null,this.__initialize()}__initialize(){this.__updatePromise=new Promise((e=>this.enableUpdating=e)),this._$changedProperties=new Map,this.__saveInstanceProperties(),this.requestUpdate(),this.constructor._initializers?.forEach((e=>e(this)))}addController(e){(this.__controllers??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this.__controllers?.delete(e)}__saveInstanceProperties(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this.__instanceProperties=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,t)=>{if(ye)e.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const i of t){const t=document.createElement("style"),s=_e.litNonce;void 0!==s&&t.setAttribute("nonce",s),t.textContent=i.cssText,e.appendChild(t)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.__controllers?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this.__controllers?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$attributeToProperty(e,i)}__propertyToAttribute(e,t){const i=this.constructor.elementProperties.get(e),s=this.constructor.__attributeNameForProperty(e,i);if(void 0!==s&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:Ae).toAttribute(t,i.type);this.constructor.enabledWarnings.includes("migration")&&void 0===r&&Oe("undefined-attribute-value",`The attribute value for the ${e} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`),this.__reflectingProperty=e,null==r?this.removeAttribute(s):this.setAttribute(s,r),this.__reflectingProperty=null}}_$attributeToProperty(e,t){const i=this.constructor,s=i.__attributeToPropertyMap.get(e);if(void 0!==s&&this.__reflectingProperty!==s){const e=i.getPropertyOptions(s),r="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:Ae;this.__reflectingProperty=s,this[s]=r.fromAttribute(t,e.type),this.__reflectingProperty=null}}requestUpdate(e,t,i){if(void 0!==e){e instanceof Event&&Oe("","The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()"),i??=this.constructor.getPropertyOptions(e);if(!(i.hasChanged??Le)(this[e],t))return;this._$changeProperty(e,t,i)}!1===this.isUpdatePending&&(this.__updatePromise=this.__enqueueUpdate())}_$changeProperty(e,t,i){this._$changedProperties.has(e)||this._$changedProperties.set(e,t),!0===i.reflect&&this.__reflectingProperty!==e&&(this.__reflectingProperties??=new Set).add(e)}async __enqueueUpdate(){this.isUpdatePending=!0;try{await this.__updatePromise}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){const e=this.performUpdate();return this.constructor.enabledWarnings.includes("async-perform-update")&&"function"==typeof e?.then&&Oe("async-perform-update",`Element ${this.localName} returned a Promise from performUpdate(). This behavior is deprecated and will be removed in a future version of ReactiveElement.`),e}performUpdate(){if(!this.isUpdatePending)return;var e;if(e={kind:"update"},Ne.emitLitDebugLogEvents&&Ne.dispatchEvent(new CustomEvent("lit-debug",{detail:e})),!this.hasUpdated){this.renderRoot??=this.createRenderRoot();{const e=[...this.constructor.elementProperties.keys()].filter((e=>this.hasOwnProperty(e)&&e in ke(this)));if(e.length)throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${e.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`)}if(this.__instanceProperties){for(const[e,t]of this.__instanceProperties)this[e]=t;this.__instanceProperties=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e)!0!==i.wrapped||this._$changedProperties.has(t)||void 0===this[t]||this._$changeProperty(t,this[t],i)}let t=!1;const i=this._$changedProperties;try{t=this.shouldUpdate(i),t?(this.willUpdate(i),this.__controllers?.forEach((e=>e.hostUpdate?.())),this.update(i)):this.__markUpdated()}catch(e){throw t=!1,this.__markUpdated(),e}t&&this._$didUpdate(i)}willUpdate(e){}_$didUpdate(e){this.__controllers?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e),this.isUpdatePending&&this.constructor.enabledWarnings.includes("change-in-update")&&Oe("change-in-update",`Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`)}__markUpdated(){this._$changedProperties=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.__updatePromise}shouldUpdate(e){return!0}update(e){this.__reflectingProperties&&=this.__reflectingProperties.forEach((e=>this.__propertyToAttribute(e,this[e]))),this.__markUpdated()}updated(e){}firstUpdated(e){}}De.elementStyles=[],De.shadowRootOptions={mode:"open"},De[Ve("elementProperties")]=new Map,De[Ve("finalized")]=new Map,Re?.({ReactiveElement:De});{De.enabledWarnings=["change-in-update","async-perform-update"];const e=function(e){e.hasOwnProperty(Ve("enabledWarnings"))||(e.enabledWarnings=e.enabledWarnings.slice())};De.enableWarning=function(t){e(this),this.enabledWarnings.includes(t)||this.enabledWarnings.push(t)},De.disableWarning=function(t){e(this);const i=this.enabledWarnings.indexOf(t);i>=0&&this.enabledWarnings.splice(i,1)}}(Ne.reactiveElementVersions??=[]).push("2.0.4"),Ne.reactiveElementVersions.length>1&&Oe("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */;let Ie;{const e=globalThis.litIssuedWarnings??=new Set;Ie=(t,i)=>{i+=` See https://lit.dev/msg/${t} for more information.`,e.has(i)||(console.warn(i),e.add(i))}}class je extends De{constructor(){super(...arguments),this.renderOptions={host:this},this.__childPart=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this.__childPart=fe(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.__childPart?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.__childPart?.setConnected(!1)}render(){return ee}}var He;je._$litElement$=!0,je[(He="finalized",He)]=!0,globalThis.litElementHydrateSupport?.({LitElement:je});const qe=globalThis.litElementPolyfillSupportDevMode;
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+let Fe;qe?.({LitElement:je}),(globalThis.litElementVersions??=[]).push("4.1.0"),globalThis.litElementVersions.length>1&&Ie("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.");{const e=globalThis.litIssuedWarnings??=new Set;Fe=(t,i)=>{i+=` See https://lit.dev/msg/${t} for more information.`,e.has(i)||(console.warn(i),e.add(i))}}const Be={attribute:!0,type:String,converter:b,reflect:!1,hasChanged:w},Je=(e=Be,t,i)=>{const{kind:s,metadata:r}=i;null==r&&Fe("missing-class-metadata",`The class ${t} is missing decorator metadata. This could mean that you're using a compiler that supports decorators but doesn't support decorator metadata, such as TypeScript 5.1. Please update your compiler.`);let n=globalThis.litPropertyMetadata.get(r);if(void 0===n&&globalThis.litPropertyMetadata.set(r,n=new Map),n.set(i.name,e),"accessor"===s){const{name:s}=i;return{set(i){const r=t.get.call(this);t.set.call(this,i),this.requestUpdate(s,r,e)},init(t){return void 0!==t&&this._$changeProperty(s,void 0,e),t}}}if("setter"===s){const{name:s}=i;return function(i){const r=this[s];t.call(this,i),this.requestUpdate(s,r,e)}}throw new Error(`Unsupported decorator location: ${s}`)};function Ze(e){return(t,i)=>"object"==typeof i?Je(e,t,i):((e,t,i)=>{const s=t.hasOwnProperty(i);return t.constructor.createProperty(i,s?{...e,wrapped:!0}:e),s?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)}
+/**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */globalThis.litIssuedWarnings??=new Set;var Ye=$e`: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-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-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.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;class Xe extends je{emit(e,t){const i=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(i),i}static define(e,t=this,i={}){if(customElements.get(e));else try{customElements.define(e,t,i)}catch(s){customElements.define(e,class extends t{},i)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach((([e,t])=>{this.constructor.define(e,t)}))}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach((e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))})))}}Xe.styles=[Ye],Xe.dependencies={},e([Ze({type:Boolean,reflect:!0})],Xe.prototype,"ssr",void 0);var Ge,Ke,Qe=$e`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.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:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.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)}`;function et(e){return!!function(e){return!!customElements.get(e)}(e)||(console.error(`Custom element of name : ${e} is not registered. Remember to import the component file for custom element registration`),!1)}class tt extends Xe{constructor(){super(...arguments),this.size="md",this.tone="default",this._clickHandler=()=>{}}_handleClick(){this.removeEventListener("click",this._clickHandler),this.addEventListener("click",this._clickHandler)}firstUpdated(e){super.firstUpdated(e),et("sgds-icon")}render(){return K`
+      <button class="btn-close" aria-label="Close button" @click=${this._handleClick}>
+        <sgds-icon name="cross" size=${this.size}></sgds-icon>
+      </button>
+    `}}tt.styles=[...Xe.styles,Qe],e([Ze({type:String,reflect:!0})],tt.prototype,"size",void 0),e([Ze({type:String,reflect:!0})],tt.prototype,"tone",void 0),Ge="sgds-close-button",Ke=tt,customElements.get(Ge)||customElements.define(Ge,Ke)}));
+//# sourceMappingURL=index.umd.min.js.map