@govtechsg/sgds-web-component 3.30.1-rc.6 → 3.30.1-rc.8

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.cjs.js","names":["SgdsElement","genId","sidenavItemStyle","SgdsIcon","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","classMap","ifDefined","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.cjs.js","names":["SgdsElement","genId","sidenavItemStyle","SgdsIcon","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","classMap","ifDefined","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html`<div class=\"no-menu-wrapper\">\n      <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot>\n    </div>`;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":"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"}

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

@@ -179,7 +179,9 @@ var SgdsSidenavItem = class extends SgdsElement {
         </div>
       </div>
     `;
-		const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot> `;
+		const noMenuTemplate = html`<div class="no-menu-wrapper">
+      <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot>
+    </div>`;
 		return html`
       <div class="sidenav-item" aria-haspopup="${!this.isLink}">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.js","names":["genId","sidenavItemStyle"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.js","names":["genId","sidenavItemStyle"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html`<div class=\"no-menu-wrapper\">\n      <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot>\n    </div>`;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Sidenav/sidenav-item.css
-var css_248z = require("lit").css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-interactive-border-radius);color:inherit!important;display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs)!important;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle)}.no-menu-default::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-40);pointer-events:none}`;
+var css_248z = require("lit").css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-wrapper{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs))}.no-menu-wrapper:hover{background-color:var(--sgds-bg-translucent-subtle)}.no-menu-wrapper:focus-within{background-color:var(--sgds-bg-translucent-subtle);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-wrapper{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)}:host([class^=first-level][disabled]) .no-menu-wrapper{opacity:var(--sgds-opacity-40);pointer-events:none}.no-menu-default::slotted(a){color:inherit!important;font-weight:inherit!important;text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){outline:none}`;
 //#endregion
 exports.default = css_248z;
 

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.cjs.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n  padding-left: var(--sgds-padding-3-xl);\n  font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n  all: unset;\n}\n.sidenav-btn {\n  width: 100%;\n  text-align: initial;\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold);\n\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    margin-left: auto;\n    margin-bottom: auto;\n    transition: all 0.3s ease-in-out;\n    transform: rotate(180deg);\n  }\n}\n.sidenav-btn:hover:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n  color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    transform: rotate(0deg);\n  }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.no-menu-default::slotted(a) {\n  text-decoration: none !important;\n  color: inherit !important;\n  line-height: var(--sgds-line-height-xs) !important;\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold) !important;\n}\n\n.no-menu-default::slotted(a:focus-visible) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.no-menu-default::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-default::slotted(a) {\n  color: var(--sgds-primary-color-emphasis) !important;\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-default::slotted(a) {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"sidenav-item.cjs.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n  padding-left: var(--sgds-padding-3-xl);\n  font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n  all: unset;\n}\n.sidenav-btn {\n  width: 100%;\n  text-align: initial;\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold);\n\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    margin-left: auto;\n    margin-bottom: auto;\n    transition: all 0.3s ease-in-out;\n    transform: rotate(180deg);\n  }\n}\n.sidenav-btn:hover:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n  color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    transform: rotate(0deg);\n  }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* No-menu (link type) — wrapper styles (protected in shadow DOM) */\n\n.no-menu-wrapper {\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  font-weight: var(--sgds-font-weight-semibold);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n}\n\n.no-menu-wrapper:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.no-menu-wrapper:focus-within {\n  background-color: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-wrapper {\n  color: var(--sgds-primary-color-emphasis);\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-wrapper {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n/* No-menu (link type) — anchor-specific styles */\n\n.no-menu-default::slotted(a) {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-weight: inherit !important;\n}\n\n.no-menu-default::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Sidenav/sidenav-item.css
-var css_248z = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-interactive-border-radius);color:inherit!important;display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs)!important;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle)}.no-menu-default::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-40);pointer-events:none}`;
+var css_248z = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-wrapper{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs))}.no-menu-wrapper:hover{background-color:var(--sgds-bg-translucent-subtle)}.no-menu-wrapper:focus-within{background-color:var(--sgds-bg-translucent-subtle);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-wrapper{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)}:host([class^=first-level][disabled]) .no-menu-wrapper{opacity:var(--sgds-opacity-40);pointer-events:none}.no-menu-default::slotted(a){color:inherit!important;font-weight:inherit!important;text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){outline:none}`;
 //#endregion
 export { css_248z as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n  padding-left: var(--sgds-padding-3-xl);\n  font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n  all: unset;\n}\n.sidenav-btn {\n  width: 100%;\n  text-align: initial;\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold);\n\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    margin-left: auto;\n    margin-bottom: auto;\n    transition: all 0.3s ease-in-out;\n    transform: rotate(180deg);\n  }\n}\n.sidenav-btn:hover:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n  color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    transform: rotate(0deg);\n  }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.no-menu-default::slotted(a) {\n  text-decoration: none !important;\n  color: inherit !important;\n  line-height: var(--sgds-line-height-xs) !important;\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold) !important;\n}\n\n.no-menu-default::slotted(a:focus-visible) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.no-menu-default::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-default::slotted(a) {\n  color: var(--sgds-primary-color-emphasis) !important;\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-default::slotted(a) {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"sidenav-item.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n  padding-left: var(--sgds-padding-3-xl);\n  font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n  all: unset;\n}\n.sidenav-btn {\n  width: 100%;\n  text-align: initial;\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold);\n\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    margin-left: auto;\n    margin-bottom: auto;\n    transition: all 0.3s ease-in-out;\n    transform: rotate(180deg);\n  }\n}\n.sidenav-btn:hover:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n  color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    transform: rotate(0deg);\n  }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* No-menu (link type) — wrapper styles (protected in shadow DOM) */\n\n.no-menu-wrapper {\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  font-weight: var(--sgds-font-weight-semibold);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n}\n\n.no-menu-wrapper:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.no-menu-wrapper:focus-within {\n  background-color: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-wrapper {\n  color: var(--sgds-primary-color-emphasis);\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-wrapper {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n/* No-menu (link type) — anchor-specific styles */\n\n.no-menu-default::slotted(a) {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-weight: inherit !important;\n}\n\n.no-menu-default::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}

package/react/components/Table/table-cell.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Table/table-cell.css
-var css_248z = require("lit").css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}.table-cell{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;
+var css_248z = require("lit").css`:host{display:table-cell}.table-cell{align-items:center;border-bottom:var(--table-cell-border-bottom,var(--sgds-border-width-1) solid var(--sgds-border-color-muted));display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Table/table-cell.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.cjs.js","names":[],"sources":["../../../../src/components/Table/table-cell.css"],"sourcesContent":[":host {\n  display: table-cell;\n  vertical-align: middle;\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.table-cell {\n  display: flex;\n  align-items: center;\n  min-height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n"],"mappings":""}
+{"version":3,"file":"table-cell.cjs.js","names":[],"sources":["../../../../src/components/Table/table-cell.css"],"sourcesContent":[":host {\n  display: table-cell;\n}\n\n.table-cell {\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  min-height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  border-bottom: var(--table-cell-border-bottom, var(--sgds-border-width-1) solid var(--sgds-border-color-muted));\n}\n"],"mappings":""}

package/react/components/Table/table-cell.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Table/table-cell.css
-var css_248z = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}.table-cell{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;
+var css_248z = css`:host{display:table-cell}.table-cell{align-items:center;border-bottom:var(--table-cell-border-bottom,var(--sgds-border-width-1) solid var(--sgds-border-color-muted));display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Table/table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.js","names":[],"sources":["../../../../src/components/Table/table-cell.css"],"sourcesContent":[":host {\n  display: table-cell;\n  vertical-align: middle;\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.table-cell {\n  display: flex;\n  align-items: center;\n  min-height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n"],"mappings":""}
+{"version":3,"file":"table-cell.js","names":[],"sources":["../../../../src/components/Table/table-cell.css"],"sourcesContent":[":host {\n  display: table-cell;\n}\n\n.table-cell {\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  min-height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  border-bottom: var(--table-cell-border-bottom, var(--sgds-border-width-1) solid var(--sgds-border-color-muted));\n}\n"],"mappings":""}

package/react/components/Table/table-row.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Table/table-row.css
-var css_248z = require("lit").css`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){border-bottom:0}`;
+var css_248z = require("lit").css`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){--table-cell-border-bottom:0}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Table/table-row.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.cjs.js","names":[],"sources":["../../../../src/components/Table/table-row.css"],"sourcesContent":[":host {\n  display: table-row;\n  width: 100%;\n}\n\n:host([tableBorder]:last-of-type) .table-row::slotted(*) {\n  border-bottom: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"table-row.cjs.js","names":[],"sources":["../../../../src/components/Table/table-row.css"],"sourcesContent":[":host {\n  display: table-row;\n  width: 100%;\n}\n\n:host([tableBorder]:last-of-type) .table-row::slotted(*) {\n  --table-cell-border-bottom: 0;\n}\n"],"mappings":""}

package/react/components/Table/table-row.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Table/table-row.css
-var css_248z = css`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){border-bottom:0}`;
+var css_248z = css`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){--table-cell-border-bottom:0}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Table/table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.js","names":[],"sources":["../../../../src/components/Table/table-row.css"],"sourcesContent":[":host {\n  display: table-row;\n  width: 100%;\n}\n\n:host([tableBorder]:last-of-type) .table-row::slotted(*) {\n  border-bottom: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"table-row.js","names":[],"sources":["../../../../src/components/Table/table-row.css"],"sourcesContent":[":host {\n  display: table-row;\n  width: 100%;\n}\n\n:host([tableBorder]:last-of-type) .table-row::slotted(*) {\n  --table-cell-border-bottom: 0;\n}\n"],"mappings":""}

package/react/utils/validatorMixin.cjs.js

@@ -84,9 +84,8 @@ const SgdsFormValidatorMixin = (superClass) => {
 			if (this._mixinShouldSkipSgdsValidation()) return;
 			this.inputValidationController.validateInput(input);
 		}
-		_mixinSetFormValue() {
-			const value = this.value;
-			this._internals.setFormValue(value);
+		_mixinSetFormValue(value) {
+			this._internals.setFormValue(value !== void 0 ? value : this.value);
 		}
 		_mixinCheckValidity() {
 			if (this._mixinShouldSkipSgdsValidation()) return true;

package/react/utils/validatorMixin.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.cjs.js","names":["InputValidationController","queryAsync"],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAIA,kCAAAA,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,qBAAqB;GACnB,MAAM,QAAQ,KAAK;GACnB,KAAK,WAAW,aAAa,KAAK;EACpC;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAjIGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAkIrC,OAAO;AACT"}
+{"version":3,"file":"validatorMixin.cjs.js","names":["InputValidationController","queryAsync"],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue(value?: string | FormData | File | null) {\n      this._internals.setFormValue(value !== undefined ? value : (this.value as string | FormData | File));\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(value?: string | FormData | File | null): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAIA,kCAAAA,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,mBAAmB,OAAyC;GAC1D,KAAK,WAAW,aAAa,UAAU,KAAA,IAAY,QAAS,KAAK,KAAkC;EACrG;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAhIGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAiIrC,OAAO;AACT"}

package/react/utils/validatorMixin.js

@@ -84,9 +84,8 @@ const SgdsFormValidatorMixin = (superClass) => {
 			if (this._mixinShouldSkipSgdsValidation()) return;
 			this.inputValidationController.validateInput(input);
 		}
-		_mixinSetFormValue() {
-			const value = this.value;
-			this._internals.setFormValue(value);
+		_mixinSetFormValue(value) {
+			this._internals.setFormValue(value !== void 0 ? value : this.value);
 		}
 		_mixinCheckValidity() {
 			if (this._mixinShouldSkipSgdsValidation()) return true;

package/react/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,qBAAqB;GACnB,MAAM,QAAQ,KAAK;GACnB,KAAK,WAAW,aAAa,KAAK;EACpC;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAjIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAkIrC,OAAO;AACT"}
+{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue(value?: string | FormData | File | null) {\n      this._internals.setFormValue(value !== undefined ? value : (this.value as string | FormData | File));\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(value?: string | FormData | File | null): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,mBAAmB,OAAyC;GAC1D,KAAK,WAAW,aAAa,UAAU,KAAA,IAAY,QAAS,KAAK,KAAkC;EACrG;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAhIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAiIrC,OAAO;AACT"}

package/types/react.d.ts

@@ -375,7 +375,7 @@ export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
 // ── Checkbox ─────────────────────────────────────────────────────────────
 
 export interface SgdsCheckboxProps extends SgdsBaseProps {
-  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
+  /** Value submitted in FormData when the checkbox is checked. Defaults to `"on"` when not set, matching native checkbox behaviour. When unchecked, the key is absent from FormData. */
   value?: string;
   /** Draws the checkbox in a checked state. */
   checked?: boolean;

package/utils/validatorMixin.d.ts

@@ -15,7 +15,7 @@ export declare class ToBeValidatedElementInterface {
     _mixinHandleInputChange(e: Event): void;
     _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;
     _mixinValidate(input: HTMLInputElement | SgdsInput): void;
-    _mixinSetFormValue(): void;
+    _mixinSetFormValue(value?: string | FormData | File | null): void;
     _mixinCheckValidity(): boolean;
     _mixinReportValidity(): boolean;
     _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;

package/utils/validatorMixin.js

@@ -83,9 +83,8 @@ const SgdsFormValidatorMixin = (superClass) => {
 			if (this._mixinShouldSkipSgdsValidation()) return;
 			this.inputValidationController.validateInput(input);
 		}
-		_mixinSetFormValue() {
-			const value = this.value;
-			this._internals.setFormValue(value);
+		_mixinSetFormValue(value) {
+			this._internals.setFormValue(value !== void 0 ? value : this.value);
 		}
 		_mixinCheckValidity() {
 			if (this._mixinShouldSkipSgdsValidation()) return true;

package/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,qBAAqB;GACnB,MAAM,QAAQ,KAAK;GACnB,KAAK,WAAW,aAAa,KAAK;EACpC;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAjIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAkIrC,OAAO;AACT"}
+{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue(value?: string | FormData | File | null) {\n      this._internals.setFormValue(value !== undefined ? value : (this.value as string | FormData | File));\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(value?: string | FormData | File | null): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,mBAAmB,OAAyC;GAC1D,KAAK,WAAW,aAAa,UAAU,KAAA,IAAY,QAAS,KAAK,KAAkC;EACrG;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAhIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAiIrC,OAAO;AACT"}