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

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-modal.js","names":["headerStyles","svgStyles","modalStyle"],"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.js","names":["headerStyles","svgStyles","modalStyle"],"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":"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"}

package/react/components/Select/sgds-select.cjs.js

@@ -53,7 +53,7 @@ var SgdsSelect = class SgdsSelect extends require_select_element.SelectElement {
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener("sgds-hide", async () => {
-			(await this._input).focus();
+			(await this._input).focus({ preventScroll: true });
 		});
 	}
 	async firstUpdated(changedProperties) {

package/react/components/Select/sgds-select.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-select.cjs.js","names":["SelectElement","formTextControlStyles","selectStyle","SgdsIcon","SgdsSpinner","SgdsSelectOption","ref","classMap","ifDefined","nothing","property","queryAssignedElements","watch"],"sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the select's invalid state is set to true.\n * @event sgds-valid - Emitted when the select's invalid state is set to false.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  /** Disables native and sgds validation for the select. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: Event) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    // If value was set before options slotted (e.g. React sets value prop\n    // before children mount), sync the display now that options are available.\n    if (this.value) {\n      this._updateDisplayValue();\n      this._setActiveToOption();\n    }\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialSelectedItem.length === 0) return;\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value?.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // Guard: if options haven't slotted yet, menuList is empty.\n    // _handleSlotChange will sync the display once options are available.\n    if (this.menuList.length === 0) return;\n\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\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        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,aAAb,MAAa,mBAAmBA,uBAAAA,cAAc;;;EAUa,KAAA,aAAA;EA2H3B,KAAA,sBAAA,MAAqB;GACjD,IAAI,EAAE,QAAQ,OACZ,EAAE,eAAe;EAErB;;;EAxIgB,KAAA,SAAA;GAAC,GAAGA,uBAAAA,cAAc;GAAQC,0BAAAA;GAAuBC,eAAAA;EAAW;;;EACzD,KAAA,YAAA;;;EAEG,KAAA,eAAA;GACpB,aAAaC,kBAAAA;GACb,gBAAgBC,qBAAAA;IACf,WAAW,YAAYC,2BAAAA;EAC1B;;CAIA,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,iBAAiB,aAAa,YAAY;GAE7C,CAAA,MADwB,KAAK,OAAA,CACnB,MAAM;EAClB,CAAC;CACH;CAIA,MAAM,aAAa,mBAA2C;EAC5D,MAAM,aAAa,iBAAiB;EACpC,KAAK,oBAAoB;EACzB,KAAK,QAAQ,MAAM,KAAK;EACxB,KAAK,eAAe,KAAK,KAAK;EAC9B,IAAI,KAAK,YACP,MAAM,KAAK,uBAAuB;CAEtC;CAEA,MAAc,kBAAkB,GAAU;EACxC,MAAM,mBAAoB,EAAE,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC;EAEzF,iBAAiB,SAAQ,OACvB,GAAG,iBAAiB,UAAU,MAAa;GAEzC,IADe,EAAE,OACN,UAAU;GACrB,KAAK,oBAAoB,CAAC;EAC5B,CAAC,CACH;EACA,iBAAiB,SAAQ,OACvB,GAAG,iBAAiB,YAAY,MAAqB;GACnD,IAAI,EAAE,QAAQ,SACZ,KAAK,oBAAoB,CAAC;EAE9B,CAAC,CACH;EACA,KAAK,WAAW,MAAM,KAAK,wBAAwB,gBAAgB;EAGnE,IAAI,KAAK,OAAO;GACd,KAAK,oBAAoB;GACzB,KAAK,mBAAmB;EAC1B;EACA,KAAK,QAAQ,MAAM,KAAK;EACxB,KAAK,eAAe,KAAK,KAAK;CAChC;CACA,sBAA8B;EAC5B,IAAI,KAAK,SAAS,KAAK,SAAS,SAAS,GAAG;GAC1C,MAAM,sBAAsB,KAAK,SAAS,QAAQ,EAAE,YAAY,UAAU,KAAK,KAAK;GACpF,IAAI,oBAAoB,WAAW,GAAG;GACtC,KAAK,eAAe,oBAAoB,EAAE,CAAC;GAE3C,KAAK,mBAAmB;EAC1B;CACF;CACA,qBAA6B;EAC3B,MAAM,cAAc,KAAK,SAAS,WAAU,SAAQ,KAAK,OAAO,SAAS,MAAM,KAAK,KAAK;EACzF,KAAK,QAAQ,SAAS,QAAQ,UAAU;GACtC,OAAO,SAAS,UAAU;EAC5B,CAAC;CACH;CAEA,MACM,qBAAqB;EAGzB,IAAI,KAAK,SAAS,WAAW,GAAG;EAEhC,KAAK,mBAAmB;EAGxB,KAAK,KAAK,aAAa;EAEvB,IAAI,KAAK,OACP,KAAK,KAAK,aAAa;EAEzB,MAAM,YAAY,MAAM,KAAK;EAC7B,KAAK,mBAAmB;EACxB,KAAK,eAAe,SAAS;EAE7B,KAAK,oBAAoB;EACzB,IAAI,CAAC,KAAK,cAAc,KAAK,UAAU,IAAI;EAC3C,IAAI,KAAK,+BAA+B,GAAG;EAE3C,KAAK,UAAU,CAAC,KAAK,qBAAqB;CAC5C;CAEA,MAAgB,oBAAoB,GAAU;EAC5C,MAAM,SAAS,EAAE;EACjB,MAAM,YAAY,OAAO,aAAa,KAAK,KAAK;EAEhD,MAAM,YAAY;GAChB,OAAO;GACP,OAHoB,OAAO,aAAa,OAAO,KAAK;EAItD;EACA,KAAK,QAAQ,UAAU,MAAM,SAAS;EACtC,KAAK,eAAe,UAAU;EAC9B,KAAK,SAAS;CAChB;CAEA,eAAyB;EACvB,KAAK,KAAK,YAAY;CACxB;CAEA,MAAgB,iBAAiB,GAAU;EACzC,EAAE,eAAe;EACjB,KAAK,KAAK,WAAW;CACvB;;CAGA,MAAgB,yBAAyB;EACvC,KAAK,QAAQ,KAAK;EAClB,MAAM,cAAc,KAAK,SAAS,QAAQ,EAAE,YAAY,UAAU,KAAK,KAAK;EAC5E,IAAI,YAAY,UAAU,GACxB,KAAK,eAAe;OAEpB,KAAK,eAAe,YAAY,EAAE,CAAC;EAErC,KAAK,oBAAoB,MAAM,KAAK,MAAM;CAC5C;;CAOA,cAAwB;EACtB,MAAM,OAAO,KAAK,SAAS,KAAI,SAAQ;GACrC,MAAM,WAAW,KAAK,UAAU,KAAK;GACrC,OAAO,IAAA,IAAI;;oBAEG,SAAS;kBACX,KAAK,MAAM;sBACP,KAAK,SAAS;mBACjB,KAAK,WAAW,OAAO,KAAK,oBAAoB;sBAC7C,MAAqB;IAC/B,IAAI,EAAE,QAAQ,SACZ,KAAK,oBAAoB,CAAC;GAE9B,EAAE;;YAEA,KAAK,MAAM;;;EAGnB,CAAC;EACD,OAAO,KAAK,SAAS,WAAW,IAAI,KAAK,iBAAiB,IAAI;CAChE;CACA,eAAyB;EACvB,MAAM,oBAAoB,KAAK;EAC/B,OAAO,IAAA,IAAI;;WAELC,GAAAA,sBAAAA,IAAAA,CAAI,KAAK,UAAU,EAAE;qCACKC,GAAAA,4BAAAA,SAAAA,CAAS;GACnC,UAAU,KAAK;GACf,UAAU,KAAK;GACf,cAAc,KAAK,WAAW;EAChC,CAAC,EAAE;iBACM,KAAK,aAAa;;;;;eAKpB,KAAK,WAAW;kBACdC,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,IAAI,EAAE;yBACdA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,WAAW,EAAE;yBAC3B,KAAK,UAAU,SAAS,QAAQ;uBAClC,KAAK,UAAU;sBAChB,KAAK,SAAS;sBACd,KAAK,SAAS;sBACd,KAAK,SAAS;mBACjB,KAAK,aAAa;kBACnB,KAAK,iBAAiB;mBACrB,KAAK,aAAa;8BACRA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,WAAW,KAAK,cAAc,GAAG,KAAK,WAAW,YAAY,KAAA,CAAS,EAAE;6BACvF,KAAK,SAAS,GAAG,KAAK,WAAW,OAAO,KAAK,WAAW,KAAK,cAC5E,GAAG,KAAK,WAAW,YACnB,GAAG;qBACI,KAAK,mBAAmB;;;;;CAK3C;CAEA,SAAS;EACP,OAAO,IAAA,IAAI;;iBAECD,GAAAA,4BAAAA,SAAAA,CAAS;GACf,UAAU,KAAK;GACf,QAAQ;GACR,0BAA0B;GAC1B,eAAe;EACjB,CAAC,EAAE;;UAED,KAAK,aAAa,EAAE;;UAEpB,KAAK,aAAa,EAAE,GAAG,KAAK,gBAAgB,EAAE;;eAEzC,KAAK,eAAe;;;;uBAIZ,KAAK,SAAS,UAAU;aACnCD,GAAAA,sBAAAA,IAAAA,CAAI,KAAK,OAAO,EAAE;;sCAEOC,GAAAA,4BAAAA,SAAAA,CAAS,EAAE,cAAc,KAAK,QAAQ,CAAC,EAAE,eAAe,KAAK,kBAAkB;eACrG,KAAK,YAAY,EAAE;;YAEtB,KAAK,UAAU,KAAK,mBAAmB,IAAIE,IAAAA,QAAQ;;;;CAI7D;AACF;AAxNGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,cAAA,KAAA,CAAA;AASzCC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,sBAAAA,CAAsB;CAAE,SAAS;CAAM,UAAU;AAAqB,CAAC,CAAA,GAAA,WAAA,WAAA,WAAA,KAAA,CAAA;AAwDvEC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,WAAA,WAAA,sBAAA,IAAA"}
+{"version":3,"file":"sgds-select.cjs.js","names":["SelectElement","formTextControlStyles","selectStyle","SgdsIcon","SgdsSpinner","SgdsSelectOption","ref","classMap","ifDefined","nothing","property","queryAssignedElements","watch"],"sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the select's invalid state is set to true.\n * @event sgds-valid - Emitted when the select's invalid state is set to false.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  /** Disables native and sgds validation for the select. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus({ preventScroll: true });\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: Event) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    // If value was set before options slotted (e.g. React sets value prop\n    // before children mount), sync the display now that options are available.\n    if (this.value) {\n      this._updateDisplayValue();\n      this._setActiveToOption();\n    }\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialSelectedItem.length === 0) return;\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value?.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // Guard: if options haven't slotted yet, menuList is empty.\n    // _handleSlotChange will sync the display once options are available.\n    if (this.menuList.length === 0) return;\n\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\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        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"mappings":"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"}

package/react/components/Select/sgds-select.js

@@ -53,7 +53,7 @@ var SgdsSelect = class SgdsSelect extends SelectElement {
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener("sgds-hide", async () => {
-			(await this._input).focus();
+			(await this._input).focus({ preventScroll: true });
 		});
 	}
 	async firstUpdated(changedProperties) {

package/react/components/Select/sgds-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-select.js","names":["formTextControlStyles","selectStyle"],"sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the select's invalid state is set to true.\n * @event sgds-valid - Emitted when the select's invalid state is set to false.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  /** Disables native and sgds validation for the select. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: Event) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    // If value was set before options slotted (e.g. React sets value prop\n    // before children mount), sync the display now that options are available.\n    if (this.value) {\n      this._updateDisplayValue();\n      this._setActiveToOption();\n    }\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialSelectedItem.length === 0) return;\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value?.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // Guard: if options haven't slotted yet, menuList is empty.\n    // _handleSlotChange will sync the display once options are available.\n    if (this.menuList.length === 0) return;\n\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\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        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-select.js","names":["formTextControlStyles","selectStyle"],"sources":["../../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the select's invalid state is set to true.\n * @event sgds-valid - Emitted when the select's invalid state is set to false.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  /** Disables native and sgds validation for the select. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus({ preventScroll: true });\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: Event) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    // If value was set before options slotted (e.g. React sets value prop\n    // before children mount), sync the display now that options are available.\n    if (this.value) {\n      this._updateDisplayValue();\n      this._setActiveToOption();\n    }\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialSelectedItem.length === 0) return;\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value?.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // Guard: if options haven't slotted yet, menuList is empty.\n    // _handleSlotChange will sync the display once options are available.\n    if (this.menuList.length === 0) return;\n\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\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        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"mappings":"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"}

package/react/components/Sidenav/sgds-sidenav.cjs.js

@@ -34,7 +34,7 @@ var SgdsSidenav = class extends require_sgds_element.default {
 	}
 	render() {
 		return lit.html`
-      <nav class=${(0, lit_directives_class_map_js.classMap)({ sticky: this.sticky })}>
+      <nav aria-label="Side navigation" class=${(0, lit_directives_class_map_js.classMap)({ sticky: this.sticky })}>
         <div>
           <slot @click=${this.onToggle}></slot>
         </div>

package/react/components/Sidenav/sgds-sidenav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav.cjs.js","names":["SgdsElement","sidenavStyle","classMap","property","queryAssignedElements"],"sources":["../../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum three levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavStyle];\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private defaultNodes!: SgdsSidenavItem[];\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (event.defaultPrevented || isSidenavLink) {\n      // No toggling when the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n  }\n\n  render() {\n    return html`\n      <nav class=${classMap({ sticky: this.sticky })}>\n        <div>\n          <slot @click=${this.onToggle}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,IAAa,cAAb,cAAiCA,qBAAAA,QAAY;;;EAKlC,KAAA,SAAA;;;EAJO,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,gBAAAA,OAAY;;;CAWpD,IAAI,QAA2B;EAC7B,OAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,CAAC,CAAC,QACnC,SAAsB,OAAO,KAAK,YAAY,WACjD;CACF;CAEA,MAAM,SAAS,OAA6B;EAE1C,MAAM,gBADS,MAAM,OACQ,YAAY;EAGzC,IAAI,MAAM,oBAAoB,eAE5B;EAEF,MAAM,QAAQ,CAAC,GAAG,KAAK,KAAK;EAE5B,IAAI,SAAS,CAAC,MAAM,QAElB;CAEJ;CAEA,SAAS;EACP,OAAO,IAAA,IAAI;oBACIC,GAAAA,4BAAAA,SAAAA,CAAS,EAAE,QAAQ,KAAK,OAAO,CAAC,EAAE;;yBAE5B,KAAK,SAAS;;;;CAIrC;AACF;AAxCGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,WAAW;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,UAAA,KAAA,CAAA;AAI3CC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,sBAAAA,CAAsB,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-sidenav.cjs.js","names":["SgdsElement","sidenavStyle","classMap","property","queryAssignedElements"],"sources":["../../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum three levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavStyle];\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private defaultNodes!: SgdsSidenavItem[];\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (event.defaultPrevented || isSidenavLink) {\n      // No toggling when the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n  }\n\n  render() {\n    return html`\n      <nav aria-label=\"Side navigation\" class=${classMap({ sticky: this.sticky })}>\n        <div>\n          <slot @click=${this.onToggle}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,IAAa,cAAb,cAAiCA,qBAAAA,QAAY;;;EAKlC,KAAA,SAAA;;;EAJO,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,gBAAAA,OAAY;;;CAWpD,IAAI,QAA2B;EAC7B,OAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,CAAC,CAAC,QACnC,SAAsB,OAAO,KAAK,YAAY,WACjD;CACF;CAEA,MAAM,SAAS,OAA6B;EAE1C,MAAM,gBADS,MAAM,OACQ,YAAY;EAGzC,IAAI,MAAM,oBAAoB,eAE5B;EAEF,MAAM,QAAQ,CAAC,GAAG,KAAK,KAAK;EAE5B,IAAI,SAAS,CAAC,MAAM,QAElB;CAEJ;CAEA,SAAS;EACP,OAAO,IAAA,IAAI;iDACiCC,GAAAA,4BAAAA,SAAAA,CAAS,EAAE,QAAQ,KAAK,OAAO,CAAC,EAAE;;yBAEzD,KAAK,SAAS;;;;CAIrC;AACF;AAxCGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,WAAW;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,UAAA,KAAA,CAAA;AAI3CC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,sBAAAA,CAAsB,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA"}

package/react/components/Sidenav/sgds-sidenav.js

@@ -34,7 +34,7 @@ var SgdsSidenav = class extends SgdsElement {
 	}
 	render() {
 		return html`
-      <nav class=${classMap({ sticky: this.sticky })}>
+      <nav aria-label="Side navigation" class=${classMap({ sticky: this.sticky })}>
         <div>
           <slot @click=${this.onToggle}></slot>
         </div>

package/react/components/Sidenav/sgds-sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav.js","names":["sidenavStyle"],"sources":["../../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum three levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavStyle];\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private defaultNodes!: SgdsSidenavItem[];\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (event.defaultPrevented || isSidenavLink) {\n      // No toggling when the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n  }\n\n  render() {\n    return html`\n      <nav class=${classMap({ sticky: this.sticky })}>\n        <div>\n          <slot @click=${this.onToggle}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,IAAa,cAAb,cAAiC,YAAY;;;EAKlC,KAAA,SAAA;;;EAJO,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAY;;;CAWpD,IAAI,QAA2B;EAC7B,OAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,CAAC,CAAC,QACnC,SAAsB,OAAO,KAAK,YAAY,WACjD;CACF;CAEA,MAAM,SAAS,OAA6B;EAE1C,MAAM,gBADS,MAAM,OACQ,YAAY;EAGzC,IAAI,MAAM,oBAAoB,eAE5B;EAEF,MAAM,QAAQ,CAAC,GAAG,KAAK,KAAK;EAE5B,IAAI,SAAS,CAAC,MAAM,QAElB;CAEJ;CAEA,SAAS;EACP,OAAO,IAAI;mBACI,SAAS,EAAE,QAAQ,KAAK,OAAO,CAAC,EAAE;;yBAE5B,KAAK,SAAS;;;;CAIrC;AACF;AAxCG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,UAAA,KAAA,CAAA;AAI3C,WAAA,CAAA,sBAAsB,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-sidenav.js","names":["sidenavStyle"],"sources":["../../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum three levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavStyle];\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private defaultNodes!: SgdsSidenavItem[];\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (event.defaultPrevented || isSidenavLink) {\n      // No toggling when the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n  }\n\n  render() {\n    return html`\n      <nav aria-label=\"Side navigation\" class=${classMap({ sticky: this.sticky })}>\n        <div>\n          <slot @click=${this.onToggle}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,IAAa,cAAb,cAAiC,YAAY;;;EAKlC,KAAA,SAAA;;;EAJO,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAY;;;CAWpD,IAAI,QAA2B;EAC7B,OAAO,CAAC,GAAI,KAAK,gBAAgB,CAAC,CAAE,CAAC,CAAC,QACnC,SAAsB,OAAO,KAAK,YAAY,WACjD;CACF;CAEA,MAAM,SAAS,OAA6B;EAE1C,MAAM,gBADS,MAAM,OACQ,YAAY;EAGzC,IAAI,MAAM,oBAAoB,eAE5B;EAEF,MAAM,QAAQ,CAAC,GAAG,KAAK,KAAK;EAE5B,IAAI,SAAS,CAAC,MAAM,QAElB;CAEJ;CAEA,SAAS;EACP,OAAO,IAAI;gDACiC,SAAS,EAAE,QAAQ,KAAK,OAAO,CAAC,EAAE;;yBAEzD,KAAK,SAAS;;;;CAIrC;AACF;AAxCG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,UAAA,KAAA,CAAA;AAI3C,WAAA,CAAA,sBAAsB,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA"}

package/react/components/SystemBanner/sgds-system-banner.cjs.js

@@ -141,6 +141,7 @@ var SgdsSystemBanner = class extends require_sgds_element.default {
                   tone="fixed-light"
                   variant="ghost"
                   size="xs"
+                  ariaLabel="Previous"
                   @click=${this._prev}
                 ></sgds-icon-button>
                 <span>${this._currentIndex + 1}/${this.childCount}</span>
@@ -149,6 +150,7 @@ var SgdsSystemBanner = class extends require_sgds_element.default {
                   tone="fixed-light"
                   variant="ghost"
                   size="xs"
+                  ariaLabel="Next"
                   @click=${this._next}
                 ></sgds-icon-button>
               </div>` : lit.nothing}

package/react/components/SystemBanner/sgds-system-banner.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-system-banner.cjs.js","names":["SgdsElement","alertBannerStyles","SgdsCloseButton","SgdsIcon","SgdsIconButton","getAnimation","animateTo","classMap","nothing","property","provide","NoClampActionContext","queryAssignedElements","query","SystemBannerChildCountContext","state","watch","setDefaultAnimation"],"sources":["../../../../src/components/SystemBanner/sgds-system-banner.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { animateTo } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport alertBannerStyles from \"./system-banner.css\";\nimport SgdsSystemBannerItem from \"./sgds-system-banner-item\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { provide } from \"@lit/context\";\n\n/**\n * @summary The system banner component for displaying important messages to users at the application level.\n * Each banner can contain up to 5 banner items that cycle automatically every 5 seconds. Pagination appears when there are multiple items, allowing users to navigate between them. The banner can also be made dismissible with a close button.\n * `sgds-system-banner-item` is the subcomponent for `sgds-system-banner`. Each banner item represents a message in the system banner.\n *\n * @slot default - The slot to pass in `sgds-system-banner-item`\n *\n * @event sgds-show - Emitted when the banner has start to appear on screen\n * @event sgds-hide - Emitted when the banner is disappearing from the screen\n */\nexport class SgdsSystemBanner extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @provide({ context: NoClampActionContext })\n  /** When true, all its children SgdsSystemBannerItem's message will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true }) fluid = false;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  @queryAssignedElements({ flatten: true })\n  private bannerItem: SgdsSystemBannerItem[];\n\n  @query(\".banner\")\n  private banner: HTMLDivElement;\n\n  @provide({ context: SystemBannerChildCountContext })\n  @state()\n  private childCount: number;\n\n  @state() private _intervalId = null;\n\n  private _intervalTime = 5000;\n\n  @state() private _currentIndex = 0;\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>): void {\n    super.firstUpdated(changedProperties);\n    this.childCount = this.bannerItem.length;\n    if (!this.show) {\n      this.banner.classList.add(\"d-none\");\n    } else {\n      this.childCount > 1 && this._startAutoCycle();\n      this.addEventListener(\"mouseenter\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"mouseleave\", this._resumeAutoCycle.bind(this));\n\n      this.addEventListener(\"focus\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"blur\", this._resumeAutoCycle.bind(this));\n    }\n    this._updateActiveItem();\n\n    if (this.childCount > 5) {\n      console.warn(\"It is not recommended to have more than 5 <sgds-system-banner-item> elements.\");\n    }\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._stopAutoCycle();\n  }\n\n  /**@internal */\n  @watch(\"show\", { waitUntilFirstUpdate: true })\n  async _handleShowChange() {\n    if (this.show) {\n      this.childCount > 1 && this._startAutoCycle();\n      this.emit(\"sgds-show\");\n      this.banner.classList.remove(\"d-none\");\n    } else {\n      this._stopAutoCycle();\n      this.emit(\"sgds-hide\");\n      this.banner.classList.add(\"d-none\");\n    }\n  }\n\n  private _updateActiveItem() {\n    const items = this.bannerItem;\n    items.forEach((item, i) => {\n      if (i === this._currentIndex) {\n        item.setAttribute(\"active\", \"\");\n      } else {\n        item.removeAttribute(\"active\");\n      }\n    });\n  }\n  private _next() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex + 1) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"next\");\n    this._resetAutoCycle();\n  }\n\n  private _prev() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex - 1 + items.length) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"prev\");\n    this._resetAutoCycle();\n  }\n  private async _animateItem(item: SgdsSystemBannerItem, direction: \"next\" | \"prev\") {\n    // Cancel any existing animations before starting a new one\n    item.getAnimations().forEach(a => a.cancel());\n    // Start the slide-down animation\n    const bannerLoopMessage = getAnimation(this, `banner.item.${direction}`);\n    await animateTo(item, bannerLoopMessage.keyframes, bannerLoopMessage.options);\n  }\n  private _startAutoCycle() {\n    this._stopAutoCycle(); // avoid duplicates\n    this._intervalId = setInterval(() => this._next(), this._intervalTime);\n  }\n\n  private _stopAutoCycle() {\n    if (this._intervalId) {\n      clearInterval(this._intervalId);\n      this._intervalId = null;\n    }\n  }\n  private _resetAutoCycle() {\n    this._stopAutoCycle();\n    this._startAutoCycle();\n  }\n  private _pauseAutoCycle(): void {\n    this._stopAutoCycle();\n  }\n\n  private _resumeAutoCycle(): void {\n    if (this.show && this.childCount > 1) {\n      this._startAutoCycle();\n    }\n  }\n  render() {\n    return html`\n      <div class=\"banner-wrapper\">\n        <div\n          class=\"${classMap({\n            banner: true\n          })}\"\n          role=\"alert\"\n          aria-hidden=${this.show ? \"false\" : \"true\"}\n        >\n          <div class=\"content\">\n            <slot id=\"loop-slot\"></slot>\n          </div>\n          ${this.childCount > 1\n            ? html` <div class=\"pagination\">\n                <sgds-icon-button\n                  name=\"chevron-left\"\n                  tone=\"fixed-light\"\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  @click=${this._prev}\n                ></sgds-icon-button>\n                <span>${this._currentIndex + 1}/${this.childCount}</span>\n                <sgds-icon-button\n                  name=\"chevron-right\"\n                  tone=\"fixed-light\"\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  @click=${this._next}\n                ></sgds-icon-button>\n              </div>`\n            : nothing}\n          ${this.dismissible\n            ? html`\n                <sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=\"fixed-light\"\n                ></sgds-close-button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSystemBanner;\n\nsetDefaultAnimation(\"banner.item.next\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(-100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\nsetDefaultAnimation(\"banner.item.prev\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\n"],"mappings":"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"}
+{"version":3,"file":"sgds-system-banner.cjs.js","names":["SgdsElement","alertBannerStyles","SgdsCloseButton","SgdsIcon","SgdsIconButton","getAnimation","animateTo","classMap","nothing","property","provide","NoClampActionContext","queryAssignedElements","query","SystemBannerChildCountContext","state","watch","setDefaultAnimation"],"sources":["../../../../src/components/SystemBanner/sgds-system-banner.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { animateTo } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport alertBannerStyles from \"./system-banner.css\";\nimport SgdsSystemBannerItem from \"./sgds-system-banner-item\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { provide } from \"@lit/context\";\n\n/**\n * @summary The system banner component for displaying important messages to users at the application level.\n * Each banner can contain up to 5 banner items that cycle automatically every 5 seconds. Pagination appears when there are multiple items, allowing users to navigate between them. The banner can also be made dismissible with a close button.\n * `sgds-system-banner-item` is the subcomponent for `sgds-system-banner`. Each banner item represents a message in the system banner.\n *\n * @slot default - The slot to pass in `sgds-system-banner-item`\n *\n * @event sgds-show - Emitted when the banner has start to appear on screen\n * @event sgds-hide - Emitted when the banner is disappearing from the screen\n */\nexport class SgdsSystemBanner extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @provide({ context: NoClampActionContext })\n  /** When true, all its children SgdsSystemBannerItem's message will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true }) fluid = false;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  @queryAssignedElements({ flatten: true })\n  private bannerItem: SgdsSystemBannerItem[];\n\n  @query(\".banner\")\n  private banner: HTMLDivElement;\n\n  @provide({ context: SystemBannerChildCountContext })\n  @state()\n  private childCount: number;\n\n  @state() private _intervalId = null;\n\n  private _intervalTime = 5000;\n\n  @state() private _currentIndex = 0;\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>): void {\n    super.firstUpdated(changedProperties);\n    this.childCount = this.bannerItem.length;\n    if (!this.show) {\n      this.banner.classList.add(\"d-none\");\n    } else {\n      this.childCount > 1 && this._startAutoCycle();\n      this.addEventListener(\"mouseenter\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"mouseleave\", this._resumeAutoCycle.bind(this));\n\n      this.addEventListener(\"focus\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"blur\", this._resumeAutoCycle.bind(this));\n    }\n    this._updateActiveItem();\n\n    if (this.childCount > 5) {\n      console.warn(\"It is not recommended to have more than 5 <sgds-system-banner-item> elements.\");\n    }\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._stopAutoCycle();\n  }\n\n  /**@internal */\n  @watch(\"show\", { waitUntilFirstUpdate: true })\n  async _handleShowChange() {\n    if (this.show) {\n      this.childCount > 1 && this._startAutoCycle();\n      this.emit(\"sgds-show\");\n      this.banner.classList.remove(\"d-none\");\n    } else {\n      this._stopAutoCycle();\n      this.emit(\"sgds-hide\");\n      this.banner.classList.add(\"d-none\");\n    }\n  }\n\n  private _updateActiveItem() {\n    const items = this.bannerItem;\n    items.forEach((item, i) => {\n      if (i === this._currentIndex) {\n        item.setAttribute(\"active\", \"\");\n      } else {\n        item.removeAttribute(\"active\");\n      }\n    });\n  }\n  private _next() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex + 1) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"next\");\n    this._resetAutoCycle();\n  }\n\n  private _prev() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex - 1 + items.length) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"prev\");\n    this._resetAutoCycle();\n  }\n  private async _animateItem(item: SgdsSystemBannerItem, direction: \"next\" | \"prev\") {\n    // Cancel any existing animations before starting a new one\n    item.getAnimations().forEach(a => a.cancel());\n    // Start the slide-down animation\n    const bannerLoopMessage = getAnimation(this, `banner.item.${direction}`);\n    await animateTo(item, bannerLoopMessage.keyframes, bannerLoopMessage.options);\n  }\n  private _startAutoCycle() {\n    this._stopAutoCycle(); // avoid duplicates\n    this._intervalId = setInterval(() => this._next(), this._intervalTime);\n  }\n\n  private _stopAutoCycle() {\n    if (this._intervalId) {\n      clearInterval(this._intervalId);\n      this._intervalId = null;\n    }\n  }\n  private _resetAutoCycle() {\n    this._stopAutoCycle();\n    this._startAutoCycle();\n  }\n  private _pauseAutoCycle(): void {\n    this._stopAutoCycle();\n  }\n\n  private _resumeAutoCycle(): void {\n    if (this.show && this.childCount > 1) {\n      this._startAutoCycle();\n    }\n  }\n  render() {\n    return html`\n      <div class=\"banner-wrapper\">\n        <div\n          class=\"${classMap({\n            banner: true\n          })}\"\n          role=\"alert\"\n          aria-hidden=${this.show ? \"false\" : \"true\"}\n        >\n          <div class=\"content\">\n            <slot id=\"loop-slot\"></slot>\n          </div>\n          ${this.childCount > 1\n            ? html` <div class=\"pagination\">\n                <sgds-icon-button\n                  name=\"chevron-left\"\n                  tone=\"fixed-light\"\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  ariaLabel=\"Previous\"\n                  @click=${this._prev}\n                ></sgds-icon-button>\n                <span>${this._currentIndex + 1}/${this.childCount}</span>\n                <sgds-icon-button\n                  name=\"chevron-right\"\n                  tone=\"fixed-light\"\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  ariaLabel=\"Next\"\n                  @click=${this._next}\n                ></sgds-icon-button>\n              </div>`\n            : nothing}\n          ${this.dismissible\n            ? html`\n                <sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=\"fixed-light\"\n                ></sgds-close-button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSystemBanner;\n\nsetDefaultAnimation(\"banner.item.next\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(-100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\nsetDefaultAnimation(\"banner.item.prev\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\n"],"mappings":"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"}

