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

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

@@ -52,6 +52,9 @@ interface ISgdsCheckboxGroupChangeEventDetail {
 
 // ── ComboBox ─────────────────────────────────────────────────────────────
 
+interface ISgdsComboBoxCreateOptionEventDetail {
+    value: string;
+}
 interface ISgdsComboBoxInputEventDetail {
     displayValue: string;
 }
@@ -386,6 +389,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 */
@@ -453,6 +458,8 @@ export interface SgdsComboBoxProps extends SgdsBaseProps {
   async?: boolean;
   /** When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. */
   emptyMenuAsync?: boolean;
+  /** When true, shows a "Create xxx" option when the typed value does not match any existing option. Selecting it emits the `sgds-create-option` event. */
+  creatable?: boolean;
   /** Number of pixels from the bottom of the menu at which the sgds-scroll-end event fires. */
   scrollBottomOffset?: number;
   /** The function used to filter the menu list, given the user's input value. */
@@ -519,6 +526,8 @@ value: string;
   onSgdsValid?: SgdsEventHandler;
   "onsgds-scroll-end"?: SgdsEventHandler;
   onSgdsScrollEnd?: SgdsEventHandler;
+  "onsgds-create-option"?: (event: CustomEvent<ISgdsComboBoxCreateOptionEventDetail>) => void;
+  onSgdsCreateOption?: (event: CustomEvent<ISgdsComboBoxCreateOptionEventDetail>) => void;
   "onsgds-show"?: SgdsEventHandler;
   onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;