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

package/react/components/Dropdown/sgds-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown.js","names":["dropdownStyle","dropdownMenuStyle"],"sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String, reflect: true, state: false })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick(e: MouseEvent) {\n    if (this.disabled) return;\n\n    const slottedToggler = this._toggler[0];\n\n    if (!slottedToggler) {\n      this.toggleMenu();\n      return;\n    }\n\n    if (e.composedPath().includes(slottedToggler)) {\n      this.toggleMenu();\n      return;\n    }\n\n    // Click landed in the toggler-container's empty area (passed through pointer-events: none)\n    if (!this.menuIsOpen) return;\n    const menu = this.menuRef.value;\n    if (menu && e.composedPath().includes(menu)) return;\n    this.hideMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus();\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  private _handleTogglerSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const elements = slot.assignedElements({ flatten: true });\n    const button = elements[0];\n    if (button) {\n      button.setAttribute(\"aria-haspopup\", \"menu\");\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"menuIsOpen\")\n  _handleMenuIsOpenChange() {\n    const button = this._toggler[0];\n    if (button) {\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\" @click=${this._handleClick}>\n        <div class=\"toggler-container\" ${ref(this.myDropdown)}>\n          <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,eAAb,cAAkC,oBAAoB;;EACpC,KAAA,SAAA;GAAC,GAAG,oBAAoB;GAAQA;GAAeC;EAAiB;;CAEhF,cAAc;EACZ,MAAM;EAMC,KAAA,SAAA;EAIQ,KAAA,iBAAA;EAIK,KAAA,OAAA;EAIoB,KAAA,QAAA;EAjBxC,KAAK,UAAU,IAAI;CACrB;CAuBA,MAAc,aAAa,GAAe;EACxC,IAAI,KAAK,UAAU;EAEnB,MAAM,iBAAiB,KAAK,SAAS;EAErC,IAAI,CAAC,gBAAgB;GACnB,KAAK,WAAW;GAChB;EACF;EAEA,IAAI,EAAE,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG;GAC7C,KAAK,WAAW;GAChB;EACF;EAGA,IAAI,CAAC,KAAK,YAAY;EACtB,MAAM,OAAO,KAAK,QAAQ;EAC1B,IAAI,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,IAAI,GAAG;EAC7C,KAAK,SAAS;CAChB;CAEA,mBAA2B;EAEzB,KADoB,SAAS,EACvB,EAAE,MAAM;CAChB;CAEA,MAAM,oBAAoB;EACxB,MAAM,kBAAkB;EACxB,KAAK,iBAAiB,aAAa,KAAK,gBAAgB;CAC1D;CAEA,MAAM,uBAAuB;EAC3B,KAAK,oBAAoB,aAAa,KAAK,gBAAgB;CAC7D;CAEA,MAAM,aAAa,mBAA2C;EAC5D,MAAM,aAAa,iBAAiB;EACpC,IAAI,KAAK,YACP,MAAM,KAAK,uBAAuB;EAEpC,KAAK,gBAAgB;CACvB;CAEA,yBAAiC,GAAU;EAGzC,MAAM,SAFO,EAAE,OACO,iBAAiB,EAAE,SAAS,KAAK,CACjC,CAAC,CAAC;EACxB,IAAI,QAAQ;GACV,OAAO,aAAa,iBAAiB,MAAM;GAC3C,OAAO,aAAa,iBAAiB,OAAO,KAAK,UAAU,CAAC;EAC9D;CACF;CAEA,0BAC0B;EACxB,MAAM,SAAS,KAAK,SAAS;EAC7B,IAAI,QACF,OAAO,aAAa,iBAAiB,OAAO,KAAK,UAAU,CAAC;CAEhE;CAEA,kBACkB;EAChB,MAAM,SAAS,KAAK,SAAS;EAC7B,IAAI,QAAQ;GACV,IAAI,KAAK,UACP,OAAO,aAAa,YAAY,MAAM;QAEtC,OAAO,aAAa,UAAU,KAAK,OAAO,gBAAgB,UAAU;EAExE;CACF;CAEA,SAAS;EACP,OAAO,IAAI;qCACsB,KAAK,aAAa;yCACd,IAAI,KAAK,UAAU,EAAE;6CACjB,KAAK,yBAAyB;;iDAE1B,IAAI,KAAK,OAAO,EAAE;sCAC7B,KAAK,iBAAiB;;;;CAI1D;AACF;AA1GG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,UAAA,KAAA,CAAA;AAIvD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,kBAAA,KAAA,CAAA;AAIvD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,QAAA,KAAA,CAAA;AAItD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAGtD,WAAA,CAAA,sBAAsB;CAAE,MAAM;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AA2DxD,WAAA,CAAA,MAAM,YAAY,CAAA,GAAA,aAAA,WAAA,2BAAA,IAAA;AAQlB,WAAA,CAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-dropdown.js","names":["dropdownStyle","dropdownMenuStyle"],"sources":["../../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport { watch } from \"../../utils/watch\";\nimport dropdownMenuStyle from \"./dropdown-menu.css\";\nimport dropdownStyle from \"./dropdown.css\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot\n *\n */\nexport class SgdsDropdown extends DropdownListElement {\n  static styles = [...DropdownListElement.styles, dropdownStyle, dropdownMenuStyle];\n\n  constructor() {\n    super();\n    this.menuRef = ref();\n  }\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String, reflect: true, state: false })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  @queryAssignedElements({ slot: \"toggler\", flatten: true })\n  private _toggler: Array<HTMLElement>;\n\n  protected menuRef;\n\n  private async _handleClick(e: MouseEvent) {\n    if (this.disabled) return;\n\n    const slottedToggler = this._toggler[0];\n\n    if (!slottedToggler) {\n      this.toggleMenu();\n      return;\n    }\n\n    if (e.composedPath().includes(slottedToggler)) {\n      this.toggleMenu();\n      return;\n    }\n\n    // Click landed in the toggler-container's empty area (passed through pointer-events: none)\n    if (!this.menuIsOpen) return;\n    const menu = this.menuRef.value;\n    if (menu && e.composedPath().includes(menu)) return;\n    this.hideMenu();\n  }\n\n  private _handleCloseMenu() {\n    const button = this._toggler[0];\n    button?.focus({ preventScroll: true });\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async disconnectedCallback() {\n    this.removeEventListener(\"sgds-hide\", this._handleCloseMenu);\n  }\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n    this._handleDisabled();\n  }\n\n  private _handleTogglerSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const elements = slot.assignedElements({ flatten: true });\n    const button = elements[0];\n    if (button) {\n      button.setAttribute(\"aria-haspopup\", \"menu\");\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"menuIsOpen\")\n  _handleMenuIsOpenChange() {\n    const button = this._toggler[0];\n    if (button) {\n      button.setAttribute(\"aria-expanded\", String(this.menuIsOpen));\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    const button = this._toggler[0];\n    if (button) {\n      if (this.disabled) {\n        button.setAttribute(\"disabled\", \"true\");\n      } else {\n        button.hasAttribute(\"disabled\") && button.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"dropdown\" @click=${this._handleClick}>\n        <div class=\"toggler-container\" ${ref(this.myDropdown)}>\n          <slot name=\"toggler\" @slotchange=${this._handleTogglerSlotChange}></slot>\n        </div>\n        <div class=\"dropdown-menu\" role=\"menu\" ${ref(this.menuRef)}>\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,IAAa,eAAb,cAAkC,oBAAoB;;EACpC,KAAA,SAAA;GAAC,GAAG,oBAAoB;GAAQA;GAAeC;EAAiB;;CAEhF,cAAc;EACZ,MAAM;EAMC,KAAA,SAAA;EAIQ,KAAA,iBAAA;EAIK,KAAA,OAAA;EAIoB,KAAA,QAAA;EAjBxC,KAAK,UAAU,IAAI;CACrB;CAuBA,MAAc,aAAa,GAAe;EACxC,IAAI,KAAK,UAAU;EAEnB,MAAM,iBAAiB,KAAK,SAAS;EAErC,IAAI,CAAC,gBAAgB;GACnB,KAAK,WAAW;GAChB;EACF;EAEA,IAAI,EAAE,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG;GAC7C,KAAK,WAAW;GAChB;EACF;EAGA,IAAI,CAAC,KAAK,YAAY;EACtB,MAAM,OAAO,KAAK,QAAQ;EAC1B,IAAI,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,IAAI,GAAG;EAC7C,KAAK,SAAS;CAChB;CAEA,mBAA2B;EAEzB,KADoB,SAAS,EACvB,EAAE,MAAM,EAAE,eAAe,KAAK,CAAC;CACvC;CAEA,MAAM,oBAAoB;EACxB,MAAM,kBAAkB;EACxB,KAAK,iBAAiB,aAAa,KAAK,gBAAgB;CAC1D;CAEA,MAAM,uBAAuB;EAC3B,KAAK,oBAAoB,aAAa,KAAK,gBAAgB;CAC7D;CAEA,MAAM,aAAa,mBAA2C;EAC5D,MAAM,aAAa,iBAAiB;EACpC,IAAI,KAAK,YACP,MAAM,KAAK,uBAAuB;EAEpC,KAAK,gBAAgB;CACvB;CAEA,yBAAiC,GAAU;EAGzC,MAAM,SAFO,EAAE,OACO,iBAAiB,EAAE,SAAS,KAAK,CACjC,CAAC,CAAC;EACxB,IAAI,QAAQ;GACV,OAAO,aAAa,iBAAiB,MAAM;GAC3C,OAAO,aAAa,iBAAiB,OAAO,KAAK,UAAU,CAAC;EAC9D;CACF;CAEA,0BAC0B;EACxB,MAAM,SAAS,KAAK,SAAS;EAC7B,IAAI,QACF,OAAO,aAAa,iBAAiB,OAAO,KAAK,UAAU,CAAC;CAEhE;CAEA,kBACkB;EAChB,MAAM,SAAS,KAAK,SAAS;EAC7B,IAAI,QAAQ;GACV,IAAI,KAAK,UACP,OAAO,aAAa,YAAY,MAAM;QAEtC,OAAO,aAAa,UAAU,KAAK,OAAO,gBAAgB,UAAU;EAExE;CACF;CAEA,SAAS;EACP,OAAO,IAAI;qCACsB,KAAK,aAAa;yCACd,IAAI,KAAK,UAAU,EAAE;6CACjB,KAAK,yBAAyB;;iDAE1B,IAAI,KAAK,OAAO,EAAE;sCAC7B,KAAK,iBAAiB;;;;CAI1D;AACF;AA1GG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,UAAA,KAAA,CAAA;AAIvD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,kBAAA,KAAA,CAAA;AAIvD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,QAAA,KAAA,CAAA;AAItD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,OAAO;AAAM,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAGtD,WAAA,CAAA,sBAAsB;CAAE,MAAM;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AA2DxD,WAAA,CAAA,MAAM,YAAY,CAAA,GAAA,aAAA,WAAA,2BAAA,IAAA;AAQlB,WAAA,CAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,mBAAA,IAAA"}

package/react/components/Input/sgds-input.cjs.js

@@ -185,6 +185,7 @@ var SgdsInput = class extends require_validatorMixin.SgdsFormValidatorMixin(requ
 		return lit_static_html_js.html`<sgds-icon
       tabIndex="0"
       role="button"
+      aria-label=${this._showPassword ? "Hide password" : "Show password"}
       name=${this._showPassword ? "eye-slash-fill" : "eye-fill"}
       @click=${() => this._showPassword = !this._showPassword}
     ></sgds-icon>`;

package/react/components/Input/sgds-input.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","classMap","nothing","ifDefined","live","property","defaultValue","state","watch"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,YAAb,cAA+BA,uBAAAA,uBAAuBC,6BAAAA,OAAkB,CAAC,CAA4B;;;EAiB5E,KAAA,OAAA;EAqBkC,KAAA,cAAA;EAMD,KAAA,YAAA;EAGD,KAAA,WAAA;EAGG,KAAA,eAAA;EAgB3C,KAAA,eAAA;EAGqC,KAAA,QAAA;EAGE,KAAA,UAAA;EAGC,KAAA,WAAA;EAGE,KAAA,aAAA;EAGpB,KAAA,QAAA;EAEL,KAAA,aAAA;EAEC,KAAA,gBAAA;;;EApFjB,KAAA,SAAA;GAAC,GAAGA,6BAAAA,QAAmB;GAAQC,0BAAAA;GAAuBC,yBAAAA;GAAuBC,cAAAA;EAAU;;;EAEjF,KAAA,eAAA;GACpB,gBAAgBC,qBAAAA;GAChB,aAAaC,kBAAAA;EACf;;;CAkFA,MAAa,SAAwB;EACnC,KAAK,MAAM,MAAM,OAAO;CAC1B;;CAEA,OAAc;EACZ,KAAK,MAAM,KAAK;CAClB;;;;;CAMA,iBAAiC;EAC/B,OAAO,KAAK,qBAAqB;CACnC;;;;CAIA,gBAAgC;EAC9B,OAAO,KAAK,oBAAoB;CAClC;;;;CAIA,YAAmB,OAA4B,SAAkB,QAA4B;EAC3F,OAAO,KAAK,kBAAkB,OAAO,SAAS,MAAM;CACtD;;;;CAKA,IAAW,WAA0B;EACnC,OAAO,KAAK,kBAAkB;CAChC;;;;CAIA,IAAW,oBAAoB;EAC7B,OAAO,KAAK,2BAA2B;CACzC;CAEA,eAAyB;EACvB,KAAK,KAAK,YAAY;CACxB;CAEA,cAAwB;EACtB,MAAM,WAAW,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAAC;EAC5D,IAAI,KAAK,+BAA+B,GAAG;EAC3C,IAAI,SAAS,kBAAkB;EAE/B,KAAK,WAAW,CAAC,KAAK,oBAAoB,CAAC;EAC3C,KAAK,aAAa;CACpB;CACA,eAAuB;EACrB,KAAK,MAAM;CACb;CAEA,cAAwB,GAAU;EAChC,KAAK,QAAQ,KAAK,MAAM;EAGxB,IAFmB,KAAK,KAAK,eAAe,EAAE,YAAY,KAAK,CAElD,CAAC,CAAC,kBAAkB;EAEjC,MAAM,mBAAmB,CAAC;CAC5B;CACA,mBAA6B,GAAU;EACrC,KAAK,QAAQ,KAAK,MAAM;EAGxB,IAFkB,KAAK,KAAK,cAAc,EAAE,YAAY,KAAK,CAEjD,CAAC,CAAC,kBAAkB;EAEhC,MAAM,wBAAwB,CAAC;CACjC;;CAEA,mBACmB;EACjB,IAAI,KAAK,+BAA+B,GAAG;EAC3C,IAAI,KAAK,YACP,KAAK,WAAW,CAAC,KAAK,oBAAoB,CAAC;CAE/C;CACA,wBACwB;EAEtB,KAAK,WAAW,KAAK;CACvB;CAEA,eAAyB;EACvB,MAAM,oBAAoB,KAAK,gBAAgB,UAAU,KAAK,gBAAgB;EAC9E,MAAM,mBAAmB,KAAK,gBAAgB,UAAU,KAAK,gBAAgB;EAC7E,MAAM,kBACJ,CACE,KAAK,WAAW,GAAG,KAAK,WAAW,QAAQ,IAC3C,KAAK,WAAW,mBAAmB,GAAG,KAAK,WAAW,YAAY,EACpE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;EAClB,OAAO,mBAAA,IAAI;;qCAEqBC,GAAAA,4BAAAA,SAAAA,CAAS;GACnC,UAAU,KAAK;GACf,UAAU,KAAK;GACf,cAAc,KAAK,WAAW;EAChC,CAAC,EAAE;iBACM,KAAK,aAAa;;;UAGzB,KAAK,SAAS,mBAAA,IAAI,qCAAqC,KAAK,OAAO,WAAWC,IAAAA,QAAQ;;;iBAG/E,KAAK,WAAW,EAAE;eACpB,KAAK,WAAW;kBACdC,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,IAAI,EAAE;yBACdA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,WAAW,EAAE;yBAC3B,KAAK,UAAU,SAAS,QAAQ;qBACrCA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,OAAO,EAAE;uBACrB,KAAK,UAAU;sBAChB,KAAK,SAAS;sBACd,KAAK,SAAS;sBACd,KAAK,SAAS;oBACjBC,GAAAA,uBAAAA,KAAAA,CAAK,KAAK,KAAK,EAAE;uBACdD,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,SAAS,EAAE;uBAC1BA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,SAAS,EAAE;iBAChCA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,GAAG,EAAE;iBACpBA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,GAAG,EAAE;kBACnBA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,IAAc,EAAE;oBAC5B,MAAa,KAAK,mBAAmB,CAAC,EAAE;qBACvC,MAAa,KAAK,cAAc,CAAC,EAAE;2BAC7B,KAAK,WAAW,IAAI,EAAE;mBAC9B,KAAK,aAAa;kBACnB,KAAK,YAAY;8BACNA,GAAAA,6BAAAA,UAAAA,CAAU,eAAe,EAAE;0BAC9B,KAAK,aAAa;;UAElC,KAAK,SAAS,aAAa,KAAK,sBAAsB,IAAID,IAAAA,QAAQ;UAClE,KAAK,SAAS,mBAAA,IAAI,qCAAqC,KAAK,OAAO,WAAWA,IAAAA,QAAQ;;YAEpF,KAAK,UAAU,mBAAA,IAAI,4CAA4CA,IAAAA,QAAQ;YACvE,KAAK,QAAQ,mBAAA,IAAI,wEAAwEA,IAAAA,QAAQ;;;;CAI3G;CACA,wBAAkC;EAChC,OAAO,mBAAA,IAAI;;;aAGF,KAAK,gBAAgB,mBAAmB,WAAW;qBAC1C,KAAK,gBAAgB,CAAC,KAAK,cAAe;;CAE9D;CACA,aAAuB;EACrB,IAAI,KAAK,SAAS,cAAc,KAAK,eACnC,OAAO;EAET,OAAO,KAAK;CACd;CACA,kBAA4B;EAC1B,MAAM,mBAAmB,KAAK,gBAAgB,UAAU,KAAK,gBAAgB;EAE7E,OAAO,KAAK,WAAW,mBACnB,mBAAA,IAAI;;qBAES,KAAK,WAAW;cACvB,KAAK,kBAAkB,KAAK,kBAAkB,KAAK,MAAM,kBAAkB;;kBAGjF,mBAAA,IAAI,GAAG,KAAK,gBAAgB;CAClC;CACA,eAAyB;EACvB,MAAM,gBAAgB,mBAAA,IAAI;;cAEhB,KAAK,WAAW;aACjB,KAAK,SAAS;iBACXD,GAAAA,4BAAAA,SAAAA,CAAS;GACf,cAAc;GACd,UAAU,KAAK;EACjB,CAAC,EAAE;WACA,KAAK,MAAM;;;EAGlB,OAAO,KAAK,SAAS;CACvB;CACA,kBAA4B;EAC1B,MAAM,mBAAmB,mBAAA,IAAI,aAAa,KAAK,WAAW,0BAA0B,KAAK,SAAS;EAClG,OAAO,KAAK,YAAY;CAC1B;CACA,SAAS;EACP,OAAO,mBAAA,IAAI;;yCAEyBA,GAAAA,4BAAAA,SAAAA,CAAS,EACvC,UAAU,KAAK,SACjB,CAAC,EAAE;;UAED,KAAK,aAAa,EAAE;;YAElB,KAAK,aAAa,EAAE;;;UAGtB,KAAK,gBAAgB,EAAE;;;CAG/B;AACF;AA3RGI,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAY1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,UAAA,WAAA,UAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,UAAA,WAAA,UAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,CAAA,GAAA,UAAA,WAAA,OAAA,KAAA,CAAA;AAGTA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,CAAA,GAAA,UAAA,WAAA,OAAA,KAAA,CAAA;AAGTA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,gBAAA,KAAA,CAAA;AAMxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAGTA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,mBAAA,KAAA,CAAA;AAGxCC,iBAAAA,QAAAA,CAAAA,qBAAAA,aAAa,CAAA,GAAA,UAAA,WAAA,gBAAA,KAAA,CAAA;AAIbD,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,cAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAE1BE,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,UAAA,WAAA,cAAA,KAAA,CAAA;AAENA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,UAAA,WAAA,iBAAA,KAAA,CAAA;AA6ENC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,cAAc,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,oBAAA,IAAA;AAOlDA,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,yBAAA,IAAA"}
+{"version":3,"file":"sgds-input.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","classMap","nothing","ifDefined","live","property","defaultValue","state","watch"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      aria-label=${this._showPassword ? \"Hide password\" : \"Show password\"}\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,YAAb,cAA+BA,uBAAAA,uBAAuBC,6BAAAA,OAAkB,CAAC,CAA4B;;;EAiB5E,KAAA,OAAA;EAqBkC,KAAA,cAAA;EAMD,KAAA,YAAA;EAGD,KAAA,WAAA;EAGG,KAAA,eAAA;EAgB3C,KAAA,eAAA;EAGqC,KAAA,QAAA;EAGE,KAAA,UAAA;EAGC,KAAA,WAAA;EAGE,KAAA,aAAA;EAGpB,KAAA,QAAA;EAEL,KAAA,aAAA;EAEC,KAAA,gBAAA;;;EApFjB,KAAA,SAAA;GAAC,GAAGA,6BAAAA,QAAmB;GAAQC,0BAAAA;GAAuBC,yBAAAA;GAAuBC,cAAAA;EAAU;;;EAEjF,KAAA,eAAA;GACpB,gBAAgBC,qBAAAA;GAChB,aAAaC,kBAAAA;EACf;;;CAkFA,MAAa,SAAwB;EACnC,KAAK,MAAM,MAAM,OAAO;CAC1B;;CAEA,OAAc;EACZ,KAAK,MAAM,KAAK;CAClB;;;;;CAMA,iBAAiC;EAC/B,OAAO,KAAK,qBAAqB;CACnC;;;;CAIA,gBAAgC;EAC9B,OAAO,KAAK,oBAAoB;CAClC;;;;CAIA,YAAmB,OAA4B,SAAkB,QAA4B;EAC3F,OAAO,KAAK,kBAAkB,OAAO,SAAS,MAAM;CACtD;;;;CAKA,IAAW,WAA0B;EACnC,OAAO,KAAK,kBAAkB;CAChC;;;;CAIA,IAAW,oBAAoB;EAC7B,OAAO,KAAK,2BAA2B;CACzC;CAEA,eAAyB;EACvB,KAAK,KAAK,YAAY;CACxB;CAEA,cAAwB;EACtB,MAAM,WAAW,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAAC;EAC5D,IAAI,KAAK,+BAA+B,GAAG;EAC3C,IAAI,SAAS,kBAAkB;EAE/B,KAAK,WAAW,CAAC,KAAK,oBAAoB,CAAC;EAC3C,KAAK,aAAa;CACpB;CACA,eAAuB;EACrB,KAAK,MAAM;CACb;CAEA,cAAwB,GAAU;EAChC,KAAK,QAAQ,KAAK,MAAM;EAGxB,IAFmB,KAAK,KAAK,eAAe,EAAE,YAAY,KAAK,CAElD,CAAC,CAAC,kBAAkB;EAEjC,MAAM,mBAAmB,CAAC;CAC5B;CACA,mBAA6B,GAAU;EACrC,KAAK,QAAQ,KAAK,MAAM;EAGxB,IAFkB,KAAK,KAAK,cAAc,EAAE,YAAY,KAAK,CAEjD,CAAC,CAAC,kBAAkB;EAEhC,MAAM,wBAAwB,CAAC;CACjC;;CAEA,mBACmB;EACjB,IAAI,KAAK,+BAA+B,GAAG;EAC3C,IAAI,KAAK,YACP,KAAK,WAAW,CAAC,KAAK,oBAAoB,CAAC;CAE/C;CACA,wBACwB;EAEtB,KAAK,WAAW,KAAK;CACvB;CAEA,eAAyB;EACvB,MAAM,oBAAoB,KAAK,gBAAgB,UAAU,KAAK,gBAAgB;EAC9E,MAAM,mBAAmB,KAAK,gBAAgB,UAAU,KAAK,gBAAgB;EAC7E,MAAM,kBACJ,CACE,KAAK,WAAW,GAAG,KAAK,WAAW,QAAQ,IAC3C,KAAK,WAAW,mBAAmB,GAAG,KAAK,WAAW,YAAY,EACpE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;EAClB,OAAO,mBAAA,IAAI;;qCAEqBC,GAAAA,4BAAAA,SAAAA,CAAS;GACnC,UAAU,KAAK;GACf,UAAU,KAAK;GACf,cAAc,KAAK,WAAW;EAChC,CAAC,EAAE;iBACM,KAAK,aAAa;;;UAGzB,KAAK,SAAS,mBAAA,IAAI,qCAAqC,KAAK,OAAO,WAAWC,IAAAA,QAAQ;;;iBAG/E,KAAK,WAAW,EAAE;eACpB,KAAK,WAAW;kBACdC,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,IAAI,EAAE;yBACdA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,WAAW,EAAE;yBAC3B,KAAK,UAAU,SAAS,QAAQ;qBACrCA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,OAAO,EAAE;uBACrB,KAAK,UAAU;sBAChB,KAAK,SAAS;sBACd,KAAK,SAAS;sBACd,KAAK,SAAS;oBACjBC,GAAAA,uBAAAA,KAAAA,CAAK,KAAK,KAAK,EAAE;uBACdD,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,SAAS,EAAE;uBAC1BA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,SAAS,EAAE;iBAChCA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,GAAG,EAAE;iBACpBA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,GAAG,EAAE;kBACnBA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,IAAc,EAAE;oBAC5B,MAAa,KAAK,mBAAmB,CAAC,EAAE;qBACvC,MAAa,KAAK,cAAc,CAAC,EAAE;2BAC7B,KAAK,WAAW,IAAI,EAAE;mBAC9B,KAAK,aAAa;kBACnB,KAAK,YAAY;8BACNA,GAAAA,6BAAAA,UAAAA,CAAU,eAAe,EAAE;0BAC9B,KAAK,aAAa;;UAElC,KAAK,SAAS,aAAa,KAAK,sBAAsB,IAAID,IAAAA,QAAQ;UAClE,KAAK,SAAS,mBAAA,IAAI,qCAAqC,KAAK,OAAO,WAAWA,IAAAA,QAAQ;;YAEpF,KAAK,UAAU,mBAAA,IAAI,4CAA4CA,IAAAA,QAAQ;YACvE,KAAK,QAAQ,mBAAA,IAAI,wEAAwEA,IAAAA,QAAQ;;;;CAI3G;CACA,wBAAkC;EAChC,OAAO,mBAAA,IAAI;;;mBAGI,KAAK,gBAAgB,kBAAkB,gBAAgB;aAC7D,KAAK,gBAAgB,mBAAmB,WAAW;qBAC1C,KAAK,gBAAgB,CAAC,KAAK,cAAe;;CAE9D;CACA,aAAuB;EACrB,IAAI,KAAK,SAAS,cAAc,KAAK,eACnC,OAAO;EAET,OAAO,KAAK;CACd;CACA,kBAA4B;EAC1B,MAAM,mBAAmB,KAAK,gBAAgB,UAAU,KAAK,gBAAgB;EAE7E,OAAO,KAAK,WAAW,mBACnB,mBAAA,IAAI;;qBAES,KAAK,WAAW;cACvB,KAAK,kBAAkB,KAAK,kBAAkB,KAAK,MAAM,kBAAkB;;kBAGjF,mBAAA,IAAI,GAAG,KAAK,gBAAgB;CAClC;CACA,eAAyB;EACvB,MAAM,gBAAgB,mBAAA,IAAI;;cAEhB,KAAK,WAAW;aACjB,KAAK,SAAS;iBACXD,GAAAA,4BAAAA,SAAAA,CAAS;GACf,cAAc;GACd,UAAU,KAAK;EACjB,CAAC,EAAE;WACA,KAAK,MAAM;;;EAGlB,OAAO,KAAK,SAAS;CACvB;CACA,kBAA4B;EAC1B,MAAM,mBAAmB,mBAAA,IAAI,aAAa,KAAK,WAAW,0BAA0B,KAAK,SAAS;EAClG,OAAO,KAAK,YAAY;CAC1B;CACA,SAAS;EACP,OAAO,mBAAA,IAAI;;yCAEyBA,GAAAA,4BAAAA,SAAAA,CAAS,EACvC,UAAU,KAAK,SACjB,CAAC,EAAE;;UAED,KAAK,aAAa,EAAE;;YAElB,KAAK,aAAa,EAAE;;;UAGtB,KAAK,gBAAgB,EAAE;;;CAG/B;AACF;AA5RGI,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAY1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,UAAA,WAAA,UAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,UAAA,WAAA,UAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,CAAA,GAAA,UAAA,WAAA,OAAA,KAAA,CAAA;AAGTA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,CAAA,GAAA,UAAA,WAAA,OAAA,KAAA,CAAA;AAGTA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,gBAAA,KAAA,CAAA;AAMxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAGTA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,mBAAA,KAAA,CAAA;AAGxCC,iBAAAA,QAAAA,CAAAA,qBAAAA,aAAa,CAAA,GAAA,UAAA,WAAA,gBAAA,KAAA,CAAA;AAIbD,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,cAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAE1BE,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,UAAA,WAAA,cAAA,KAAA,CAAA;AAENA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,UAAA,WAAA,iBAAA,KAAA,CAAA;AA6ENC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,cAAc,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,oBAAA,IAAA;AAOlDA,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,yBAAA,IAAA"}

package/react/components/Input/sgds-input.js

@@ -185,6 +185,7 @@ var SgdsInput = class extends SgdsFormValidatorMixin(FormControlElement) {
 		return html$1`<sgds-icon
       tabIndex="0"
       role="button"
+      aria-label=${this._showPassword ? "Hide password" : "Show password"}
       name=${this._showPassword ? "eye-slash-fill" : "eye-fill"}
       @click=${() => this._showPassword = !this._showPassword}
     ></sgds-icon>`;

package/react/components/Input/sgds-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.js","names":["formTextControlStyles","formPlaceholderStyles","inputStyle"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-input.js","names":["formTextControlStyles","formPlaceholderStyles","inputStyle"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\n\n  /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      aria-label=${this._showPassword ? \"Hide password\" : \"Show password\"}\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}

package/react/components/Mainnav/sgds-mainnav.cjs.js

@@ -80,7 +80,7 @@ var SgdsMainnav = class extends require_nav_element.default {
 			xxl: 1440
 		}[this.expand]);
 		return lit.html`
-      <nav>
+      <nav aria-label="Main navigation">
         <div class="navbar ${this._expandClass()}">
           <a class="navbar-brand" href=${require_safeUrl.sanitizeHref(this.brandHref) ?? ""} aria-label="brand-link">
             <slot name="brand"></slot>

package/react/components/Mainnav/sgds-mainnav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.cjs.js","names":["NavElement","HasSlotController","mainnavStyle","sanitizeHref","classMap","provide","MainnavBreakpointContext","state","MainnavExpandedContext","property","queryAssignedElements"],"sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n  static styles = [...NavElement.styles, mainnavStyle];\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\");\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n    // Sync expanded state to context\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div class=\"navbar-end\">\n            <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n            ${this._renderToggler()}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsMainnav;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.cjs.js","names":["NavElement","HasSlotController","mainnavStyle","sanitizeHref","classMap","provide","MainnavBreakpointContext","state","MainnavExpandedContext","property","queryAssignedElements"],"sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n  static styles = [...NavElement.styles, mainnavStyle];\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\");\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n    // Sync expanded state to context\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"Main navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div class=\"navbar-end\">\n            <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n            ${this._renderToggler()}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsMainnav;\n"],"mappings":"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"}

package/react/components/Mainnav/sgds-mainnav.js

@@ -80,7 +80,7 @@ var SgdsMainnav = class extends NavElement {
 			xxl: 1440
 		}[this.expand]);
 		return html`
-      <nav>
+      <nav aria-label="Main navigation">
         <div class="navbar ${this._expandClass()}">
           <a class="navbar-brand" href=${sanitizeHref(this.brandHref) ?? ""} aria-label="brand-link">
             <slot name="brand"></slot>

package/react/components/Mainnav/sgds-mainnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.js","names":["mainnavStyle"],"sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n  static styles = [...NavElement.styles, mainnavStyle];\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\");\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n    // Sync expanded state to context\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div class=\"navbar-end\">\n            <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n            ${this._renderToggler()}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsMainnav;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,cAAb,cAAiC,WAAW;;;EAKb,KAAA,qBAAA;EAKT,KAAA,YAAA;EAGiC,KAAA,wBAAA;EAI7C,KAAA,QAAA;EAoB6B,KAAA,oBAAA,IAAI,kBAAkB,MAAM,iBAAiB;;;EApClE,KAAA,SAAA,CAAC,GAAG,WAAW,QAAQA,QAAY;;;CAuBnD,IAAI,mBAA8D;EAChE,OAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGzG;;CAGA,IAAI,eAA0D;EAC5D,OAAO,CAAC,GAAI,KAAK,YAAY,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGrG;CAIA,UAAU;EACR,IAAI,CAAC,KAAK,uBAAuB,KAAK,wBAAwB,KAAK,kBAAkB,KAAK,iBAAiB;EAE3G,KAAK,YAAY,KAAK;CACxB;CAEA,qBAA+B,SAAwB;EACrD,KAAK,qBAAqB;CAC5B;CAEA,uBAA0C;EACxC,OAAO,KAAK;CACd;CAEA,yBAAiC,GAAU;EAEzC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,kBAA0B,GAAU;EAElC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,MAAK;GACzB,EAAE,aAAa,QAAQ,EAAE,QAAQ,YAAY,CAAC;GAC9C,EAAE,aAAa,UAAU,KAAK,MAAM;EACtC,CAAC;CACH;CAEA,yBAAiC,GAAU;EAEzC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,SAAS;EACP,KAAK,oBACH,OAAO,cACN,KAAK,WAAW,WACb,KACA,KAAK,WAAW,UAChB,WACA;GAAE,IAAI;GAAK,IAAI;GAAK,IAAI;GAAM,IAAI;GAAM,KAAK;EAAK,EAAE,KAAK;EAE/D,OAAO,IAAI;;6BAEc,KAAK,aAAa,EAAE;yCACR,aAAa,KAAK,SAAS,KAAK,GAAG;;;wDAGpB,KAAK,WAAW;;kCAEtC,KAAK,yBAAyB;;;wBAGxC,SAAS,EAAE,YAAY,CAAC,KAAK,kBAAkB,CAAC,EAAE;8BAC5C,KAAK,kBAAkB;;;;;iDAKJ,SAAS,EAAE,cAAc,CAAC,KAAK,sBAAsB,CAAC,EAAE;+CAC1D,KAAK,yBAAyB;cAC/D,KAAK,eAAe,EAAE;;;;;CAKlC;AACF;AA1GG,WAAA,CAAA,QAAQ,EAAE,SAAS,yBAAyB,CAAC,GAC7C,MAAM,CAAA,GAAA,YAAA,WAAA,sBAAA,KAAA,CAAA;AAGN,WAAA,CAAA,QAAQ,EAAE,SAAS,uBAAuB,CAAC,GAC3C,MAAM,CAAA,GAAA,YAAA,WAAA,aAAA,KAAA,CAAA;AAKN,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,YAAA,WAAA,yBAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,SAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,sBAAsB,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA;AAEtB,WAAA,CAAA,sBAAsB,EAAE,MAAM,MAAM,CAAC,CAAA,GAAA,YAAA,WAAA,YAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-mainnav.js","names":["mainnavStyle"],"sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n  static styles = [...NavElement.styles, mainnavStyle];\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\");\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n    // Sync expanded state to context\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"Main navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div class=\"navbar-end\">\n            <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n            ${this._renderToggler()}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsMainnav;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,cAAb,cAAiC,WAAW;;;EAKb,KAAA,qBAAA;EAKT,KAAA,YAAA;EAGiC,KAAA,wBAAA;EAI7C,KAAA,QAAA;EAoB6B,KAAA,oBAAA,IAAI,kBAAkB,MAAM,iBAAiB;;;EApClE,KAAA,SAAA,CAAC,GAAG,WAAW,QAAQA,QAAY;;;CAuBnD,IAAI,mBAA8D;EAChE,OAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGzG;;CAGA,IAAI,eAA0D;EAC5D,OAAO,CAAC,GAAI,KAAK,YAAY,CAAC,CAAE,CAAC,CAAC,QAAQ,SAAsB,OAAO,KAAK,YAAY,WAAW;CAGrG;CAIA,UAAU;EACR,IAAI,CAAC,KAAK,uBAAuB,KAAK,wBAAwB,KAAK,kBAAkB,KAAK,iBAAiB;EAE3G,KAAK,YAAY,KAAK;CACxB;CAEA,qBAA+B,SAAwB;EACrD,KAAK,qBAAqB;CAC5B;CAEA,uBAA0C;EACxC,OAAO,KAAK;CACd;CAEA,yBAAiC,GAAU;EAEzC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,kBAA0B,GAAU;EAElC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,MAAK;GACzB,EAAE,aAAa,QAAQ,EAAE,QAAQ,YAAY,CAAC;GAC9C,EAAE,aAAa,UAAU,KAAK,MAAM;EACtC,CAAC;CACH;CAEA,yBAAiC,GAAU;EAEzC,EADyB,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CACzE,CAAC,CAAC,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,SAAS;EACP,KAAK,oBACH,OAAO,cACN,KAAK,WAAW,WACb,KACA,KAAK,WAAW,UAChB,WACA;GAAE,IAAI;GAAK,IAAI;GAAK,IAAI;GAAM,IAAI;GAAM,KAAK;EAAK,EAAE,KAAK;EAE/D,OAAO,IAAI;;6BAEc,KAAK,aAAa,EAAE;yCACR,aAAa,KAAK,SAAS,KAAK,GAAG;;;wDAGpB,KAAK,WAAW;;kCAEtC,KAAK,yBAAyB;;;wBAGxC,SAAS,EAAE,YAAY,CAAC,KAAK,kBAAkB,CAAC,EAAE;8BAC5C,KAAK,kBAAkB;;;;;iDAKJ,SAAS,EAAE,cAAc,CAAC,KAAK,sBAAsB,CAAC,EAAE;+CAC1D,KAAK,yBAAyB;cAC/D,KAAK,eAAe,EAAE;;;;;CAKlC;AACF;AA1GG,WAAA,CAAA,QAAQ,EAAE,SAAS,yBAAyB,CAAC,GAC7C,MAAM,CAAA,GAAA,YAAA,WAAA,sBAAA,KAAA,CAAA;AAGN,WAAA,CAAA,QAAQ,EAAE,SAAS,uBAAuB,CAAC,GAC3C,MAAM,CAAA,GAAA,YAAA,WAAA,aAAA,KAAA,CAAA;AAKN,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,YAAA,WAAA,yBAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,SAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,sBAAsB,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA;AAEtB,WAAA,CAAA,sBAAsB,EAAE,MAAM,MAAM,CAAC,CAAA,GAAA,YAAA,WAAA,YAAA,KAAA,CAAA"}

package/react/components/Modal/modal.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Modal/modal.css
-var css_248z = require("lit").css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-lg)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-heading-sm)!important;gap:1rem;line-height:var(--sgds-line-height-lg)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-xs);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
+var css_248z = require("lit").css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-lg)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-heading-sm)!important;gap:1rem;line-height:var(--sgds-line-height-lg)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-xs);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Modal/modal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.cjs.js","names":[],"sources":["../../../../src/components/Modal/modal.css"],"sourcesContent":[":host(:not([size=\"fullscreen\"])) .modal-panel {\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-xl);\n  max-width: var(--sgds-dimension-640);\n}\n:host([size=\"sm\"]) .modal-panel {\n  max-width: var(--sgds-dimension-480);\n}\n\n:host([size=\"md\"]) .modal-panel {\n  max-width: var(--sgds-dimension-640);\n}\n\n:host([size=\"lg\"]) .modal-panel {\n  max-width: var(--sgds-dimension-800);\n}\n:host([size=\"xl\"]) .modal-panel {\n  max-width: var(--sgds-dimension-1280);\n}\n\n:host([size=\"fullscreen\"]) .modal-overlay {\n  background-color: var(--sgds-surface-default);\n}\n\n:host([size=\"fullscreen\"]) .modal-panel {\n  margin: var(--sgds-margin-xl) var(--sgds-margin-lg);\n}\n\n.modal {\n  display: flex;\n  justify-content: center;\n  align-items: start;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--sgds-z-index-modal);\n  font-family: var(--sgds-body-font-family);\n}\n\n.modal-panel {\n  width: 100%;\n  border-radius: var(--sgds-border-radius-md);\n  z-index: 2; /* shift above overlay  */\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xl);\n  margin: auto;\n  max-height: calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));\n}\n\n.modal-panel:focus {\n  outline: none;\n}\n\n.modal-content {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xl);\n  min-height: 0;\n  position: relative;\n}\n\n.modal-header__close {\n  position: absolute;\n  top: calc(-1 * var(--sgds-padding-md));\n  right: calc(-1 * var(--sgds-padding-md));\n}\n\n@media screen and (min-width: 512px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-xl);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-2-xl);\n    max-height: calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl));\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-4-xl) var(--sgds-margin-lg);\n    max-height: calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));\n    max-width: var(--sgds-dimension-888);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    max-width: var(--sgds-dimension-1168);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    max-width: var(--sgds-dimension-1312);\n  }\n}\n\n.modal.show .modal-panel {\n  opacity: 1;\n  transform: none;\n}\n\n.modal-header {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: var(--sgds-dimension-872);\n}\n\n.modal-header__title-description {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-sm);\n}\n\n:host([size=\"fullscreen\"]) .modal-header__title-description {\n  gap: var(--sgds-gap-md);\n}\n\nslot[name=\"title\"]::slotted(*) {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: 1rem;\n  margin: var(--sgds-margin-none) !important;\n  line-height: var(--sgds-line-height-lg) !important;\n  font-size: var(--sgds-font-size-heading-sm) !important;\n}\n\nslot[name=\"description\"]::slotted(*) {\n  margin: var(--sgds-margin-none) !important;\n  color: var(--sgds-color-subtle);\n  line-height: var(--sgds-line-height-xs);\n}\n\n.modal-body {\n  flex: 1 1 auto;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.modal-body slot::slotted(*) {\n  --sgds-paragraph-spacing-xl: var(--sgds-margin-none);\n}\n\n.modal-footer {\n  flex: 0 0 auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--sgds-gap-md);\n  padding-top: var(--sgds-padding-md);\n}\n\n.modal:not(.has-footer) .modal-footer {\n  display: none;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--sgds-bg-overlay);\n}\n\n[hidden] {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"modal.cjs.js","names":[],"sources":["../../../../src/components/Modal/modal.css"],"sourcesContent":[":host(:not([size=\"fullscreen\"])) .modal-panel {\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-xl);\n  max-width: var(--sgds-dimension-640);\n}\n:host([size=\"sm\"]) .modal-panel {\n  max-width: var(--sgds-dimension-480);\n}\n\n:host([size=\"md\"]) .modal-panel {\n  max-width: var(--sgds-dimension-640);\n}\n\n:host([size=\"lg\"]) .modal-panel {\n  max-width: var(--sgds-dimension-800);\n}\n:host([size=\"xl\"]) .modal-panel {\n  max-width: var(--sgds-dimension-1280);\n}\n\n:host([size=\"fullscreen\"]) .modal-overlay {\n  background-color: var(--sgds-surface-default);\n}\n\n:host([size=\"fullscreen\"]) .modal-panel {\n  margin: var(--sgds-margin-xl) var(--sgds-margin-lg);\n}\n\n.modal {\n  display: flex;\n  justify-content: center;\n  align-items: start;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--sgds-z-index-modal);\n  font-family: var(--sgds-body-font-family);\n}\n\n.modal-panel {\n  width: 100%;\n  border-radius: var(--sgds-border-radius-md);\n  z-index: 2; /* shift above overlay  */\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xl);\n  margin: auto;\n  max-height: calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));\n}\n\n.modal-panel:focus {\n  outline: none;\n}\n\n.modal-content {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xl);\n  min-height: 0;\n  position: relative;\n}\n\n.modal-header__close {\n  position: absolute;\n  top: calc(-1 * var(--sgds-padding-md));\n  right: calc(-1 * var(--sgds-padding-md));\n}\n\n@media screen and (min-width: 512px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-xl);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-2-xl);\n    max-height: calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl));\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-4-xl) var(--sgds-margin-lg);\n    max-height: calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));\n    max-width: var(--sgds-dimension-888);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    max-width: var(--sgds-dimension-1168);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    max-width: var(--sgds-dimension-1312);\n  }\n}\n\n.modal.show .modal-panel {\n  opacity: 1;\n  transform: none;\n}\n\n.modal-header {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: var(--sgds-dimension-872);\n}\n\n.modal-header__title-description {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-sm);\n}\n\n:host([size=\"fullscreen\"]) .modal-header__title-description {\n  gap: var(--sgds-gap-md);\n}\n\nslot[name=\"title\"]::slotted(*) {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: 1rem;\n  margin: var(--sgds-margin-none) !important;\n  line-height: var(--sgds-line-height-lg) !important;\n  font-size: var(--sgds-font-size-heading-sm) !important;\n}\n\nslot[name=\"description\"]::slotted(*) {\n  margin: var(--sgds-margin-none) !important;\n  color: var(--sgds-color-subtle);\n  line-height: var(--sgds-line-height-xs);\n}\n\n.modal-body {\n  flex: 1 1 auto;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.modal-body:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.modal-body slot::slotted(*) {\n  --sgds-paragraph-spacing-xl: var(--sgds-margin-none);\n}\n\n.modal-footer {\n  flex: 0 0 auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--sgds-gap-md);\n  padding-top: var(--sgds-padding-md);\n}\n\n.modal:not(.has-footer) .modal-footer {\n  display: none;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--sgds-bg-overlay);\n}\n\n[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/react/components/Modal/modal.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Modal/modal.css
-var css_248z = css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-lg)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-heading-sm)!important;gap:1rem;line-height:var(--sgds-line-height-lg)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-xs);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
+var css_248z = css`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-lg)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-heading-sm)!important;gap:1rem;line-height:var(--sgds-line-height-lg)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-xs);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":[],"sources":["../../../../src/components/Modal/modal.css"],"sourcesContent":[":host(:not([size=\"fullscreen\"])) .modal-panel {\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-xl);\n  max-width: var(--sgds-dimension-640);\n}\n:host([size=\"sm\"]) .modal-panel {\n  max-width: var(--sgds-dimension-480);\n}\n\n:host([size=\"md\"]) .modal-panel {\n  max-width: var(--sgds-dimension-640);\n}\n\n:host([size=\"lg\"]) .modal-panel {\n  max-width: var(--sgds-dimension-800);\n}\n:host([size=\"xl\"]) .modal-panel {\n  max-width: var(--sgds-dimension-1280);\n}\n\n:host([size=\"fullscreen\"]) .modal-overlay {\n  background-color: var(--sgds-surface-default);\n}\n\n:host([size=\"fullscreen\"]) .modal-panel {\n  margin: var(--sgds-margin-xl) var(--sgds-margin-lg);\n}\n\n.modal {\n  display: flex;\n  justify-content: center;\n  align-items: start;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--sgds-z-index-modal);\n  font-family: var(--sgds-body-font-family);\n}\n\n.modal-panel {\n  width: 100%;\n  border-radius: var(--sgds-border-radius-md);\n  z-index: 2; /* shift above overlay  */\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xl);\n  margin: auto;\n  max-height: calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));\n}\n\n.modal-panel:focus {\n  outline: none;\n}\n\n.modal-content {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xl);\n  min-height: 0;\n  position: relative;\n}\n\n.modal-header__close {\n  position: absolute;\n  top: calc(-1 * var(--sgds-padding-md));\n  right: calc(-1 * var(--sgds-padding-md));\n}\n\n@media screen and (min-width: 512px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-xl);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-2-xl);\n    max-height: calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl));\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-4-xl) var(--sgds-margin-lg);\n    max-height: calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));\n    max-width: var(--sgds-dimension-888);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    max-width: var(--sgds-dimension-1168);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    max-width: var(--sgds-dimension-1312);\n  }\n}\n\n.modal.show .modal-panel {\n  opacity: 1;\n  transform: none;\n}\n\n.modal-header {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: var(--sgds-dimension-872);\n}\n\n.modal-header__title-description {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-sm);\n}\n\n:host([size=\"fullscreen\"]) .modal-header__title-description {\n  gap: var(--sgds-gap-md);\n}\n\nslot[name=\"title\"]::slotted(*) {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: 1rem;\n  margin: var(--sgds-margin-none) !important;\n  line-height: var(--sgds-line-height-lg) !important;\n  font-size: var(--sgds-font-size-heading-sm) !important;\n}\n\nslot[name=\"description\"]::slotted(*) {\n  margin: var(--sgds-margin-none) !important;\n  color: var(--sgds-color-subtle);\n  line-height: var(--sgds-line-height-xs);\n}\n\n.modal-body {\n  flex: 1 1 auto;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.modal-body slot::slotted(*) {\n  --sgds-paragraph-spacing-xl: var(--sgds-margin-none);\n}\n\n.modal-footer {\n  flex: 0 0 auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--sgds-gap-md);\n  padding-top: var(--sgds-padding-md);\n}\n\n.modal:not(.has-footer) .modal-footer {\n  display: none;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--sgds-bg-overlay);\n}\n\n[hidden] {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"modal.js","names":[],"sources":["../../../../src/components/Modal/modal.css"],"sourcesContent":[":host(:not([size=\"fullscreen\"])) .modal-panel {\n  background-color: var(--sgds-surface-default);\n  padding: var(--sgds-padding-xl);\n  max-width: var(--sgds-dimension-640);\n}\n:host([size=\"sm\"]) .modal-panel {\n  max-width: var(--sgds-dimension-480);\n}\n\n:host([size=\"md\"]) .modal-panel {\n  max-width: var(--sgds-dimension-640);\n}\n\n:host([size=\"lg\"]) .modal-panel {\n  max-width: var(--sgds-dimension-800);\n}\n:host([size=\"xl\"]) .modal-panel {\n  max-width: var(--sgds-dimension-1280);\n}\n\n:host([size=\"fullscreen\"]) .modal-overlay {\n  background-color: var(--sgds-surface-default);\n}\n\n:host([size=\"fullscreen\"]) .modal-panel {\n  margin: var(--sgds-margin-xl) var(--sgds-margin-lg);\n}\n\n.modal {\n  display: flex;\n  justify-content: center;\n  align-items: start;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--sgds-z-index-modal);\n  font-family: var(--sgds-body-font-family);\n}\n\n.modal-panel {\n  width: 100%;\n  border-radius: var(--sgds-border-radius-md);\n  z-index: 2; /* shift above overlay  */\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xl);\n  margin: auto;\n  max-height: calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));\n}\n\n.modal-panel:focus {\n  outline: none;\n}\n\n.modal-content {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xl);\n  min-height: 0;\n  position: relative;\n}\n\n.modal-header__close {\n  position: absolute;\n  top: calc(-1 * var(--sgds-padding-md));\n  right: calc(-1 * var(--sgds-padding-md));\n}\n\n@media screen and (min-width: 512px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-xl);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-2-xl);\n    max-height: calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl));\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    margin: var(--sgds-margin-4-xl) var(--sgds-margin-lg);\n    max-height: calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));\n    max-width: var(--sgds-dimension-888);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    max-width: var(--sgds-dimension-1168);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([size=\"fullscreen\"]) .modal-panel {\n    max-width: var(--sgds-dimension-1312);\n  }\n}\n\n.modal.show .modal-panel {\n  opacity: 1;\n  transform: none;\n}\n\n.modal-header {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: var(--sgds-dimension-872);\n}\n\n.modal-header__title-description {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-sm);\n}\n\n:host([size=\"fullscreen\"]) .modal-header__title-description {\n  gap: var(--sgds-gap-md);\n}\n\nslot[name=\"title\"]::slotted(*) {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: 1rem;\n  margin: var(--sgds-margin-none) !important;\n  line-height: var(--sgds-line-height-lg) !important;\n  font-size: var(--sgds-font-size-heading-sm) !important;\n}\n\nslot[name=\"description\"]::slotted(*) {\n  margin: var(--sgds-margin-none) !important;\n  color: var(--sgds-color-subtle);\n  line-height: var(--sgds-line-height-xs);\n}\n\n.modal-body {\n  flex: 1 1 auto;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.modal-body:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.modal-body slot::slotted(*) {\n  --sgds-paragraph-spacing-xl: var(--sgds-margin-none);\n}\n\n.modal-footer {\n  flex: 0 0 auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--sgds-gap-md);\n  padding-top: var(--sgds-padding-md);\n}\n\n.modal:not(.has-footer) .modal-footer {\n  display: none;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--sgds-bg-overlay);\n}\n\n[hidden] {\n  display: none;\n}\n"],"mappings":""}

package/react/components/Modal/sgds-modal.cjs.js

@@ -213,7 +213,7 @@ var SgdsModal = class extends require_sgds_element.default {
                 <slot name="description"></slot>
               </div>
             </div>
-            <div class="modal-body">
+            <div class="modal-body" tabindex="0">
               <slot></slot>
             </div>
           </div class="modal-content">

package/react/components/Modal/sgds-modal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-modal.cjs.js","names":["SgdsElement","HasSlotController","headerStyles","svgStyles","modalStyle","SgdsCloseButton","Modal","waitForEvent","getAnimation","stopAnimations","animateTo","classMap","nothing","query","property","watch","setDefaultAnimation"],"sources":["../../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key. This event is cancelable; use `event.preventDefault()` to prevent the modal from closing. `event.detail.source` indicates the trigger source: 'close-button', 'overlay', or 'keyboard'.\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\" = \"md\";\n\n  /** Used only for SSR to indicate the presence of the `footer` slot. */\n  @property({ type: Boolean }) hasFooterSlot = false;\n\n  /** Removes the close button in the modal header. */\n  @property({ type: Boolean, reflect: true }) noCloseButton = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  updated() {\n    if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth < SM_BREAKPOINT || (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the dialog */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n        ]));\n\n      this.emit(\"sgds-after-show\");\n\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n            this.overlay.hidden = true;\n          }),\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n            this.panel.hidden = true;\n          })\n        ]));\n\n      this.dialog.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      unlockBodyScrolling(this);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n\n      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasFooterSlot\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-content\">\n              ${\n                !this.noCloseButton\n                  ? html`<sgds-close-button\n                      class=\"modal-header__close\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                      aria-label=\"close modal\"\n                    ></sgds-close-button>`\n                  : nothing\n              }\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <div id=\"title\"><slot class=\"modal-title\" name=\"title\"></slot></div>\n                <slot name=\"description\"></slot>\n              </div>\n            </div>\n            <div class=\"modal-body\">\n              <slot></slot>\n            </div>\n          </div class=\"modal-content\">\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-modal.cjs.js","names":["SgdsElement","HasSlotController","headerStyles","svgStyles","modalStyle","SgdsCloseButton","Modal","waitForEvent","getAnimation","stopAnimations","animateTo","classMap","nothing","query","property","watch","setDefaultAnimation"],"sources":["../../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key. This event is cancelable; use `event.preventDefault()` to prevent the modal from closing. `event.detail.source` indicates the trigger source: 'close-button', 'overlay', or 'keyboard'.\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\" = \"md\";\n\n  /** Used only for SSR to indicate the presence of the `footer` slot. */\n  @property({ type: Boolean }) hasFooterSlot = false;\n\n  /** Removes the close button in the modal header. */\n  @property({ type: Boolean, reflect: true }) noCloseButton = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  updated() {\n    if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth < SM_BREAKPOINT || (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the dialog */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n        ]));\n\n      this.emit(\"sgds-after-show\");\n\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n            this.overlay.hidden = true;\n          }),\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n            this.panel.hidden = true;\n          })\n        ]));\n\n      this.dialog.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      unlockBodyScrolling(this);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n\n      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasFooterSlot\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-content\">\n              ${\n                !this.noCloseButton\n                  ? html`<sgds-close-button\n                      class=\"modal-header__close\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                      aria-label=\"close modal\"\n                    ></sgds-close-button>`\n                  : nothing\n              }\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <div id=\"title\"><slot class=\"modal-title\" name=\"title\"></slot></div>\n                <slot name=\"description\"></slot>\n              </div>\n            </div>\n            <div class=\"modal-body\" tabindex=\"0\">\n              <slot></slot>\n            </div>\n          </div class=\"modal-content\">\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,YAAb,cAA+BA,qBAAAA,QAAY;;;EAeJ,KAAA,oBAAA,IAAIC,aAAAA,kBAAkB,MAAM,QAAQ;EAQtB,KAAA,OAAA;EAGO,KAAA,cAAA;EAGoB,KAAA,OAAA;EAGjC,KAAA,gBAAA;EAGe,KAAA,gBAAA;;;EAlC5C,KAAA,SAAA;GAAC,GAAGD,qBAAAA,QAAY;GAAQE,qBAAAA;GAAcC,YAAAA;GAAWC,gBAAAA;EAAU;;;EAErD,KAAA,eAAA,EACpB,qBAAqBC,0BAAAA,gBACvB;;CAgCA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,KAAK,wBAAwB,KAAK,sBAAsB,KAAK,IAAI;EACjE,KAAK,QAAQ,IAAIC,cAAAA,QAAM,IAAI;EAC3B,KAAK,iBAAiB,KAAK,UAAU,KAAK,gBAAgB,KAAK,IAAI,GAAG,GAAG;CAC3E;CAEA,uBAAuB;EACrB,MAAM,qBAAqB;EAC3B,KAAK,sBAAsB;EAC3B,eAAA,oBAAoB,IAAI;CAC1B;CAEA,aAAa,mBAA2C;EACtD,MAAM,aAAa,iBAAiB;EACpC,KAAK,gBAAgB;EACrB,KAAK,OAAO,SAAS,CAAC,KAAK;EAE3B,IAAI,KAAK,MAAM;GACb,KAAK,iBAAiB;GACtB,KAAK,MAAM,SAAS;GACpB,eAAA,kBAAkB,IAAI;EACxB;CACF;CAEA,UAAU;EACR,IAAI,CAAC,KAAK,eAAe,KAAK,gBAAgB,KAAK,kBAAkB,KAAK,QAAQ;CACpF;CAEA,UAAkB,MAAgC,MAAc;EAC9D,IAAI;EACJ,QAAQ,GAAG,SAAgB;GACzB,aAAa,OAAO;GACpB,UAAU,OAAO,iBAAiB,KAAK,GAAG,IAAI,GAAG,IAAI;EACvD;CACF;;CAGA,kBAA0B;EAExB,MAAM,aADQ,KAAK,MAAM,sBACF,CAAC,CAAC;EACzB,MAAM,iBAAiB,KAAK,iBAAiB,4BAA4B;EAEzE,IAAI,CAAC,KAAK,OAAO;EAEjB,IAAI,eAAe,UAAU,GAAG;EAEhC,IAAI,aAAA,OAA+B,KAAK,SAAS,gBAAgB,aAAA,KAC/D,eAAe,SAAQ,kBAAiB;GACtC,MAAM,SAAS;GACf,OAAO,YAAY;EACrB,CAAC;OAED,eAAe,SAAQ,kBAAiB;GACtC,MAAM,SAAS;GACf,OAAO,YAAY;EACrB,CAAC;CAEL;;CAGA,qBAA6B;EAC3B,OAAO,iBAAiB,UAAU,KAAK,cAAc;CACvD;;CAGA,wBAAgC;EAC9B,OAAO,oBAAoB,UAAU,KAAK,cAAc;CAC1D;;CAGA,MAAa,OAAO;EAClB,IAAI,KAAK,MACP;EAGF,KAAK,OAAO;EACZ,OAAOC,cAAAA,aAAa,MAAM,iBAAiB;CAC7C;;CAGA,MAAa,OAAO;EAClB,IAAI,CAAC,KAAK,MACR;EAGF,KAAK,OAAO;EACZ,OAAOA,cAAAA,aAAa,MAAM,iBAAiB;CAC7C;CAEA,aAAqB,QAAiD;EAMpE,IALyB,KAAK,KAAK,cAAc;GAC/C,YAAY;GACZ,QAAQ,EAAE,OAAO;EACnB,CAEmB,CAAC,CAAC,kBAAkB;GACrC,MAAM,YAAYC,2BAAAA,aAAa,MAAM,iBAAiB;GACtD,gBAAA,UAAU,KAAK,OAAO,UAAU,SAAS;GACzC;EACF;EAEA,KAAK,KAAK;CACZ;CAEA,mBAAmB;EACjB,SAAS,iBAAiB,WAAW,KAAK,qBAAqB;CACjE;CAEA,sBAAsB;EACpB,SAAS,oBAAoB,WAAW,KAAK,qBAAqB;CACpE;CAEA,sBAAsB,OAAsB;EAC1C,IAAI,KAAK,QAAQ,MAAM,QAAQ,UAAU;GACvC,MAAM,gBAAgB;GACtB,KAAK,aAAa,UAAU;EAC9B;CACF;CAEA,uBAA+B;EAC7B,IAAI,KAAK,SAAS,cAChB;EAGF,KAAK,aAAa,SAAS;CAC7B;CAEA,MACM,mBAAmB;EACvB,IAAI,KAAK,MAAM;GAEb,KAAK,KAAK,WAAW;GACrB,KAAK,iBAAiB;GACtB,KAAK,kBAAkB,SAAS;GAChC,KAAK,MAAM,SAAS;GAEpB,eAAA,kBAAkB,IAAI;GAEtB,MAAM,QAAQ,IAAI,CAACC,gBAAAA,eAAe,KAAK,MAAM,GAAGA,gBAAAA,eAAe,KAAK,OAAO,CAAC,CAAC;GAC7E,KAAK,OAAO,SAAS;GAErB,MAAM,iBAAiBD,2BAAAA,aAAa,MAAM,YAAY;GACtD,MAAM,mBAAmBA,2BAAAA,aAAa,MAAM,oBAAoB;GAChE,CAAC,KAAK,eACH,MAAM,QAAQ,IAAI,CACjBE,gBAAAA,UAAU,KAAK,OAAO,eAAe,WAAW,eAAe,OAAO,GACtEA,gBAAAA,UAAU,KAAK,SAAS,iBAAiB,WAAW,iBAAiB,OAAO,CAC9E,CAAC;GAEH,KAAK,KAAK,iBAAiB;GAG3B,KAAK,QAAQ,MAAM;GAGnB,KAAK,mBAAmB;EAC1B,OAAO;GAEL,KAAK,KAAK,WAAW;GACrB,KAAK,oBAAoB;GACzB,KAAK,MAAM,WAAW;GAEtB,MAAM,QAAQ,IAAI,CAACD,gBAAAA,eAAe,KAAK,MAAM,GAAGA,gBAAAA,eAAe,KAAK,OAAO,CAAC,CAAC;GAC7E,MAAM,iBAAiBD,2BAAAA,aAAa,MAAM,YAAY;GACtD,MAAM,mBAAmBA,2BAAAA,aAAa,MAAM,oBAAoB;GAKhE,CAAC,KAAK,eACH,MAAM,QAAQ,IAAI,CACjBE,gBAAAA,UAAU,KAAK,SAAS,iBAAiB,WAAW,iBAAiB,OAAO,CAAC,CAAC,WAAW;IACvF,KAAK,QAAQ,SAAS;GACxB,CAAC,GACDA,gBAAAA,UAAU,KAAK,OAAO,eAAe,WAAW,eAAe,OAAO,CAAC,CAAC,WAAW;IACjF,KAAK,MAAM,SAAS;GACtB,CAAC,CACH,CAAC;GAEH,KAAK,OAAO,SAAS;GAGrB,KAAK,QAAQ,SAAS;GACtB,KAAK,MAAM,SAAS;GAEpB,eAAA,oBAAoB,IAAI;GAGxB,MAAM,UAAU,KAAK;GACrB,IAAI,OAAO,SAAS,UAAU,YAC5B,iBAAiB,QAAQ,MAAM,CAAC;GAGlC,KAAK,KAAK,iBAAiB;GAG3B,KAAK,sBAAsB;EAC7B;CACF;CAEA,SAAS;EACP,OAAO,IAAA,IAAI;;iBAECC,GAAAA,4BAAAA,SAAAA,CAAS;GACf,OAAO;GACP,MAAM,KAAK;GACX,cAAc,KAAK;EACrB,CAAC,EAAE;;4CAEiC,KAAK,qBAAqB;;;;;;wBAM9C,KAAK,OAAO,UAAU,OAAO;;;;;gBAMrC,CAAC,KAAK,gBACF,IAAA,IAAI;;sCAEc,KAAK,aAAa,cAAc,EAAE;;6CAGpDC,IAAAA,QACL;;;;;;;;;;;;;;;;;CAiBb;AACF;AArRGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,QAAQ,CAAA,GAAA,UAAA,WAAA,UAAA,KAAA,CAAA;AAEdA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,cAAc,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAEpBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,gBAAgB,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAEtBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,cAAc,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAUpBC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,UAAA,WAAA,iBAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,iBAAA,KAAA,CAAA;AAkIzCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,oBAAA,IAAA;AAyH/CC,2BAAAA,oBAAoB,cAAc;CAChC,WAAW,CACT;EAAE,SAAS;EAAG,WAAW;CAA+B,GACxD;EAAE,SAAS;EAAG,WAAW;CAA4B,CACvD;CACA,SAAS;EAAE,UAAU;EAAK,QAAQ;CAAO;AAC3C,CAAC;AAEDA,2BAAAA,oBAAoB,cAAc;CAChC,WAAW,CACT;EAAE,SAAS;EAAG,WAAW;CAA2B,GACpD;EAAE,SAAS;EAAG,WAAW;CAA+B,CAC1D;CACA,SAAS;EAAE,UAAU;EAAK,QAAQ;CAAO;AAC3C,CAAC;AAEDA,2BAAAA,oBAAoB,mBAAmB;CACrC,WAAW;EAAC,EAAE,WAAW,WAAW;EAAG,EAAE,WAAW,cAAc;EAAG,EAAE,WAAW,WAAW;CAAC;CAC9F,SAAS,EAAE,UAAU,IAAI;AAC3B,CAAC;AAEDA,2BAAAA,oBAAoB,sBAAsB;CACxC,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC;CAC1C,SAAS,EAAE,UAAU,IAAI;AAC3B,CAAC;AAEDA,2BAAAA,oBAAoB,sBAAsB;CACxC,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC;CAC1C,SAAS,EAAE,UAAU,IAAI;AAC3B,CAAC"}

package/react/components/Modal/sgds-modal.js

@@ -213,7 +213,7 @@ var SgdsModal = class extends SgdsElement {
                 <slot name="description"></slot>
               </div>
             </div>
-            <div class="modal-body">
+            <div class="modal-body" tabindex="0">
               <slot></slot>
             </div>
           </div class="modal-content">