package/react/components/SystemBanner/sgds-system-banner.js

@@ -141,6 +141,7 @@ var SgdsSystemBanner = class extends SgdsElement {
                   tone="fixed-light"
                   variant="ghost"
                   size="xs"
+                  ariaLabel="Previous"
                   @click=${this._prev}
                 ></sgds-icon-button>
                 <span>${this._currentIndex + 1}/${this.childCount}</span>
@@ -149,6 +150,7 @@ var SgdsSystemBanner = class extends SgdsElement {
                   tone="fixed-light"
                   variant="ghost"
                   size="xs"
+                  ariaLabel="Next"
                   @click=${this._next}
                 ></sgds-icon-button>
               </div>` : nothing}

package/react/components/SystemBanner/sgds-system-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-system-banner.js","names":["alertBannerStyles"],"sources":["../../../../src/components/SystemBanner/sgds-system-banner.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { animateTo } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport alertBannerStyles from \"./system-banner.css\";\nimport SgdsSystemBannerItem from \"./sgds-system-banner-item\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { provide } from \"@lit/context\";\n\n/**\n * @summary The system banner component for displaying important messages to users at the application level.\n * Each banner can contain up to 5 banner items that cycle automatically every 5 seconds. Pagination appears when there are multiple items, allowing users to navigate between them. The banner can also be made dismissible with a close button.\n * `sgds-system-banner-item` is the subcomponent for `sgds-system-banner`. Each banner item represents a message in the system banner.\n *\n * @slot default - The slot to pass in `sgds-system-banner-item`\n *\n * @event sgds-show - Emitted when the banner has start to appear on screen\n * @event sgds-hide - Emitted when the banner is disappearing from the screen\n */\nexport class SgdsSystemBanner extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @provide({ context: NoClampActionContext })\n  /** When true, all its children SgdsSystemBannerItem's message will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true }) fluid = false;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  @queryAssignedElements({ flatten: true })\n  private bannerItem: SgdsSystemBannerItem[];\n\n  @query(\".banner\")\n  private banner: HTMLDivElement;\n\n  @provide({ context: SystemBannerChildCountContext })\n  @state()\n  private childCount: number;\n\n  @state() private _intervalId = null;\n\n  private _intervalTime = 5000;\n\n  @state() private _currentIndex = 0;\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>): void {\n    super.firstUpdated(changedProperties);\n    this.childCount = this.bannerItem.length;\n    if (!this.show) {\n      this.banner.classList.add(\"d-none\");\n    } else {\n      this.childCount > 1 && this._startAutoCycle();\n      this.addEventListener(\"mouseenter\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"mouseleave\", this._resumeAutoCycle.bind(this));\n\n      this.addEventListener(\"focus\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"blur\", this._resumeAutoCycle.bind(this));\n    }\n    this._updateActiveItem();\n\n    if (this.childCount > 5) {\n      console.warn(\"It is not recommended to have more than 5 <sgds-system-banner-item> elements.\");\n    }\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._stopAutoCycle();\n  }\n\n  /**@internal */\n  @watch(\"show\", { waitUntilFirstUpdate: true })\n  async _handleShowChange() {\n    if (this.show) {\n      this.childCount > 1 && this._startAutoCycle();\n      this.emit(\"sgds-show\");\n      this.banner.classList.remove(\"d-none\");\n    } else {\n      this._stopAutoCycle();\n      this.emit(\"sgds-hide\");\n      this.banner.classList.add(\"d-none\");\n    }\n  }\n\n  private _updateActiveItem() {\n    const items = this.bannerItem;\n    items.forEach((item, i) => {\n      if (i === this._currentIndex) {\n        item.setAttribute(\"active\", \"\");\n      } else {\n        item.removeAttribute(\"active\");\n      }\n    });\n  }\n  private _next() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex + 1) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"next\");\n    this._resetAutoCycle();\n  }\n\n  private _prev() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex - 1 + items.length) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"prev\");\n    this._resetAutoCycle();\n  }\n  private async _animateItem(item: SgdsSystemBannerItem, direction: \"next\" | \"prev\") {\n    // Cancel any existing animations before starting a new one\n    item.getAnimations().forEach(a => a.cancel());\n    // Start the slide-down animation\n    const bannerLoopMessage = getAnimation(this, `banner.item.${direction}`);\n    await animateTo(item, bannerLoopMessage.keyframes, bannerLoopMessage.options);\n  }\n  private _startAutoCycle() {\n    this._stopAutoCycle(); // avoid duplicates\n    this._intervalId = setInterval(() => this._next(), this._intervalTime);\n  }\n\n  private _stopAutoCycle() {\n    if (this._intervalId) {\n      clearInterval(this._intervalId);\n      this._intervalId = null;\n    }\n  }\n  private _resetAutoCycle() {\n    this._stopAutoCycle();\n    this._startAutoCycle();\n  }\n  private _pauseAutoCycle(): void {\n    this._stopAutoCycle();\n  }\n\n  private _resumeAutoCycle(): void {\n    if (this.show && this.childCount > 1) {\n      this._startAutoCycle();\n    }\n  }\n  render() {\n    return html`\n      <div class=\"banner-wrapper\">\n        <div\n          class=\"${classMap({\n            banner: true\n          })}\"\n          role=\"alert\"\n          aria-hidden=${this.show ? \"false\" : \"true\"}\n        >\n          <div class=\"content\">\n            <slot id=\"loop-slot\"></slot>\n          </div>\n          ${this.childCount > 1\n            ? html` <div class=\"pagination\">\n                <sgds-icon-button\n                  name=\"chevron-left\"\n                  tone=\"fixed-light\"\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  @click=${this._prev}\n                ></sgds-icon-button>\n                <span>${this._currentIndex + 1}/${this.childCount}</span>\n                <sgds-icon-button\n                  name=\"chevron-right\"\n                  tone=\"fixed-light\"\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  @click=${this._next}\n                ></sgds-icon-button>\n              </div>`\n            : nothing}\n          ${this.dismissible\n            ? html`\n                <sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=\"fixed-light\"\n                ></sgds-close-button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSystemBanner;\n\nsetDefaultAnimation(\"banner.item.next\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(-100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\nsetDefaultAnimation(\"banner.item.prev\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\n"],"mappings":"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"}
+{"version":3,"file":"sgds-system-banner.js","names":["alertBannerStyles"],"sources":["../../../../src/components/SystemBanner/sgds-system-banner.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { animateTo } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport alertBannerStyles from \"./system-banner.css\";\nimport SgdsSystemBannerItem from \"./sgds-system-banner-item\";\nimport { SystemBannerChildCountContext, NoClampActionContext } from \"./system-banner-context\";\nimport { provide } from \"@lit/context\";\n\n/**\n * @summary The system banner component for displaying important messages to users at the application level.\n * Each banner can contain up to 5 banner items that cycle automatically every 5 seconds. Pagination appears when there are multiple items, allowing users to navigate between them. The banner can also be made dismissible with a close button.\n * `sgds-system-banner-item` is the subcomponent for `sgds-system-banner`. Each banner item represents a message in the system banner.\n *\n * @slot default - The slot to pass in `sgds-system-banner-item`\n *\n * @event sgds-show - Emitted when the banner has start to appear on screen\n * @event sgds-hide - Emitted when the banner is disappearing from the screen\n */\nexport class SgdsSystemBanner extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Disables the action link that appears when text content is clamped */\n  @provide({ context: NoClampActionContext })\n  /** When true, all its children SgdsSystemBannerItem's message will be truncated with ellipsis only */\n  @property({ type: Boolean })\n  noClampAction = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true }) fluid = false;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  @queryAssignedElements({ flatten: true })\n  private bannerItem: SgdsSystemBannerItem[];\n\n  @query(\".banner\")\n  private banner: HTMLDivElement;\n\n  @provide({ context: SystemBannerChildCountContext })\n  @state()\n  private childCount: number;\n\n  @state() private _intervalId = null;\n\n  private _intervalTime = 5000;\n\n  @state() private _currentIndex = 0;\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>): void {\n    super.firstUpdated(changedProperties);\n    this.childCount = this.bannerItem.length;\n    if (!this.show) {\n      this.banner.classList.add(\"d-none\");\n    } else {\n      this.childCount > 1 && this._startAutoCycle();\n      this.addEventListener(\"mouseenter\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"mouseleave\", this._resumeAutoCycle.bind(this));\n\n      this.addEventListener(\"focus\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"blur\", this._resumeAutoCycle.bind(this));\n    }\n    this._updateActiveItem();\n\n    if (this.childCount > 5) {\n      console.warn(\"It is not recommended to have more than 5 <sgds-system-banner-item> elements.\");\n    }\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._stopAutoCycle();\n  }\n\n  /**@internal */\n  @watch(\"show\", { waitUntilFirstUpdate: true })\n  async _handleShowChange() {\n    if (this.show) {\n      this.childCount > 1 && this._startAutoCycle();\n      this.emit(\"sgds-show\");\n      this.banner.classList.remove(\"d-none\");\n    } else {\n      this._stopAutoCycle();\n      this.emit(\"sgds-hide\");\n      this.banner.classList.add(\"d-none\");\n    }\n  }\n\n  private _updateActiveItem() {\n    const items = this.bannerItem;\n    items.forEach((item, i) => {\n      if (i === this._currentIndex) {\n        item.setAttribute(\"active\", \"\");\n      } else {\n        item.removeAttribute(\"active\");\n      }\n    });\n  }\n  private _next() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex + 1) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"next\");\n    this._resetAutoCycle();\n  }\n\n  private _prev() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex - 1 + items.length) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"prev\");\n    this._resetAutoCycle();\n  }\n  private async _animateItem(item: SgdsSystemBannerItem, direction: \"next\" | \"prev\") {\n    // Cancel any existing animations before starting a new one\n    item.getAnimations().forEach(a => a.cancel());\n    // Start the slide-down animation\n    const bannerLoopMessage = getAnimation(this, `banner.item.${direction}`);\n    await animateTo(item, bannerLoopMessage.keyframes, bannerLoopMessage.options);\n  }\n  private _startAutoCycle() {\n    this._stopAutoCycle(); // avoid duplicates\n    this._intervalId = setInterval(() => this._next(), this._intervalTime);\n  }\n\n  private _stopAutoCycle() {\n    if (this._intervalId) {\n      clearInterval(this._intervalId);\n      this._intervalId = null;\n    }\n  }\n  private _resetAutoCycle() {\n    this._stopAutoCycle();\n    this._startAutoCycle();\n  }\n  private _pauseAutoCycle(): void {\n    this._stopAutoCycle();\n  }\n\n  private _resumeAutoCycle(): void {\n    if (this.show && this.childCount > 1) {\n      this._startAutoCycle();\n    }\n  }\n  render() {\n    return html`\n      <div class=\"banner-wrapper\">\n        <div\n          class=\"${classMap({\n            banner: true\n          })}\"\n          role=\"alert\"\n          aria-hidden=${this.show ? \"false\" : \"true\"}\n        >\n          <div class=\"content\">\n            <slot id=\"loop-slot\"></slot>\n          </div>\n          ${this.childCount > 1\n            ? html` <div class=\"pagination\">\n                <sgds-icon-button\n                  name=\"chevron-left\"\n                  tone=\"fixed-light\"\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  ariaLabel=\"Previous\"\n                  @click=${this._prev}\n                ></sgds-icon-button>\n                <span>${this._currentIndex + 1}/${this.childCount}</span>\n                <sgds-icon-button\n                  name=\"chevron-right\"\n                  tone=\"fixed-light\"\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  ariaLabel=\"Next\"\n                  @click=${this._next}\n                ></sgds-icon-button>\n              </div>`\n            : nothing}\n          ${this.dismissible\n            ? html`\n                <sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=\"fixed-light\"\n                ></sgds-close-button>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSystemBanner;\n\nsetDefaultAnimation(\"banner.item.next\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(-100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\nsetDefaultAnimation(\"banner.item.prev\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\n"],"mappings":"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"}

package/themes/night.css

@@ -41,7 +41,7 @@
   --sgds-primary-bg-translucent: oklch(from var(--sgds-product-primary-100) l c h / 0.05);
   --sgds-primary-surface-default: var(--sgds-product-primary-600);
   --sgds-primary-surface-emphasis: var(--sgds-product-primary-700);
-  --sgds-primary-surface-muted: var(--sgds-product-primary-100);
+  --sgds-primary-surface-muted: var(--sgds-product-primary-900);
   --sgds-primary-surface-translucent: oklch(from var(--sgds-product-primary-100) l c h / 0.1);
   --sgds-primary-color-default: var(--sgds-product-primary-400);
   --sgds-primary-color-emphasis: var(--sgds-product-primary-300);
@@ -56,7 +56,7 @@
   --sgds-accent-bg-muted: var(--sgds-blue-200);
   --sgds-accent-surface-default: var(--sgds-blue-600);
   --sgds-accent-surface-emphasis: var(--sgds-blue-700);
-  --sgds-accent-surface-muted: var(--sgds-blue-100);
+  --sgds-accent-surface-muted: var(--sgds-blue-900);
   --sgds-accent-color-default: var(--sgds-blue-400);
   --sgds-accent-color-emphasis: var(--sgds-blue-300);
   --sgds-accent-color-fixed-light: var(--sgds-blue-400);
@@ -70,7 +70,7 @@
   --sgds-success-bg-muted: var(--sgds-green-200);
   --sgds-success-surface-default: var(--sgds-green-600);
   --sgds-success-surface-emphasis: var(--sgds-green-700);
-  --sgds-success-surface-muted: var(--sgds-green-100);
+  --sgds-success-surface-muted: var(--sgds-green-900);
   --sgds-success-color-default: var(--sgds-green-400);
   --sgds-success-color-emphasis: var(--sgds-green-300);
   --sgds-success-color-fixed-light: var(--sgds-green-400);
@@ -84,7 +84,7 @@
   --sgds-danger-bg-muted: var(--sgds-red-200);
   --sgds-danger-surface-default: var(--sgds-red-600);
   --sgds-danger-surface-emphasis: var(--sgds-red-700);
-  --sgds-danger-surface-muted: var(--sgds-red-100);
+  --sgds-danger-surface-muted: var(--sgds-red-900);
   --sgds-danger-surface-translucent: oklch(from var(--sgds-red-100) l c h / 0.08);
   --sgds-danger-color-default: var(--sgds-red-400);
   --sgds-danger-color-emphasis: var(--sgds-red-300);
@@ -99,7 +99,7 @@
   --sgds-warning-bg-muted: var(--sgds-yellow-200);
   --sgds-warning-surface-default: var(--sgds-yellow-200);
   --sgds-warning-surface-emphasis: var(--sgds-yellow-600);
-  --sgds-warning-surface-muted: var(--sgds-yellow-100);
+  --sgds-warning-surface-muted: var(--sgds-yellow-900);
   --sgds-warning-color-default: var(--sgds-yellow-300);
   --sgds-warning-color-emphasis: var(--sgds-yellow-200);
   --sgds-warning-color-fixed-light: var(--sgds-yellow-300);
@@ -113,7 +113,7 @@
   --sgds-purple-bg-muted: var(--sgds-purple-200);
   --sgds-purple-surface-default: var(--sgds-purple-600);
   --sgds-purple-surface-emphasis: var(--sgds-purple-700);
-  --sgds-purple-surface-muted: var(--sgds-purple-100);
+  --sgds-purple-surface-muted: var(--sgds-purple-900);
   --sgds-purple-color-default: var(--sgds-purple-400);
   --sgds-purple-color-emphasis: var(--sgds-purple-300);
   --sgds-purple-color-fixed-light: var(--sgds-purple-400);
@@ -127,7 +127,7 @@
   --sgds-cyan-bg-muted: var(--sgds-cyan-200);
   --sgds-cyan-surface-default: var(--sgds-cyan-600);
   --sgds-cyan-surface-emphasis: var(--sgds-cyan-700);
-  --sgds-cyan-surface-muted: var(--sgds-cyan-100);
+  --sgds-cyan-surface-muted: var(--sgds-cyan-900);
   --sgds-cyan-color-default: var(--sgds-cyan-400);
   --sgds-cyan-color-emphasis: var(--sgds-cyan-300);
   --sgds-cyan-color-fixed-light: var(--sgds-cyan-400);
@@ -141,7 +141,7 @@
   --sgds-neutral-bg-muted: var(--sgds-gray-200);
   --sgds-neutral-surface-default: var(--sgds-gray-600);
   --sgds-neutral-surface-emphasis: var(--sgds-gray-700);
-  --sgds-neutral-surface-muted: var(--sgds-gray-200);
+  --sgds-neutral-surface-muted: var(--sgds-gray-900);
   --sgds-neutral-surface-translucent: oklch(from var(--sgds-gray-000) l c h / 0.15);
   --sgds-neutral-color-default: var(--sgds-gray-400);
   --sgds-neutral-color-emphasis: var(--sgds-gray-300);

package/types/react.d.ts

@@ -386,6 +386,8 @@ export interface SgdsCheckboxProps extends SgdsBaseProps {
   required?: boolean;
   /** Disables native and sgds validation for the checkbox. */
   noValidate?: boolean;
+  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */
+  ariaLabel?: string;
   /** Feedback text for error state when validated */
   invalidFeedback?: string;
   /** Returns the ValidityState object */